/* ============================================================
   FORWARDOPS / design system
   Palette: warm parchment canvas + cocoa ink (ref: leonidkostetskyi.com)
   Structure: 0px radius, grotesk display, mono meta (ref: 247studio.co)
   Type: restrained editorial scale (ref: ode.com measured, spacelab.co.uk,
         neverhack.com). Sentence case everywhere, no positive tracking.
   ============================================================ */

:root{
  /* colour */
  --canvas:      #F8F6F0;
  --surface:     #FFFFFF;
  --ink:         #211D18;
  --ink-2:       #6B6259;
  --ink-3:       #9A9186;
  --rule:        #E2DCD0;
  --rule-strong: #CFC7B8;

  /* type */
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --gutter: clamp(28px, 5.5vw, 76px);   /* content edge */
  --rail-gap: clamp(14px, 2vw, 36px);   /* breathing room between rail and text */
  --maxw: 1400px;
  --sec: clamp(76px, 11vw, 152px);

  /* motion. built-in CSS easings are too weak to read as intentional,
     so entrances use a strong ease-out and on-screen movement an
     ease-in-out. never ease-in: it delays the first frame, which is
     exactly when the eye is watching. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 520ms;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

/* negative tracking on display type only: this tightens large text,
   it is not the spaced-out look. no positive tracking anywhere. */
h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-0.022em; line-height:1.1; }
p{ margin:0; }

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.ta-r{ text-align:right; }

/* ============================================================
   DECORATIVE GRID  (ref: thayon.com rails, runner.now measured cells)
   Vertical rails pinned to the content container edges. Drawn per
   section so each one paints over its own background and can invert
   on the dark blocks. Zero extra markup, never intercepts pointers.
   ============================================================ */
.hero, .phero, .section, .cta, .foot{
  position:relative;
  /* The rail sits OUTSIDE the text column by --rail-gap, so it frames the
     content instead of touching it (ref: thayon.com rails at x22 / text at x79,
     helloivy.co "generous whitespace inside each bordered block").
     Uses 50% of the section, not 100vw, so a visible scrollbar cannot knock
     the rails out of alignment. */
  --rail-x:max(
    calc(var(--gutter) - var(--rail-gap)),
    calc(50% - (var(--maxw) / 2) + var(--gutter) - var(--rail-gap))
  );
}

.hero::before,  .hero::after,
.phero::before, .phero::after,
.section::before, .section::after,
.cta::before,   .cta::after,
.foot::before,  .foot::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:1px;
  background:var(--rail-c, var(--rule));
  pointer-events:none;
  z-index:0;
}
.hero::before, .phero::before, .section::before, .cta::before, .foot::before{ left:var(--rail-x); }
.hero::after,  .phero::after,  .section::after,  .cta::after,  .foot::after{ right:var(--rail-x); }

/* rails invert on the dark blocks so the line runs the full page */
.cta, .foot{ --rail-c:color-mix(in srgb, var(--canvas) 17%, transparent); }

/* the grid resolves in and out rather than hard-cutting at the page ends
   (ref: runner.now masks its lattice with gradients) */
.hero::before, .hero::after,
.phero::before, .phero::after{
  background:linear-gradient(to bottom, transparent, var(--rule) 16%);
}
.foot::before, .foot::after{
  background:linear-gradient(to bottom, var(--rail-c) 78%, transparent);
}

/* mini corner marks where the rails cross a section boundary */
.tick{
  position:absolute;
  width:5px; height:5px;
  background:var(--rule-strong);
  pointer-events:none;
  z-index:2;
}
.tick.tl{ top:0;    left:var(--rail-x);  transform:translate(-50%,-50%); }
.tick.tr{ top:0;    right:var(--rail-x); transform:translate(50%,-50%); }
.tick.bl{ bottom:0; left:var(--rail-x);  transform:translate(-50%,50%); }
.tick.br{ bottom:0; right:var(--rail-x); transform:translate(50%,50%); }

/* ---------- meta label ---------- */
.label{
  display:inline-flex;
  align-items:baseline;
  gap:.6em;
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  color:var(--ink-2);
}
.label i{ font-style:normal; color:var(--ink-3); }
.label--plain{ display:block; margin-bottom:20px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:var(--canvas);
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  padding:11px 24px;
  border-radius:100px;
  border:1px solid var(--ink);
  transition:background var(--t-hover) ease,
             color var(--t-hover) ease,
             transform var(--t-press) var(--ease-out);
  white-space:nowrap;
}
/* pressable things must answer the press, or the UI feels deaf */
.btn:active{ transform:scale(.97); }
.btn--sm{ padding:9px 19px; font-size:13px; }
.btn--lg{ padding:14px 30px; font-size:15px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  color:var(--ink-2);
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:3px;
  transition:color var(--t-hover) ease,
             border-color var(--t-hover) ease,
             transform var(--t-press) var(--ease-out);
}
.link-arrow::after{
  content:"\2192";
  transition:transform 220ms var(--ease-out);
}
.link-arrow:active{ transform:scale(.98); }

/* focus must be visible for anyone not using a mouse */
.btn:focus-visible,
.link-arrow:focus-visible,
.nav__links a:focus-visible,
.next__card:focus-visible,
.crumbs a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

/* touch devices fire hover on tap, so gate every hover behind a real pointer */
@media (hover: hover) and (pointer: fine){
  .btn:hover{ background:transparent; color:var(--ink); }
  .cta .btn:hover{ background:transparent; color:var(--canvas); }
  .link-arrow:hover{ color:var(--ink); border-color:var(--ink); }
  .link-arrow:hover::after{ transform:translateX(3px); }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.nav.is-stuck{ border-bottom-color:var(--rule); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:16px var(--gutter);
  display:flex; align-items:center; gap:38px;
}
/* baseline-aligned so the chevrons sit on the wordmark's baseline and rise to
   cap height. Centring instead centres the line box, which includes the
   descender on the p and leaves the mark visibly high. */
.nav__brand{ display:flex; align-items:baseline; gap:9px; margin-right:auto; }
.nav__mark{ display:block; color:var(--ink); }
.nav__mark svg{ display:block; height:13px; width:auto; }
.nav__word{
  font-family:var(--sans);
  font-weight:600;
  font-size:18px;
}
.nav__links{ display:flex; gap:28px; }
.nav__links a{
  position:relative;
  font-family:var(--sans);
  font-size:14px;
  color:var(--ink-2);
  padding-block:4px;
  transition:color var(--t-hover) ease;
}
/* current page gets a hairline, matching the rest of the rule system
   (ref: aaronpoeandco.com subtle active-state treatment) */
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--ease-out);
}
.nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---------- mobile menu ---------- */
.navtoggle{
  display:none;
  position:relative;
  flex:0 0 40px;          /* without this the flex row crushes it to ~1px */
  width:40px; height:40px;
  margin-right:-10px;
  padding:0; border:0; background:none;
  color:var(--ink); cursor:pointer;
  transition:transform var(--t-press) var(--ease-out);
}
.navtoggle:active{ transform:scale(.94); }
.navtoggle:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; }

/* three hairlines that fold into a cross, echoing the plus/minus on the FAQ */
.navtoggle__i,
.navtoggle__i::before,
.navtoggle__i::after{
  position:absolute;
  width:18px; height:1px;
  background:currentColor;
  transition:transform 240ms var(--ease-out), background-color 120ms ease;
}
.navtoggle__i{ top:50%; left:50%; margin:-.5px 0 0 -9px; }
.navtoggle__i::before{ content:""; left:0; top:-5px; }
.navtoggle__i::after{ content:""; left:0; top:5px; }
.navtoggle[aria-expanded="true"] .navtoggle__i{ background-color:transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__i::before{ transform:translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__i::after{ transform:translateY(-5px) rotate(-45deg); }

.mobilenav{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  /* solid, not translucent: at 97% the hero headline read straight through it */
  background:var(--canvas);
  border-bottom:1px solid var(--rule);
  box-shadow:0 12px 24px -18px rgba(33,29,24,.35);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 200ms var(--ease-out),
             transform 200ms var(--ease-out),
             visibility 200ms;
}
.mobilenav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobilenav a{
  display:block;
  padding:15px var(--gutter);
  border-top:1px solid var(--rule);
  font-size:16px;
  color:var(--ink-2);
  transition:color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.mobilenav a:first-child{ border-top:0; }
.mobilenav a[aria-current="page"]{ color:var(--ink); }
.mobilenav a:active{ background-color:var(--surface); color:var(--ink); }
.mobilenav__cta{ font-weight:500; color:var(--ink) !important; }

@media (max-width: 860px){
  .navtoggle{ display:block; }
  .mobilenav{ display:block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(128px, 19vh, 200px); }

.hero__title{
  font-size:clamp(2.2rem, 5.2vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-0.03em;
  max-width:17ch;
  text-wrap:balance;
  margin-bottom:clamp(40px, 5.5vw, 66px);
}

/* the CTA belongs to the sentence above it. Pushing it to the far
   right of the grid orphaned it ~600px from its own copy. */
.hero__foot{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
  padding-bottom:clamp(50px, 7vw, 88px);
}
.hero__lead{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(26px, 3vw, 34px); }
.hero__sub{
  font-size:clamp(1.02rem, 1.25vw, 1.15rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:54ch;
}
.hero__cta{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* fills the dead right half of the hero with the three facts that
   actually carry the pitch, rather than empty canvas */
.hero__meta{ margin:0; border-top:1px solid var(--rule); }
.hero__meta > div{
  display:grid;
  grid-template-columns:minmax(88px, auto) 1fr;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--rule);
}
.hero__meta dt{
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
  line-height:1.5; white-space:nowrap;
}
.hero__meta dd{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }

.hero__strip{
  border-block:1px solid var(--rule);
  padding:22px 0 26px;
  overflow:hidden;
}
.strip__label{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:18px;
}

/* ---------- logo marquee (ref: Legora / Notion inline wordmarks) ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  /* fade both edges so wordmarks dissolve rather than clip */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 42s linear infinite;
}
@media (hover: hover) and (pointer: fine){
  .marquee:hover .marquee__track{ animation-play-state:paused; }
}
.marquee__set{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.marquee__set li{
  padding-inline:clamp(18px, 2.4vw, 38px);
  font-size:clamp(.92rem, 1.1vw, 1.02rem);
  font-weight:500;
  letter-spacing:-0.018em;
  color:var(--ink-3);
  white-space:nowrap;
  transition:color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine){
  .marquee__set li:hover{ color:var(--ink); }
}

@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ padding-block:var(--sec); }
.section--alt{ background:var(--surface); border-block:1px solid var(--rule); }

.section__head{
  margin-bottom:clamp(40px, 5.5vw, 72px);
  display:flex; flex-direction:column; gap:20px;
}

.h2{
  font-size:clamp(1.55rem, 2.9vw, 2.35rem);
  line-height:1.1;
  letter-spacing:-0.026em;
  max-width:26ch;
  text-wrap:balance;   /* stops single orphan words dropping to their own line */
}

/* label-left / body-right grid */
.grid{
  display:grid;
  grid-template-columns:minmax(140px, 1fr) minmax(0, 3fr);
  gap:clamp(26px, 4.5vw, 80px);
  align-items:start;
}
.grid__label{ position:sticky; top:100px; }
.grid__body .h2{ margin-bottom:32px; }

.prose{ display:flex; flex-direction:column; gap:18px; max-width:64ch; }
.prose p{ font-size:clamp(.98rem, 1.15vw, 1.06rem); line-height:1.6; color:var(--ink-2); }
.prose strong{ color:var(--ink); font-weight:500; }

/* ---------- commitments ---------- */
.stats{
  margin-top:clamp(50px, 6.5vw, 92px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--rule);
}
.stat{
  padding:28px 26px 0 0;
  display:flex; flex-direction:column; gap:10px;
  border-right:1px solid var(--rule);
}
.stat:last-child{ border-right:0; }
.stat + .stat{ padding-left:26px; }
.stat__n{
  font-size:clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing:-0.024em;
  line-height:1.05;
}
.stat__t{ font-size:14px; line-height:1.5; color:var(--ink-2); max-width:32ch; }

/* ============================================================
   ROWS  (ref: Craft Agency / Trawelt)
   ============================================================ */
.rows{ border-top:1px solid var(--rule); }
.row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 190px;
  gap:clamp(18px, 3.4vw, 52px);
  padding:clamp(26px, 3.2vw, 42px) 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.row__n{
  font-family:var(--mono);
  font-size:clamp(1.1rem, 1.55vw, 1.4rem);
  color:var(--ink-3);
  line-height:1.1;
}
.row__t{
  font-size:clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing:-0.024em;
  margin-bottom:11px;
}
.row__d{ font-size:15px; line-height:1.6; color:var(--ink-2); max-width:60ch; }
.row__meta{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-3); line-height:1.85; text-align:right;
}

/* ============================================================
   CARDS  (ref: Clay bracketed steps)
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--rule);
}
.card{
  padding:32px 28px 8px 0;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:11px;
}
.card:last-child{ border-right:0; }
.card + .card{ padding-left:28px; }
.card__n{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:15px;
}
.card__t{ font-size:1.05rem; letter-spacing:-0.02em; line-height:1.25; }
.card__d{ font-size:14px; line-height:1.6; color:var(--ink-2); }

/* ============================================================
   PRICING TABLE
   ============================================================ */
.price{
  width:100%;
  border-collapse:collapse;
  margin-top:clamp(42px, 5.5vw, 74px);
}
.price th{
  font-family:var(--mono);
  font-size:12px; font-weight:400;
  color:var(--ink-3);
  text-align:left;
  padding:0 0 14px;
  border-bottom:1px solid var(--rule-strong);
}
.price th.ta-r{ text-align:right; }
.price td{
  padding:22px 0;
  border-bottom:1px solid var(--rule);
  font-size:clamp(.98rem, 1.15vw, 1.1rem);
  letter-spacing:-0.014em;
  vertical-align:baseline;
}
.price tbody tr td:first-child{ font-weight:500; width:30%; }
.price tbody tr td:nth-child(2){ color:var(--ink-2); font-size:14px; letter-spacing:0; }
.price tbody tr td.ta-r{ font-family:var(--mono); letter-spacing:-0.01em; }
.price__note{
  margin-top:22px;
  font-size:13px; line-height:1.6; color:var(--ink-3); max-width:62ch;
}

/* ============================================================
   FIT
   ============================================================ */
.fit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 5vw, 78px);
  border-top:1px solid var(--rule);
  padding-top:clamp(34px, 4.2vw, 54px);
}
.fit__col--muted{ color:var(--ink-3); }
.fit__col--muted .list li{ color:var(--ink-3); }
.fit__col--muted .list li::before{ background:var(--ink-3); }
.list{ display:flex; flex-direction:column; gap:15px; }
.list li{
  position:relative;
  padding-left:24px;
  font-size:clamp(.95rem, 1.1vw, 1.02rem);
  line-height:1.5;
  color:var(--ink);
  max-width:44ch;
}
.list li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--ink);
}

/* ============================================================
   FAQ  (ref: Craft / OpenPhone hairline rows, no cards)
   ============================================================ */
.faq{ border-top:1px solid var(--rule); }

.faq__item{ border-bottom:1px solid var(--rule); }

.faq__q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-size:clamp(1rem, 1.25vw, 1.14rem);
  font-weight:500;
  letter-spacing:-0.018em;
  line-height:1.4;
  transition:color .2s ease;
}
.faq__q::-webkit-details-marker{ display:none; }
@media (hover: hover) and (pointer: fine){
  .faq__q:hover{ color:var(--ink-2); }
}
.faq__q:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }

/* plus that rotates into a minus */
.faq__i{
  position:relative;
  flex:0 0 auto;
  width:13px; height:13px;
  margin-top:.36em;
}
.faq__i::before,
.faq__i::after{
  content:"";
  position:absolute; left:0; top:6px;
  width:13px; height:1px;
  background:var(--ink);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.faq__i::after{ transform:rotate(90deg); }
.faq__item[open] .faq__i::after{ transform:rotate(0deg); }

.faq__a{ padding:0 52px 26px 0; }
.faq__a p{
  font-size:clamp(.95rem, 1.1vw, 1.03rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:64ch;
}
.faq__item[open] .faq__a{
  animation:faqIn .38s cubic-bezier(.22,.61,.36,1);
}
@keyframes faqIn{
  from{ opacity:0; transform:translate3d(0,-8px,0); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  background-color:var(--ink);
  /* faint dot field (ref: runner.now) fading out toward the base */
  background-image:radial-gradient(circle, rgba(248,246,240,.085) .75px, transparent .75px);
  background-size:24px 24px;
  color:var(--canvas);
  padding-block:clamp(78px, 10.5vw, 148px);
}
.cta__t{
  font-size:clamp(1.9rem, 4.2vw, 3.4rem);
  line-height:1.04;
  letter-spacing:-0.03em;
  margin-bottom:26px;
}
.cta__d{
  font-size:clamp(.98rem, 1.15vw, 1.08rem);
  line-height:1.6;
  color:color-mix(in srgb, var(--canvas) 64%, transparent);
  max-width:58ch;
  margin-bottom:38px;
}
.cta .btn{
  background:var(--canvas); color:var(--ink); border-color:var(--canvas);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--canvas); padding-top:clamp(52px, 7vw, 84px); }
.foot__inner{
  display:grid;
  grid-template-columns:1.4fr 2fr;
  gap:44px;
  padding-bottom:clamp(42px, 6vw, 70px);
}
.foot__line{
  margin-top:14px;
  font-size:14px; line-height:1.5;
  color:color-mix(in srgb, var(--canvas) 52%, transparent);
  max-width:30ch;
}
.foot__cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.foot .label--plain{
  color:color-mix(in srgb, var(--canvas) 45%, transparent);
  margin-bottom:16px;
}
.foot__list{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.foot__list a,.foot__list li{ color:color-mix(in srgb, var(--canvas) 78%, transparent); transition:color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine){
  .foot__list a:hover{ color:var(--canvas); }
}
.foot__base{
  display:flex; justify-content:space-between; gap:20px;
  padding-block:22px;
  border-top:1px solid color-mix(in srgb, var(--canvas) 14%, transparent);
  font-family:var(--mono);
  font-size:12px;
  color:color-mix(in srgb, var(--canvas) 45%, transparent);
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.phero{ padding-top:clamp(118px, 17vh, 172px); padding-bottom:clamp(44px, 6vw, 76px); }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
  margin-bottom:26px;
}
.crumbs a{ color:var(--ink-2); border-bottom:1px solid transparent; transition:border-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine){
  .crumbs a:hover{ border-bottom-color:var(--rule-strong); }
}
.crumbs span[aria-current]{ color:var(--ink-3); }

.phero__t{
  font-size:clamp(1.9rem, 4.2vw, 3.3rem);
  line-height:1.06;
  letter-spacing:-0.028em;
  max-width:20ch;
  text-wrap:balance;
  margin-bottom:22px;
}
.phero__d{
  font-size:clamp(1rem, 1.25vw, 1.14rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:60ch;
}

/* answer box: the extractable summary engines quote */
.answer{
  margin-top:clamp(30px, 4vw, 44px);
  border:1px solid var(--rule-strong);
  padding:clamp(20px, 2.6vw, 30px);
  max-width:70ch;
  background:var(--surface);
}
.answer__k{
  display:block;
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
  margin-bottom:12px;
}
.answer p{
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  line-height:1.6;
}
.answer p + p{ margin-top:12px; }

/* chapters: numbered blocks with a sticky marker, separated by hairlines.
   Same grid proportions as the homepage .grid, so interior pages inherit the
   homepage structure rather than becoming a column of prose.
   (ref: incident.io persistent sidebar, syllabus.io modular blocks) */
.chapters{ border-top:1px solid var(--rule); }
.chapter{
  display:grid;
  grid-template-columns:minmax(140px, 1fr) minmax(0, 3fr);
  gap:clamp(26px, 4.5vw, 80px);
  padding-block:clamp(34px, 4.2vw, 60px);
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.chapter__side{ position:sticky; top:100px; display:flex; flex-direction:column; gap:8px; }
.chapter__n{
  font-family:var(--mono);
  font-size:clamp(1.1rem, 1.55vw, 1.4rem);
  color:var(--ink-3); line-height:1.1;
}
.chapter__k{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.chapter__body{ max-width:66ch; }
.chapter__t{
  font-size:clamp(1.18rem, 1.75vw, 1.5rem);
  letter-spacing:-0.024em; line-height:1.22;
  margin-bottom:13px; scroll-margin-top:100px;
}
.chapter__body p{ font-size:clamp(.98rem, 1.15vw, 1.06rem); line-height:1.65; color:var(--ink-2); }
.chapter__body p + p{ margin-top:14px; }
.chapter__body strong{ color:var(--ink); font-weight:500; }
.chapter__body a{ color:var(--ink); border-bottom:1px solid var(--rule-strong); transition:border-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine){
  .chapter__body a:hover{ border-bottom-color:var(--ink); }
}
.chapter__body ul{ margin:14px 0 0; display:flex; flex-direction:column; gap:10px; }
.chapter__body ul li{
  position:relative; padding-left:22px;
  font-size:clamp(.95rem, 1.1vw, 1.02rem); line-height:1.6; color:var(--ink-2);
}
.chapter__body ul li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:8px; height:1px; background:var(--ink-3);
}

/* column-count modifier for the shared .cards grid */
.cards--3{ grid-template-columns:repeat(3, 1fr); }

@media (max-width: 860px){
  .chapter{ grid-template-columns:1fr; gap:16px; }
  .chapter__side{ position:static; flex-direction:row; align-items:baseline; gap:12px; }
  .chapter__k br{ display:none; }
}

/* next steps */
.next{ border-top:1px solid var(--rule); padding-top:clamp(34px,4vw,52px); }
.next__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.next__card{
  background:var(--canvas); padding:26px 24px;
  display:flex; flex-direction:column; gap:9px;
  transition:background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.next__card:active{ transform:scale(.99); }
@media (hover: hover) and (pointer: fine){
  .next__card:hover{ background:var(--surface); }
  .next__card:hover .next__t{ color:var(--ink); }
}
.next__k{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.next__t{ font-size:1.05rem; font-weight:500; letter-spacing:-0.018em; }
.next__d{ font-size:14px; line-height:1.5; color:var(--ink-2); }

@media (max-width: 860px){
  .next__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   MOTION
   ============================================================ */
/* entrances were running 700-800ms, which reads as sluggish. Marketing
   motion can be slower than UI, but not this slow. */
.word{
  display:inline-block;
  opacity:0;
  transform:translate3d(0, .32em, 0);
  transition:opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.is-in .word{ opacity:1; transform:none; }

.reveal{
  opacity:0;
  transform:translate3d(0, 14px, 0);
  transition:opacity var(--t-reveal) var(--ease-out),
             transform var(--t-reveal) var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }

/* reduced motion means gentler, not absent. Opacity survives because it
   aids comprehension; only positional movement is removed. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .word,.reveal{ transform:none !important; transition:opacity 200ms ease !important; }
  .marquee__track{ animation:none; }
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .faq__item[open] .faq__a{ animation:none; }
  .btn:active,.link-arrow:active,.next__card:active,.navtoggle:active{ transform:none; }
  .link-arrow:hover::after{ transform:none; }
  .mobilenav{ transform:none; transition:opacity 150ms ease, visibility 150ms; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .cards{ grid-template-columns:1fr 1fr; }
  .card{ border-bottom:1px solid var(--rule); padding-bottom:30px; }
  .card:nth-child(2n){ border-right:0; }
  .card:nth-child(2n+1){ padding-left:0; }
  .card:nth-child(2n){ padding-left:28px; }
  .card:nth-last-child(-n+2){ border-bottom:0; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__inner{ gap:14px; }
  .nav__brand{ min-width:0; }
  .hero__foot{ grid-template-columns:1fr; align-items:start; gap:32px; }
  .grid{ grid-template-columns:1fr; }
  .grid__label{ position:static; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--rule); padding:22px 0; }
  .stat:last-child{ border-bottom:0; }
  .stat + .stat{ padding-left:0; }
  .stat__t{ max-width:46ch; }
  .row{ grid-template-columns:50px 1fr; }
  .row__meta{ grid-column:2; text-align:left; line-height:1.7; margin-top:12px; }
  .fit{ grid-template-columns:1fr; }
  .foot__inner{ grid-template-columns:1fr; }
  .faq__a{ padding-right:0; }
  .marquee__track{ animation-duration:30s; }
}

@media (max-width: 620px){
  body{ font-size:15px; }
  .cards{ grid-template-columns:1fr; }
  .card{ border-right:0; padding-left:0 !important; }
  .card:last-child{ border-bottom:0; }
  .foot__cols{ grid-template-columns:1fr; gap:30px; }
  .foot__base{ flex-direction:column; gap:10px; }
  .price tbody tr td:nth-child(2){ display:none; }
  .price thead th:nth-child(2){ display:none; }
  .price tbody tr td:first-child{ width:auto; }
}