:root{
  --paper:#faf5e9;--white:#fffdf6;--ink:#30261e;--muted:#55463a;--red:#9f352d;
  --gold:#f6d775;--sand:#f2e3ca;--blue:#dceeed;--line:#b8a68c;--data:#265e65;--peach:#f3c19d;
}
html{background:#eee7da}
body{font-size:16px}
.site{border-inline:1px solid var(--line)}
.rail{display:none}
.header{height:64px;background:var(--white)}
.wordmark{font-size:28px}
.hero{position:relative;padding:22px var(--p) 22px;background:var(--paper)}
.tag{display:inline-block;padding:4px 8px;border-radius: 8px;background:var(--sand);color:var(--ink);font-size:12px;font-weight:800;line-height:1.5}
.hero h1{font-size:48px;line-height:1.22;letter-spacing:-.07em;margin:0 0 12px}
.hero h1 mark{padding-right:.12em}
.hero .desc{font-size:16px;line-height:1.65}
.scene{
  container-type:inline-size;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(6px,2vw,12px);
  margin:8px 0 0;
  color:#30261e;
}
.scene .character{
  width:100%;
  height:auto;
  aspect-ratio:437 / 560;
  margin:0;
  transform-origin:55% 91%;
}
.scene .character img{width:100%}
.flow-card{
  overflow:hidden;
  color: #38271f;
  border:2px solid currentColor;
  border-radius: 14px;
  background:radial-gradient(#e1d4bf .8px,transparent 1px) 0 0 / 7px 7px,var(--paper);
  box-shadow:3px 4px #38271f26;
}
.flow-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  padding-inline:clamp(4px,1.5cqi,8px);
  min-height:clamp(30px,8cqi,36px);
  border-bottom:2px solid currentColor;
  background:repeating-linear-gradient(-25deg,transparent 0 5px,#fffdf680 5px 6px),var(--sand);
}
.flow-brand{
  display:flex;
  align-items:center;
  gap:clamp(4px,1.2cqi,6px);
  white-space:nowrap;
}
.flow-brand .wordmark{font-size:clamp(11px,4.25cqi,19px);color:var(--ink)}
.flow-window{display:flex;align-items:center;gap:clamp(2px,.7cqi,4px)}
.flow-window i{width:clamp(5px,2cqi,8px);aspect-ratio:1;border-radius: 999px;background:var(--red)}
.flow-window i:nth-child(2){background:var(--gold)}
.flow-window i:nth-child(3){background:#468a66}
.flow-replay{
  position:relative;
  display:flex;
  align-items:center;
  gap:3px;
  min-height:26px;
  padding:2px clamp(3px,1.15cqi,6px);
  border:1.5px solid currentColor;
  border-radius: 8px;
  background:var(--white);
  color:inherit;
  font-size:clamp(10px,2.9cqi,13px);
  line-height:1.3;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.flow-replay::after{content:"";position:absolute;inset:-9px 0}
.flow-replay .icon{width:clamp(9px,2.6cqi,12px);height:auto;aspect-ratio:1}
.flow-replay:disabled{cursor:default}
.flow-replay:disabled .icon{display:none}
.flow-replay:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.flow-steps{
  display:grid;
  gap:clamp(5px,1.6cqi,7px);
  list-style:none;
  margin:0;
  padding:clamp(5px,1.75cqi,8px);
}
.flow-steps li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(4px,1.6cqi,7px);
  min-height:clamp(28px,7.65cqi,35px);
  padding:3px clamp(5px,1.8cqi,8px);
  border:2px solid currentColor;
  border-radius: 14px;
  background:var(--white);
  font-size:clamp(11px,3.4cqi,15px);
  font-weight:800;
  line-height:1.3;
}
.flow-steps li>.icon{width:clamp(13px,4.6cqi,20px);height:auto;aspect-ratio:1}
.flow-check{
  display:grid;
  place-items:center;
  width:clamp(15px,5.15cqi,23px);
  aspect-ratio:1;
  border-radius: 999px;
  background:var(--red);
  color:var(--white);
}
.flow-check .icon{width:73%;height:auto;aspect-ratio:1;stroke-width:3}
.primary{border-radius: 14px;min-height:54px;font-size:16px;box-shadow:0 3px #682c26}
.links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  font-size:clamp(12px,3vw,13px);
  font-weight:800;
}
.links > *{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:44px;
  padding:6px 4px;
  border:1px solid #b8a68c;
  border-radius: 8px;
  background:var(--white);
  color:var(--ink);
  line-height:1.35;
  text-align:center;
}
.links a{
  transition:background-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.links .icon{width:13px;height:13px}
.links .links-primary{border-color:var(--red);background:var(--red);color:var(--white)}
.links .links-pending{border-style:dashed;color:var(--muted)}
.links a:focus-visible{box-shadow:0 0 12px #e2a645a0}
@media(any-hover:hover){
  .links a:hover{
    background-color:#fff3d0;
    box-shadow:0 0 0 2px var(--gold),0 0 12px #d98a3f9c;
  }
  .links .links-primary:hover{background-color:#a84436}
}
@media(max-width:460px){
  .links{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.chapter{padding:31px var(--p);border-top-color:var(--line)}
.kicker{font:800 12px/1.5 Rounded,sans-serif;letter-spacing:.075em;margin-bottom:8px}
.kicker::before{width:14px;height:2px}
h2{font-size:28px;line-height:1.3}
.product{background:var(--white)}
.product h2{font-size:40px;margin-bottom:7px}
.product .backtest-heading{
  margin-top:20px;
  font-size:16px;
  line-height:1.45;
}
.product p{font-size:16px}
.badge{font-size:12px}
.product-link{min-height:44px;font-size:14px;color:var(--red)}
.signup p{font-size:16px}
.signup-copy > span{display:block;text-wrap:pretty}
.signup-copy__name{white-space:nowrap}
@media(max-width:360px){
  .signup .signup-copy{font-size:15px}
}
.signup .soft-btn{
  width:100%;margin-top:16px;border:0;
  font-family:inherit;font-size:16px;line-height:inherit;text-align:left
}
.signup .soft-btn:disabled{opacity:.78}
.discover{background:var(--paper)}
.basics{background:var(--white)}
.topic-heading{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
}
.topic-heading h2{margin:0}
.topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.topic-grid--reports{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:8px;
}
@media(max-width:285px){
  .topic-grid{grid-template-columns:1fr}
}
.topic-heading + .topic-grid{margin-top:14px}
.topic-tile{
  display:flex;
  align-items:center;
  gap:clamp(5px,2vw,9px);
  min-height:50px;
  padding:7px clamp(7px,2.3vw,10px);
  border:1px solid var(--line);
  border-radius: 14px;
  background:var(--sand);
  font-size:clamp(12px,3.5vw,14px);
  font-weight:800;
  line-height:1.4;
}
.research-cards .topic-tile{min-height:62px}
.topic-tile h3{font:inherit}
.topic-tile h3 span{white-space:nowrap}
.learning-topics{row-gap:20px}
.learning-topic h3.topic-tile{margin:0;gap:6px;padding-inline:8px}
.learning-topic__lead{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.55}
.learning-topic__list{
  display:grid;
  gap:6px;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
.learning-topic__list button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  min-height:44px;
  height:100%;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius: 8px;
  background:var(--paper);
  color:var(--muted);
  font:800 13px/1.4 Rounded,sans-serif;
  text-align:left;
}
.learning-topic__list button:disabled{opacity:1}
svg.topic-lock{
  width:14px;
  height:14px;
  margin-inline-start:auto;
  color:var(--muted);
}
svg.learning-topic__icon{width:18px;height:18px;color:#785133}
@media(max-width:460px){
  .learning-topics{grid-template-columns:minmax(0,1fr);gap:16px}
  .learning-topic__list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .learning-topic__list button{padding-inline:6px;gap:4px;font-size:12px}
  .learning-topic__list .learning-topic__icon{width:16px;height:16px}
  .learning-topic__list .topic-lock{width:12px;height:12px}
}
@media(max-width:360px){
  .learning-topic__list{grid-template-columns:minmax(0,1fr)}
}
.topic-mark{
  flex:none;
  width:clamp(24px,7vw,34px);
  height:auto;
  color:#785133;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.topic-tile--ranking .topic-mark{color:#823d2d}
.topic-tile--compare .topic-mark{color:var(--data)}
.cast figure[data-cast-index="3"]{background:#f8e6a7}
.cast figure[data-cast-index="4"]{background:#d7e6ca}
.articles-draft{padding-block:24px}
.articles-draft h2{font-size:28px}
.articles-draft ul{margin:8px 0 0;padding-left:22px;font-size:14px}
.board .site-shell{display:block;width:100%;max-width:none;padding:0}
.board .board-head h1{font-size:30px}
.board .column{height:auto}
.board .column.c .articles-draft{display:none}
.board .column.c .panel-note{display:none}
.board .hero h1{font-size:48px}
.board .site{border:0}
.board .board-tail{padding-top:17px;font-size:12px}
.board .signup,.board .discover,.board .basics,.board .product{padding-block:25px}
@media (min-width:1000px){
  html:not(.board) {
  & body{
    background:
      repeating-linear-gradient(0deg,transparent 0 47px,#9e744e12 47px 48px),
      repeating-linear-gradient(90deg,transparent 0 47px,#9e744e12 47px 48px),#f2ebde;
  }
  .site-shell{
    display:grid;
    grid-template-columns:minmax(0,25fr) minmax(0,48fr) minmax(0,25fr);
    max-width:1080px;
    gap:32px;
    margin:auto;
    padding-inline:18px;
    align-items:start;
  }
  .site{width:100%;box-shadow:0 0 26px #73533715}
  .rail{display:block;position:sticky;top:44px;padding:32px 0;color:var(--ink)}
  .rail-left{padding-top:57px}
  .rail .wordmark{font-size:40px}
  .rail-index,.rail-guide{padding:17px;background:var(--white);border:1px solid var(--line);border-radius: 14px}
  .rail-index h2{font-size:20px;margin:0 0 10px}
  .rail-index nav a{display:flex;align-items:center;min-height:44px;gap:8px;border-top:1px solid var(--line);font-size:14px;font-weight:800}
  .rail-index nav a span{font:800 12px/1 "Avenir Next",sans-serif;color:var(--red)}
  .rail-guide{margin-top:14px;background:var(--blue);border-color:#b8a68c}
  .rail-guide b{font-size:18px;line-height:1.4;display:block}
  .rail-guide .product-link{margin-top:2px;color:var(--data)}
  .hero{padding:24px}
  .chapter{padding-inline:24px}
}
}
@media(max-width:360px){
  .wordmark{font-size:23px}
  .hero .desc{font-size:16px}
  .hero .desc br{display:none}
  .hero h1{font-size:40px}
  .primary,.signup .soft-btn{font-size:14px}
}
.board .rail{display:none}

.badge{border-radius: 8px}
.signup h2{font-size:28px}

.crew{background:var(--white)}
.signup .soft-btn{color:var(--ink)}
.cast figcaption{font-size:14px}

/* Backtest summary. */
.report-summary{
  margin:8px 0 0;
  padding:15px;
  border:1px solid var(--line);
  border-radius: 14px;
  background:var(--white);
}
.product .report-summary p{margin:0;color:var(--muted);font-size:clamp(14px,4vw,16px);line-height:1.7;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.report-leverage{white-space:nowrap}
.report-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 22px}
.report-metrics div{min-width:0;padding:14px 12px;background:var(--white);border:1px solid var(--line);border-radius: 14px;box-shadow:0 3px 0 #e5d7c5}
.report-metrics dt{color:var(--muted);font-size:12px;font-weight:800;line-height:1.4}
.report-metrics dd{margin:8px 0 0;color:var(--data);font:900 clamp(18px,5vw,27px)/1.3 "Avenir Next",Rounded,sans-serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.report-metrics dd em{font:800 13px Rounded,sans-serif;font-style:normal}
.report-metrics div:last-child dd{color:var(--red)}
.report-calendar{overflow:hidden;margin:0 0 22px;border:1px solid var(--line);border-radius: 14px;background:var(--white);box-shadow:0 3px #e5d7c6}
.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  background:var(--data);
  color:var(--white);
}
.calendar-header h3{font-size:16px;white-space:nowrap}
.calendar-period{display:flex;gap:6px}
.calendar-period select{
  min-height:44px;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius: 8px;
  background:var(--white);
  color:var(--ink);
  font:800 14px/1.4 Rounded,sans-serif;
}
.calendar-period select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.calendar-content{padding:12px}
.calendar-empty-state{padding:22px 4px;color:var(--muted);font-size:13px;text-align:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.calendar-weekday{padding:6px 0;border-radius: 8px;background:#dceeed;color:#265e65;text-align:center;font-size:12px;font-weight:800}
.calendar-empty,.calendar-day{min-width:0;min-height:76px;border-radius: 8px}
.calendar-empty{background:#faf5e9}
.calendar-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:5px 0;border:1px solid #b8a68c;background:var(--white);color:var(--ink);font:inherit;text-align:center}
.calendar-day b{font-size:14px;line-height:1.3}
.calendar-day strong{color:var(--data);font:800 clamp(8px,2.1vw,10px)/1.4 "Avenir Next",Rounded,sans-serif;letter-spacing:-.045em;white-space:normal;overflow-wrap:anywhere}
.calendar-day small{color:#667c7d;font-size:9px;line-height:1.35}
.calendar-day.calendar-outside{background:#faf5e9;color:#807b72}
@media(max-width:400px){
  .calendar-day strong{font-size:9px}
  .calendar-day small{font-size:8px;letter-spacing:-.04em}
}

:root{
  --crayon-grid:url("./assets/crayon-check.svg");
}
.hero{
  background-color:var(--paper);
  background-image:linear-gradient(rgba(250,245,233,.69),rgba(250,245,233,.69)),var(--crayon-grid);
  background-size:auto,208px 208px;
  background-position:center,center 11px;
}
@media (min-width:1000px){
  html:not(.board) body{
    background-color:var(--paper);
    background-image:var(--crayon-grid);
    background-size:320px 320px;
    background-position:center top;
  }
}

.hero h1 mark{
  display:inline-block;
  padding-inline:0 .16em;
}
.product .report-callout,
.rail-announcement .report-callout{
  margin:16px 0 8px;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  text-align:center;
}
.primary.report-open{min-height:44px;background:var(--data);box-shadow:0 3px #1d464c}
.primary.report-open:active{box-shadow:0 1px #1d464c}

/* Keep the title bar aligned with the other browser-style demos. */
.flow-head{background:#fff}
.flow-brand{align-items:center;gap:8px}
.flow-window{flex:none;line-height:0}
.flow-brand .wordmark{display:block;margin:0;line-height:1}

/* Development announcement and early-access status */
.product-announcement {
  --portrait-paper: #fcf2e9;
  margin: 0 0 30px;
  padding: 0 0 12px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(#fffdf6, #fffdf6) content-box, var(--portrait-paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
}
.product .product-announcement__flag,
.rail-announcement .product-announcement__flag {
  margin: 0;
  padding: 11px 12px;
  background: var(--ink);
  color: var(--gold);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .12em;
  white-space: nowrap;
}
.product .product-announcement__headline,
.rail-announcement .product-announcement__headline {
  margin: 20px 8px 15px;
  font-size: clamp(18px, 5.6vw, 27px);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -.025em;
}
.product-announcement__headline span { display: block; }
.product-announcement__headline strong {
  color: var(--red);
  font-size: 1.45em;
}
.product-announcement img {
  display: block;
  width: 100%;
  height: auto;
}
.product .product-announcement h2 {
  margin: 0 8px 3px;
  font-size: clamp(29px, 8.5vw, 43px);
  line-height: 1.2;
}
.product-announcement h2 mark {
  display: inline-block;
  padding-inline: .09em;
  color: inherit;
}
.product .product-kind {
  margin: 0 10px 14px;
  color: var(--data);
  font-size: clamp(12px, 3.7vw, 16px);
  font-weight: 800;
}
/* Compact edition of the announcement for the desktop rail. */
.rail-announcement { margin: 22px 0 0; }
body .rail-announcement .product-announcement__flag {
  padding: 9px 8px;
  font-size: 17px !important;
}
.rail-announcement .product-announcement__headline { margin: 12px 8px 9px; }
body .rail-announcement .product-announcement__headline :is(span, strong) {
  font-size: 14px !important;
}
body .rail-announcement .product-announcement__headline strong { font-size: 17px !important; }
body .rail-announcement h2,
body .rail-announcement h2 mark {
  font-size: 24px !important;
  line-height: 1.35;
}
.rail-announcement .product-kind {
  margin: 5px 8px 10px;
  color: var(--data);
  font-weight: 800;
}
body .rail-announcement .product-kind { font-size: 12px !important; }
.rail-announcement__action {
  padding: 10px 12px 2px;
  background: var(--portrait-paper);
}
body .rail-announcement .report-callout {
  margin: 0 0 8px;
  font-size: 13px !important;
}
body .rail-announcement__link {
  padding-inline: 12px;
  font-size: 13px !important;
}
.rail-announcement__link .icon { flex: none; }
.rail-announcement__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.product-enrollment { margin: 0 0 26px; }
.product .product-enrollment__label {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.product-enrollment h3 {
  margin: 0;
  font-size: clamp(16px, 4.8vw, 23px);
  line-height: 1.4;
}
.product .product-enrollment__count {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 11px 0 9px;
  font-size: 14px;
  font-weight: 800;
}
.product-enrollment__count strong {
  color: var(--red);
  font-size: clamp(39px, 12vw, 54px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.product-enrollment__track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #f2e3ca;
}
.product-enrollment__fill {
  display: block;
  width: 54%;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(115deg, #61c8df 0 9px, #a1e3ed 9px 17px);
}
.product-enrollment__scale,
.product .product-enrollment__footer {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.product-enrollment__scale {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.product .product-enrollment__footer {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.product-enrollment__footer strong { color: #21794e; }

/* Carry the crayon grid through every viewport and align both rail cards. */
html:not(.board), html:not(.board) body {
  background-color: var(--paper);
  background-image: var(--crayon-grid);
  background-size: 320px 320px;
  background-position: center top;
}
@media (min-width: 1000px) {
  html:not(.board) .rail-left { padding-top: 32px; }
}
@media (min-width: 1000px) {
  html:not(.board) .rail-announcement { margin-top: 0; }
}

/* Alternate crayon paper and calm surfaces between homepage sections. */
.site-shell > main.site {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(250,245,233,.69), rgba(250,245,233,.69)), var(--crayon-grid);
  background-size: auto, 104px 104px;
  background-position: center top;
}
.site-shell > main.site > .column > :is(.hero, .promises, .product, .basics) { background: transparent; }
.site-shell > main.site > .column > :is(.crew, .ea-types, .signup, .faq) { background: var(--white); }