:root{
  /* Core palette, Brand Standards V 002 Section 3 */
  --green:#00D982;
  --base:#1F1740;
  --cloud:#D8E2E8;
  --white:#FFFFFF;
  /* Neutral ramp */
  --mist:#F4F7F9;
  --fog:#E7EDF1;
  --slate:#A9B4C0;
  --steel:#6F6B85;
  --ink:#4A4560;
  /* Semantic on light */
  --green-deep:#00794A;
  --signal-red:#C42A54;
  --signal-amber:#A65B00;
  --signal-indigo:#4A3E8F;
  /* Semantic on Base */
  --signal-amber-light:#FFC46B;

  --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:14px; --radius-2xl:18px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px;

  --maxw:1200px;
  --gutter:24px;
  --rhythm:64px;

  --font:"Geist","Geist Variable",Inter,"Helvetica Neue",Arial,sans-serif;

  --card-shadow:0 8px 24px rgba(31,23,64,0.08);

  /* Type scale, mobile defaults */
  --t-display-xl:40px; --t-display-xl-lh:42px;
  --t-display-l:34px;  --t-display-l-lh:38px;
  --t-h1:30px;         --t-h1-lh:34px;
  --t-h2:25px;         --t-h2-lh:30px;
  --t-h3:21px;         --t-h3-lh:27px;
  --t-h4:19px;         --t-h4-lh:26px;
}
@media (min-width:768px){
  :root{
    --gutter:48px;
    --rhythm:96px;
    --t-display-xl:64px; --t-display-xl-lh:64px;
    --t-display-l:48px;  --t-display-l-lh:50px;
    --t-h1:40px;         --t-h1-lh:44px;
    --t-h2:32px;         --t-h2-lh:38px;
    --t-h3:24px;         --t-h3-lh:30px;
    --t-h4:20px;         --t-h4-lh:27px;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:27px;
  font-weight:400;
  color:var(--base);
  background:var(--white);
  font-variant-numeric:proportional-nums;
}
img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{margin:0;font-weight:500}
/* Emphasis is Medium 500, the heaviest weight in the brand scale. The browser
   default of 700 is never loaded, so without this rule strong text renders as
   synthesized faux bold: wider, heavier, and visibly not Geist mid-sentence. */
strong,b{font-weight:500}
h1{font-size:var(--t-display-l);line-height:var(--t-display-l-lh);letter-spacing:-0.03em}
h2{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:-0.025em}
h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:-0.015em}
h4{font-size:var(--t-h4);line-height:var(--t-h4-lh);letter-spacing:-0.01em}
p{margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--rhythm);padding-bottom:var(--rhythm)}
.section--tight{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
.surface-base{background:var(--base);color:var(--white)}
.surface-mist{background:var(--mist)}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--sp-4)}
.stack-6>*+*{margin-top:var(--sp-6)}
.stack-8>*+*{margin-top:var(--sp-8)}
.measure{max-width:62ch}
.measure-narrow{max-width:52ch}

.label{
  font-size:13px;line-height:16px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.10em;
  color:var(--steel);margin:0;
}
.surface-base .label{color:var(--cloud)}
.lead{font-size:20px;line-height:32px;font-weight:300;letter-spacing:-0.005em}
.body-sm{font-size:15px;line-height:23px}
.caption{font-size:13px;line-height:19px;color:var(--steel)}
.surface-base .caption{color:var(--cloud)}
.ink{color:var(--ink)}
.steel{color:var(--steel)}

/* Links */
a{color:var(--base);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em;transition:text-decoration-thickness 180ms ease-out}
a:hover{text-decoration-thickness:2px}
.surface-base a{color:var(--green)}
a.plain{text-decoration:none}
a.plain:hover{text-decoration:none}

/* Focus */
:focus-visible{outline:2px solid var(--base);outline-offset:2px;border-radius:2px}
.surface-base :focus-visible{outline-color:var(--green)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 20px;
  font-family:var(--font);font-size:15px;line-height:20px;font-weight:500;
  border-radius:var(--radius-lg);border:0;text-decoration:none;
  cursor:pointer;transition:transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--green);color:var(--base)}
.btn--primary:hover{background:#00c476;color:var(--base)}
.btn--tertiary{background:transparent;color:var(--base);border:1px solid var(--cloud)}
.btn--tertiary:hover{border-color:var(--steel)}
.surface-base .btn--primary,.site-footer .btn--primary{background:var(--green);color:var(--base)}
.surface-base .btn--primary:hover,.site-footer .btn--primary:hover{background:#00C476;color:var(--base)}
.surface-base .btn--tertiary{color:var(--white);border-color:rgba(216,226,232,0.4)}
.surface-base .btn--tertiary:hover{border-color:var(--cloud)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* Cards */
.card{background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius-lg);padding:var(--sp-6)}
.grid{display:grid;gap:var(--sp-4)}
/* Grid children stretch to the tallest sibling by default, which is right for
   matched card rows and wrong for a lone panel beside a taller text column,
   where it leaves a large empty band inside the box. */
.grid--start{align-items:start}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid--4{grid-template-columns:repeat(4,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}}

/* Header */
.site-header{border-bottom:1px solid var(--cloud);background:var(--white);position:sticky;top:0;z-index:20}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);min-height:72px}
/* Navigation.
   Without JavaScript the nav is always visible and wraps, so a phone is never
   left without navigation. That was the behaviour before: .nav was display:none
   below 960px with no toggle at all. The collapsed mobile menu only exists once
   the script has run and can actually operate the toggle. */
.nav{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);align-items:center;
  padding:var(--sp-3) 0}
@media (min-width:960px){.nav{flex-wrap:nowrap;gap:var(--sp-6);padding:0}}
.js .nav{display:none}
.js .nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;align-items:flex-start;background:var(--white);
  border-bottom:1px solid var(--cloud);padding:var(--sp-6) var(--gutter);
  box-shadow:var(--card-shadow)}
@media (min-width:960px){.js .nav{display:flex}
  .js .nav.is-open{position:static;flex-direction:row;align-items:center;
    background:none;border:0;padding:0;box-shadow:none}}

.nav-toggle{display:none;align-items:center;gap:var(--sp-2);min-height:44px;
  padding:0 var(--sp-3);background:none;border:1px solid var(--cloud);
  border-radius:var(--radius-md);font:inherit;font-size:15px;color:var(--ink);
  cursor:pointer}
.js .nav-toggle{display:inline-flex}
@media (min-width:960px){.js .nav-toggle{display:none}}
.nav-toggle:hover{border-color:var(--steel)}
.nav-toggle__bars{width:16px;height:2px;background:currentColor;position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;
  left:0;width:16px;height:2px;background:currentColor}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}

/* The Resources submenu is a native <details>, so keyboard, touch, and screen
   reader support come from the element rather than from ARIA plumbing. */
.nav-sub{position:relative}
.nav-sub>summary{font-size:15px;line-height:23px;color:var(--ink);cursor:pointer;
  list-style:none;display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px}
@media (min-width:960px){.nav-sub>summary{min-height:0}}
.nav-sub>summary::-webkit-details-marker{display:none}
.nav-sub>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.nav-sub[open]>summary::after{transform:rotate(225deg);margin-top:2px}
.nav-sub>summary:hover{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:0.15em}
.nav-sub__menu{list-style:none;margin:0;padding:var(--sp-3) 0 0;display:grid;
  gap:var(--sp-3)}
@media (min-width:960px){
  .nav-sub__menu{position:absolute;top:calc(100% + 12px);left:-16px;min-width:240px;
    background:var(--white);border:1px solid var(--cloud);
    border-radius:var(--radius-lg);box-shadow:var(--card-shadow);
    padding:var(--sp-4);z-index:30}
}
.nav a{font-size:15px;line-height:23px;text-decoration:none;color:var(--ink)}
.nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em}

/* Logo. The supplied lockup is a fixed three-colour asset: a Green logomark
   with a white b, followed by the wordmark in Base. It is therefore a
   light-surface asset only. Minimum width is 88 px; this sits well above it.
   Clear space equals the height of the lowercase b, which in this lockup is
   about 11.7 percent of the mark's width. */
.site-logo{display:inline-flex;align-items:center;padding:16px 0}
.site-logo img{display:block;width:132px;height:auto}
.footer-logo{display:block;width:132px;height:auto}
@media (min-width:768px){.site-logo img{width:146px}}

/* Logo placeholder slot. Replace with the supplied wordmark SVG. */
.logo-slot{
  display:inline-flex;align-items:center;justify-content:center;
  width:132px;min-height:32px;padding:6px 8px;
  border:1px dashed var(--slate);border-radius:var(--radius-sm);
  font-size:11px;line-height:14px;font-weight:500;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--signal-amber);text-align:center;text-decoration:none;
}
.surface-base .logo-slot{color:var(--signal-amber-light);border-color:rgba(169,180,192,0.6)}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--gutter);top:var(--sp-2);z-index:50;background:var(--white);padding:var(--sp-2) var(--sp-3);border:1px solid var(--base);border-radius:var(--radius-sm)}

/* Hero */
.hero{padding-top:var(--sp-16);padding-bottom:var(--rhythm)}
.hero__stack{display:flex;flex-direction:column;gap:var(--sp-12)}
.hero__copy{max-width:760px}

.hero h1{font-size:var(--t-display-l);line-height:var(--t-display-l-lh);letter-spacing:-0.03em;max-width:34ch}
.eyebrow-line{font-size:var(--t-h4);line-height:var(--t-h4-lh);font-weight:500;letter-spacing:-0.01em;color:var(--green-deep)}

/* Proof strip */
.proof{display:grid;gap:var(--sp-6)}
@media (min-width:520px){.proof{grid-template-columns:repeat(2,1fr)}}
.proof-row{display:grid;gap:var(--sp-8)}
@media (min-width:960px){.proof-row{grid-template-columns:1.35fr 1fr;gap:var(--sp-12);align-items:start}}
.proof-row .caption{max-width:56ch}
.proof__n{font-size:48px;line-height:50px;font-weight:300;letter-spacing:-0.03em;color:var(--green);font-variant-numeric:tabular-nums}
.proof__l{font-size:15px;line-height:23px;color:var(--white);margin-top:var(--sp-1)}

/* Lists */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:28px;margin-top:var(--sp-3)}
.ticks li:first-child{margin-top:0}
.ticks li::before{
  content:"";position:absolute;left:0;top:9px;
  width:10px;height:10px;border-radius:2px;background:var(--base);
}
.surface-base .ticks li::before{background:var(--green)}
.dashes{list-style:none;padding:0;margin:0}
.dashes li{position:relative;padding-left:28px;margin-top:var(--sp-3);color:var(--ink)}
.dashes li:first-child{margin-top:0}
.dashes li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:1px;background:var(--slate)}

/* Contrast table */
.compare{width:100%;border-collapse:collapse;font-size:15px;line-height:23px}
.compare caption{text-align:left;padding-bottom:var(--sp-3)}
.compare th,.compare td{text-align:left;vertical-align:top;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--cloud)}
.compare thead th{font-weight:500;font-size:13px;line-height:16px;text-transform:uppercase;letter-spacing:0.10em;color:var(--steel);border-bottom:1px solid var(--base)}
.compare tbody td:first-child{color:var(--ink)}
.compare tbody td:last-child{color:var(--base);font-weight:500}

/* Pricing */
.price{font-size:48px;line-height:50px;font-weight:300;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.price small{font-size:17px;line-height:27px;font-weight:400;letter-spacing:0;color:var(--steel);display:block;margin-top:var(--sp-1)}
.pill{display:inline-block;font-size:13px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:0.10em;background:var(--fog);color:var(--ink);border-radius:var(--radius-sm);padding:6px 10px}

/* Panels */
.panel{background:var(--mist);border:1px solid var(--cloud);border-radius:var(--radius-xl);padding:var(--sp-6)}
@media (min-width:768px){.panel{padding:var(--sp-8)}}
.panel--cloud{background:var(--cloud);border-color:var(--cloud)}

/* Open item slot */
.open{
  border:1px dashed var(--slate);border-radius:var(--radius-lg);
  padding:var(--sp-6);background:var(--white);
}
.open__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:0.10em;
  color:var(--signal-amber);
}
.open__tag::before{content:"[";font-weight:500}
.open__tag::after{content:"]";font-weight:500}
.open p{margin-top:var(--sp-3);color:var(--ink)}

/* Muted text steps up from Steel to Ink on tinted surfaces so every pairing
   stays inside the approved contrast matrix with margin. */
.surface-mist .label,.panel .label,.surface-mist .caption,.panel .caption,
.compare caption,.surface-mist .steel,.panel .steel{color:var(--ink)}
.panel--cloud .ink,.panel--cloud .body-sm,.panel--cloud .dashes li,
.panel--cloud .caption{color:var(--base)}
.panel--cloud .dashes li::before{background:var(--steel)}
.shot .open__tag{color:var(--signal-amber)}

/* Screenshots: radius lg, 1 px Cloud border, and the Section 7 shadow because
   all three sit on a white section rather than inside a Cloud or Mist panel. */
.shot-img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--cloud);box-shadow:0 8px 24px rgba(31,23,64,0.08)}
figure.proof-shot{margin:0}
/* The onboarding form was captured at a narrow viewport, so cap its display
   width rather than upscaling it to sit flush with the wider table shots. */
.proof-shot--narrow{max-width:820px}
figure.proof-shot figcaption{margin-top:var(--sp-3)}

/* Symptom strip. Four arrival states, each an in-page anchor to the section
   that answers it. Navigation, not calls to action: no button treatment, and
   the only call to action on the site remains Book a Conversation. */
.symptoms{display:grid;gap:var(--sp-4)}
@media (min-width:640px){.symptoms{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.symptoms{grid-template-columns:repeat(4,1fr)}}
.symptom{
  display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius-lg);
  padding:var(--sp-6);text-decoration:none;color:var(--base);
  transition:border-color 180ms ease-out, box-shadow 180ms ease-out;
}
/* Elevation only because the card is interactive, per V 002 Section 6. */
.symptom:hover{border-color:var(--steel);box-shadow:0 8px 24px rgba(31,23,64,0.08);text-decoration:none}
.symptom__quote{font-size:19px;line-height:28px;font-weight:300;letter-spacing:-0.005em;margin:0}
.symptom__answer{font-size:15px;line-height:23px;color:var(--ink);margin:0}
.symptom__more{
  margin-top:auto;font-size:13px;line-height:16px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.10em;color:var(--base);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em;
}

/* Where Baseline is the wrong choice. Sits on a Base surface, so it cannot
   reuse .panel, whose Mist fill and Ink text are light-surface values. */
.notfit{
  border:1px solid rgba(216,226,232,0.30);border-radius:var(--radius-xl);
  background:rgba(216,226,232,0.08);padding:var(--sp-6);
}
@media (min-width:768px){.notfit{padding:var(--sp-8)}}
.notfit p{color:var(--cloud);max-width:68ch}
.notfit__list{list-style:none;padding:0;margin:0}
.notfit__list li{position:relative;padding-left:28px;margin-top:var(--sp-3);color:var(--white);max-width:68ch}
.notfit__list li:first-child{margin-top:0}
.notfit__list li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:1px;background:var(--cloud)}

/* Screenshot slot */
.shot{
  border:1px dashed var(--slate);border-radius:var(--radius-lg);
  background:var(--mist);padding:var(--sp-6);min-height:200px;
  display:flex;flex-direction:column;justify-content:center;
}

/* Steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding-left:52px;padding-bottom:var(--sp-6)}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--base);color:var(--white);
  font-size:15px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.steps li::after{
  content:"";position:absolute;left:15px;top:36px;bottom:4px;width:1px;background:var(--cloud);
}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:var(--sp-1)}

/* Footer */
.site-footer{background:var(--base);color:var(--white);padding-top:var(--rhythm);padding-bottom:var(--sp-8)}
.footer-grid{display:grid;gap:var(--sp-8)}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
/* Four columns once there is room. Below 1120px the fourth group wraps to a
   second row, which is why the rule is additive rather than a replacement. */
@media (min-width:1120px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-nav{list-style:none;padding:0;margin:0}
.footer-nav li{margin-top:var(--sp-2)}
.footer-nav a{color:var(--cloud);text-decoration:none;font-size:15px;line-height:23px}
.footer-nav a:hover{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em}
.footer-rule{border:0;border-top:1px solid rgba(216,226,232,0.25);margin:var(--sp-8) 0 var(--sp-6)}

.hr{border:0;border-top:1px solid var(--cloud);margin:0}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important;animation-duration:0ms !important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}


/* ---------------------------------------------------------------------------
   Conversion components, added 26 August 2026 with the conversion brief.
   --------------------------------------------------------------------------- */

/* Hero trust strip. Verified claims only, never a badge wall.
   A grid rather than flex-wrap: three flexible columns line up, where wrapping
   produced a ragged 2+1 at desktop and 1+1+1 in between. The margin-top is
   restated for the stack because .trust-strip's own margin:0 has the same
   specificity as .stack-6 > * + * and is declared later, which collapsed the
   gap under the hero buttons to nothing. */
.trust-strip{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.stack>.trust-strip,.stack-6>.trust-strip,.stack-8>.trust-strip{margin-top:var(--sp-8)}
@media (min-width:640px){
  .trust-strip{grid-template-columns:repeat(3,1fr);gap:var(--sp-4) var(--sp-6)}
}
.trust-strip li{font-size:15px;line-height:23px;color:var(--ink);
  display:flex;align-items:flex-start;gap:var(--sp-2)}
.trust-strip li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green);flex:none;margin-top:9px}

/* Disclosure. Used for FAQs and for detail a first-time reader does not need. */
.faq{display:grid;gap:var(--sp-3)}
.faq details{background:var(--white);border:1px solid var(--cloud);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-6)}
.faq summary{cursor:pointer;font-size:17px;line-height:26px;font-weight:500;
  list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);
  align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--steel);border-bottom:1.5px solid var(--steel);
  transform:rotate(45deg);margin-top:-4px}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:3px}
.faq details>*:not(summary){margin-top:var(--sp-3)}
.surface-mist .faq details{background:var(--white)}

/* Price estimator. Falls back to a static worked-examples table without JS. */
.estimator{display:grid;gap:var(--sp-6)}
@media (min-width:768px){.estimator{grid-template-columns:1fr 1fr;align-items:start}}
.estimator__field{display:grid;gap:var(--sp-2)}
.estimator__field label{font-size:15px;line-height:23px;color:var(--ink)}
.estimator input[type="number"]{font:inherit;font-size:17px;min-height:44px;
  padding:0 var(--sp-3);border:1px solid var(--cloud);border-radius:var(--radius-md);
  background:var(--white);color:var(--base);width:100%;max-width:180px}
.estimator input[type="number"]:hover{border-color:var(--steel)}
.estimator__out{background:var(--mist);border:1px solid var(--cloud);
  border-radius:var(--radius-lg);padding:var(--sp-6);display:grid;gap:var(--sp-3)}
.estimator__total{font-size:var(--t-display-l);line-height:var(--t-display-l-lh);
  letter-spacing:-0.02em;margin:0}

/* Fit check. Falls back to a plain checklist without JS. */
.fitcheck fieldset{border:1px solid var(--cloud);border-radius:var(--radius-lg);
  padding:var(--sp-6);margin:0 0 var(--sp-4);background:var(--white)}
.fitcheck legend{font-size:17px;line-height:26px;font-weight:500;padding:0 var(--sp-2)}
.fitcheck__opts{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-3)}
.fitcheck__opts label{display:flex;align-items:center;gap:var(--sp-2);
  font-size:15px;min-height:44px;cursor:pointer}
.fitcheck input[type="radio"]{width:20px;height:20px;accent-color:var(--base)}

/* Paired cards: how a comparison table reads once it stops being a table. */
@media (max-width:639px){
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare tr{display:grid;gap:var(--sp-2);padding:var(--sp-4) 0;
    border-bottom:1px solid var(--cloud)}
  .compare td{display:block;border:0;padding:0}
  .compare td::before{content:attr(data-label);display:block;font-size:13px;
    line-height:16px;text-transform:uppercase;letter-spacing:0.10em;
    color:var(--steel);margin-bottom:var(--sp-1)}
}

/* A compact action bar on phones, after the hero action scrolls away. It sits
   in normal flow at the end of the page on desktop and is only fixed on small
   screens, where it must never cover content: the body gets matching padding. */
@media (max-width:767px){
  /* One action on screen, not two. At 375px the header cannot hold a logo, a
     menu control, and a five-word button without the button wrapping to three
     lines, so the action lives in the bottom bar on phones. */
  .site-header .btn--primary{display:none}
  .js body{padding-bottom:76px}
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:25;
    background:var(--white);border-top:1px solid var(--cloud);
    padding:var(--sp-3) var(--gutter);display:flex;justify-content:center}
  .sticky-cta .btn{width:100%;max-width:420px}
}
@media (min-width:768px){.sticky-cta{display:none}}

/* Print. The manager business case is a page that has to survive a printer. */
@media print{
  .site-header,.site-footer,.sticky-cta,.nav-toggle,.btn{display:none !important}
  .section,.section--tight{padding:12pt 0}
  .surface-base,.surface-mist{background:none !important;color:#1F1740 !important}
  .surface-base .label,.surface-base .caption{color:#4A4560 !important}
  .card,.panel,.notfit{border:1pt solid #D8E2E8;break-inside:avoid}
  .faq details{break-inside:avoid}
  .faq details>*:not(summary){display:block}
  a[href^="/"]::after{content:" (runonbaseline.com" attr(href) ")";font-size:9pt;color:#4A4560}
}

/* Reading measure inside full-width components.
   .measure is 62ch and .measure-narrow is 52ch, but both are applied per
   element. Disclosure bodies, fieldset help text, and lists inside a full-width
   panel had no cap, so at 1280px they ran to roughly 1050px, far past a
   comfortable line. .notfit already capped at 68ch, which is why those blocks
   read correctly and these did not. These are ceilings only: inside a
   two-column grid the column is already narrower and nothing changes. */
.faq details>*:not(summary){max-width:74ch}
.fitcheck fieldset>p{max-width:74ch}
.fitcheck legend{max-width:60ch}
.panel>p,.panel>.dashes li,.panel>.ticks li,
.panel>.stack>p,.panel>.stack-6>p{max-width:74ch}

/* Light components placed on a Base surface.
   .surface-base sets color:var(--white) for the whole section. A .card is
   opaque white, so a card inside a Base section rendered white text on a white
   background: invisible. On the four intent pages that hid the published seat
   prices outright. Components that carry their own light background must
   therefore restate their own text colour. */
.surface-base .card{color:var(--base)}
.surface-base .card .caption{color:var(--steel)}
.surface-base .card .label{color:var(--steel)}
.surface-base .symptom{color:var(--base)}
.surface-base .symptom__answer{color:var(--ink)}

/* .notfit was written for a Base surface: cloud paragraphs and white list items
   over a translucent panel. Reused on white and mist sections it rendered
   cloud-on-mist and white-on-mist. It now carries light-surface colours by
   default, and the Base treatment is restored only where it actually sits on
   Base. */
.notfit{background:var(--white);border:1px solid var(--cloud)}
.notfit h3{color:var(--base)}
.notfit p{color:var(--ink)}
.notfit__list li{color:var(--base)}
.notfit__list li::before{background:var(--steel)}
.surface-base .notfit{border:1px solid rgba(216,226,232,0.30);
  background:rgba(216,226,232,0.08)}
.surface-base .notfit h3{color:var(--white)}
.surface-base .notfit p{color:var(--cloud)}
.surface-base .notfit__list li{color:var(--white)}
.surface-base .notfit__list li::before{background:var(--cloud)}

/* A Mist panel on a Mist section is the same colour as the section, leaving
   only a hairline border to carry the distinction. White reads as raised, which
   is how .card already behaves on the same background. */
.surface-mist .panel{background:var(--white)}

/* Stack rhythm for components that zero their own margin.
   .ticks, .dashes, .steps, .notfit__list and figure.proof-shot all declare
   margin:0 to drop the browser default. Inside a .stack the rhythm comes from
   .stack > * + *, and both selectors are (0,1,0), so the component rule wins on
   source order and the gap collapsed to zero. A heading sat directly on its
   list, and the homepage portal screenshot sat flush against the cards above
   it. Restate the rhythm at higher specificity, per stack variant. */
.stack>.ticks:not(:first-child),.stack>.dashes:not(:first-child),
.stack>.steps:not(:first-child),.stack>.notfit__list:not(:first-child),
.stack>figure:not(:first-child){margin-top:var(--sp-4)}
.stack-6>.ticks:not(:first-child),.stack-6>.dashes:not(:first-child),
.stack-6>.steps:not(:first-child),.stack-6>.notfit__list:not(:first-child),
.stack-6>figure:not(:first-child){margin-top:var(--sp-6)}
.stack-8>.ticks:not(:first-child),.stack-8>.dashes:not(:first-child),
.stack-8>.steps:not(:first-child),.stack-8>.notfit__list:not(:first-child),
.stack-8>figure:not(:first-child){margin-top:var(--sp-8)}

/* Two Base sections in a row.
   The operating proof strip has to stay on Base, because the green figures are
   only legible there and the palette rule allows Green text on Base only. The
   closing action is also Base, so the page ended in one unbroken dark block
   with no seam between the proof and the ask. A hairline in Cloud at low alpha
   separates them, matching the border .notfit already uses on Base. */
.surface-base + .surface-base{border-top:1px solid rgba(216,226,232,0.18)}

/* Form controls do not inherit the document font. The estimator's number input
   already restated it; the fit check radios did not, so they fell back to the
   browser default. They render no text, but a control that reports Arial is an
   inconsistency waiting to show up the first time one does. */
.fitcheck input,.fitcheck button{font:inherit}