/* Direction A: FreightSource family.
   Same layout, sections and components as the base site. What changes: Inter for headings and
   body, JetBrains Mono kicker labels with a short orange dash, the blue-tinted ink, an orange
   accent, finer lines, and bigger, darker running text. Every text pairing passes WCAG AA. */
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --ink:oklch(15% 0.018 240);            /* #050c12 */
  --graphite:oklch(40% 0.014 240);       /* #3f474d, 9.4:1 on white (was #555, 7.5:1 but read pale at 14px) */
  --muted-ink:oklch(75% 0.012 240);      /* small text on ink bands, 8.9:1 */
  --orange:oklch(72% 0.18 45);           /* FreightSource accent: fills only. Ink on it is 7.4:1; white would fail */
  --orange-2:oklch(68% 0.18 45);         /* button hover, ink on it still 6.3:1 */
  --on-orange:oklch(22% 0.05 45);        /* quieter text on orange, 6.6:1 */
  --blue:oklch(54% 0.16 42);             /* the old "blue" role (text accents, links, outlines): deep orange, 5.4:1 on white */
  --highlight:oklch(88% 0.1 70);         /* selection: ink on it is 13:1 */
  --line:oklch(15% 0.018 240/.1);
  --display:Inter,system-ui,sans-serif;
  --text:Inter,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  /* Same 16px grid, dots in slate rather than blue, a touch quieter. */
  --dots-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23233441' fill-opacity='.13'/%3E%3C/svg%3E");
  --dots-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23FFFFFF' fill-opacity='.11'/%3E%3C/svg%3E");
  --dots-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23050c12' fill-opacity='.12'/%3E%3C/svg%3E")}

/* ---------- Type: Inter throughout, bigger and darker running text ---------- */
body{font-size:17px;line-height:28px;font-feature-settings:"cv11","ss01"}
.lead{font-size:19px;line-height:30px}
/* Headings: Inter is wider than Newsreader, so weights go up and tracking tightens, like FreightSource. */
.h2,.top h1,.why .statement,.trio h3,.log h3,.work h2,.grid9 h3,.price .amount,.price .per,.steps h3,.cards h3,.tile b,
.sfoot .ask h2,.winlist .num,.stats p:first-child,.sent h3{font-weight:600;letter-spacing:-.03em}
.h2{font-size:40px;line-height:44px}
.top h1{font-size:54px;line-height:56px;letter-spacing:-.04em}
.why .statement{font-size:30px;line-height:38px;font-weight:500;letter-spacing:-.025em}
.trio h3{font-size:30px;line-height:36px}
.log h3{font-size:23px;line-height:30px;letter-spacing:-.02em}
.work h2{font-size:40px;line-height:44px}
.grid9 h3{font-size:21px;line-height:28px;letter-spacing:-.02em}
.steps h3{font-size:27px;line-height:34px}
.cards h3{font-size:22px;line-height:30px;letter-spacing:-.02em}
.price .amount{font-size:88px;line-height:104px;letter-spacing:-.05em}
.price .per{font-size:24px;line-height:30px;font-weight:500;letter-spacing:-.02em}
.winlist .num{font-size:44px;line-height:48px;letter-spacing:-.04em}
.stats p:first-child{font-size:40px;line-height:44px}
.sfoot .ask h2{font-size:28px;line-height:34px;font-weight:500;letter-spacing:-.025em}
.logos .type{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}
.said .q{font-size:18px;line-height:26px;font-weight:500;letter-spacing:-.015em}
.included li span:first-child{font-size:19px;line-height:30px;font-weight:500;letter-spacing:-.01em}
.echo{font-size:20px;line-height:30px}
.asks .q{font-size:18px;font-weight:500;letter-spacing:-.01em}
.asks .title{font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.sentence label{font-size:30px;line-height:40px;font-weight:500;letter-spacing:-.025em}
.blank{font-size:30px;line-height:40px;font-weight:600;letter-spacing:-.025em}
.top .sub p:first-child{letter-spacing:-.025em}

/* Small text up a step: nothing in running copy below 15px now. */
.asks small,.asks .eng,.switch p{font-size:15px;line-height:20px}
.asks .url,.asks .src{font-size:16px}
.founder p:first-child{font-size:16px;line-height:22px}
.winlist .when,.submit .go p,.cards .kind,.tile.line small,.sfoot .base p,.axis{font-size:15px;line-height:22px}
.winlist .what{font-size:18px;line-height:28px}
.trio p{font-size:18px;line-height:28px}
.log .ok{font-size:15px;line-height:20px}
.sfoot .go p{font-size:16px;line-height:24px}
.nav nav{font-size:16px}

/* ---------- Kickers: JetBrains Mono, uppercase, a short orange dash ---------- */
.switch p,.clients .label,.why .eyebrow,.why .label,.how .eyebrow,.included>p:first-child,.sfoot .cols p{
  display:flex;align-items:center;gap:12px;font:500 13px/20px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.switch p::before,.clients .label::before,.why .eyebrow::before,.why .label::before,.how .eyebrow::before,.included>p:first-child::before,.sfoot .cols p::before{
  content:"";width:18px;height:2px;flex-shrink:0;background:var(--orange)}
.why .eyebrow,.why .label,.sfoot .cols p{color:var(--muted-ink)}
.included>p:first-child{color:var(--on-orange)}
.included>p:first-child::before{background:var(--ink)}
/* The card captions and log dates read as metadata, so they get the mono face without the caps. */
.cards .kind,.log .when{font-family:var(--mono);font-size:14px;line-height:20px;letter-spacing:0;color:var(--graphite)}
.tile.line .tag{font:500 13px/20px var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Colour: ink leads, orange accents ---------- */
.logo{color:var(--ink)}
.logo span{font-weight:700;letter-spacing:-.035em;text-decoration-color:var(--orange)}
.sfoot .logo{color:var(--white)}
.nav .links a:not(.start)[aria-current]{color:var(--blue)}
.link{text-decoration-color:var(--orange);text-decoration-thickness:2px}
.top h1 span{text-decoration-color:var(--orange)}
.how .h2{font-weight:600}
.log h3{color:var(--ink)}
#check path{stroke:var(--blue)}
.cell,.asks .eng::before,.tile.line .tag::before,.plot .start-mark::before,.legend span::before{background:var(--orange)}
.trio .cell{background:var(--orange)}
.cells svg{fill:var(--orange)}
.on-blue .cells svg{fill:var(--ink)}

/* Buttons: orange with ink text (white on this orange is only 2.6:1). */
.btn{background:var(--orange);color:var(--ink);transition:background .15s}
.btn:hover{background:var(--orange-2)}
.btn i{background:var(--ink);color:var(--orange)}
.start{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) right/0 100% no-repeat var(--orange);transition:background-size .25s ease-out,color .25s}
.start:hover,.start:focus-visible{color:var(--white)}

/* The switch: the chosen option fills ink, the other is a deep-orange link. */
.ways{border-color:var(--line)}
.ways a:not([aria-current]):hover{background:oklch(72% 0.18 45/.1)}
.ways a[aria-current]{background:var(--ink)}
.ways a[aria-current] i{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 8px var(--orange)}
.ways a[aria-current] span{color:var(--muted-ink)}

/* Ink bands: the muted text a little lighter for small sizes. */
.on-ink .graphite,.tile.ink small{color:var(--muted-ink)}

/* The blue band becomes the FreightSource orange band, with ink text. */
.on-blue{background-color:var(--orange);color:var(--ink)}
.on-blue :focus-visible{outline-color:var(--ink)}
.on-blue .founder p:first-child,.price .note,.included .vs{color:var(--on-orange)}
.on-blue .founder a,.included .vs a,.price .note a{color:var(--ink)}
.on-blue .link{text-decoration-color:var(--ink)}
.included li{border-bottom:1px solid oklch(15% 0.018 240/.14)}
.included li:first-child{border-top:1px solid oklch(15% 0.018 240/.14)}
.included .vs{line-height:26px}
/* "White" buttons sit on coloured bands: orange on ink (the footer), ink on orange (the price band). */
.btn.white{background:var(--orange);color:var(--ink)}
.btn.white i{background:var(--ink);color:var(--orange)}
.btn.white:hover{background:var(--orange-2)}
.on-blue .btn.white{background:var(--ink);color:var(--white)}
.on-blue .btn.white i{background:var(--orange);color:var(--ink)}
.on-blue .btn.white:hover{background:oklch(25% 0.02 240)}
.tile.blue{background:var(--orange);color:var(--ink)}
.mini i{box-shadow:inset 0 0 0 1px oklch(15% 0.018 240/.35)}
.mini i.y{background:var(--white)}

/* Hairlines instead of heavy rules, where the rule is decoration rather than a control. */
.tile.line{border-width:1px;border-color:oklch(15% 0.018 240/.25)}
.legend span+span::before{background:oklch(15% 0.018 240/.45)}

/* The form blanks: deep-orange ink with an orange wash. */
.blank{border-bottom-color:var(--orange);background:oklch(72% 0.18 45/.08);color:var(--blue)}
.blank::placeholder{color:oklch(55% 0.012 240);font-weight:500}  /* 4.6:1 on the wash; grey so an example never looks like an answer */
.blank:focus-visible{background:oklch(72% 0.18 45/.14)}
.asks .q::after{background:var(--orange)}

::selection{background:var(--highlight);color:var(--ink)}

/* ---------- Other pages, so the theme holds beyond the home page ---------- */
/* Page styles set Newsreader weights (400/500) that look thin in Inter; headings go to 600 everywhere.
   :not(#_) only lifts specificity past the page-level class rules. Footer ask stays at 500. */
:is(h1,h2,h3):not(#_):not(.sfoot *){font-weight:600}
/* Guide and platform call-out boxes were blue panels: ink panels with the orange button, like FreightSource's numbers band. */
.help,.cta .box{background:var(--ink)}
.help p{color:var(--muted-ink)}
@media (max-width:420px){.legend{gap:20px;font-size:16px}}

@media (min-width:640px){
  .top h1{font-size:80px;line-height:80px}
}
@media (min-width:768px){
  .h2{font-size:60px;line-height:62px;letter-spacing:-.035em}
  .why .statement{font-size:50px;line-height:58px;letter-spacing:-.03em}
  .log h3{font-size:27px;line-height:34px}
  .work h2{font-size:48px;line-height:54px}
  .grid9 h3{font-size:23px;line-height:30px}
  .cards h3{font-size:24px;line-height:32px}
  .price .amount{font-size:168px;line-height:196px;letter-spacing:-.055em}
  .price .per{font-size:34px;line-height:40px;letter-spacing:-.03em}
  .stats p:first-child{font-size:52px;line-height:56px}
  .winlist .num{font-size:clamp(38px,3.8vw,56px);line-height:1}
  .wins .h2{font-size:48px;line-height:54px}
  .sfoot .ask h2{font-size:44px;line-height:52px;letter-spacing:-.03em}
  .logos .type{font-size:19px;line-height:26px}
  .said .q{font-size:20px;line-height:28px}
  .sentence label{font-size:54px;line-height:72px;letter-spacing:-.035em}
  .blank{font-size:54px;line-height:72px;letter-spacing:-.035em}
  .logo span{font-size:28px}
}
@media (min-width:1280px){
  .top h1{font-size:min(104px,calc((100vw - 676px) / 7.2));line-height:.98}
  .asks .q{font-size:20px}
  .asks .title{font-size:21px;line-height:28px}
}