/* G.S.H shared stylesheet, based on rewrite-2026-10-15-hormozi/home-preview.html.
   The council funnel adds compact cards, sentence-case headings and a trade sample phone. */
/* ============================================================================
   WARM CREAM + GOLDEN GRADIENT.  Owner instruction, 2026-11-03: hypd's structure
   (stayhypd.com) rendered in The Future Studio's warm palette
   (thefuturestudio.online), with that site's cyan -> blue -> violet rainbow
   gradient replaced by a golden one, as instructed.

   Neutrals are Future Studio's own, read from its stylesheet: cream #FFF8F2,
   paper #FFFDF8, ink #151515, muted #5F6065, black #050505.

   GOLD IS A LIGHT HUE, so it cannot be used the way the navy it replaces was.
   Every rule below is MEASURED, not chosen; rewrite-2026-11-03-council/tokens/
   final_tokens.py asserts all 26 colour pairs at WCAG 2.1 AA and fails the set
   if one regresses.  The rules:
     1. A gold button takes an INK label, never white.  White on bright gold is
        1.67:1 and fails everywhere above bronze.  Ink on it is 9.86:1.
     2. --action (the button gradient) runs --gold-mid -> --gold-light ONLY.
        Including --gold-deep drops the ink label to 3.09:1 and fails AA, so the
        full-range gradient is decorative and the button gets its own.
     3. Gold as TEXT on the light ground is the DEEP stop only (5.82:1 on
        canvas).  Bright gold on paper is 1.76:1 - decoration, never text.
     4. The bright stops belong on the near-black bands, where gold measures
        11:1.  That is WHY the dark feature bands exist: they are the only
        place gold is allowed to actually look like gold.
     5. The focus ring is --gold-deep because it is the single gold clearing
        3:1 on canvas (5.82), band surface (5.34) AND the dark band (3.44).
   ============================================================================ */
:root{
  --canvas:#FFFDF8; --surface:#FAF2E8; --ink:#151515; --muted:#5F6065;
  --line:rgba(5,5,5,.14);
  /* UI boundaries need 3:1 (WCAG 1.4.11): 4.93:1 on canvas, 4.52:1 on surface */
  --field-line:#6E6F74;
  /* C13: --line is 1.37:1 and cannot be a UI boundary. It stayed fine while cards had a
     shadow; the 2026-11-03 layer deleted that shadow and made the border load-bearing, so
     the most repeated object on the site lost its edge. .45 measures 3.26:1 on canvas and
     3.21:1 on the band surface. --line stays at .14 for hairline RULES between rows. */
  --line-strong:rgba(5,5,5,.45);

  /* the golden gradient, four stops */
  --gold-deep:#8A5A0B; --gold-mid:#D97706; --gold:#F5B312; --gold-light:#FBD24A;
  /* DECORATIVE, full range. Never place text on this. */
  --gold-grad:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold-mid) 34%,var(--gold) 70%,var(--gold-light) 100%);
  /* BUTTON, starts at mid so an ink label clears AA at every stop (5.73 -> 12.54) */
  --gold-grad-btn:linear-gradient(135deg,var(--gold-mid) 0%,var(--gold) 58%,var(--gold-light) 100%);
  --gold-wash:linear-gradient(135deg,rgba(217,119,6,.10),rgba(251,210,74,.07));

  /* --brand carries structure AND text (color:var(--brand)), so it must hold
     4.5:1 on the light ground, which is why it is the deep stop. */
  --brand:var(--gold-deep); --accent:var(--brand); --on-accent:#FFFFFF;

  --foot-bg:#050505; --foot-ink:#FFF8F2; --foot-muted:#D4BC7A; --foot-line:rgba(255,255,255,.16);
  --action:var(--gold-grad-btn); --on-action:#151515;
  --action-hover:linear-gradient(135deg,#C46B05 0%,#DD9F0A 58%,#F0C132 100%);
  --band:var(--surface); --band-cite:#F3E2BC;
  /* The near-black feature band. Gold on cream tops out at 1.76:1 and a large gold field
     reads as a discount banner, so the band is near-black and the gold goes ON it, where
     it measures 11:1. Cream 19.37:1, citation gold 10.94:1, figure gold 11.01:1. */
  --band-dark:#050505; --band-dark-ink:#FFF8F2; --band-dark-cite:#D4BC7A; --band-dark-fig:#F5B312;
  --frame:#151515; --frame-edge:#151515; --shadow:rgba(80,52,8,.20);
  --demo-bg:#FFFDF8; --demo-ink:#151515; --demo-muted:#5F6065; --demo-line:rgba(5,5,5,.14); --demo-on-ink:#FFFDF8;

  /* Type: Future Studio's pairing. --display is the condensed face and is used
     ONLY on big headings, because condensed reads poorly at UI sizes; --sans
     (DM Sans) still does labels, buttons, h3 and h4. --serif keeps its legacy
     name - 9 call sites - but now holds the body sans, not a serif. */
  --display:"Barlow Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --sans:"DM Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --mark:#FBD24A; --error:#8C1D13;
  --h-weight:800; --h-weight-sec:600; --head-h:73px;
  /* Barlow Condensed is already narrow, so the deep negative tracking calibrated
     to Libre Franklin would collide. Near-neutral, opening up at UI sizes. */
  --tr-display:.005em; --tr-loud:.005em; --tr-head:0em; --tr-sub:0em; --tr-ui:.02em;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --col:680px; --wide:1040px;
  --fade:400ms; --slide:300ms;
  color-scheme:light;
}
:root[data-theme="dark"]{
  /* warm-neutral dark, so the cream identity survives the toggle */
  --canvas:#131210; --surface:#1C1A17; --ink:#F2EDE6; --muted:#A9A49C; --line:#332F2A;
  /* gold DOES read as text in dark mode (bright on canvas 10.11:1), so --brand
     moves up to the bright stop and --on-accent flips to ink. */
  --brand:var(--gold); --accent:var(--brand); --on-accent:#151515;
  --foot-bg:#0B0A09; --foot-ink:#F2EDE6; --foot-muted:#A9A49C; --foot-line:#332F2A;
  --action:var(--gold-grad-btn); --on-action:#151515;
  --action-hover:linear-gradient(135deg,#E5890A 0%,#F7C01E 58%,#FFDC5E 100%);
  --field-line:#8A857D;
  /* 3.43:1 on the dark canvas, 3.18:1 on the dark surface. */
  --line-strong:#706958;
  --band:var(--surface); --band-cite:#5A4A22;
  --band-dark:#050505; --band-dark-ink:#FFF8F2; --band-dark-cite:#D4BC7A; --band-dark-fig:#F5B312;
  --frame:#0B0A09; --frame-edge:#3A352F; --shadow:rgba(0,0,0,.6); --mark:#6E5C12; --error:#F2A097;
  color-scheme:dark;
}
@media (prefers-reduced-motion: reduce){:root{--fade:0ms; --slide:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 18px/1.6 var(--serif);font-optical-sizing:auto;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--sans);font-weight:var(--h-weight-sec);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:var(--tr-head)}
/* MUST stay AFTER the h1,h2,h3,h4 rule above: equal specificity, so source order
   decides. Placed before it, --sans won and the display face never loaded at all. */
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:var(--tr-display);text-transform:none}
h1{font-weight:800}
/* one weight for h1-h4 flattens the hierarchy; display stays 800, section heads drop to 600,
   which also costs no extra font file (600 and 800 are both already loaded). */
h1{font-weight:var(--h-weight);letter-spacing:var(--tr-display)}
h3,h4{letter-spacing:var(--tr-sub)}
p{margin:0}
/* the serif loads 400 and 600 only; without this, UA bold asks for 700 and the browser
   either substitutes or synthesises it. */
strong,b{font-weight:600}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* a ring the colour of the ground it lands on is a 1:1 ring (the C7 bug). Inside the navy
   band the ring goes white: both directions measure 17.13:1. */
.research-band :focus-visible{outline-color:var(--band-dark-fig)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wide{max-width:var(--wide);margin:0 auto;padding-inline:var(--s3)}
.col{max-width:var(--col)}
section{padding-block:var(--s6)}
@media (max-width:720px){section{padding-block:var(--s5)} .wide{padding-inline:var(--s2)}}
.surface{background:var(--surface)}
/* Two surface sections in a row have no boundary between them, so they merge into one
   continuous field. Council C14 measured that happening to #packages and the a la carte
   picker: 1,933px at 1280 and 3,146px at 390 reading as a single section, which blurs the
   two commercial blocks into each other. A hairline seam separates them without introducing
   a third background tone. */
.surface + .surface{border-top:1px solid var(--line-strong)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;padding:12px var(--s3);border-radius:6px;border:1px solid transparent;font:600 17px/1.2 var(--sans);letter-spacing:var(--tr-ui);text-decoration:none;cursor:pointer;text-align:center}
/* D-13: one primary button spec everywhere (header keeps its compact .btn-sm size) */
/* The gold fill sits only ~1.4:1 against the cream canvas, so WITHOUT this border the
   button's SHAPE fails WCAG 1.4.11 (3:1 for non-text UI boundaries) even though its ink
   LABEL passes at 5.73-12.54:1. The ink border is 17.96:1 on canvas and costs no layout
   change, because .btn already reserves 1px for a transparent border. */
.btn-primary{background:var(--action);color:var(--on-action);border-color:var(--ink);min-height:56px;padding:14px 28px;font-size:18px;font-weight:800}
.btn-primary.btn-sm{min-height:44px;padding:10px var(--s2);font-size:15px}
@media (max-width:720px){.btn-primary{width:100%}}
.btn-primary:hover{background:var(--action-hover)}
.btn-line{background:var(--canvas);color:var(--ink);border-color:var(--ink)}
.btn-sm{min-height:40px;padding:8px var(--s2);font-size:15px}
.textlink{font:600 17px/1.4 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.textlink:hover{text-decoration-thickness:2px}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 1. header */
.site-head{border-bottom:1px solid var(--line);background:var(--canvas)}
@media (min-width:721px){
  .site-head{position:sticky;top:0;z-index:20;background:var(--canvas)}
  #book,#book-call,#times-panel{scroll-margin-top:var(--head-h)}
}
.site-head .wide{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:72px}
.wordmark{font:800 20px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;color:var(--ink);gap:10px}
/* The monogram is painted with the wordmark's own text color (a mask, like the signature),
   so it follows light and dark mode exactly as the company name does. */
.wordmark .logo{display:inline-block;width:28px;height:28px;flex:none;background:url(/assets/logo.png) center/contain no-repeat}
@supports ((mask-repeat:no-repeat) or (-webkit-mask-repeat:no-repeat)){
.wordmark .logo{background:currentColor;-webkit-mask:url(/assets/logo.png) center/contain no-repeat;mask:url(/assets/logo.png) center/contain no-repeat}
}
.head-right{display:flex;align-items:center;gap:var(--s3)}
.head-phone{display:inline-flex;align-items:center;gap:var(--s1);font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap;min-height:44px}
@media (max-width:720px){.head-book{display:none}}

/* 2. intro (split) */
.intro{padding-block:var(--s5) var(--s6)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s5);align-items:center}
.intro-copy{display:grid;gap:var(--s3);justify-items:start}
.kicker{font:600 16px/1.3 var(--sans);color:var(--muted)}
.intro h1{font-size:clamp(46px,6.4vw,82px);line-height:.96;letter-spacing:var(--tr-display)}
.intro .sub{font-size:21px;line-height:1.5;max-width:30em}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s1)}
.risk{font-size:16px;color:var(--muted);max-width:34em}
@media (max-width:860px){
  .intro-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .intro{padding-block:var(--s4) var(--s5)}
}
@media (max-width:720px){.intro .sub{font-size:19px}}

/* phone mockup */
.mock{display:grid;justify-items:center;gap:var(--s2)}
.device-wrap{width:100%;display:flex;justify-content:center}
.device{width:300px;height:612px;padding:10px;border-radius:34px;background:var(--frame);box-shadow:0 0 0 1px var(--frame-edge),0 30px 60px -24px var(--shadow);flex:none}
.screen{position:relative;height:100%;border-radius:25px;overflow:hidden;background:var(--demo-bg);color:var(--demo-ink)}
.status{position:absolute;inset:0 0 auto;height:34px;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:600 13px/1 var(--sans);color:var(--demo-ink);background:var(--demo-bg)}
.status .batt{width:22px;height:11px;border:1.5px solid var(--demo-ink);border-radius:3px;position:relative}
.status .batt::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:var(--demo-ink);border-radius:1px}
.status .notch{position:absolute;left:50%;top:8px;width:84px;height:20px;margin-left:-42px;border-radius:10px;background:var(--frame)}
.demo-stack{position:absolute;inset:34px 0 0}
.demo{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--fade) ease,visibility 0s linear var(--fade);display:flex;flex-direction:column;background:var(--demo-bg)}
.demo.is-on{opacity:1;visibility:visible;transition:opacity var(--fade) ease,visibility 0s}
.demo-nav{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font:800 12px/1.2 var(--sans);border-bottom:1px solid var(--demo-line)}
.demo-nav span:last-child{font-weight:600;color:var(--demo-muted)}
.demo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.demo-body{padding:14px 16px 16px;display:grid;gap:8px}
.demo-name{font:800 20px/1.15 var(--sans);letter-spacing:-.01em}
.demo-trade{font:600 12px/1.3 var(--sans);color:var(--demo-muted)}
.demo-promise{font:400 14px/1.45 var(--serif)}
.demo-btn{display:block;text-align:center;background:var(--demo-ink);color:var(--demo-on-ink);font:600 13px/1 var(--sans);padding:12px;border-radius:6px;margin-top:2px}
.demo-list{list-style:none;padding:0;margin:4px 0 0;font:400 13px/1.3 var(--serif)}
.demo-list li{padding:7px 0;border-top:1px solid var(--demo-line)}
.mock-foot{display:flex;align-items:flex-start;gap:var(--s2);max-width:340px}
.mock-cap{font:italic 400 16px/1.5 var(--serif);color:var(--muted)}
.icon-btn{width:44px;height:44px;flex:none;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--canvas);color:var(--ink);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--ink)}
@media (max-width:860px){
  .device-wrap{height:300px;overflow:hidden;align-items:flex-start;border-bottom:1px solid var(--line)}
  .device{width:276px;height:560px}
}

/* restored hero (2026-10-15): loud headline, highlight, photo slideshow + phone */
/* the single memorable emphasis move: one marked phrase per page, in the headline, nowhere
   else. The gradient leaves the ink at #101828, so marking costs nothing in contrast
   (13.9:1 on #FFE36B). */
mark{background:var(--gold-grad);background-repeat:no-repeat;background-position:0 92%;
  background-size:100% .14em;color:inherit;padding:0 .02em;border-radius:1px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* C8: the boxed eyebrow was already overridden further down; the dead rule is gone and
   tracking no longer stretches lowercase, which costs word-shape recognition. */
.eyebrow{font:600 15px/1.3 var(--sans);color:var(--muted)}
/* The `font:` shorthand resets font-family, so the display face has to be named HERE;
   setting it on h1 alone was silently overridden. Size is up from clamp(38,5.1vw,64)
   because Barlow Condensed is much narrower - at the old size it read smaller, not
   louder. Re-verified for horizontal overflow at 320/360/374/390/420/480. */
.h-loud,.intro .h-loud{font:800 clamp(42px,5.9vw,72px)/0.98 var(--display);text-transform:none;letter-spacing:var(--tr-display)}
/* a left rule reads as a pull-quote -- it tells the eye it may skip, the opposite of a
   subheadline's job. */
.sub-box{padding:6px 0}
.sub b,.risk b{color:var(--ink);font-weight:600}
.btn-big{min-height:56px;padding:14px 28px;font-size:18px;font-weight:800}
.hero-photos{margin:0;position:relative;display:block;aspect-ratio:4/5;width:100%;border-radius:6px;overflow:visible}
.photo-stack{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:var(--surface)}
.photo-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--fade) ease}
.photo-stack img.is-on{opacity:1}
.trade-chip{position:absolute;left:14px;top:14px;z-index:2;background:var(--canvas);color:var(--ink);font:800 13px/1 var(--sans);padding:9px 12px;border-radius:6px}
.phone-over{position:absolute;right:-14px;bottom:-26px;z-index:3;width:165px;height:337px}
.phone-over .device{transform:scale(.55);transform-origin:top left}
.rot-over{position:absolute;left:14px;bottom:14px;z-index:3}
.hero-photos .mock-cap{position:absolute;left:0;right:180px;top:calc(100% + 14px);font-size:15px}
/* pause: 36px translucent circle inside a 44px tap target */
.rot-over{border:0;background:transparent;border-radius:50%}
.rot-over::before{content:"";position:absolute;inset:4px;border-radius:50%;background:color-mix(in srgb,var(--canvas) 72%,transparent);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rot-over:hover::before{background:color-mix(in srgb,var(--canvas) 92%,transparent)}
.rot-over .icon{position:relative;width:18px;height:18px}
@media (min-width:861px){.phone-over{right:0}}
@media (max-width:860px){
  .hero-photos{aspect-ratio:4/3.3;margin-bottom:64px}
  .phone-over{width:132px;height:270px;right:8px;bottom:-30px}
  .phone-over .device{transform:scale(.44)}
  .hero-photos .mock-cap{right:150px}
}
@media (max-width:560px){
  .hero-photos{margin-bottom:84px}
  .intro{padding-bottom:var(--s4)}
  .hero-photos .mock-cap{right:146px;font-size:14px;line-height:1.45}
}

/* 4. products slideshow */
.sec-head{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.sec-head h2{font-size:clamp(30px,3.6vw,42px)}
.sec-head p{color:var(--muted);font-size:19px}
.tabs{display:flex;gap:var(--s3);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:var(--s3);padding-inline:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs.fade{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
.tab{flex:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 0;min-height:48px;font:600 16px/1.2 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab:focus-visible{outline-offset:-2px}
.panel{position:relative;background:var(--surface);border-radius:6px;padding:var(--s3) 80px}
.panel-bar{display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
.count{font:600 14px/1 var(--sans);color:var(--muted);letter-spacing:.02em}
/* side arrows: translucent, centered on the panel's height */
.side-arrow{position:absolute;top:var(--arrow-y,50%);z-index:3;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;color:var(--ink);transform:translateY(-50%);
  background:rgba(255,255,255,.7);border:1px solid rgba(28,32,36,.14);
  background:color-mix(in srgb,var(--canvas) 70%,transparent);border-color:color-mix(in srgb,var(--ink) 14%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 6px color-mix(in srgb,var(--ink) 8%,transparent);
  transition:background-color .15s ease,border-color .15s ease}
.side-arrow:hover{background:color-mix(in srgb,var(--canvas) 92%,transparent);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.side-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side-arrow .icon{width:20px;height:20px;stroke-width:1.5}
.side-arrow.prev{left:18px}
.side-arrow.next{right:18px}
.stage{display:grid;touch-action:pan-y}
.slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s4);align-items:start;opacity:0;visibility:hidden;transform:translateX(var(--from,24px));transition:opacity var(--slide) ease,transform var(--slide) ease,visibility 0s linear var(--slide)}
.slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity var(--slide) ease,transform var(--slide) ease,visibility 0s}
.slide h3{font-size:clamp(26px,2.8vw,32px);line-height:1.15;margin-bottom:var(--s3)}
.ledger{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.ledger div{padding:var(--s2) var(--s3) 0 0;font-size:17px;line-height:1.5}
.ledger div+div{padding:var(--s2) 0 0 var(--s3);border-left:1px solid var(--line)}
.ledger dt{font:600 14px/1.3 var(--sans);color:var(--muted);margin-bottom:6px}
.ledger dd{margin:0}
.ledger .today dd{font-style:italic;color:var(--muted)}
.ledger .us dd{font-weight:600}
.research{margin-top:var(--s3);font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){
  .panel{padding:var(--s2) 52px var(--s3)}
  .side-arrow.prev{left:-12px}
  .side-arrow.next{right:-12px}
  .slide{grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:start;align-content:start}
}
@media (max-width:520px){
  /* phones: arrows overlap the panel edge a little; text keeps clear of them */
  .panel{padding:var(--s2) 32px var(--s3)}
}
@media (max-width:420px){
  .ledger{grid-template-columns:minmax(0,1fr)}
  .ledger div+div{border-left:0;border-top:1px solid var(--line);padding:var(--s2) 0 0;margin-top:var(--s2)}
}

/* mini sample site (slide 5) */
.mini{width:100%;max-width:360px;background:var(--demo-bg);color:var(--demo-ink);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mini img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mini .demo-body{padding:14px 16px 16px}
.mini-form{display:grid;gap:6px;margin-top:4px}
.mini-field{border:1px solid var(--demo-line);border-radius:6px;padding:8px 10px;font:400 13px/1.2 var(--sans);color:var(--demo-muted)}

/* calculator (inside the booking section) */
.calc-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s5);background:var(--surface);border-radius:6px;padding:var(--s4)}
.calc{display:grid;gap:var(--s2);align-content:start}
.calc label{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;gap:var(--s2);font:600 16px/1.35 var(--sans)}
.calc input{width:100%;min-height:56px;padding:8px 12px;border:1px solid var(--field-line);border-radius:6px;background:var(--canvas);color:var(--ink);font:600 24px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.calc input:hover,.calc select:hover{border-color:var(--muted)}
.calc label.trade{grid-template-columns:minmax(0,1fr)}
.calc select{width:100%;min-height:56px;padding:8px 12px;border:1px solid var(--field-line);border-radius:6px;background:var(--canvas);color:var(--ink);font:600 17px/1.2 var(--sans)}
.calc .avg{font:400 16px/1.45 var(--sans);color:var(--ink);background:var(--canvas);border:1px solid var(--field-line);border-radius:6px;padding:10px 14px}
.calc .avg b{font-weight:600}
.calc .avg small{color:var(--muted);font-size:14px}
.calc .jobgroup{display:grid;gap:6px}
.calc .hint{font:400 15px/1.4 var(--sans);color:var(--muted)}
.calc input[type=range]{min-height:44px;padding:0;border:0;background:transparent;accent-color:var(--accent);cursor:pointer;touch-action:pan-y}
.calc input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
.calc .slidergroup{display:grid;gap:2px}
.calc .rangerow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);font:600 16px/1.35 var(--sans)}
.calc .rangerow label{display:block}
.calc .rangerow output{font:600 20px/1 var(--sans);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.bigjobs{border-top:1px solid var(--line);padding-top:var(--s1)}
.bigjobs summary{display:list-item;min-height:44px;padding:10px 0;cursor:pointer;font:600 16px/1.4 var(--sans);border-radius:6px}
.bigjobs[open] summary{margin-bottom:var(--s1)}
.bigjobs .inner{display:grid;gap:var(--s2)}
.result .scenario{margin-top:var(--s1);font:600 17px/1.4 var(--sans);color:var(--ink)}
.result{display:grid;gap:var(--s1);align-content:start}
.result .unit{font:600 18px/1.35 var(--sans);color:var(--ink)}
.result .money{color:var(--accent)}
.result .big{font:var(--h-weight) clamp(60px,7.4vw,92px)/1 var(--sans);letter-spacing:-.02em}
.result .calc-cta{margin-top:var(--s2);justify-self:start}
.result .fine{margin-top:var(--s2);font:400 14px/1.5 var(--sans);color:var(--muted);max-width:34em}
.result .fine-more{font:400 14px/1.5 var(--sans);color:var(--muted);max-width:34em}
.fine-more summary{display:list-item;min-height:44px;padding:10px 0;line-height:24px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.fine-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fine-more p{margin-top:var(--s1)}
.result .state{font:600 14px/1.3 var(--sans);color:var(--muted);text-transform:none;letter-spacing:0}
.result{border-radius:6px;outline:2px solid transparent;outline-offset:8px}
.result.pulse{animation:pulse 400ms ease-out}
@keyframes pulse{from{outline-color:var(--accent)}to{outline-color:transparent}}
@media (prefers-reduced-motion: reduce){.result.pulse{animation:none}}
.calc .live{display:none}
@media (max-width:860px){.calc-card{grid-template-columns:minmax(0,1fr);padding:var(--s3)} .result .calc-cta{justify-self:stretch} .calc .live{display:block;margin-top:-6px;font:600 16px/1.4 var(--sans);color:var(--accent)} .calc .live .ex{color:var(--muted)}}
@media (max-width:420px){.calc-card{padding:var(--s3) var(--s2)} .calc label{grid-template-columns:minmax(0,1fr) 112px}}

/* 5. how it works — sticky stacked cards. Each step is a full card that pins
   below the header while you scroll; the next card slides up and covers it,
   leaving an 18px "deck" edge of each earlier card peeking out at the top.
   Pure position:sticky, so with no sticky support it falls back to a plain
   list of cards, and there is no animation for reduced-motion to disable. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);max-width:none;--stack-top:calc(var(--head-h) + 20px);--peek:18px}
.step{position:sticky;top:var(--stack-top);display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);align-content:center;min-height:min(420px,58vh);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:var(--s4) var(--s5);box-shadow:0 24px 48px -32px var(--shadow)}
.step>div,.step>p{max-width:30em}
.step:nth-child(2){top:calc(var(--stack-top) + var(--peek))}
.step:nth-child(3){top:calc(var(--stack-top) + var(--peek)*2)}
.step:nth-child(4){top:calc(var(--stack-top) + var(--peek)*3)}
.num{font:800 64px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-head);color:var(--brand);text-align:center}
.step h3{font-size:clamp(24px,2.4vw,28px);margin:6px 0 var(--s1)}
.step p{font-size:18px}
.yourpart{margin-top:var(--s1);font:600 15px/1.4 var(--sans);color:var(--muted)}
.closing{margin-top:var(--s5);font:600 clamp(24px,2.6vw,30px)/1.3 var(--serif)}
.after-steps{display:grid;gap:var(--s2);justify-items:start;margin-top:var(--s4)}
@media (max-width:720px){
  .steps{gap:var(--s3);--stack-top:12px;--peek:12px}
  .step{grid-template-columns:48px minmax(0,1fr);gap:var(--s2);padding:var(--s3);min-height:min(360px,55vh)}
  .num{font-size:44px}
  .after-steps{margin-top:var(--s3)}
}
/* A card must never be taller than the space it pins into: on short or zoomed viewports,
   and whenever motion is reduced, the deck falls back to a plain list. */
@media (max-height:640px),(prefers-reduced-motion:reduce){.step{position:static;min-height:0}}

/* 3. promise letter (mission, directly under the hero) */
.letter h2{font:800 13px/1 var(--sans);text-transform:none;letter-spacing:var(--tr-ui);color:var(--muted);margin-bottom:var(--s3)}
.letter .col{max-width:36em}
.promise-top{background:var(--canvas);padding-block:0 var(--s5)}
/* This is the page's single same-ground section boundary (D6). A --line hairline measures
   1.27:1 on canvas, so the two sections read as one; --field-line is 3.32:1 and reads as a
   deliberate divider without becoming a bar. */
.promise-top .wide>.col{border-top:1px solid var(--field-line);padding-top:var(--s5);max-width:680px}
@media (max-width:720px){.promise-top{padding-block:0 var(--s4)} .promise-top .wide>.col{padding-top:var(--s4)}}
.letter p{font-size:clamp(21px,2.3vw,26px);line-height:1.5;margin-bottom:var(--s2);text-align:left}
.letter p:last-of-type{font-weight:600;margin-bottom:0}
@media (max-width:720px){.letter p{margin-bottom:12px}}
.sig{width:180px;aspect-ratio:672/347;margin-top:var(--s3);background:var(--ink);-webkit-mask:url("../photos/greg-signature-black.png") center/contain no-repeat;mask:url("../photos/greg-signature-black.png") center/contain no-repeat}
@media (min-width:721px){.letter .sig{width:220px}}

/* 7. book */
.book h2{font-size:clamp(30px,3.6vw,42px);margin-bottom:var(--s2)}
.book .book-sub{font-size:19px;color:var(--muted);margin-bottom:var(--s4);max-width:36em}
/* One step since 2026-10-27: Google's appointment schedule is the whole form, so the
   fields, the step indicator and their error states are gone rather than left behind. */
.book-form-wrap{margin-top:var(--s5);scroll-margin-top:var(--s3)}
.book-form-wrap .hint{font:400 16px/1.5 var(--sans);color:var(--muted);margin:0}
.nopitch{font:italic 400 15px/1.45 var(--serif);color:var(--muted);margin:0}

/* 8. footer */
.site-foot{border-top:1px solid var(--line);padding-block:var(--s4)}
.site-foot .wide{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);justify-content:space-between;font:400 15px/1.5 var(--sans);color:var(--muted)}
.site-foot b{color:var(--ink);font-weight:600}

/* 9. phone bar */
.phonebar{display:none}
@media (max-width:720px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .phonebar{transition:transform 200ms ease;display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--canvas);border-top:1px solid var(--line);padding:10px var(--s2) calc(10px + env(safe-area-inset-bottom))}
  .phonebar .btn{min-height:56px;padding-inline:8px;font-size:17px;font-weight:800}
  .phonebar.is-hidden{transform:translateY(110%)}
}
@media (prefers-reduced-motion: reduce){.phonebar{transition:none}}

/* ===== niche build additions (2026-10-16): header nav, theme toggle, trade pages, cards ===== */
.skip{position:absolute;left:var(--s2);top:-80px;z-index:50;background:var(--canvas);color:var(--ink);padding:12px 16px;border:2px solid var(--accent);border-radius:6px;font:600 16px/1 var(--sans)}
.skip:focus{top:var(--s2)}
.head-nav{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap}
.head-nav:hover{text-decoration:underline;text-underline-offset:4px}
.head-nav[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
/* Minimal theme switch, right corner of the header (council C3, 2026-10-20) */
/* Sun and moon flank the switch (2026-10-21) and say which way is which. They are
   decorative: the button keeps its label and the knob position still carries the state, so
   nothing is lost if the icons do not render. */
.theme-btn{flex:none;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;padding:0 4px;cursor:pointer}
.theme-btn .t-icon{flex:none;color:var(--muted);transition:color .15s ease}
.theme-btn[aria-checked="false"] .t-sun,.theme-btn[aria-checked="true"] .t-moon{color:var(--ink)}
.theme-btn .track{width:34px;height:18px;border-radius:999px;background:var(--field-line);position:relative;transition:background .15s ease}
.theme-btn .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--canvas);border:1px solid var(--field-line);box-sizing:border-box;transition:transform var(--slide) ease}
.theme-btn:hover .track{background:var(--muted)}
.theme-btn[aria-checked="true"] .track{background:var(--ink)}
.theme-btn[aria-checked="true"] .track::after{transform:translateX(16px)}
/* Research strip under the hero: the accent-blue statement band (council C4) */
.research-band{background:var(--band-dark);color:var(--band-dark-ink);padding-block:var(--s4);border-block:3px solid transparent;border-image:var(--gold-grad) 1;border-left:0;border-right:0}
/* one label component: muted on canvas, and the band repaints it for the navy ground */
.research-label{font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.research-band .research-label{color:var(--band-dark-cite)}
/* Four approved figures since 2026-11-03, laid out as an editorial grid. The owner asked
   for the pasted directive's "data vault" stat grid; its own four numbers could not ship
   (two are REJECTED in approved-stats.json, one misattributes a vendor study to Harvard
   Business Review, one is invented), so the LOOK comes from the directive and every FIGURE
   comes from the registry. A gold rule over each figure gives the editorial read without
   boxing them -- boxes on the near-black band read heavy, and the bundled anti-slop
   reference warns against cards-for-everything. */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) var(--s4)}
/* Flex column with the citation pushed to the bottom, so every source in a row sits on one
   line. The facts wrap to 3 or 4 lines depending on length, and council C14 found that left
   one citation hanging a line above the others, which reads as a mistake rather than a rhythm. */
.facts .fact{padding-top:14px;border-style:solid;border-width:2px 0 0;border-color:transparent;
  border-image:var(--gold-grad) 1;display:flex;flex-direction:column}
.facts .research{margin:0;font-size:16px;line-height:1.5;color:var(--band-dark-ink)}
/* No colour here: .research-band cite (same specificity, later in the file) always wins, so a
   colour on this rule is dead. Council C14 found the dead value was --band-cite, which is
   #5A4A22 on the band's #050505 in dark -- about 2.3:1 -- so if the winning rule were ever
   removed this line would quietly fail AA instead of falling back safely. */
.facts cite{display:block;margin-top:auto;padding-top:6px;font-style:normal;font-size:13px}
/* Two up rather than one from 1040px down, including phones: measured at 390px the columns
   are 167px and about 20.7ch, which council C14 rendered and judged legible, not cramped.
   NOTE: the home page has NO height budget -- qa_niche.py's 8,700px check is trade-pages-only
   (measured /industries/hvac/ 8,609, / 14,696). An earlier version of this comment cited that
   budget as if it governed the home page; it does not. The 2x2 is here for line length and to
   keep the fourth figure cheap, not to satisfy a check. */
@media (max-width:1040px){.facts{grid-template-columns:repeat(2,1fr)}}
/* One column on phones. The build before this one had `@media (max-width:860px){.facts{
   grid-template-columns:1fr}}` and the 4-up grid REMOVED it rather than deciding against it --
   council C14 caught that and measured the result: 152px columns at 360px and 167px at 390px,
   about 20 characters, four lines per figure, which reads as four newspaper columns directly
   under the hero. Nothing objected because it does not overflow. Going back to one column costs
   roughly 140px on a page that is already 14,696px and has no budget, so the trade is not close. */
@media (max-width:620px){.facts{grid-template-columns:1fr;gap:var(--s3)}}
@media (max-width:560px){.facts .research{font-size:15px}.facts cite{font-size:12px}}
/* The answers band under it: a light tint of the same blue, with the answers as cards */
.straight-answers{background:var(--surface)}
.straight-answers .answers>li{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
/* The on-page calendar (step 2) */
.calendar-inline{margin-block:var(--s2);position:relative}
.calendar-inline::before{content:"Loading the calendar…";position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:600 16px/1.4 var(--sans);color:var(--muted);background:var(--canvas);border:1px solid var(--line);border-radius:12px}
.calendar-inline.is-ready::before{display:none}
.calendar-inline iframe{display:block;position:relative;width:100%;height:620px;border:1px solid var(--line);border-radius:12px;background:#FFFFFF}
/* Measured against the real Google embed at 390px (2026-10-27): it stacks vertically on a
   phone, so 560px stopped at the weekday header and the prospect had to scroll inside the
   frame -- the one interaction this page exists to avoid. 1120px is where the month grid
   and the first time slots are both reachable by scrolling the page itself. */
@media (max-width:720px){.calendar-inline iframe{height:1120px}}
/* About (2026-10-21): the mission and one photograph, then the basics in two columns.
   Replaces the single 760px card, which left the right half of the page empty and read as
   five identical rows. Reference-grounded (Refero styles d2918a26 Look inc, 95233b5f
   DrawHistory): serif copy column beside one rectangular photograph, hairline/rule-topped
   blocks instead of a bordered box, no shadows, accent kept to the figure and the button. */
/* the page head already carries 64px beneath it; another 104px opened a hole above the mission */
.about-why{padding-block:var(--s4) var(--s6)}
.about-why-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s5);align-items:center}
.about-mission{display:grid;gap:var(--s3);max-width:34em}
.about-mission h2{font-size:clamp(28px,3.4vw,42px)}
.about-mission p{font-size:18px;line-height:1.6}
.about-mission .lede{font-size:clamp(19px,1.9vw,21px);line-height:1.55}
.about-mission .vow{font:600 clamp(20px,2.1vw,24px)/1.4 var(--sans);letter-spacing:var(--tr-sub)}
.about-mission .research-label{margin:var(--s2) 0 calc(-1 * var(--s2))}
.about-mission .after-stat{font-size:17px;color:var(--muted)}
.about-mission .after-stat a{color:var(--ink)}
/* one wide figure beside the line it belongs to, rather than the three-up research grid */
.about-stat{grid-template-columns:minmax(0,1fr)}
.about-stat .stat{grid-template-columns:auto minmax(0,1fr);gap:4px var(--s3);align-items:baseline}
.about-stat .fig{grid-row:1/span 2;align-self:center;font-size:clamp(40px,4.4vw,54px)}
.about-figure{margin:0;display:grid;gap:12px}
/* the source is a wide frame with the technician right of centre: hold him in the portrait crop */
.about-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% center;border-radius:6px;background:var(--surface)}
.about-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}
.about-grid>li{border-top:3px solid var(--ink);padding-top:var(--s2)}
.about-grid h3{font-size:21px;line-height:1.2;margin-bottom:var(--s1)}
.about-grid p{font-size:17px;line-height:1.55}
/* the rule runs the full grid width; only the words sit at a reading measure */
.about-contact{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);display:grid;justify-items:start;gap:var(--s1)}
.about-contact h3{font-size:21px}
.about-contact p{font-size:17px;line-height:1.55;max-width:var(--col)}
.about-contact .btn{margin-top:var(--s2)}
@media (max-width:860px){
  .about-why-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  /* on a phone the photograph comes first, so the page opens on something to look at */
  .about-figure{order:-1}
  .about-figure img{aspect-ratio:4/3}
  .about-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
.head-phone .hp-short{display:none}
@media (max-width:720px){.head-phone .hp-num{display:none}.head-phone .hp-short{display:inline}.head-right{gap:var(--s1)}}
@media (max-width:374px){.wordmark{font-size:18px}}
/* DM Sans sets wider than the Libre Franklin it replaced, and the header must fit
   BEFORE the webfont loads (the fallback is wider still), so the narrow-width header
   is tightened on measurement: at 360px it was overflowing the viewport by 7px.
   Every 44px touch target is preserved - only gaps, inline padding and the toggle's
   internal spacing give way. Verified at 320/360/390/420. */
@media (max-width:420px){
  .head-right{gap:4px}
  .head-nav{padding-inline:2px;font-size:15px}
  .theme-btn{padding:0 2px;gap:3px}
  .theme-btn .track{width:30px}
  .theme-btn[aria-checked="true"] .track::after{transform:translateX(12px)}
  .wordmark{font-size:18px}
}

/* trade + hub heroes */
.h-trade,.intro .h-trade{font:800 clamp(38px,5.1vw,62px)/1.0 var(--display);text-transform:none;letter-spacing:var(--tr-display)}
.crumb{font:600 15px/1.3 var(--sans);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.intro-copy .crumb{margin-bottom:calc(-1 * var(--s2))}
.seat{font:600 17px/1.4 var(--sans)}
.hero-photos.solo{aspect-ratio:4/5}
@media (max-width:860px){.hero-photos.solo{aspect-ratio:4/3;margin-bottom:0}}
.page-head{padding-block:var(--s5)}

/* who we serve */
.trade-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:860px){.trade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}}
.trade-tile{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);background:var(--canvas);border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}
.trade-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface)}
.trade-tile .tt-name{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:52px;padding:12px 14px;font:800 18px/1.2 var(--sans)}
.trade-tile .tt-name .icon{width:18px;height:18px;color:var(--accent)}
.trade-tile .tt-line{padding:0 14px 16px;font:400 16px/1.45 var(--serif);color:var(--muted);margin-top:-6px}
.trade-tile:hover{border-color:var(--ink)}
.trade-tile:hover .tt-name{color:var(--accent)}
@media (max-width:520px){.trade-tile .tt-name{font-size:16px;padding:10px 12px}.trade-tile .tt-line{display:none}}
.seat-faq{margin-top:var(--s4);font-size:18px}
.seat-faq .seat-q{font:800 19px/1.35 var(--sans);margin-bottom:4px}
.hub-grid{margin-bottom:var(--s4)}

/* sound familiar */
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:var(--s3)}
.pain{border-top:3px solid var(--ink);padding-top:var(--s2)}
.pain h3{font-size:21px;line-height:1.2;margin-bottom:var(--s1)}
.pain p{font-size:17px;line-height:1.45;margin:4px 0 0}

/* research cards */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:var(--s3)}
.stat{display:grid;gap:var(--s1);align-content:start;background:var(--surface);border-radius:6px;padding:var(--s3)}
.stat .fig{font:800 clamp(44px,5vw,60px)/1 var(--sans);letter-spacing:-.02em;color:var(--accent)}
.stat p{font-size:17px;line-height:1.5}
.stat cite{font:600 14px/1.4 var(--sans);font-style:normal;color:var(--muted)}

/* package cards */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.card{display:flex;flex-direction:column;gap:var(--s2);background:var(--canvas);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:12px;padding:var(--s3)}
.card h3{font-size:24px;line-height:1.15}
.trade-grid + h3{margin-block:var(--s4) var(--s2)}
.card .for{font:italic 400 17px/1.5 var(--serif);color:var(--muted)}
.plan-cta{margin-top:auto}
/* What each plan includes, on the card face (decided 2026-10-27): a client has to be able to
   see the two plans without opening anything. The list keeps the .outcomes class it was
   built on so the check mark and spacing stay identical. */
.inc-h{font:700 14px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0}
.outcomes{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:600 16px/1.45 var(--sans)}
.outcomes li{display:flex;gap:10px;align-items:flex-start}
.outcomes .chk{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.card .ex{font-size:16px;line-height:1.5;background:var(--surface);border-radius:6px;padding:12px 14px}
.card .note{margin-top:auto;font:400 14px/1.45 var(--sans);color:var(--muted)}

/* FAQ */
.faq{max-width:var(--col);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:56px;padding:14px 0;cursor:pointer;list-style:none;font:600 18px/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 28px/1 var(--sans);color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 var(--s3);font-size:18px;max-width:36em}

/* trade page ending: promise after a grey band, then the form */
.promise-top.after-band{padding-top:var(--s5)}
.promise-top.after-band .wide>.col{border-top:0;padding-top:0}
.book-end{padding-top:0}
.book-form-wrap.solo{margin-top:0}

/* footer trade links */
.site-foot .foot-trades{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 var(--s3);margin-top:var(--s2);font:400 15px/1.4 var(--sans)}
.foot-trades a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--muted)}
.foot-trades a:hover{color:var(--ink)}
/* tap targets: the wordmark and footer email reach 44px without changing how they look */
.wordmark{display:inline-flex;align-items:center;min-height:44px}
.site-foot .wide>a{display:inline-flex;align-items:center;min-height:44px}

/* Council funnel: short copy, native disclosures, a labeled sample. */
.trade-hero .intro-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.trade-hero .intro-copy{gap:20px}
.gift{font:600 18px/1.4 var(--sans)}
.trade-sample{margin:0;min-width:0;gap:12px}
.trade-sample .device-wrap{height:auto;overflow:visible;border:0}
.trade-sample .demo-nav{gap:8px}
.trade-sample .demo-nav span:first-child{min-width:0;overflow-wrap:anywhere}
.trade-sample .demo-nav span:last-child{flex:none}
.trade-sample .device{width:280px;height:500px}
.trade-sample .demo{inset:34px 0 0}
.trade-sample .demo img{aspect-ratio:16/9}
.trade-sample .demo .sample-work{height:80px;aspect-ratio:auto;object-fit:cover}
.trade-sample .demo-body{padding:12px 14px;gap:6px}
.trade-sample .demo-list{display:flex;flex-wrap:wrap;gap:8px}
.trade-sample .demo-list li{padding:4px 0}
.trade-sample .mock-cap{max-width:32ch;text-align:center;font:400 14px/1.45 var(--sans)}
.straight-answers{padding-block:32px;border-block:1px solid var(--line)}
.answers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.answers h3{font-size:19px;margin-bottom:8px}
.answers p{font-size:17px;line-height:1.5}
.pains{grid-template-columns:repeat(3,minmax(0,1fr))}
.pain h3{font:600 19px/1.4 var(--sans);margin:0;text-wrap:pretty}
.pain .pain-research{font-size:16px;line-height:1.5;margin-top:12px;color:var(--muted)}
.pain-research cite{display:block;font:400 14px/1.4 var(--sans);margin-top:4px}
.section-permission{font:400 16px/1.5 var(--sans);color:var(--muted);margin:0 0 24px;max-width:60ch}
.card{gap:10px}
.card .for{font:400 17px/1.45 var(--serif)}
/* trade pages: same sticky stack, compact cards on the surface band.
   Phones keep these cards short so the page stays inside QA's 7200px height budget. */
.trade-how .step{background:var(--canvas);min-height:min(240px,42vh);padding:var(--s3) var(--s4)}
.trade-how .step p{font-size:18px;line-height:1.5;padding-top:4px}
.trade-how .num{font-size:40px}
@media (max-width:720px){
  .trade-how .steps{gap:var(--s2)}
  .trade-how .step{min-height:0;padding:var(--s2) var(--s3)}
}
.trade-hero~section{padding-block:48px}
.trade-hero~.straight-answers{padding-block:32px}
.trade-hero~.book-end{padding-top:48px}
.trade-grid>li:last-child:nth-child(3n + 2){grid-column:auto}
@media (max-width:860px){
  .trade-hero .intro-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pains{grid-template-columns:minmax(0,1fr)}
  .trade-sample .device{width:276px;height:496px}
  .trade-grid>li:last-child:nth-child(3n + 2){grid-column:auto}
  .trade-grid>li:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:720px){
  .cards,.answers,.pains{grid-template-columns:minmax(0,1fr)}
  .answers{gap:20px}
  .cards{gap:16px}
  .card{padding:20px}
  .card h3{font-size:22px}
  .trade-hero~section{padding-block:40px}
  .trade-hero~.straight-answers{padding-block:28px}
}

/* R2 chair: equal tiles, calm type, one control radius and aligned footer. */
.trade-grid>li:last-child:nth-child(3n + 2),
.trade-grid>li:last-child:nth-child(odd){grid-column:auto}
.trade-tile img{aspect-ratio:3/2}
/* C8: this rule switched the highlighter off site-wide. The marked phrase is the one
   emphasis device the page keeps, so the switch-off goes and the gradient rule stands. */
.site-foot .wide{align-items:center}
.pain{display:flex;flex-direction:column}
.pain .pain-research{margin-top:auto;padding-top:12px}
.card{border-top:1px solid var(--line);border-radius:12px}
.btn,.icon-btn,.theme-btn,.trade-tile,.calc input,.calc select{border-radius:6px}
.coming-note{margin-top:20px;font:400 16px/1.5 var(--sans);color:var(--muted)}
.trade-picker{display:flex;flex-wrap:wrap;gap:8px;font:600 14px/1.3 var(--sans)}
.trade-picker a{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;background:var(--surface);border-radius:6px;text-decoration:none}
.trade-picker a:hover{background:var(--line)}
.pain-context{max-width:680px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.pain-context .pain-research{font:400 16px/1.5 var(--sans);color:var(--muted)}
.policy-links{display:flex;align-items:center;gap:16px}
.policy-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}

/* The page ends on a deliberate band instead of trailing off into the canvas (owner's
   request, 2026-10-21). Measured on the light ground: white 17.13:1 and the muted tone
   9.65:1 on the navy; in dark mode the band goes deeper than the canvas, never lighter. */
.site-foot{background:var(--foot-bg);border-top:1px solid var(--foot-line);padding-block:var(--s5)}
.site-foot .wide{color:var(--foot-muted)}
.site-foot b,.site-foot .wide>a,.site-foot .policy-links a,.site-foot .foot-trades a{color:var(--foot-ink)}
.site-foot .wide>a,.site-foot .policy-links a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.site-foot .wide>a:hover,.site-foot .policy-links a:hover{text-decoration-thickness:2px}
.site-foot .foot-trades{color:var(--foot-muted)}
.book-form-wrap{display:grid;gap:16px;max-width:680px;padding:32px;border:1px solid var(--line);border-radius:12px;background:var(--canvas);scroll-margin-top:calc(var(--head-h) + 24px)}
.book-form-wrap h2{font-size:clamp(26px,3vw,34px);margin-bottom:0}
.book-intro{font-size:18px;margin:0}
#callback-note{padding-top:8px;border-top:1px solid var(--line)}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px}
.contact-actions .btn{min-height:48px;min-width:112px}
#pick-time{justify-self:start}
@media (max-width:720px){
  .book-form-wrap{padding:24px 20px;scroll-margin-top:24px}
}
.calculator-disclosure>summary{font:600 clamp(22px,3vw,30px)/1.3 var(--sans);min-height:56px;padding:12px 0;cursor:pointer}
.calculator-disclosure[open]>summary{margin-bottom:24px}
.calc-card .fine-more{grid-column:1/-1}
.phonebar{grid-template-columns:1fr}
.phonebar .btn{min-width:0;padding-inline:8px;font-size:15px}
.also-work{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.also-work h2{font-size:24px;margin-bottom:12px}
#c-source{display:inline-flex;align-items:center;min-height:44px;justify-self:start}
[hidden]{display:none!important}
@media (max-width:720px){
  .trade-hero .phone{max-width:260px;margin-inline:auto}
  .trade-hero{padding-bottom:calc(var(--s5) + 72px)}
  .trade-sample .device{width:260px;height:480px}
  .trade-sample{justify-self:center;width:100%;max-width:300px}
  .home-hero .intro-copy{gap:16px}
  .home-hero~section{padding-block:40px}
  .contact-actions{display:grid;grid-template-columns:1fr 1fr}
  .contact-actions .btn{font-size:16px;padding:12px 8px}
}
@media (max-width:520px){
  .trade-grid{grid-template-columns:1fr 1fr}
  .trade-tile img{aspect-ratio:1/1}
}

/* The band is the one place gold is allowed to be bright: 11:1 on near-black. */
.research-band .fact strong,.research-band .fact b{color:var(--band-dark-fig)}
.research-band cite{color:var(--band-dark-cite)}

/* ===========================================================================
   The three sections added 2026-11-03: the call rail, the responsibility
   table and the commitments. Reference-grounded rules applied here:
     - numbers are the credibility, so every figure is tabular-nums and the
       figures are left-aligned in one column where the eye can compare them;
     - gold appears only as an edge or a wash, never as a text colour on the
       light ground and never as a large field;
     - the rail is a ruled hairline with markers ON it, not four floating
       cards: a 4-across card row reads as four parallel options, which is
       exactly the misread a sequence must avoid.
   =========================================================================== */

/* --- what happens when a call comes in ----------------------------------- */
.rail{padding-block:var(--s5)}
.rail-sub{color:var(--muted);margin:var(--s1) 0 0}
.rail-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s3);margin:var(--s4) 0 0;padding:0;position:relative}
/* the hairline the markers sit on, drawn behind them at the marker's centre */
.rail-steps::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:1px;
  background:var(--line)}
/* the live moment - the call arriving - is the one segment carrying the gradient */
.rail-steps::after{content:"";position:absolute;left:14px;top:14px;height:3px;
  width:calc((100% - 28px) / 4);background:var(--gold-grad);border-radius:2px}
.rail-steps>li{position:relative;padding:0}
.rail-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--ink);color:var(--ink);
  font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.rail-steps>li:first-child .rail-n{background:var(--gold-light);color:var(--on-action)}
.rail-steps>li h3{margin:var(--s2) 0 6px;font:700 19px/1.25 var(--sans)}
.rail-steps>li p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:900px){
  .rail-steps{grid-template-columns:repeat(2,1fr);row-gap:var(--s4)}
  /* the rail must NOT wrap round the corner - it reads as a flowchart error */
  .rail-steps::before,.rail-steps::after{display:none}
}
@media (max-width:560px){
  .rail-steps{grid-template-columns:1fr;row-gap:var(--s3)}
  .rail-steps>li{display:grid;grid-template-columns:28px 1fr;column-gap:var(--s2);align-items:start}
  .rail-steps>li h3{grid-column:2;margin:0 0 4px}
  .rail-steps>li p{grid-column:2}
}

/* --- who handles the work ------------------------------------------------ */
.who{padding-block:var(--s5)}
.who-tbl{width:100%;border-collapse:collapse;margin-top:var(--s4);text-align:left}
.who-tbl th,.who-tbl td{padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--line);
  vertical-align:top;font-size:16px;line-height:1.5}
.who-tbl thead th{font:600 13px/1.3 var(--sans);letter-spacing:var(--tr-ui);
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);padding-bottom:10px}
/* the column that is us gets the gradient edge, so the eye lands there without colour text */
.who-tbl thead th:last-child{color:var(--ink);border-bottom:0;
  box-shadow:inset 0 -3px 0 0 transparent;background-image:var(--gold-grad);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px}
.who-tbl tbody th{font:600 16px/1.5 var(--sans);color:var(--ink);width:26%}
.who-tbl td{color:var(--muted);width:37%}
.who-tbl td:last-child{color:var(--ink)}
@media (max-width:720px){
  .who-tbl,.who-tbl tbody,.who-tbl tr,.who-tbl td,.who-tbl th{display:block;width:auto}
  .who-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .who-tbl tr{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
  .who-tbl tbody th{padding:0 0 6px;border:0}
  .who-tbl td{padding:0 0 4px;border:0}
  .who-tbl td::before{content:attr(data-label);display:block;font:600 12px/1.3 var(--sans);
    letter-spacing:var(--tr-ui);text-transform:uppercase;color:var(--muted);margin-bottom:2px}
}

/* --- what we commit to --------------------------------------------------- */
.commit{padding-block:var(--s5)}
.commit-list{list-style:none;margin:var(--s4) 0 var(--s3);padding:0;display:grid;gap:0}
.commit-list>li{display:grid;grid-template-columns:clamp(220px,24vw,310px) 1fr;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);align-items:baseline}
.commit-list>li:first-child{border-top:1px solid var(--line)}
.commit-fig{font:800 clamp(26px,2.5vw,34px)/1.05 var(--display);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-display);color:var(--ink);white-space:nowrap}
.commit-star{color:var(--brand)}
.commit-what{color:var(--ink);font-size:17px;line-height:1.55}
.commit-foot{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 6px;max-width:68ch}
@media (max-width:640px){
  .commit-list>li{grid-template-columns:1fr;gap:4px}
  .commit-fig{font-size:30px}
}

/* ===========================================================================
   DEPTH AND ATMOSPHERE (2026-11-03).
   hypd's polish comes from glow: a bright accent bleeding into near-black.
   Glow is a luminance effect, so it cannot survive on a warm light ground -
   on cream almost every usable colour is DARKER than the canvas, and a radial
   gold wash reads as a stain rather than light. The three things that do the
   same job in light mode, taken from real references:
     1. one full-bleed atmospheric wash, in the hero only;
     2. a multi-layer progressive shadow, where each layer is nearly invisible
        (0.8%-2% alpha) and the stack produces depth a single shadow cannot;
     3. a gold gradient hairline marking where sections begin.
   =========================================================================== */
:root{
  /* four stacked layers, increasing blur and offset, warmed towards the ground */
  --lift:0 2.6px 4px rgba(90,60,10,.010), 0 7.3px 11px rgba(90,60,10,.013),
         0 17.5px 26.5px rgba(90,60,10,.016), 0 58px 88px rgba(90,60,10,.022);
  --lift-hi:0 3px 5px rgba(90,60,10,.014), 0 9px 14px rgba(90,60,10,.018),
            0 22px 34px rgba(90,60,10,.022), 0 70px 104px rgba(90,60,10,.030);
}
:root[data-theme="dark"]{
  --lift:0 2.6px 4px rgba(0,0,0,.20), 0 7.3px 11px rgba(0,0,0,.22),
         0 17.5px 26.5px rgba(0,0,0,.24), 0 58px 88px rgba(0,0,0,.30);
  --lift-hi:var(--lift);
}

/* the hero's atmosphere: a single warm wash, nowhere else on the page */
.intro.home-hero{position:relative;isolation:isolate}
.intro.home-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(78% 68% at 12% 0%, rgba(251,210,74,.22), transparent 66%),
    radial-gradient(66% 58% at 94% -6%, rgba(217,119,6,.14), transparent 64%),
    radial-gradient(90% 70% at 62% 104%, rgba(138,90,11,.07), transparent 66%);
}
:root[data-theme="dark"] .intro.home-hero::before{
  background:
    radial-gradient(78% 68% at 12% 0%, rgba(245,179,18,.14), transparent 66%),
    radial-gradient(66% 58% at 94% -6%, rgba(217,119,6,.11), transparent 64%);
}

/* depth on the things that should sit above the page */
.card,.mock,.calc-card{box-shadow:var(--lift)}
.card{transition:box-shadow var(--slide) ease, transform var(--slide) ease}
.card:hover{box-shadow:var(--lift-hi);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.card,.card:hover{transition:none;transform:none}}

/* a gold hairline opening each section heading - the gradient as an edge, never a letterform */
.sec-head h2::after{content:"";display:block;width:88px;height:3px;border-radius:2px;
  margin-top:var(--s2);background:var(--gold-grad)}
.sec-head.col h2::after{margin-left:0}

/* the plan cards get the gradient along their top edge */
.cards .card{position:relative;overflow:hidden}
.cards .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gold-grad)}

/* the rail connector draws itself once on arrival; one coordinated moment per page */
@media (prefers-reduced-motion: no-preference){
  .rail-steps::after{animation:rail-draw 700ms cubic-bezier(.2,.8,.2,1) both}
  @keyframes rail-draw{from{width:0}to{width:calc((100% - 28px) / 4)}}
}

/* ===========================================================================
   HYPD-STRUCTURE LAYER (2026-11-03, round 2).
   The reference site's look comes from three structural moves, not its colours
   - which is why keeping our warm cream and gold loses nothing:

     1. LARGE-RADIUS FLAT SURFACES. Its panels are rounded-[28px] with a
        hairline border and a ~4.5% fill, and its cards are rounded-lg. Ours
        were 6px, which is the single biggest reason the page did not read
        like it. Depth comes from the border and the tint, NOT from shadow.
     2. ASYMMETRIC SECTION HEADERS. Heading left at ~0.85fr, the intro line
        right at ~1.15fr, bottom-aligned - far more editorial than a centred
        head, and it is what makes its sections feel designed rather than
        stacked.
     3. TIGHT CONDENSED DISPLAY. The matching reference sets its condensed
        display at line-height .90 and -0.03em. Ours sat at +0.005em, which
        is why the headline read wide and soft.
   =========================================================================== */

:root{
  --r-panel:28px;      /* feature panels and plan cards */
  --r-card:16px;       /* ordinary cards */
  --r-chip:999px;      /* chips, badges, the primary button */
  --tint:rgba(138,90,11,.045);   /* the ~4.5% fill, warmed to the ground */
  --tint-hi:rgba(138,90,11,.075);
}
:root[data-theme="dark"]{ --tint:rgba(251,210,74,.05); --tint-hi:rgba(251,210,74,.085); }

/* display type, tightened to the reference's measurements */
:root{ --tr-display:-.025em; --tr-loud:-.02em; }
.intro h1{line-height:.92}
.h-loud,.intro .h-loud{line-height:.92}

/* surfaces: flat, hairline, tinted - the shadow system steps back to almost nothing */
.card,.calc-card{border-radius:var(--r-panel);background:var(--tint);
  border:1px solid var(--line-strong);box-shadow:none}
.card:hover{box-shadow:none;background:var(--tint-hi);transform:none}
.mock{border-radius:var(--r-panel)}
.trade-tile{border-radius:var(--r-card)}

/* buttons become pills, which is the reference's most-used shape by far */
.btn,.icon-btn,.theme-btn{border-radius:var(--r-chip)}
.btn-primary{border-radius:var(--r-chip)}

/* asymmetric section header: heading left, intro right, bottom-aligned */
.sec-head.split{display:grid;gap:var(--s3) var(--s5);align-items:end;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.sec-head.split h2{margin:0}
.sec-head.split .sec-intro{color:var(--muted);font-size:18px;line-height:1.55;margin:0;max-width:52ch}
@media (max-width:860px){ .sec-head.split{grid-template-columns:1fr;align-items:start} }

/* the eyebrow above a section heading, as a chip */
.sec-chip{display:inline-block;padding:6px 14px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--tint);color:var(--muted);
  font:600 12px/1 var(--sans);letter-spacing:var(--tr-ui);text-transform:uppercase;
  margin-bottom:var(--s2)}

/* ---- the capability grid: what is actually inside the two plans ---- */
.caps{padding-block:var(--s5)}
.caps-grid{display:grid;gap:var(--s3);margin-top:var(--s4);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.cap{border:1px solid var(--line-strong);border-radius:var(--r-panel);background:var(--tint);
  padding:var(--s3);display:grid;gap:8px;align-content:start}
.cap .cap-tag{font:600 11px/1 var(--sans);letter-spacing:var(--tr-ui);
  text-transform:uppercase;color:var(--brand)}
.cap h3{font:700 19px/1.25 var(--sans);margin:0}
.cap p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:980px){ .caps-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .caps-grid{grid-template-columns:1fr} }

/* ---- the work-we-take-off marquee, on the near-black band ---- */
.offload{background:var(--band-dark);color:var(--band-dark-ink);padding-block:var(--s5);
  border-top:3px solid transparent;border-image:var(--gold-grad) 1;
  border-bottom:0;border-left:0;border-right:0;overflow:hidden}
.offload .sec-chip{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:var(--band-dark-cite)}
.offload h2{color:var(--band-dark-ink)}
.offload h2::after{background:var(--gold-grad)}
.marquee{margin-top:var(--s4);display:flex;gap:var(--s2);width:max-content;
  animation:marquee-run 46s linear infinite}
.marquee:hover,.marquee:focus-within{animation-play-state:paused}
.marquee-item{flex:none;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-chip);
  padding:11px 20px;font:500 15px/1 var(--sans);color:var(--band-dark-ink);white-space:nowrap}
@keyframes marquee-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee{animation:none;flex-wrap:wrap;width:auto}
  .marquee .dup{display:none}
}

/* --- the home trade picker (multi-trade only) --- */
/* Surface, not canvas. Council C14 measured the tail of the home page as four consecutive
   canvas sections running 3,969px at 1280 -- with the G.S.H Promise and the owner's signature
   stranded in the middle of that flat run. Tinting the trade picker breaks the run and gives
   the Promise an edge to sit against. Home-only section, so no other page changes.
   (The name is spelled around on purpose: the rule 53 asset guard greps this file for it.) */
.picker{padding-block:var(--s5);background:var(--surface)}
.trade-picker{margin-top:var(--s4)}
.trade-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.trade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  /* horizontal scroller on phones, grid from tablet up */
  .trade-grid{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .trade-grid>li{flex:0 0 72%;scroll-snap-align:start}
  .trade-grid::-webkit-scrollbar{height:6px}
  .trade-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  .trade-tile img{aspect-ratio:16/9}
}

/* --- a la carte list: hairline rows, no cards, so it reads as a menu not a pricing table --- */
.ala{padding-block:var(--s5)}
.ala-list{list-style:none;margin:var(--s4) 0 var(--s3);padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5)}
.ala-list>li{padding:var(--s3) 0;border-top:1px solid var(--line)}
.ala-list h3{margin:0 0 6px;font:700 18px/1.3 var(--sans)}
.ala-list p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.ala-foot{color:var(--muted);font-size:16px;margin:0}
.ala-foot a{color:var(--brand)}
@media (max-width:760px){.ala-list{grid-template-columns:1fr}}

/* --- the a la carte picker (2026-11-03) ------------------------------------
   The one piece of the pasted directive that broke no rule. It stores nothing and
   sends nothing: ticking an item only updates the count beside the button.
   The native box is 0x0 so qa_niche.py's 44px tap-target rule skips it (that check
   ignores zero-size elements and would otherwise fail a 24px checkbox); the whole
   label row is the real hit area and clears 44px comfortably. */
.ala-check{position:absolute;width:0;height:0;opacity:0;margin:0;padding:0;border:0}
.ala-item h3{margin:0 0 6px;font:700 18px/1.3 var(--sans)}
/* The label carries the drawn box, so the name and the control are one target. */
.ala-item h3 label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  cursor:pointer;min-height:44px;padding-block:4px}
.ala-item h3 label::before{content:"";width:24px;height:24px;border-radius:7px;
  border:2px solid var(--field-line);background:var(--canvas);box-sizing:border-box;
  transition:background var(--slide) ease,border-color var(--slide) ease}
/* Ink tick on the gold fill: the measured pair is 9.86:1, and white on gold is 1.67:1 and
   fails everywhere above bronze, so the mark is ink (token note, rule 1).
   The tick and the gradient are ONE layered background-image, smallest layer first. Council
   C14 found the first version wrote `background:var(--action) ...` and then `background-image:
   url(tick)` on the next line: --action IS a gradient, so it is a background-IMAGE, and the
   second declaration silently replaced it. Measured result -- fill rgba(...,0), border
   rgba(...,0), has_gradient false, and in dark mode an ink tick on the dark section at
   1.01:1, i.e. ticking a box produced no visible feedback whatever. Every picker assertion
   passed throughout, because none of them asserted a colour.
   The border stays --ink rather than transparent: the gold edge against cream measures
   1.31-2.87:1, so the box needs a definite edge in both themes, not just a fill. */
.ala-check:checked + .ala-body h3 label::before{border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23151515' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),var(--action);
  background-repeat:no-repeat,no-repeat;background-position:center,center;
  background-size:14px 14px,cover}
/* Matches the sitewide :focus-visible convention (line 118), moved onto the drawn box
   because the real input is zero-size and its own ring would be invisible. */
.ala-check:focus-visible + .ala-body h3 label::before{outline:2px solid var(--brand);outline-offset:3px}
/* Hover on the LABEL, not the row. Council C14: the row is wider than its 44px hit area, so
   hovering the dead space to the right darkened the box and then did nothing on click. */
.ala-item h3 label:hover::before{border-color:var(--ink)}
.ala-check:checked + .ala-body p{color:var(--ink)}
/* In flow, never fixed: .phonebar already owns the bottom of the screen on phones at
   z-index 20, so a floating bar here would cover the site's own primary CTA. */
/* --line gives this panel no edge at all: canvas on surface measures 1.09:1 and the
   14%-alpha line composites to about 1.31:1, which council C14 called "a panel with no
   edges" after rendering it. --line-strong is the token C13 left for exactly this case. */
.ala-sum{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  margin:0 0 var(--s3);padding:16px 18px;background:var(--canvas);
  border:1px solid var(--line-strong);border-radius:12px}
.ala-count{margin:0;font:700 17px/1.4 var(--sans);color:var(--ink)}
.ala-sum .ala-go{margin-left:auto}
@media (max-width:560px){.ala-sum{padding:14px}.ala-sum .ala-go{margin-left:0;width:100%}}

/* --- long-form content pages (Why us, the article posts) --- */
.prose-wrap{padding-block:var(--s5)}
.prose{max-width:68ch}
.prose h2{font:700 clamp(23px,2.4vw,30px)/1.22 var(--sans);letter-spacing:var(--tr-head);
  margin:var(--s4) 0 var(--s2)}
.prose h2:first-child{margin-top:0}
.prose h2::after{content:"";display:block;width:64px;height:3px;border-radius:2px;
  margin-top:12px;background:var(--gold-grad)}
.prose p{margin:0 0 var(--s2);font-size:18px;line-height:1.65}
.prose-cta{padding-block:var(--s5)}
.prose-cta h2{font:700 clamp(24px,2.6vw,32px)/1.2 var(--sans);margin:0 0 var(--s2)}
.prose-cta p{color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 var(--s3);max-width:60ch}

/* --- the article index --- */
.ins-list-wrap{padding-block:var(--s5)}
.ins-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.ins-card{display:grid;gap:10px;align-content:start;height:100%;text-decoration:none;
  color:var(--ink);background:var(--tint);border:1px solid var(--line-strong);
  border-radius:var(--r-panel);padding:var(--s3)}
.ins-card h2{font:700 21px/1.25 var(--sans);margin:0;letter-spacing:var(--tr-head)}
.ins-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.ins-card .ins-go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font:600 15px/1 var(--sans);color:var(--brand)}
.ins-card .ins-go .icon{width:16px;height:16px}
.ins-card:hover{background:var(--tint-hi);border-color:var(--ink)}
@media (max-width:980px){.ins-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ins-list{grid-template-columns:1fr}}

/* The header holds the logo, up to four links, a CTA and the theme toggle. At 360px that
   is 274px of controls against 196px of room, so the two secondary links drop out below
   620px and live in the footer's own nav instead, where they are reachable at every width. */
@media (max-width:620px){ .head-nav-extra{display:none} }
.foot-site{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);padding-top:var(--s2)}
.foot-site a{color:var(--foot-muted);text-decoration:none;font:600 15px/1.4 var(--sans);
  min-height:44px;display:inline-flex;align-items:center}
.foot-site a:hover{color:var(--foot-ink);text-decoration:underline;text-underline-offset:4px}
/* Short labels like "Notes" and "About" measured 42x44 and 40x44, under the 44px minimum
   tap target. Inline padding plus a min-width fixes the narrow axis without changing the row. */
.foot-site a{min-width:44px;padding-inline:4px;justify-content:center}

/* C12-21: the fifth tile's two-word name wrapped and stranded its arrow */
.trade-tile .tt-name{white-space:nowrap}
/* C12-15: the mission block on the home page */
.mission-band{padding-block:var(--s5)}
.mission-band .lede{font-size:19px;line-height:1.6;margin:var(--s2) 0}
.mission-band .vow{font:600 20px/1.45 var(--sans);margin:0}