/* ==========================================================================
   d5.css · CloudSprout "d5-pixel" design system, v3f (v3e + GOLDEN RATIO tokens, sentence inside "What do you need?",
   FAQ + Ask, 2026-09-30; v3d in _snap/v3d/). Shared by index.html, intake.html and every other d5 page. v3a is frozen in v3a.css.
   Inner pages also load d5-kit.css (the page kit components, _build/pagekit.py); the home does not.
   GOLDEN RATIO (v3f): every font size, gap, icon and disc comes from the tokens in :root (phi 1.618, sqrt(phi) 1.272):
   --fs-sm / --fs-body / --fs-lead / --fs-h3 / --fs-h3l / --fs-h2 / --fs-h1 / --fs-display, --sp-1..7 (8 13 21 34 55 89 144),
   --measure 64ch, line icons 21 (phones 24), discs 34 / 55 / 89, 3D objects 89 / 144. Use them; never a raw px font size.

   HOW TO USE
   <html class="no-js"> + inline script that swaps it to "js" (see index.html head).
   <body data-hero="sky-glow"> picks the hero variant (sky-glow default | sky | sky-depth | sky-plain | sky-v1 | green; HERO-X block).
   Icons: <svg class="ico"><use href="icons.svg#i-NAME"/></svg>. icons.svg is a local copy of the shared
   sprite WITHOUT per-symbol stroke-width (made by _build/build_index.py), so CSS sets one stroke weight.

   GLANCE RULES (owner, 2026-09-30: "understood in a glance")
   One colour code, one meaning each, used everywhere. Put a lane class on any block; children read
   --c (solid) --c-tint (fill) --c-soft (ground) --c-icon (icon on tint) --c-ink (text on tint, >= 7:1) --c-on (on solid).
     .is-start   green  #2d6040  starting, growing        tint #dff0d6
     .is-run     sun    #f2c862  running a business, fix  tint #fbeec6  (legend dot #d99a1e, ink on solid)
     .is-learn   sky    #2a6aa3  learn, training          tint #e3f0fa
     .is-urgent  clay   #9a3f1f  urgent, broken           tint #fde3da
     .is-prog    deep green #173a27: programs (Equity for Infrastructure, the programs band)
   Sun is an accent, not a fill for everything: at most 2 sun accents per screen. Urgent is never sun.
   Symbols: a 3D object = a thing we offer (the "What do you need?" tiles); a line icon in a disc = a situation or an
   item. Icons 20 / 24 / 28 (16 in mocks) at one rendered stroke of 1.75px; discs S 40 / M 48 / L 64 (_build/ICONS.md). Soft fills and shadows, no borders (except stamp buttons, the badge and
   the example screens). 8px grid. Radii 12 / 16 (chip) / 24 (plate) / 32 (door, panel, card) / 999 (pill).
   No trailing chevrons on chips: the affordance is the 2px lift, sh-2 and the disc filling with its lane colour.

   CLASS MAP
   Tokens ........ :root (base colours, colour code, sizes, radii, shadows)
   Layout ........ .wrap .sec .sec--paper .sec--cream .sec--green .sec--sun .sec-head .sec-line .more
   Type .......... .h2 (<em> = green italic) .hl + [data-hl] (stepped sun highlighter, H1 only) .vh
   Buttons ....... .btn .btn--p (green stamp) .btn--o (paper stamp) .btn--sm .link .go (text link + arrow)
   Glance atoms .. .is-* lanes  .disc (--m --l --w --solid --ink --gold)  .pill (--sun --mint --sky --prog --ghost)  .dot
                   (.tickb is retired: hidden)
   Header ........ .ubar .hd .nav .nav__btn .panel .menu .menu-btn .call-btn (MENU block: .menu__sky / .panel__sky + .mcl clouds,
                   step-in order --i)
   Phone forms ... ROUND 5 PHONE FORMS block (<= 760px): open rows for vine services, guides, setups, programs; no pills on
                   tools and work tags; business types centred
   Hero .......... .hero .hero__stage .hero__art[data-variant] .hero__wash .hero__text .badge .proof .stars .urgent .lc .px
   What you need . .paths .pos (the one H2 + line) .zones > .zone (--start green / --run amber) .zone__h .otiles > .otile
                   (paper tile + matched 3D object + label; .otile__key = small sky / deep green key square)
                   v3f: the sentence (.say) opens the section; tiles fill its want chip: .is-picked (ring + .otile__sel square),
                   .is-ex (the example cycle's soft tint), .is-full (3 picked: the rest rest). .otfoot .otile--urgent
   Options ....... .opts .opt (white chip + lane disc) .opt--urgent (intake, learn jump chips)
   Picker ........ [data-who] .who__tabs .who__tab (round icon buttons, tabs) .who__panel .scene .pain .got__list .got
   Vine .......... [data-path] .path .path__stem .layer .layer__node[data-stem-point] .vchips .vchip .layer__handoff .mock (.mock--inbox)
   Programs ...... .prog2__grid .prog2 (lane disc + name + pill + line + link)
   Learn ......... .learn__head .choose .gchips .gchip .watch .vid .tools (logo + name chips) .pchip  (.course .facts: learn.html)
   Work .......... .work__grid .proj .shot .ptags .logos
   People ........ .people__photo(--shot: client phone screenshot until the shoot) .irows .irow .quote
   FAQ / Close ... .faqa (FAQ+ASK block: the ask box + the page's accordions, every page with FAQs) · legacy .faq
                   .close (.close--short = heading, one button, the phone) .close__btns .close__row .close__tel .uchip
   Ask ........... .ask .ask__ai .ask__panel .ask__bar .ask__in .ask__out .ask__ans .ask__src .ask__next .ask__chips .ask__chip
                   .ask__urgent .ask__note .ask--compact .ask-on (ASK block, near the end; engine ask.js, behaviour d5.js "ask")
   Sentence ...... .say .say__line .schip .say__pop .say__type .say__end .saylink .flow__said (SENTENCE block, near the end)
   Footer ........ .ft
   Effects ....... MOTION block: [data-reveal] (led boot print stars spark keys + canvases), .cyc (Pause), section edges
                   (body[data-edges]); legacy .rv / [data-depix] / [data-wipe] are read by the same engine
   Slots ......... [data-slot] (future content). ?slots=1 adds body.show-slots to outline them.
   Intake ........ .flow (guided intake; options are the same chips + colour code)
   Smart ......... SMART block (end of file): .xtypes/.xtype/.xname (home Other panel), .sbiz (intake business type picker),
                   .smart-x (intake extras, .is-hint, .smart-x__path), .cs-field__err (.is-bad / .is-soft), .flow__sum
   Legacy ........ .eyebrow .tag .row-label .rows (v3a patterns, not used on the v3b home; kept for sibling pages)
   ========================================================================== */

@font-face{font-family:Figtree;src:url(fonts/figtree-latin-wght.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-italic-wght.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:Surgena;src:url(fonts/Surgena-Light.woff2) format("woff2");font-weight:300;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#161a14;--ink-2:#2f352c;--ink-3:#454c42;   /* v3e: ink-3 7.5:1 on cream (AAA), was 6.4 */
  --green:#2d6040;--green-2:#76a862;--green-ink:#173a27;--green-deep:#12301f;
  --sun:#f2c862;--gold:#a8740b;--clay:#9a3f1f;
  --cream:#f4eddf;--paper:#fffdf7;--mint:#dff0d6;--sand:#f5e9cf;
  --sky-top:#5098e2;--sky-soft:#cfe2ef;
  --rule:rgba(22,26,20,.16);--rule-2:rgba(22,26,20,.28);
  --stamp:3px 3px 0 var(--ink);
  --font:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1180px;--gut:24px;--sec:144px;   /* v3f: 128 -> 144 (Fibonacci --sp-7), calmer breaks between sections */
  --hd:70px;

  /* colour code: solid · tint (fills) · soft (grounds) · icon (on tint, >= 4.5:1) · ink (text on tint, >= 7:1) */
  --start:#2d6040; --start-tint:#dff0d6; --start-soft:#eef7ea; --start-icon:#2d6040; --start-ink:#173a27;
  --run:#f2c862;   --run-tint:#fbeec6;   --run-soft:#fdf6e1;   --run-icon:#8a5a00;   --run-ink:#5a3d00;   --run-dot:#d99a1e;
  --learn:#2a6aa3; --learn-tint:#e3f0fa; --learn-soft:#eff6fc; --learn-icon:#25649c; --learn-ink:#174468;
  --urgent:#9a3f1f;--urgent-tint:#fde3da;--urgent-soft:#fef0ea;--urgent-icon:#9a3f1f;--urgent-ink:#7d2e12;
  --prog:#173a27;

  /* GOLDEN RATIO SYSTEM (v3f, owner round 6: "make it easy to read on every page using the golden rule for font, icons").
     One modular scale on phi = 1.618 (and sqrt(phi) = 1.272 for the in-between steps), set from the body size, so every
     step grows with the reader's own font size (rem). Desktop body 18px, phones 19px (big on phones, round 2).
       --fs-sm ....... body / sqrt(phi)        14.2px   small labels, pills, meta   (phones: floored at 17px)
       --fs-body ..... body                    18px     text, chips, buttons, labels (phones 19px)
       --fs-lead ..... body x sqrt(phi)        22.9px   lead lines, card titles      (phones 24.2px)
       --fs-h3 ....... body x phi              29.1px   h3                            (phones 30.7px)
       --fs-h3l ...... body x phi x sqrt(phi)  37px     big h3 (vine layers, step titles on a feature row)
       --fs-h2 ....... body x phi^2            47.1px   h2 (fluid: 37px at 981, phones 36 to 39px)
       --fs-h1 ....... body x phi^3            76.2px   h1 (fluid; phones 44 to 50px)
       --fs-display .. body x phi^3 x sqrt(phi) 96.9px  the home hero only (fluid; phones 44 to 60px)
     Line height 1.6 for text (--lh), 1.05 for headings (--lh-h); measure 60 to 68ch (--measure 64ch).
     Spacing = Fibonacci: --sp-1 8 · --sp-2 13 · --sp-3 21 · --sp-4 34 · --sp-5 55 · --sp-6 89 · --sp-7 144 (px).
     Icons = Fibonacci: a line icon 21 (--ic, phones 24), discs 34 (S) and 55 (M, L; phones 55), feature discs 89 (XL);
     3D objects 89 (--obj: "What do you need?" tiles) and 144 (--obj-l: feature and sub-hero objects).
     A line icon inside a disc is the disc / phi, rounded to the sprite sizes: 34 -> 21, 55 -> 28 (one weight, 1.75px). */
  --fs-body:1.125rem;
  --fs-sm:calc(var(--fs-body) / 1.272);
  --fs-lead:calc(var(--fs-body) * 1.272);
  --fs-h3:calc(var(--fs-body) * 1.618);
  --fs-h3l:calc(var(--fs-body) * 2.058);
  --fs-h2:clamp(calc(var(--fs-body) * 2.058),calc(var(--fs-body) * 1.15 + 1.9vw),calc(var(--fs-body) * 2.618));
  --fs-h1:clamp(calc(var(--fs-body) * 2.618),calc(var(--fs-body) * 1.3 + 4.2vw),calc(var(--fs-body) * 4.236));
  --fs-display:clamp(calc(var(--fs-body) * 2.618),2.64rem + 3.8vw,calc(var(--fs-body) * 5.388));
  --lh:1.6;--lh-h:1.05;--measure:64ch;
  --sp-1:8px;--sp-2:13px;--sp-3:21px;--sp-4:34px;--sp-5:55px;--sp-6:89px;--sp-7:144px;
  --ic:1.3125rem;--disc-s:34px;--disc-m:55px;--disc-l:55px;--disc-xl:89px;   /* lengths; the .disc component sets --d (unitless) */
  /* sizes */
  --obj:89px;--obj-l:144px;
  /* radii */
  --r-s:12px;--r-m:16px;--r-l:24px;--r-xl:32px;--r-pill:999px;
  /* depth: soft, green-tinted, never borders */
  --sh-1:0 1px 2px rgba(23,58,39,.06),0 4px 14px rgba(23,58,39,.07);
  --sh-2:0 2px 6px rgba(23,58,39,.08),0 18px 36px rgba(23,58,39,.13);
  --obj-sh:drop-shadow(0 10px 12px rgba(23,58,39,.18));
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
body{font:400 var(--fs-body)/1.6 var(--font);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--paper);padding:12px 16px;font-weight:700}
.skip:focus{left:16px;top:12px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.sec--green :focus-visible,.ft :focus-visible,.ubar :focus-visible{outline-color:var(--sun)}
/* ICONS (_build/ICONS.md): one rendered weight (1.75px at a 16px root) at every size; sizes 20 / 24 / 28 only (16 inside
   the illustrated mocks). Sizes are in rem, so icons and their weight grow with the reader's font size. Nothing else
   sets width, height or stroke-width on an icon: contexts set --n (or use a disc size). */
.ico,.cs-ico{--n:21;width:calc(var(--n) * .0625rem);height:calc(var(--n) * .0625rem);flex:none;fill:none;stroke:currentColor;stroke-width:calc(42 / var(--n))}
.ico--24{--n:24}.ico--28{--n:28}.ico--34{--n:34}
.star{width:19px;height:19px;flex:none;stroke:currentColor;stroke-width:1.2}
[hidden]{display:none!important}

/* ---------- type ---------- */
.h2{font-weight:800;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.h2 em{font-style:italic;font-weight:700;color:var(--green)}
.sec-line{margin-top:16px;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);max-width:46ch;text-wrap:pretty}
/* stepped sun highlighter (pixel steps), H1 only */
.hl{position:relative;display:inline-block;isolation:isolate}
.hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.22em;background:var(--sun);z-index:-1;transform-origin:left;transform:scaleX(0)}
.hl.in::after{animation:hl .8s steps(8) forwards}
.no-js .hl::after{transform:none}
@keyframes hl{to{transform:scaleX(1)}}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:6px;font:650 var(--fs-body)/1.1 var(--font);text-decoration:none;text-align:center;border:1.5px solid var(--ink);cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s}
.btn--p{background:var(--green);color:#fff;box-shadow:var(--stamp)}
.btn--o{background:var(--paper);color:var(--ink);box-shadow:var(--stamp)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--p:hover{background:#28573a}
.btn--sm{min-height:44px;padding:0 16px;font-size:var(--fs-sm);box-shadow:2px 2px 0 var(--ink)}
.btn--sm:hover{box-shadow:3px 3px 0 var(--ink)}
.link{font-weight:650;color:var(--green);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.link:hover{color:var(--green-ink)}
.go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 var(--fs-body)/1.2 var(--font);color:var(--green);text-decoration:none}
.go span[aria-hidden]{transition:transform .18s var(--ease)}
.go:hover{color:var(--green-ink)}
.go:hover span[aria-hidden]{transform:translateX(3px)}
.go--u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.more{display:flex;justify-content:flex-end;margin-top:24px}
.more--l{justify-content:flex-start}

/* ==========================================================================
   GLANCE ATOMS (from the sheet B winner + sheet A grafts, 2026-09-30)
   ========================================================================== */
/* lanes: every component reads --c* */
.is-start {--c:var(--start); --c-tint:var(--start-tint); --c-soft:var(--start-soft); --c-icon:var(--start-icon); --c-ink:var(--start-ink); --c-on:#fff;       --c-dot:var(--start)}
.is-run   {--c:var(--run);   --c-tint:var(--run-tint);   --c-soft:var(--run-soft);   --c-icon:var(--run-icon);   --c-ink:var(--run-ink);   --c-on:var(--ink); --c-dot:var(--run-dot)}
.is-learn {--c:var(--learn); --c-tint:var(--learn-tint); --c-soft:var(--learn-soft); --c-icon:var(--learn-icon); --c-ink:var(--learn-ink); --c-on:#fff;       --c-dot:var(--learn)}
.is-urgent{--c:var(--urgent);--c-tint:var(--urgent-tint);--c-soft:var(--urgent-soft);--c-icon:var(--urgent-icon);--c-ink:var(--urgent-ink);--c-on:#fff;       --c-dot:var(--urgent)}
.is-prog  {--c:var(--prog);  --c-tint:var(--prog);       --c-soft:var(--start-soft); --c-icon:var(--sun);        --c-ink:var(--prog);      --c-on:var(--sun); --c-dot:var(--prog)}
.is-neutral{--c:var(--ink-3);--c-tint:var(--cream);      --c-soft:var(--cream);      --c-icon:var(--ink-2);      --c-ink:var(--ink-2);     --c-on:#fff}

/* disc: a line icon in a circle. Three sizes (ICONS.md): S 40 / icon 20, M 48 / 24 (plain .disc), L 64 / 28.
   Phones (<= 760px) step S and M up one size for older readers (48 / 24, 56 / 28). Grounds: solid lane, white, tint. */
.disc{--d:55;display:inline-grid;place-items:center;flex:none;width:calc(var(--d) * .0625rem);height:calc(var(--d) * .0625rem);border-radius:50%;
  background:var(--c-tint,var(--cream));color:var(--c-icon,var(--ink-2));
  transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.disc .ico{--n:28}
.disc--s{--d:34}.disc--s .ico{--n:21}
.disc--m{--d:55}
.disc--l{--d:55}.disc--l .ico{--n:28}
.disc--xl{--d:89}.disc--xl .ico{--n:34}
.disc--w{background:#fff}
.disc--solid{background:var(--c);color:var(--c-on)}
.disc--ink{background:var(--ink);color:var(--paper)}
/* tick badge: retired in v3c (owner: "no tick on every icon"). Kept hidden so old markup stays harmless. */
.tickb{display:none}
/* pills replace the tiny mono tags */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:var(--r-pill);font:750 var(--fs-sm)/1.15 var(--font);letter-spacing:0;white-space:nowrap;vertical-align:middle}
.pill--sun{background:var(--sun);color:var(--ink)}
.pill--mint{background:var(--mint);color:var(--green-ink)}
.pill--sky{background:var(--learn-tint);color:var(--learn-ink)}
.pill--prog{background:var(--prog);color:var(--paper)}
.pill--ghost{background:rgba(255,253,247,.1);color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(255,253,247,.45)}
/* lane dot */
.dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--c-dot,var(--c))}

/* option chip: white, lane disc, 2-4 word label (doors, picker "other") */
.opt{display:flex;align-items:center;gap:16px;min-height:64px;height:100%;padding:10px 16px 10px 10px;border-radius:var(--r-m);
  background:#fff;box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;font:650 var(--fs-body)/1.25 var(--font);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.opt__lab{flex:1;min-width:0}
.opt:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.opt:hover .disc{background:var(--c);color:var(--c-on)}
.opt:active{transform:none;box-shadow:var(--sh-1)}
/* urgent: always blush, solid clay disc, always shows its call to action */
.opt--urgent{background:var(--urgent-tint);box-shadow:none;color:var(--urgent-ink);font-weight:750}
.opt__cta{display:inline-flex;align-items:center;gap:6px;flex:none;font-weight:750;color:var(--urgent-ink)}
.opt__cta span{transition:transform .2s var(--ease)}
.opt--urgent:hover .opt__cta span{transform:translateX(3px)}

/* ---------- utility bar ---------- */
.ubar{background:var(--green-ink);color:var(--paper);font-size:var(--fs-sm)}
.ubar .wrap{display:flex;align-items:center;gap:24px;min-height:44px}
.ubar a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font-weight:550}
.ubar a:hover{text-decoration:underline;text-underline-offset:3px}
.ubar__urgent{color:#ffb4a0}
.ubar__go{font-weight:750}
.ubar__right{margin-left:auto;display:flex;gap:24px}
.ubar__short{display:none}
.ubar a.ubar__call{display:none}

/* ---------- sticky header + panels ---------- */
.hd{position:sticky;top:0;z-index:40;background:var(--paper);box-shadow:0 1px 0 var(--rule)}
.hd__bar{display:flex;align-items:center;gap:24px;height:var(--hd)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.logo img{width:32px;height:32px}
.logo span{font-family:Surgena,Figtree,sans-serif;font-weight:300;font-size:25px;letter-spacing:.01em;color:var(--ink)}
.hd__bar>nav{margin-left:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav>li>a,.nav__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:none;border-radius:6px;text-decoration:none;font:560 var(--fs-body)/1 var(--font);color:var(--ink-2);cursor:pointer}
.nav>li>a:hover,.nav__btn:hover,.nav__btn[aria-expanded="true"]{color:var(--green)}
.nav__btn::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s var(--ease)}
.nav__btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.no-js .nav__btn{display:none}
.nav>li>a.nav__fallback{display:none}
.no-js .nav>li>a.nav__fallback{display:inline-flex}
.hd__cta{margin-left:8px}
.hd__cta.btn{min-height:44px;padding:0 18px;font-size:var(--fs-sm);background:var(--green);color:#fff;box-shadow:2px 2px 0 var(--ink)}
.hd__cta.btn:hover{box-shadow:3px 3px 0 var(--ink)}
.call-btn,.menu-btn{display:none}
.panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);box-shadow:0 1px 0 var(--rule) inset,0 22px 40px -18px rgba(22,26,20,.28);padding:28px 0 32px}
.panel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.panel__grid--1{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
.panel__h{font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3);margin-bottom:8px}
.panel__col a{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-weight:560;font-size:var(--fs-body);color:var(--ink)}
.panel__col a .ico{color:var(--c-icon,var(--ink-3))}
.panel__col a.is-prog .ico{color:var(--prog)}
.panel__col a:hover{color:var(--green)}
.panel__col a.panel__all{font-weight:700;color:var(--green)}
.panel__side{background:var(--cream);border-radius:var(--r-m);padding:22px 24px;align-self:start}
.panel__side .btn{margin:6px 0 10px}
.panel__side a.is-urgent,.panel__side a.is-urgent .ico{color:var(--clay)}
.panel__col .pill{margin-left:4px}
/* learn panel, third column: one real short + a link */
.panel__col a.panel__vid{display:grid;gap:10px;min-height:0;max-width:320px}
.panel__thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:var(--green-ink)}
.panel__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel__go{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-weight:700;color:var(--learn-ink)}
.panel__col a.panel__vid:hover .panel__go{color:var(--learn)}
/* programs panel (v3d): three columns like Learn. Col 2 = the program card (deep green), col 3 = the courses slot (sky) */
.panel__col a.panel__card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 16px;min-height:0;max-width:340px;padding:20px 22px 20px 20px;border-radius:var(--r-m);background:var(--c-tint);color:var(--c-ink)}
.panel__card>.disc{grid-row:1/3;background:#fff;color:var(--c-icon)}
.panel__col a.panel__card .disc .ico{color:inherit}
.panel__card-t{font:750 var(--fs-body)/1.25 var(--font);color:inherit}
.panel__card .panel__go{min-height:28px;color:inherit}
.panel__col a.panel__card.is-prog{background:var(--prog);color:var(--paper)}
.panel__card.is-prog>.disc{background:rgba(255,253,247,.12);color:var(--paper);box-shadow:inset 0 0 0 2px rgba(255,253,247,.5)}
.panel__col a.panel__card:hover{color:var(--c-ink);box-shadow:var(--sh-2)}
.panel__col a.panel__card.is-prog:hover{color:var(--paper)}

/* ---------- MENU: phone sheet + mega panel feel (round 4, owner: "I like the other popout menu with the floating clouds
   better ... can you mix the two?"). The new structure (urgent first, "What do you need?" with lane discs, Start or fix,
   phone, client login) on the live site's cream sheet, with three large sage line clouds drifting slowly behind (the live
   theme's shapes, .mcl, markup: build_index.py MENU_SKY). Bigger, calmer type for older readers. On open the items step in
   once, 30ms apart (html.mo only; reduced motion = everything at once, clouds still). The desktop mega panels get the same
   feel: two faint clouds swaying behind the columns and a short column step-in. Decoration only, never above the text. */
.menu{position:fixed;inset:0;z-index:60;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;isolation:isolate}
/* the clouds live in a lane on the right (the labels sit left): they fade out before they reach the text column */
.menu__sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 58%);mask-image:linear-gradient(90deg,transparent 28%,#000 58%)}
@media (min-width:761px){.menu__sky{-webkit-mask-image:linear-gradient(90deg,transparent 66%,#000 86%);mask-image:linear-gradient(90deg,transparent 66%,#000 86%)}}   /* two columns of labels: clouds keep to the far right */
.mcl{position:absolute;left:0;top:var(--y);width:var(--w);opacity:var(--o,.9);transform:translateX(var(--x,0))}
.mcl svg{display:block;width:100%;height:auto;overflow:visible;fill:rgba(255,253,247,.45);stroke:#bccbb6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* rest place (--x, used with reduced motion) and drift phase (--del) agree at 390 wide */
.mcl--1{--y:150px;--w:min(62vw,260px);--x:48vw;--dur:150s;--del:-102s;--bob:11s}
.mcl--2{--y:50%;--w:min(44vw,180px);--x:70vw;--o:.85;--dur:120s;--del:-95s;--bob:8s;--fd:.15s}
.mcl--3{--y:68%;--w:min(54vw,220px);--x:54vw;--o:.8;--dur:170s;--del:-119s;--bob:10s;--fd:.3s}
.menu__bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 var(--gut);background:var(--cream);flex:none}
.menu__bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(var(--cream),rgba(244,237,223,0));pointer-events:none}
.menu__close{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 16px 0 12px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);font:650 var(--fs-body)/1 var(--font);color:var(--ink);cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.menu__close:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.menu__body{padding:12px var(--gut) 28px;flex:1}
.menu__urgent{display:flex;align-items:center;gap:14px;min-height:3.75rem;padding:6px 18px 6px 6px;border-radius:var(--r-m);background:var(--urgent-tint);font-weight:750;font-size:var(--fs-body);color:var(--urgent-ink);text-decoration:none}
.menu__urgent{flex-wrap:wrap;row-gap:0}
.menu__urgent>span:not(.uchip__cta):not(.disc){flex:1 1 auto;min-width:min-content}
.menu__urgent .uchip__cta{margin-left:auto;white-space:nowrap}   /* a large reader font wraps "Get help" under the label */
.menu__h{margin:32px 0 10px;font:700 var(--fs-body)/1.3 var(--font);color:var(--ink-3)}
.menu__paths{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.menu__paths a{display:flex;align-items:center;gap:16px;min-height:3.75rem;padding:4px 10px 4px 4px;border-radius:var(--r-m);font:650 var(--fs-body)/1.25 var(--font);text-decoration:none;transition:background-color .18s var(--ease)}
@media (hover:hover){.menu__paths a:hover{background:rgba(255,253,247,.8)}}
.menu__links{margin-top:28px}
.menu__links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:3.75rem;font:700 var(--fs-lead)/1.2 var(--font);letter-spacing:-.01em;text-decoration:none;box-shadow:0 1px 0 var(--rule)}
.menu__links a::after{content:"→";font-weight:600;color:var(--green);transition:transform .18s var(--ease)}
.menu__links a:hover::after{transform:translateX(3px)}
.menu__foot{position:sticky;bottom:0;z-index:2;padding:28px var(--gut) 18px;background:linear-gradient(rgba(244,237,223,0),var(--cream) 26px);display:grid;gap:6px;flex:none}
.menu__foot .btn{width:100%}
.menu__foot p{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px}
.menu__foot p a{display:inline-flex;align-items:center;gap:8px;min-height:3.5rem;font:650 var(--fs-body)/1.2 var(--font);color:var(--ink-2);text-decoration:none}
.menu__foot p a .ico{color:var(--green)}
/* mega panels: two faint clouds behind the grid (right side, where the columns end), the columns step in */
.panel{isolation:isolate}
.panel__sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.panel .mcl svg{fill:rgba(255,253,247,.7);stroke:#c2d1bc}
/* both in the margin right of the columns (1440: 1280 to 1420), one high, one low, so they never crowd a short panel */
.mcl--p1{--w:148px;--o:.9;top:auto;bottom:22px;left:calc(50% + 566px);--sw:18s}
.mcl--p2{--w:108px;--o:.75;top:22px;left:calc(50% + 600px);--sw:14s}
@media (prefers-reduced-motion:no-preference){
  html.mo .menu.is-open{animation:menu-in .26s var(--ease)}
  html.mo .menu.is-open :is(.menu__urgent,.menu__h,.menu__paths>li,.menu__links>li){animation:menu-step .32s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms + 40ms)}
  html.mo .menu.is-open .menu__foot{animation:menu-foot .36s var(--ease) both .08s}
  html.mo .menu.is-open .mcl{animation:mcl-go var(--dur) linear var(--del) infinite,mcl-in 1.4s var(--ease) var(--fd,0s) both}
  html.mo .menu.is-open .mcl svg,html.mo .panel .mcl svg{animation:hx-bob var(--bob,9s) ease-in-out infinite alternate}
  html.mo .panel:not([hidden]) .panel__col{animation:menu-step .3s var(--ease) both}
  html.mo .panel:not([hidden]) .panel__col:nth-child(2){animation-delay:40ms}
  html.mo .panel:not([hidden]) .panel__col:nth-child(3){animation-delay:80ms}
  html.mo .panel:not([hidden]) .mcl{animation:mcl-sway var(--sw) ease-in-out infinite alternate,mcl-in .8s var(--ease) both}
}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}   /* the sheet drops in like a blind: no see-through frame */
@keyframes menu-step{from{opacity:0;transform:translateY(10px)}}
@keyframes menu-foot{from{opacity:0;transform:translateY(14px)}}
@keyframes mcl-go{from{transform:translateX(-100%)}to{transform:translateX(100vw)}}
@keyframes mcl-in{from{opacity:0}}
@keyframes mcl-sway{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--cream)}
.hero__stage{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(560px,calc(100svh - 150px),720px)}
.hero__art{display:none;position:absolute;inset:0;z-index:0}
body[data-hero="sky"] .hero__art[data-variant="sky"],
body[data-hero="sky-plain"] .hero__art[data-variant="sky-plain"],
body[data-hero="sky-v1"] .hero__art[data-variant="sky-v1"],
body[data-hero="green"] .hero__art[data-variant="green"]{display:block}
.hero__art img,.hero__art picture,.hero__art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__art img{object-position:60% 38%}
/* sky fades into the cream row below, no edge (above the art and the wash) */
.hero__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to bottom,rgba(244,237,223,0),var(--cream));z-index:2;pointer-events:none}
body[data-hero="green"] .hero__stage::after{display:none}
/* soft light wash behind the text column: borderless, keeps text AAA on the sky */
.hero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;display:none;
  background:
    radial-gradient(ellipse 62% 80% at 24% 48%,rgba(250,252,253,.72) 0%,rgba(250,252,253,.62) 42%,rgba(250,252,253,.24) 68%,rgba(250,252,253,0) 86%),
    linear-gradient(to bottom,rgba(250,252,253,.14),rgba(250,252,253,.06))}
body[data-hero^="sky"] .hero__wash{display:block}
.hero__text{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:56px var(--gut) 72px}
.hero__text>*{max-width:620px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1.5px solid var(--ink);background:var(--paper);font:750 var(--fs-sm)/1.2 var(--font);letter-spacing:0;text-transform:none;box-shadow:2px 2px 0 var(--ink)}
.badge i{width:8px;height:8px;background:var(--green);display:block}
.badge .ico{color:#b3261e}
.hero h1{margin-top:26px;font-weight:800;font-size:var(--fs-h1);line-height:.98;letter-spacing:-.04em}
.hero h1 em{font-style:italic;font-weight:700;color:var(--green)}
.hero .lead{margin-top:22px;font-size:var(--fs-lead);line-height:1.5;color:var(--ink);max-width:32ch;font-weight:500}
.hero__doors{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:28px;font-size:var(--fs-body);color:var(--ink)}
.proof b{font-weight:800}
.proof a{font-weight:650;color:var(--ink);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.stars{display:inline-flex;gap:2px;color:var(--gold)}

/* hand-drawn line clouds (1.5px ink, paper fill). Hero keeps two, away from the text. */
.lc{position:absolute;z-index:2;stroke:var(--ink);stroke-width:1.5;fill:var(--paper);pointer-events:none;overflow:visible}
.lc path{vector-effect:non-scaling-stroke}
.hero .lc--a{width:118px;top:10%;right:6%;animation:drift 38s ease-in-out infinite alternate}
.hero .lc--b{width:84px;top:62%;right:40%;opacity:.9;animation:drift 46s ease-in-out infinite alternate-reverse}
@keyframes drift{from{translate:-22px 0}to{translate:22px 0}}
/* pixel sparkles near the mascot (sky default only), a slow twinkle */
.px{position:absolute;z-index:2;display:block;width:8px;height:8px;background:var(--c,#fffdf7);opacity:.85;image-rendering:pixelated}
.px--plus{width:12px;height:12px;background:none}
.px--plus::before,.px--plus::after{content:"";position:absolute;background:var(--c,#f2c862)}
.px--plus::before{left:4px;top:0;width:4px;height:12px}
.px--plus::after{left:0;top:4px;width:12px;height:4px}
.js .hero .px{animation:twinkle var(--d,5s) steps(3) var(--w,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.95}}
.hero__px{display:none}
body[data-hero="sky"] .hero__px{display:block}
.pxs .px{animation:rise var(--d,12s) steps(20) var(--w,0s) infinite;opacity:0}
@keyframes rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.95}85%{opacity:.5}100%{opacity:0;transform:translateY(-120px)}}
body[data-hero="sky"] .hero__art[data-variant="sky"] img{object-position:62% 40%}
body[data-hero="sky-plain"] .hero__art img{object-position:70% 50%}
body[data-hero="sky-v1"] .hero__art img{object-position:70% 50%}
body[data-hero="sky-v1"] .hero__wash{background:radial-gradient(ellipse 60% 80% at 24% 50%,rgba(250,252,253,.4),rgba(250,252,253,0) 80%)}
/* hero: green (v2, kept): text on solid cream left, green art panel right (46%) */
body[data-hero="green"] .hero__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);align-items:stretch;min-height:min(760px,calc(100svh - 110px))}
body[data-hero="green"] .hero__art[data-variant="green"]{position:relative;inset:auto;grid-column:2;grid-row:1;background:#0f4a2e;overflow:hidden}
body[data-hero="green"] .hero__art[data-variant="green"] img{object-position:50% 62%}
body[data-hero="green"] .hero__text{grid-column:1;grid-row:1;align-self:center;margin:0;padding:64px 40px 72px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
body[data-hero="green"] .hero .lc--a{top:40px;right:calc(46% + 28px)}
body[data-hero="green"] .hero .lc--b{top:auto;bottom:34px;right:calc(46% + 140px);opacity:.6}

/* ---------- "What do you need?": asked once. Two colour zones, urgent set apart (v3e, owner round 2) ----------
   Owner: "cleaner and separated, with colours showing the difference; all icons match". Starting sits in a soft green
   zone, Running in a soft amber zone, a clear gap between them. Inside a zone every tile is the same paper tile with one
   matched 3D object (art/v3/tile/, same optical size) and a label on the same row. A learning or programs item keeps its
   meaning with a small key square before its label, never a different tile. Spotlight / hover / focus: a soft lane tint
   fades in over the tile, a small corner square in the lane colour, the object lifts 4px (no patterns, no dark tiles). */
.paths{padding:var(--sp-5) 0 var(--sp-6);background:linear-gradient(to bottom,var(--cream),var(--paper) 180px)}
.pos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px 48px;align-items:end}
.pos__h{font-weight:800;font-size:var(--fs-h2);line-height:var(--lh-h);letter-spacing:-.03em}
.pos__p{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);font-weight:550;text-wrap:pretty;justify-self:end}
.pos__p b{display:block;font-weight:750;color:var(--green-ink)}
/* v3f (owner round 6): the sentence opens the section (full width of the wrap, paper card); the zones follow it.
   Desktop: the words box and "Send it" share one row; the finished sentence is read to screen readers only (the chips
   already show it), so the card stays short. */
.paths .say{max-width:none;margin:var(--sp-4) 0 0;padding:var(--sp-4) var(--sp-5) var(--sp-4)}
@media (min-width:761px){
  .paths .say.is-live{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-3);align-items:end}
  .paths .say.is-live>:not(.say__type):not(.say__end){grid-column:1/-1}
  .paths .say__line{padding-bottom:var(--sp-3);box-shadow:0 1px 0 var(--rule)}
  .paths .say__type{margin-top:var(--sp-3);padding-top:0;box-shadow:none}
  .paths .say textarea{min-height:56px;height:56px}
  .paths .say__end{margin:0 0 32px}
  .paths .say__out{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .paths .say__go{min-height:56px}
}
.zones{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.zone{padding:var(--sp-3) var(--sp-4) var(--sp-4);border-radius:28px;background:var(--zone)}
.zone--start{--zone:#e9f4e2}
.zone--run{--zone:#fcf0cc}
.zone__h{display:flex;align-items:center;gap:var(--sp-2);font:800 var(--fs-lead)/1.2 var(--font);letter-spacing:-.01em;color:var(--c-ink)}
.zone__h .disc{--d:34}.zone__h .disc .ico{--n:21}
.zone--run .zone__h .disc{color:var(--run-ink)}
.otiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.otile{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);height:100%;padding:var(--sp-3) var(--sp-2);border-radius:21px;
  background:rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(23,58,39,.05);text-decoration:none;color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s var(--ease)}
/* ::before = a soft lane tint (hover, focus, the example cycle); ::after = the tiny indicator square (example cycle) */
.otile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(var(--c-soft),#fff 70%);opacity:0;transition:opacity .3s steps(3,end)}
.otile::after{content:"";position:absolute;top:13px;right:13px;width:8px;height:8px;background:var(--c-dot,var(--c));opacity:0;transition:opacity .3s steps(3,end)}
.otile__plate{position:relative;display:grid;place-items:center;width:100%;height:calc(var(--obj) + var(--sp-3));border-radius:13px}
.otile__plate img{width:var(--obj);height:var(--obj);object-fit:contain;filter:var(--obj-sh);transition:transform .45s var(--ease)}
.otile__lab{display:block;min-height:2.5em;font:700 var(--fs-body)/1.25 var(--font);text-align:center;text-wrap:balance}
/* the key square (top left): sky = learning, deep green = programs */
.otile__key{position:absolute;top:13px;left:13px;width:8px;height:8px;border-radius:1px;background:var(--c)}
/* picked (its want is in the sentence): a 2px lane ring, the tint, and a solid lane square top right (no tick) */
.otile__sel{position:absolute;top:11px;right:11px;width:12px;height:12px;border-radius:2px;background:var(--c-dot,var(--c));opacity:0;transform:scale(.5);transition:opacity .2s steps(2,end),transform .2s steps(2,end)}
.otile:hover,.otile:focus-visible{box-shadow:var(--sh-1)}
.otile:hover::before,.otile:focus-visible::before,.otile.is-ex::before,.otile.is-picked::before{opacity:1}
.otile.is-ex:not(.is-picked)::after{opacity:.85}
.otile:hover .otile__plate img,.otile:focus-visible .otile__plate img,.otile.is-ex .otile__plate img{transform:translateY(-4px)}
.otile.is-picked{box-shadow:var(--sh-1)}
.otile.is-picked::before{box-shadow:inset 0 0 0 2px var(--c-dot,var(--c))}
.otile.is-picked .otile__sel{opacity:1;transform:none}
.otile.is-picked .otile__lab{color:var(--c-ink)}
/* three picked: the other tiles rest (aria-disabled), still readable */
.otile.is-full{opacity:.62;box-shadow:none;cursor:default}
.otile.is-full:hover::before{opacity:0}
.otile.is-full:hover .otile__plate img{transform:none}
.otile:focus-visible{outline-offset:4px}
.otfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-5)}
/* urgent: set apart, blush, always shows its call to action. Same symbol as everywhere: clay disc + alert (v3d) */
.otile--urgent{flex-direction:row;gap:var(--sp-2);height:auto;min-height:72px;padding:8px 24px 8px 8px;border-radius:999px;background:var(--urgent-tint);box-shadow:none;color:var(--urgent-ink)}
.otile--urgent::before,.otile--urgent::after{display:none}
.otile--urgent .otile__lab{min-height:0;font-size:var(--fs-body);font-weight:750;text-align:left}
.otile__cta{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font:750 var(--fs-body)/1.2 var(--font);color:var(--urgent-ink)}
.otile--urgent:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* ---------- sections ---------- */
.sec{padding:var(--sec) 0}
.sec--paper{background:var(--paper)}
.sec--cream{background:var(--cream)}
.sec--green{background:var(--green-ink);color:var(--paper)}
.sec--sun{background:var(--sun)}
.sec-head{max-width:760px}
.sec-head--row{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px}

/* option list (intake, learn jump chips) */
.opts{display:grid;gap:12px}

/* ---------- business-type picker: round icon buttons (tabs) + illustrated panel ---------- */
.who__box{margin-top:40px}
.who__tabs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.who__tab{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:44px;padding:8px 2px 12px;border:0;border-radius:20px;background:none;cursor:pointer;
  font:650 var(--fs-body)/1.25 var(--font);color:var(--ink-2);text-align:center}
.who__tab .disc{background:#fff;color:var(--ink-2);box-shadow:var(--sh-1)}
.who__tab:hover .disc{background:var(--paper);color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.who__tab[aria-selected="true"]{color:var(--ink);font-weight:800}
.who__tab[aria-selected="true"] .disc{background:var(--ink);color:var(--paper);box-shadow:0 0 0 6px var(--cream),0 0 0 7.5px var(--rule-2),var(--sh-2);transform:none}
.who__tab:focus-visible{outline-offset:0}
.who__lab{max-width:13ch}
.who__lab-s{display:none}
.who__panels{margin-top:32px}
.who__panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.who__panel:focus-visible{outline-offset:6px}
/* JS on: the panels share one grid cell, so switching (by hand or by the calm cycle) never changes the height */
.js .who__panels{display:grid}
.js .who__panels>.who__panel{grid-area:1/1}
.js .who__panels>.who__panel[hidden]{display:grid!important;visibility:hidden}
.no-js .who__tabs{display:none}
.no-js .who__panel+.who__panel{margin-top:24px}
.who__name{font:800 var(--fs-h3)/1.1 var(--font);letter-spacing:-.02em}
/* "sound familiar?" = the pain, on the sun lane (blush stays reserved for urgent) */
.pain{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 28px 16px 16px;border-radius:20px;background:var(--run-tint);
  font:700 var(--fs-lead)/1.25 var(--font);letter-spacing:-.01em;color:var(--ink)}
.pain b{display:block;margin-bottom:2px;font-size:var(--fs-body);font-weight:750;letter-spacing:0;color:var(--ink-2)}
/* what we set up: plain rows, white disc in the lane colour (no tick badges) */
.got__list{display:grid;gap:4px;margin-top:20px}
.got{display:flex;align-items:center;gap:16px;min-height:56px;height:100%;padding:6px 12px 6px 6px;border-radius:var(--r-s);color:var(--ink);text-decoration:none;
  font:650 var(--fs-body)/1.25 var(--font);transition:background-color .2s var(--ease)}
.got:hover{background:var(--c-soft)}
.got__disc{position:relative;display:inline-flex;flex:none}
.got .disc{background:#fff;box-shadow:var(--sh-1)}
.got.is-learn .disc{background:var(--learn-tint);box-shadow:none}
.who__cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px}
/* scene: cream stage, one "Your Business" example card (no 3D object since v3d: each object once, on the plates) */
.scene{position:relative;display:grid;place-items:center;min-height:360px;padding:48px 32px;border-radius:var(--r-l);background:radial-gradient(120% 90% at 30% 20%,#fff 0,var(--paper) 60%);overflow:hidden}
.scene__card{max-width:310px;padding:20px 20px 18px;transform:rotate(-1.5deg)}
.scene__brand{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--rule);font-size:15px;font-weight:800}
.scene__brand img{width:20px;height:20px}
.srows{display:grid;gap:8px;margin-top:8px}
.srow{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;line-height:1.25}
.srow__disc{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-tint);color:var(--c-icon)}
.scene .srow__disc .ico{color:inherit}
.srow__disc.is-start{background:var(--start);color:#fff}
.scene__px{position:absolute;left:28px;top:28px;width:8px;height:8px;background:var(--green-2);box-shadow:12px 12px 0 var(--start),24px 0 0 var(--green-2)}

/* ---------- the vine (kept): stem, big-numeral nodes, services as mint chips ---------- */
.stack__head{text-align:center;max-width:720px;margin:0 auto 64px}
.path{position:relative}
.path__stem{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.path__stem-bg{fill:none;stroke:rgba(45,96,64,.22);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.path__stem-line{fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round}
.path__leaves path{fill:var(--green-2);stroke:var(--green-ink);stroke-width:1;transform-box:fill-box;transform:scale(0);transition:transform .45s steps(3,end)}
.path__leaves path.is-on{transform:scale(1)}
.path__list{position:relative;z-index:1;display:grid;gap:240px}   /* v3d: two layers per screen at 1440 (<= 60 words) */
.layer{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center}
.layer__node{grid-column:2;grid-row:1;justify-self:center;align-self:start;position:relative;z-index:2;display:grid;place-items:center;width:var(--disc-l);height:var(--disc-l);border-radius:50%;
  background:var(--green-ink);color:var(--paper);font:800 28px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 8px var(--paper);transition:box-shadow .35s var(--ease)}
.layer__node.is-lit{box-shadow:0 0 0 6px var(--start-tint),0 0 0 12px var(--paper)}   /* green = growing (sun stays for the Example tags) */
.layer__node::after{content:"";position:absolute;top:-14px;width:22px;height:14px;background:var(--green-2);border:1.2px solid var(--green-ink);border-radius:0 14px 0 14px;transform:scale(0);transition:transform .45s steps(3,end) .1s}
.layer:nth-child(odd) .layer__node::after{left:-10px;transform-origin:100% 100%;border-radius:14px 0 14px 0}
.layer:nth-child(even) .layer__node::after{right:-10px;transform-origin:0% 100%}
.layer__node.is-lit::after{transform:scale(1)}
.layer__text{grid-row:1;max-width:460px;width:100%}
.layer:nth-child(odd) .layer__text{grid-column:1;justify-self:end}
.layer:nth-child(even) .layer__text{grid-column:3}
.layer__scene{grid-row:1;display:flex;justify-content:center;position:relative}
.layer:nth-child(odd) .layer__scene{grid-column:3}
.layer:nth-child(even) .layer__scene{grid-column:1}
.layer h3{font-size:var(--fs-h3l);font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.nw{white-space:nowrap}
.layer__promise{margin-top:12px;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);max-width:32ch}
.vchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
/* services in each layer: neutral cream chips (green is the "starting" lane, so not here) */
.vchip{display:flex;align-items:center;gap:12px;min-height:56px;height:100%;padding:6px 16px 6px 6px;border-radius:var(--r-pill);background:var(--cream);color:var(--ink);
  text-decoration:none;font:700 var(--fs-body)/1.2 var(--font);transition:background-color .2s var(--ease),transform .2s var(--ease)}
.vchip .disc{background:#fff;color:var(--ink-2)}
.vchip:hover{background:var(--sand);transform:translateY(-2px)}
.layer__handoff{display:none}
/* hand-off between layers: a quiet line of text on the stem, not a floating pill */
.path.has-stem .layer__handoff{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:4px 0;background:var(--paper);
  font:650 var(--fs-body)/1.2 var(--font);color:var(--ink-3);white-space:nowrap;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s var(--ease)}
.path.has-stem .layer__handoff.is-on{opacity:1}
.path__end{position:relative;z-index:1;display:grid;justify-items:center;gap:18px;margin-top:88px;text-align:center}
.path__mark{position:relative;display:block;width:64px;height:64px}
.path__mark img{width:64px;height:64px}
.path__end p{font-size:var(--fs-lead);font-weight:650;max-width:26ch}
.scene-art{position:relative;width:100%;max-width:480px;aspect-ratio:1100/587}
.scene-art img,.scene-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* code-built "Your Business" example screens (HTML, clearly labelled Example; borders allowed here) */
.mock{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;box-shadow:var(--stamp);font-size:15px;line-height:1.4;width:100%;max-width:400px;color:var(--ink)}
.mock .ico{--n:16;color:var(--green)}                 /* illustration scale, same weight */
.mock__tag{position:absolute;top:-12px;right:14px;padding:2px 10px;background:var(--sun);border:1.5px solid var(--ink);border-radius:999px;font:750 13px/1.3 var(--font);letter-spacing:0;color:var(--ink)}
.mock--search{padding:18px;display:grid;gap:14px;transform:rotate(-1.2deg)}
.mock__query{display:flex;align-items:center;gap:8px;padding:11px 16px;border:1.5px solid var(--ink);border-radius:999px;font-weight:600}
.mock__result{padding:16px;border:1px solid var(--rule);border-radius:4px;background:#fff;display:grid;gap:6px}
.mock__name{font-weight:800;font-size:19px;color:var(--green)}
.mock__stars{display:flex;align-items:center;gap:1px;color:var(--gold);font-size:14px}
.mock__stars .star{width:15px;height:15px}
.mock__stars span{margin-left:8px;color:var(--ink-3)}
.mock__btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.mock__btns span{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--rule);border-radius:999px;font-size:13px;font-weight:650}
.mock__btns .is-call{background:var(--green);color:#fff;border-color:var(--green)}
.mock__btns .is-call .ico{color:#fff}
.mock__ai{display:flex;gap:8px;align-items:center;padding:11px 13px;background:var(--mint);border-radius:4px;font-size:14px}
.mock--site{transform:rotate(1deg)}
.mock__bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-bottom:1.5px solid var(--ink);background:var(--cream)}
.mock__bar i{width:9px;height:9px;border-radius:50%;border:1.2px solid var(--ink)}
.mock__bar span{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.mock__page{padding:22px;display:grid;gap:16px;background:#fff}
.mock__brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px}
.mock__brand img{width:18px}
.mock__h{font-weight:800;font-size:26px;line-height:1.12;letter-spacing:-.02em}
.mock__cta{display:flex;gap:8px;flex-wrap:wrap}
.mock__cta span{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:1.5px solid var(--ink);border-radius:4px;font-weight:650;font-size:14px}
.mock__cta .is-primary{background:var(--green);color:#fff}
.mock__cta .is-primary .ico{color:#fff}
.mock--chat{padding:18px;display:grid;gap:9px;transform:rotate(-1deg)}
.mock__head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--rule);font-size:14px}
.mock__head .ico{box-sizing:content-box;padding:7px;border-radius:50%;background:var(--mint)}
.c-in{justify-self:start;max-width:85%;padding:8px 12px;background:var(--cream);border:1px solid var(--rule);border-radius:12px 12px 12px 3px}
.c-out{justify-self:end;max-width:88%;padding:8px 12px;background:var(--green);color:#fff;border-radius:12px 12px 3px 12px}
.c-flow{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--sand);border-radius:4px;font-size:14px;font-weight:650}
.c-flow .ico{color:var(--gold)}
.mock--hub{padding:22px 22px 20px;transform:rotate(.8deg)}
.hub__core{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1.5px solid var(--ink);border-radius:6px;background:var(--mint);font-weight:800;font-size:17px}
.hub__core img{width:24px;height:24px}
.hub__tools{margin:0 0 0 26px;padding-top:6px;border-left:1.5px solid var(--green)}
.hub__tools li{position:relative;display:flex;align-items:center;gap:8px;min-width:0;margin-top:12px;padding:9px 12px 9px 12px;margin-left:22px;border:1px solid var(--rule);border-radius:6px;background:#fff;font-weight:650}
.hub__tools li::before{content:"";position:absolute;left:-23px;top:50%;width:22px;border-top:1.5px solid var(--green)}
.hub__tools li:last-child::after{content:"";position:absolute;left:-25px;top:calc(50% + 1px);bottom:-12px;width:4px;background:var(--paper)}
.hub__tools img{width:20px;height:20px;filter:grayscale(1) brightness(.35)}
.hub__ok{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--green)}
/* vine 03: code-built lead inbox (replaces the pixel filing-cabinet pair) */
.mock--inbox{padding:18px 18px 16px;transform:rotate(-.8deg)}
.inbox__head{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--rule);font-size:15px}
.inbox__head img{width:20px;height:20px}
.mock .inbox__head>.ico{margin-left:auto;color:var(--ink-3)}
.inbox__rows{display:grid;gap:8px;margin-top:12px}
.inbox__rows li{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border:1px solid var(--rule);border-radius:6px;background:#fff}
.inbox__src{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream)}
.mock .inbox__src .ico{color:var(--ink-2)}
.inbox__what{display:flex;flex-direction:column;min-width:0;font-weight:700;line-height:1.25}
.inbox__what small{font-size:12px;font-weight:600;color:var(--ink-3)}
.inbox__st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;padding:4px 10px;border-radius:999px;background:var(--start-tint);font-size:13px;font-weight:700;color:var(--start-ink)}
.mock .inbox__st .ico{color:var(--start-ink)}

/* ---------- programs (deep green band): three cards, a lane disc each (the 3D objects live in the plates above) ---------- */
/* sun on this band: the H2 accent and the "New program" pill only */
.sec--green .h2 em{color:var(--sun)}
.prog2__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.prog2{display:flex;align-items:flex-start;gap:20px;height:100%;padding:28px 28px 24px 24px;border-radius:28px;background:rgba(255,253,247,.06);color:var(--paper);text-decoration:none;transition:background-color .2s var(--ease)}
.prog2:hover{background:rgba(255,253,247,.11)}
.prog2>.disc{background:var(--c-tint);color:var(--c-icon)}
.prog2.is-prog>.disc{background:var(--prog);color:var(--paper);box-shadow:inset 0 0 0 2px rgba(255,253,247,.55)}
.prog2:hover>.disc{transform:translateY(-3px)}
.prog2__txt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;align-self:stretch;flex:1}
.prog2__name{font:800 var(--fs-lead)/1.2 var(--font);letter-spacing:-.01em;color:var(--paper)}
.prog2__line{font-size:var(--fs-body);line-height:1.45;color:rgba(255,253,247,.88)}
.prog2__go{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:auto;padding-top:6px;font-weight:700;color:var(--paper);text-decoration:underline;text-decoration-color:rgba(255,253,247,.4);text-underline-offset:5px;text-decoration-thickness:1.5px}
.prog2__go span{transition:transform .2s var(--ease)}
.prog2:hover .prog2__go{text-decoration-color:currentColor}
.prog2:hover .prog2__go span{transform:translateX(3px)}

/* ---------- learn (sky lane): help me choose + training card + watch strip + tools ---------- */
.learn__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:32px 56px;align-items:center}
.learn__art{position:relative;max-width:420px;justify-self:end;width:100%;aspect-ratio:720/350}
.learn__art img,.learn__art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.learn2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;margin-top:56px;align-items:start}
.blk__h{display:flex;align-items:center;gap:16px;font:800 var(--fs-h3)/1.1 var(--font);letter-spacing:-.02em;color:var(--learn-ink)}
.learn>.wrap>.choose{margin-top:56px}
.learn>.wrap>.choose .gchips{grid-template-columns:repeat(auto-fit,minmax(min(100%,14em),1fr))}   /* round 8: 4 a row; fewer at large text */
.gchips>li,.gchip>span:last-child{min-width:0}
.gchip>span:last-child{overflow-wrap:anywhere}
.gchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.gchip{display:flex;align-items:center;gap:14px;min-height:64px;height:100%;padding:10px 16px 10px 10px;border-radius:var(--r-m);background:var(--learn-tint);color:var(--learn-ink);
  text-decoration:none;font:700 var(--fs-body)/1.25 var(--font);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.gchip .disc{background:#fff;color:var(--learn-icon)}
.gchip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.gchip:hover .disc{background:var(--learn);color:#fff}
.choose .more{margin-top:16px}
.course{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:32px;border-radius:var(--r-xl);background:var(--learn-tint);color:var(--learn-ink)}
.course__obj{position:absolute;right:16px;top:-28px;width:var(--obj-l);height:var(--obj-l);object-fit:contain;filter:var(--obj-sh)}
.course h3{margin-top:16px;max-width:12ch;font:800 var(--fs-h3)/1.1 var(--font);letter-spacing:-.02em;color:var(--learn-ink)}
.course__line{margin-top:8px;font-size:var(--fs-body);color:var(--ink-2)}
.facts{display:grid;gap:12px;margin:24px 0}
.facts li{display:flex;align-items:center;gap:14px;font:700 var(--fs-body)/1.3 var(--font);color:var(--learn-ink)}
.facts .disc{color:var(--learn-icon)}
.watch{display:grid;gap:28px;margin-top:48px;padding:28px 32px 32px;border-radius:28px;background:var(--paper);box-shadow:var(--sh-1)}
.watch__body{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.watch__body>.go{margin-left:auto}
.watch__txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.watch h3{font:800 var(--fs-lead)/1.15 var(--font);letter-spacing:-.015em}
/* video cards (v3e): the themed thumbnail (its short line + play badge are baked in, alt=""), the full title under it,
   "Short · 0:40" (the real run time). Hover: the picture lifts 4px. */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vid a{display:grid;align-content:start;gap:12px;border-radius:var(--r-m);color:var(--ink);text-decoration:none}
.vid__thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-m);background:var(--learn-tint);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.vid__thumb img,.vid__thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__t{font:750 var(--fs-body)/1.3 var(--font);letter-spacing:-.005em;text-wrap:balance}
.vid__meta{display:inline-flex;align-items:center;gap:8px;font:650 var(--fs-sm)/1.2 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.vid__meta>i{width:8px;height:8px;background:var(--learn)}
.vid a:hover .vid__thumb{transform:translateY(-4px);box-shadow:var(--sh-2)}
.vid a:hover .vid__t{color:var(--learn-ink)}
.tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 32px;margin-top:48px}
.tools__lab{grid-column:1;grid-row:1;font:700 var(--fs-body)/1.3 var(--font);color:var(--ink-2)}
.tools>.go{grid-column:2;grid-row:1}
.tools__row{grid-column:1/-1}
.tools__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tools__row li{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px 8px 12px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--sh-1);font:650 var(--fs-body)/1.2 var(--font);color:var(--ink-2)}
.tools__row img{width:22px;height:22px;object-fit:contain;filter:grayscale(1) brightness(.3)}
.courses{margin-top:24px}
.pchip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 14px;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-ink);font:700 var(--fs-body)/1.2 var(--font);text-decoration:none}

/* ---------- work ---------- */
.work__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}
.proj a{display:block;text-decoration:none;color:var(--ink)}
.shot{position:relative;padding:0 18px 22px 0;transition:transform .25s var(--ease)}
.proj a:hover .shot{transform:translateY(-4px)}
.shot__frame{border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff}
.shot__bar{display:flex;gap:5px;align-items:center;height:22px;padding:0 10px;border-bottom:1.5px solid var(--ink);background:var(--cream)}
.shot__bar i{width:7px;height:7px;border-radius:50%;border:1.2px solid var(--ink)}
.shot__frame img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:top}
.shot__phone{position:absolute;right:0;bottom:0;width:26%;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.shot__phone img{aspect-ratio:390/700;width:100%;object-fit:cover;object-position:top}
.proj h3{margin-top:16px;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.proj a:hover h3{color:var(--green)}
.proj__place{margin-top:4px;font:600 var(--fs-body)/1.3 var(--font);color:var(--ink-3)}
.shot__img{position:relative;display:block}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ptags li{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:var(--r-pill);background:var(--cream);font:650 var(--fs-sm)/1.2 var(--font);color:var(--ink-2)}
.logos{margin-top:64px}
.logos__lab{font:700 16px/1.3 var(--font);color:var(--ink-2)}
.logos__row{display:flex;flex-wrap:wrap;align-items:center;gap:24px 56px;margin-top:16px}
.logos__row img{width:auto;filter:grayscale(1) contrast(1.35) brightness(.72)}

/* ---------- people band ---------- */
.people__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.people__photo{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--green-ink);max-width:520px}
.people__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.people__photo--art{aspect-ratio:5/4;background:var(--paper)}
.people__photo--art img{inset:32px;width:calc(100% - 64px);height:calc(100% - 64px);object-fit:contain;object-position:50% 50%}
/* placeholder until the photo shoot: a real client site on a phone, framed like the Work section */
.people__photo--shot{display:grid;place-items:center;background:var(--paper);box-shadow:var(--sh-1)}
.people__phone{position:absolute;top:8%;left:50%;height:84%;aspect-ratio:390/844;transform:translateX(-50%);overflow:hidden;border:1.5px solid var(--ink);border-radius:26px;box-shadow:var(--sh-2);background:#fff}
.people__photo .people__phone img{object-position:top}
.people__px{position:absolute;left:32px;top:32px;width:8px;height:8px;background:var(--green-2);box-shadow:12px 12px 0 var(--start),24px 0 0 var(--green-2)}
.irows{display:grid;gap:12px;margin-top:28px}
.irow{display:inline-flex;align-items:center;gap:16px;min-height:56px;font:700 var(--fs-body)/1.3 var(--font);color:var(--ink);text-decoration:none}
a.irow:hover{color:var(--green)}
.irow .disc{color:var(--green);box-shadow:var(--sh-1)}
.irow--star .disc{color:var(--gold)}
a.irow:hover .disc{transform:translateY(-2px)}
.quote{margin-top:32px}
.quote .stars .star{width:22px;height:22px}
.quote blockquote{margin-top:12px;font-size:var(--fs-h3);font-weight:700;line-height:1.3;letter-spacing:-.015em;max-width:30ch}
.quote figcaption{margin-top:12px;font-size:var(--fs-body);color:var(--ink-2)}
/* round 7 proof pairs: the quotes share one grid cell, so a swap never moves what is below (the taller one sets the
   height); the hidden one is out of sight and out of the accessibility tree. Pips = small pixel squares + Pause. */
.pairs__stack{display:grid;grid-template-columns:minmax(0,1fr)}
.pairs__stack>.quote{grid-area:1/1;min-width:0;overflow-wrap:break-word}
.pairs__stack>.quote[hidden]{display:block!important;visibility:hidden}
.people__phone[hidden]{display:none}
.pairs__nav{display:flex;align-items:center;gap:2px;margin-top:var(--sp-2);margin-left:-12px}
.pairs__nav[hidden]{display:none}
.pairs__dot{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.pairs__dot::before{content:"";width:10px;height:10px;background:var(--rule-2);transition:background-color .2s var(--ease)}
.pairs__dot:hover::before{background:var(--ink-3)}
.pairs__dot[aria-pressed="true"]::before{background:var(--green)}
.pairs__nav .cyc{margin-left:var(--sp-1)}
@media (max-width:760px){.pairs__dot{width:44px;height:44px}.pairs__nav{margin-left:-17px}}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start}
.faq__list{box-shadow:0 1px 0 var(--rule)}
.faq details{box-shadow:0 -1px 0 var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 2px;cursor:pointer;list-style:none;font-size:var(--fs-body);font-weight:700;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--start-tint);color:var(--start-ink);font-weight:600;font-size:22px;line-height:1;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 22px 2px;color:var(--ink-2);font-size:var(--fs-body);max-width:60ch}

/* ---------- closing sun band ---------- */
.close{position:relative;text-align:center}
.close .h2 em{color:var(--green-ink)}
.close .sec-line{margin-left:auto;margin-right:auto;color:var(--ink-2)}
.close__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.close__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 32px;margin-top:32px}
.close__tel{display:inline-flex;align-items:center;gap:12px;min-height:48px;font:750 var(--fs-body)/1.2 var(--font);color:var(--ink);text-decoration:none}
.close__tel:hover span{text-decoration:underline;text-underline-offset:4px}
.uchip{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:6px 20px 6px 6px;border-radius:var(--r-pill);background:var(--urgent-tint);color:var(--urgent-ink);font:750 var(--fs-body)/1.2 var(--font);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.uchip__cta{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.uchip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.close .lc--a{width:120px;top:40px;left:7%}
.close .lc--b{width:92px;bottom:44px;right:8%}
.js .close .lc--a{animation:drift 40s ease-in-out infinite alternate}

/* ---------- footer (ink) ---------- */
.ft{background:var(--ink);color:rgba(255,253,247,.9);padding:64px 0 40px;font-size:var(--fs-body)}
.ft a{text-decoration:none;color:inherit}
.ft a:hover{color:var(--sun)}
.ft .logo span{color:var(--paper)}
.ft__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px;padding-bottom:36px;box-shadow:0 1px 0 rgba(255,253,247,.16)}
.ft__brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-width:0}
@media (min-width:761px){.ft__brand{flex:1 1 520px}}   /* v3f: the 18px body made the brand block push the contact column under it */
.ft__brand p{max-width:40ch}
.ft__brand>p:last-child{flex-basis:100%}
.ft__badge{display:inline-flex;align-items:center;align-self:center;gap:8px;font:700 var(--fs-sm)/1.3 var(--font);color:var(--sun)}
.ft__contact{display:grid;gap:2px;align-content:start}
.ft__contact a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650;color:var(--paper)}
.ft__cols{display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;gap:24px 32px;padding:36px 0}   /* round 8: auto tracks may shrink, links wrap: no sideways scroll at large text */
.ft__cols summary{list-style:none;font:750 var(--fs-sm)/1.3 var(--font);color:var(--paper);margin-bottom:10px;cursor:default}
.ft__cols summary::-webkit-details-marker{display:none}
.ft__cols li a{display:inline-flex;align-items:center;min-height:44px;line-height:1.3;padding:4px 0;overflow-wrap:anywhere}
.ft__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-top:24px;box-shadow:0 -1px 0 rgba(255,253,247,.16);font-size:var(--fs-sm);color:rgba(255,253,247,.82)}
.ft__bottom a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}

/* (the v3d soft reveal on .rv is the MOTION block now: .rv = a led unit) */

/* ---------- content slots (future photo shoot, YouTube, affiliate links, courses) ---------- */
body.show-slots [data-slot]{outline:2px dashed #b3261e;outline-offset:6px;position:relative}
body.show-slots [data-slot]::before{content:"slot: " attr(data-slot);position:absolute;z-index:20;top:-14px;left:6px;padding:2px 8px;background:#b3261e;color:#fff;font:600 12px/1.4 var(--mono);letter-spacing:.04em;border-radius:3px;pointer-events:none}
body.show-slots [data-slot][hidden]{display:block!important;opacity:.85}
body.show-slots .people__photo[data-slot]::before{top:10px;left:10px}

/* ---------- legacy v3a patterns (not used on the v3b home; kept so sibling pages still render) ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);display:flex;align-items:center;gap:10px}
.eyebrow b{font-weight:600;color:var(--ink)}
.eyebrow+.h2{margin-top:14px}
.tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);background:var(--mint);padding:3px 8px;border-radius:3px;white-space:nowrap}
.row-label{font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rows{border-bottom:1px solid var(--rule)}
.rows>li>a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 2px;border-top:1px solid var(--rule);font-size:var(--fs-body);font-weight:600;line-height:1.3;text-decoration:none;color:var(--ink)}
.rows>li>a::after{content:"→";flex:none;font-weight:600;color:var(--green)}
.rows>li>a:hover{color:var(--green)}

/* ==========================================================================
   Intake page (.flow): calm full-screen guided intake around survey-core.js.
   Options use the same glance chips: lane disc + short label, no sublines (kept for screen readers).
   Lanes: static options carry .is-*; engine steps inherit the lane d5.js sets on the form (data-lane).
   ========================================================================== */
.flow-body{background:var(--paper);min-height:100svh;display:flex;flex-direction:column}
/* v3c: the header content lines up with the form column (.flow is 820px wide with a 24px gutter = 772px) */
.flow-hd{display:flex;align-items:center;gap:16px;height:64px;padding:0 max(var(--gut),calc((100% - 772px) / 2));box-shadow:0 1px 0 var(--rule);background:var(--paper)}
.flow-hd__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.flow-hd__right a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font-weight:650;text-decoration:none;color:var(--ink-2);border-radius:6px}
.flow-hd__right a:hover{color:var(--green)}
/* Close matches the phone menu's Close (round 4): stamp outline, x + label */
.flow-hd__right a.flow-hd__close{padding:0 14px 0 10px;border:1.5px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);color:var(--ink)}
.flow-hd__right a.flow-hd__close:hover{color:var(--green)}
.flow{flex:1;width:100%;max-width:820px;margin:0 auto;padding:0 var(--gut) 40px}
.flow__top{position:sticky;top:0;z-index:5;background:var(--paper);padding:22px 0 14px}
.flow__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:var(--fs-sm);color:var(--ink-3)}
.flow__meta h1{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);letter-spacing:0}
.flow__meta .ico{vertical-align:-4px;margin-right:4px}
/* v3c: "Step 1 of 4" (d5.js, JS only) sits at the end of the meta row */
.flow__count{margin-left:auto;font-weight:700;color:var(--ink-2);white-space:nowrap}
.flow__progress{position:relative;height:6px;margin-top:12px;background:var(--start-tint);border-radius:6px;overflow:hidden}
.flow__progress::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--green);border-radius:6px;transition:width .3s var(--ease)}
/* v3d: the two context rows sit below the sticky top (only meta + progress stay pinned, about 70px) */
.flow__ctx{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:0;margin-top:4px;font-size:var(--fs-body);color:var(--ink-2)}
.flow__ctx+.flow__ctx{margin-top:0}
.flow__k-s{display:none}
.flow__ctx b{color:var(--ink);font-weight:700}
/* v3c: the value and its "Change" link wrap together, never apart */
.flow__val{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.flow__ctx button,.flow__ctx a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;font-weight:650;color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.flow__ctx select{min-height:48px;align-self:center;padding:0 10px;border:0;box-shadow:inset 0 0 0 1.5px var(--rule-2);border-radius:8px;background:var(--paper);font:600 var(--fs-body) var(--font);color:var(--ink)}
.flow form{margin-top:18px}
.flow .cs-q{border:0;padding:0;min-width:0;margin:16px 0 0}
.flow .cs-q__legend{display:block;padding:0;font-weight:800;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em;color:var(--ink);max-width:22ch;outline:none}
.flow .cs-q__legend:focus-visible{outline:3px solid var(--green);outline-offset:6px;border-radius:6px}
.flow .cs-q__help{margin-top:12px;font-size:var(--fs-body);color:var(--ink-2);max-width:48ch}
/* lane per branch (set by d5.js on the form); static options override with their own .is-* */
.flow form{--c:var(--start);--c-tint:var(--start-tint);--c-soft:var(--start-soft);--c-icon:var(--start-icon);--c-ink:var(--start-ink);--c-on:#fff}
.flow form[data-lane="run"]{--c:var(--run);--c-tint:var(--run-tint);--c-soft:var(--run-soft);--c-icon:var(--run-icon);--c-ink:var(--run-ink);--c-on:var(--ink)}
.flow form[data-lane="learn"]{--c:var(--learn);--c-tint:var(--learn-tint);--c-soft:var(--learn-soft);--c-icon:var(--learn-icon);--c-ink:var(--learn-ink);--c-on:#fff}
.flow form[data-lane="urgent"]{--c:var(--urgent);--c-tint:var(--urgent-tint);--c-soft:var(--urgent-soft);--c-icon:var(--urgent-icon);--c-ink:var(--urgent-ink);--c-on:#fff}
.flow form[data-lane="prog"]{--c:var(--prog);--c-tint:var(--start-tint);--c-soft:var(--start-soft);--c-icon:var(--prog);--c-ink:var(--prog);--c-on:var(--sun)}
.flow .cs-q__opts{display:grid;gap:12px;margin-top:28px}
@media (min-width:640px){.flow .cs-q__opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow .cs-opt{position:relative;display:flex;align-items:center;gap:16px;min-height:68px;padding:12px 16px 12px 12px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.flow .cs-opt:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.flow .cs-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.flow .cs-opt__icon{display:grid;place-items:center;flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--c-tint);color:var(--c-icon);transition:background-color .2s var(--ease),color .2s var(--ease)}
.flow .cs-opt__icon .cs-ico{--n:24}
.flow .cs-opt:hover .cs-opt__icon{background:var(--c);color:var(--c-on)}
.flow .cs-opt__text{display:block;flex:1;min-width:0}
.flow .cs-opt__label{font-size:var(--fs-body);font-weight:650;line-height:1.3;color:var(--ink)}
.flow .cs-opt__help{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flow .cs-opt::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule-2);transition:background-color .15s,box-shadow .15s}
.flow .cs-q--multi .cs-opt::after{border-radius:7px}
.flow .cs-opt:has(input:checked){background:var(--c-tint);box-shadow:none}
.flow .cs-opt:has(input:checked) .cs-opt__icon{background:var(--c);color:var(--c-on)}
.flow .cs-opt:has(input:checked) .cs-opt__label{color:var(--c-ink);font-weight:750}
.flow .cs-opt:has(input:checked)::after{box-shadow:none;background:var(--green-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/15px no-repeat}
.flow .cs-opt:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.flow .cs-opt.is-prog:has(input:checked){background:var(--start-soft)}
.flow .cs-opt--urgent{background:var(--urgent-tint);box-shadow:none}
.flow .cs-opt--urgent .cs-opt__label{color:var(--urgent-ink);font-weight:750}
.flow .cs-opt--urgent .cs-opt__icon{background:var(--urgent);color:#fff}
.flow .cs-opt--door{flex-direction:column;align-items:flex-start;gap:16px;min-height:168px;padding:20px 20px 20px 20px;background:var(--c-tint);box-shadow:none}
.flow .cs-opt--door .cs-opt__icon{width:4rem;height:4rem;background:var(--c);color:var(--c-on)}
.flow .cs-opt--door .cs-opt__icon .cs-ico{--n:28}
.flow .cs-opt--door .cs-opt__label{font-size:var(--fs-lead);font-weight:800;letter-spacing:-.015em;color:var(--c-ink)}
.flow .cs-opt--door::after{position:absolute;top:20px;right:20px;background:#fff}
.flow .cs-opt--door:hover{box-shadow:var(--sh-2)}
.flow .cs-opt--door:has(input:checked){box-shadow:0 0 0 3px var(--c),var(--sh-2)}
.flow .cs-q__fields{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
@media (min-width:640px){.flow .cs-q__fields{grid-template-columns:1fr 1fr}.flow .cs-q__fields .cs-field:has(textarea),.flow .cs-q__fields .cs-field--check{grid-column:1/-1}}
.flow .cs-field{display:grid;gap:6px}
.flow .cs-field__label{font-size:var(--fs-body);font-weight:650;color:var(--ink)}
.flow .cs-field__input{width:100%;min-height:52px;padding:12px 14px;border:0;border-bottom:1.5px solid var(--ink-3);border-radius:8px 8px 0 0;background:var(--cream);font:500 var(--fs-body)/1.4 var(--font);color:var(--ink)}
.flow textarea.cs-field__input{min-height:120px;resize:none;field-sizing:content;max-height:20em}
.flow .cs-field__input:focus{outline:none;border-bottom-color:var(--green);box-shadow:0 2px 0 var(--green)}
.flow .cs-field__help{font-size:var(--fs-sm);color:var(--ink-3)}
.flow .cs-field--check{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body)}
.flow .cs-field--check input{width:22px;height:22px;margin-top:2px;accent-color:var(--green)}
.flow .cs-q__legal{margin-top:18px;font-size:var(--fs-sm);color:var(--ink-3);max-width:60ch}
.flow .cs-q__error{margin-top:16px;padding:12px 16px;border-radius:var(--r-s);background:var(--urgent-tint);font-weight:650;color:var(--urgent-ink)}
.flow .cs-q__nav{display:flex;align-items:center;gap:16px;margin-top:32px}
.flow .cs-q__nav [data-back]{min-height:48px;padding:0 6px;border:0;background:none;font:650 var(--fs-body) var(--font);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.flow .cs-q__nav [data-next]{margin-left:auto}
.flow .is-done .cs-q__nav{display:none}
.flow .cs-q.is-current{animation:step-in .24s var(--ease) both}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flow .cs-done{padding:8px 0 0;outline:none}
.flow.is-done .flow__ctx{display:none}
.flow .cs-done__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.flow .cs-done__body{margin-top:14px;font-size:var(--fs-body);color:var(--ink-2);max-width:52ch}
.flow .cs-done__cta{display:none}
.flow__thanks{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.flow__note{margin-top:18px;font:650 var(--fs-sm)/1.4 var(--font);color:var(--ink-3)}
.flow__urgent{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:40px}
.flow__urgent .uchip{min-height:52px}
.flow__urgent .close__tel{font-size:var(--fs-body)}
.flow__nojs{margin-top:16px;font-size:var(--fs-body);color:var(--ink-2)}
.js .flow__nojs,.js .flow__go{display:none}
.no-js .cs-q__nav{display:none}
.no-js .flow .cs-q+.cs-q{margin-top:40px}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .nav>li>a,.nav__btn{padding:0 9px}
  body[data-hero^="sky"] .hero .lc--b{display:none}
  /* business-type buttons: every one visible, 5 x 2 (no sideways scroller) */
  .who__tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 8px}
  .layer{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}
  .path__list{gap:160px}
}
@media (max-width:980px){
  :root{--hd:60px;--sec:89px}
  .nav,.hd__cta{display:none}
  .call-btn,.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);text-decoration:none;font:650 var(--fs-body) var(--font);color:var(--ink);cursor:pointer}
  .call-btn{margin-left:auto}
  .menu-btn{padding:0 14px}
  .no-js .menu-btn{display:none}
  /* JS off: the nav becomes its own second row (44px links, scrolls sideways if it must), never over the ubar or hero */
  .no-js .hd__bar{flex-wrap:wrap;height:auto;min-height:var(--hd);row-gap:0}
  .no-js .hd__bar>nav{order:3;flex-basis:100%;margin-left:0;overflow-x:auto}
  .no-js .nav{display:flex;flex-wrap:nowrap;margin-left:0}
  .no-js .hd .logo{min-height:var(--hd)}
  .ubar__right>a:not(.ubar__call){display:none}
  .ubar a.ubar__call{display:inline-flex}
  .panel{display:none!important}
  .faq__grid{grid-template-columns:1fr;gap:32px}
  /* vine stacks: node column on the left, text then example screen */
  .stack__head{margin-bottom:48px;text-align:left}
  .path__list{gap:88px}
  .layer{grid-template-columns:72px minmax(0,1fr);column-gap:24px;row-gap:28px;align-items:start}
  .layer:nth-child(n) .layer__node{grid-column:1;grid-row:1}
  .layer:nth-child(n) .layer__text{grid-column:2;grid-row:1;justify-self:start}
  .layer:nth-child(n) .layer__scene{grid-column:2;grid-row:2;justify-content:flex-start}
  .layer__node::after{display:none}
  .path.has-stem .layer__handoff{display:none}
  .tools{gap:12px 24px}
  .who__panel{grid-template-columns:1fr;gap:28px}
  .prog2__grid{grid-template-columns:1fr;max-width:560px}
  .work__grid{grid-template-columns:1fr;gap:56px;max-width:560px}
  .people__grid{grid-template-columns:1fr;gap:36px}
  .people__photo{max-width:520px}
  .learn__head{grid-template-columns:1fr}
  .learn__art{justify-self:start;max-width:360px}
  .learn>.wrap>.choose .gchips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prog2__grid{gap:16px}
  .watch{grid-template-columns:1fr;gap:24px}
  .pos{grid-template-columns:1fr;gap:12px}
  .pos__p{justify-self:start}   /* one column: the caption sits under its heading, left-aligned (was pushed right at 761-980px) */
  /* hero green: stacked */
  body[data-hero="green"] .hero__stage{grid-template-columns:1fr;min-height:0}
  body[data-hero="green"] .hero__text{grid-column:1;grid-row:1;padding:40px var(--gut) 36px}
  body[data-hero="green"] .hero__art[data-variant="green"]{grid-column:1;grid-row:2;height:min(92vw,560px)}
  body[data-hero="green"] .hero .lc{display:none}
}
@media (max-width:760px){
  /* v3e BIG ON PHONES (owner round 2: "blow stuff up on the phone so old people can read it"): body 19px, labels and
     chips 17px+, headings larger, line-height 1.6, every button, chip, row and tile 56px+ tall. Sizes in rem, so the
     reader's own font size (and 200% text zoom) scales them; checked at 320px and at a 32px root. */
  /* golden scale on a 19px body (v3f): sm 17 (floor) · lead 24.2 · h3 30.7 · h2 36 to 39 · h1 44 to 50 · hero 44 to 60 */
  :root{--gut:18px;--sec:89px;--fs-body:1.1875rem;--fs-sm:1.0625rem;--fs-h2:clamp(2.25rem,10vw,calc(var(--fs-body) * 2.058));
    --fs-h1:clamp(2.75rem,12.75vw,calc(var(--fs-body) * 2.618));--fs-display:clamp(2.75rem,14.6vw,3.75rem);--ic:1.5rem}
  body{font-size:var(--fs-body);line-height:1.6}
  /* icons: nothing under 24 (mocks keep 16); every disc is 55 with a 28 icon (golden: icon = disc / phi) */
  .ico,.cs-ico{--n:24}.ico--28{--n:28}.ico--34{--n:34}
  .mock .ico{--n:16}
  .disc,.disc--s,.disc--m,.disc--l{--d:55}
  .disc .ico,.disc--s .ico,.disc--l .ico{--n:28}
  .h2,.pos__h{font-size:var(--fs-h2);line-height:1.08}
  .sec-line,.pos__p{font-size:var(--fs-body)}
  .btn{min-height:3.5rem;font-size:var(--fs-body)}
  .btn--sm{min-height:3rem;font-size:var(--fs-sm)}
  .go{min-height:3rem;font-size:var(--fs-body)}
  .ubar{font-size:var(--fs-sm)}
  .ubar .wrap{min-height:48px;gap:12px}
  .ubar a{min-height:48px}
  .ubar__long{display:none}
  .ubar__short{display:inline}
  .logo span{font-size:23px}
  .menu__paths{grid-template-columns:minmax(0,1fr);gap:4px}
  .menu__paths a{font-size:var(--fs-body)}
  .menu__urgent{font-size:var(--fs-body)}
  /* one phone link on the first screen: the utility bar's "Call"; the header keeps Menu only */
  .call-btn{display:none!important}
  .menu-btn{margin-left:auto;min-height:48px;font-size:var(--fs-sm)}
  /* hero on the phone: text first on the clear top, mascot below, fading into cream */
  .hero__stage{display:block;min-height:0}
  .hero__text{padding:34px var(--gut) 24px}
  body[data-hero="sky"] .hero__text{padding-bottom:300px}
  body[data-hero="sky"] .hero__art[data-variant="sky"]{background:linear-gradient(to bottom,#5098e2 0%,#5098e2 30%,#6aa8e6 60%,#79b1e9 100%)}
  body[data-hero="sky"] .hero__art[data-variant="sky"] picture{position:absolute;inset:auto 0 0 0;height:auto}
  body[data-hero="sky"] .hero__art[data-variant="sky"] img{position:relative;inset:auto;height:auto;width:100%;object-fit:contain}
  .hero__wash{background:linear-gradient(to bottom,rgba(250,252,253,.66) 0%,rgba(250,252,253,.64) 64%,rgba(250,252,253,.3) 74%,rgba(250,252,253,0) 82%)!important}
  body[data-hero="sky-v1"] .hero__wash{background:linear-gradient(to bottom,rgba(250,252,253,.35),rgba(250,252,253,0) 70%)!important}
  .hero .lc--a{width:78px;top:auto;bottom:210px;right:4%}
  body[data-hero="sky-plain"] .hero .lc--a{display:none}
  .hero .lc--b{display:none}
  .hero__px{display:none!important}
  .hero h1{font-size:var(--fs-h1)}
  .hero .lead{font-size:var(--fs-body)}
  .badge{font-size:var(--fs-sm)}
  .proof{font-size:var(--fs-sm)}
  .hero__doors{flex-direction:column}
  .hero__doors .btn{width:100%}
  /* what do you need: the two colour zones stay, two tiles a row, bigger objects and labels */
  .paths{padding:var(--sp-1) 0 var(--sp-5)}
  .pos__p{justify-self:start}
  .paths .say{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-2) var(--sp-3)}
  .zones{gap:var(--sp-3);margin-top:var(--sp-4)}
  .zone{padding:var(--sp-3) var(--sp-2) var(--sp-2);border-radius:24px}
  .zone__h{font-size:var(--fs-lead);padding-left:4px}
  .zone__h .disc{--d:55}.zone__h .disc .ico{--n:28}
  /* fluid: two a row at 320 to 760, one a row when the reader's font is large (rem / em based) */
  .otiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,6.4em),1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
  .otile{padding:var(--sp-2) var(--sp-1) var(--sp-2);border-radius:18px;gap:4px}
  .otile::after{top:10px;right:10px}
  .otile__sel{top:9px;right:9px}
  .otile__key{top:10px;left:10px}
  .otile__plate{height:calc(min(var(--obj),24vw) + 8px)}
  .otile__plate img{width:min(var(--obj),24vw);height:min(var(--obj),24vw)}
  .otile__lab{font-size:var(--fs-body);line-height:1.25}
  .otfoot{flex-direction:column;align-items:stretch;gap:10px;margin-top:var(--sp-4)}
  .otfoot .cyc{align-self:flex-end}
  .otile--urgent{flex-wrap:wrap;padding-right:18px;min-height:4.5rem}
  .otile--urgent .otile__lab{flex:1;font-size:var(--fs-body)}
  .otile__cta{font-size:var(--fs-sm)}
  .more{justify-content:flex-start}
  .opts{grid-template-columns:1fr;gap:10px}
  .opt{min-height:3.75rem;gap:14px;font-size:var(--fs-body)}
  .opt--urgent{gap:12px;padding-right:12px}
  /* picker: 4 a row (3 under 381px), short labels, 17px, every option visible */
  .who__box{margin-top:28px}
  .who__tabs{grid-template-columns:repeat(auto-fill,minmax(min(100%,4.6em),1fr));gap:16px 4px;margin:0 -6px}
  .who__tab{gap:8px;padding:4px 0 6px;font-size:var(--fs-sm);line-height:1.2}
  .who__tab[aria-selected="true"] .disc{box-shadow:0 0 0 4px var(--cream),0 0 0 5.5px var(--rule-2),var(--sh-2)}
  .who__lab-l{display:none}
  .who__lab-s{display:inline}
  .who__panels{margin-top:24px}
  .who__name{font-size:var(--fs-lead)}
  .scene{min-height:240px;padding:40px 16px}
  /* the business name, the pain and the setups come first; the example card follows (v3d) */
  .who__panel .scene{order:2}
  .scene__card{max-width:280px}
  .pain{gap:14px;padding:14px 16px 14px 14px;font-size:var(--fs-body)}
  .pain b{font-size:var(--fs-sm)}
  .got__list{grid-template-columns:1fr;gap:4px;margin-top:14px}
  .got{font-size:var(--fs-body);min-height:3.75rem}
  .who__cta .btn{width:100%}
  /* vine */
  .stack__head{margin-bottom:44px}
  .path__list{gap:72px}
  .layer{grid-template-columns:56px minmax(0,1fr);column-gap:12px}
  .layer:nth-child(n) .layer__node{width:var(--disc-m);height:var(--disc-m);font-size:24px}
  .layer h3{font-size:var(--fs-h3)}
  .layer__promise{font-size:var(--fs-body)}
  .vchips{grid-template-columns:1fr;gap:8px}
  .vchip{min-height:3.5rem;gap:12px;padding:4px 16px 4px 4px;font-size:var(--fs-body);line-height:1.25}
  .vchip>span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
  /* JS off: the second header row fits five links at 360 */
  .no-js .nav{justify-content:space-between;gap:0}
  .no-js .nav>li>a{padding:0 6px;font-size:15px}
  .mock{max-width:100%}
  .mock--inbox{padding:16px 12px 14px}
  .inbox__rows li{gap:8px;padding:8px}
  .path__end p{font-size:var(--fs-body)}
  /* programs */
  .prog2{gap:16px;padding:20px 20px 18px 16px;border-radius:var(--r-l)}
  .prog2__name{font-size:var(--fs-lead)}
  .prog2__go{font-size:var(--fs-body);min-height:3rem}
  .pill{font-size:var(--fs-sm);min-height:2.25rem}
  /* learn */
  .blk__h{font-size:var(--fs-lead)}
  .gchips,.learn>.wrap>.choose .gchips{grid-template-columns:1fr;gap:10px}
  .gchip{min-height:4rem;font-size:var(--fs-body)}
  .learn>.wrap>.choose{margin-top:40px}
  .course{padding:24px}
  .course h3{font-size:var(--fs-lead)}
  .course__obj{width:112px;height:112px;top:-24px;right:8px}
  .course .btn{width:100%}
  .watch{padding:20px}
  .watch h3{font-size:var(--fs-lead)}
  .vids{grid-template-columns:1fr;gap:20px}
  .vid__t{font-size:var(--fs-body)}
  .vid__meta,.vid__time{font-size:var(--fs-sm)}
  .tools__lab,.logos__lab{font-size:1.0625rem}
  .tools__row{gap:8px}
  .tools__row li{min-height:3rem;padding:6px 16px 6px 12px;font-size:var(--fs-sm)}
  .tools__row img{width:22px;height:22px}
  /* work, people */
  .proj h3{font-size:var(--fs-lead)}
  .proj__place{font-size:var(--fs-sm)}
  .ptags li{min-height:2.25rem;font-size:var(--fs-sm)}
  .logos__row{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:start;gap:24px 20px}
  .logos__row img{max-height:40px;max-width:100%}
  .people__photo--shot{aspect-ratio:1/1}
  .people__photo--art img{inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}
  .irow{font-size:var(--fs-body);min-height:3.75rem}
  .quote blockquote{font-size:var(--fs-lead)}
  .quote figcaption{font-size:var(--fs-sm)}
  /* faq, close, footer */
  .faq summary{font-size:var(--fs-body)}
  .faq details p{padding-right:8px;font-size:var(--fs-body)}
  .close{padding-top:96px}
  .close__btns{flex-direction:column}
  .close__btns .btn{width:100%}
  .close__row{flex-direction:column;gap:12px}
  .close__tel{font-size:var(--fs-body);min-height:3.5rem}
  .uchip{min-height:3.5rem;font-size:var(--fs-body)}
  /* closing band: the red chip is a tidy two-line card (label over "Get help"), so "Get help" never drops under the disc */
  :is(.close,.flow__urgent) .uchip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;padding:8px 22px 8px 8px;border-radius:30px}
  :is(.close,.flow__urgent) .uchip>.disc{grid-row:span 2}
  :is(.close,.flow__urgent) .uchip__cta{margin-left:0}
  .close .lc--a{width:78px;top:18px}
  .close .lc--b{display:none}
  .ft{font-size:var(--fs-sm)}
  .ft__bottom{font-size:var(--fs-sm)}
  .ft__bottom a{min-height:48px}
  /* intake */
  .flow .cs-opt__label{font-size:var(--fs-body)}
  .flow .cs-opt--door{min-height:0;flex-direction:row;align-items:center;padding:16px}
  .flow .cs-opt--door .cs-opt__icon{width:3.5rem;height:3.5rem}
  .flow .cs-opt--door::after{position:static}
  .flow-hd__right a span{display:none}
  .flow-hd__right a{min-width:48px;min-height:48px;justify-content:center}
  .flow .cs-q__nav [data-next]{flex:1}
  /* large reader fonts (200% text zoom): rows wrap instead of pushing the page sideways */
  .ubar .wrap{flex-wrap:wrap}
  .prog2__grid{grid-template-columns:minmax(0,1fr)}
  .pill,.nw,.ft__cols li a{white-space:normal}
  .close__tel,.uchip{flex-wrap:wrap;max-width:100%}
  .ft__brand,.ft__contact{min-width:0;max-width:100%}
  .ft__contact a,.ubar a{overflow-wrap:anywhere}
  .h2,.pos__h,.hero h1,.layer h3,.prog2__name,.otile__lab,.who__name,.gchip,.vid__t,.zone__h{overflow-wrap:anywhere}   /* breaks a word only when it cannot fit (large fonts); never hyphenates */
  .otiles>li,.who__panel>*,.gchips>li,.zones>*{min-width:0}
  .gchips,.learn>.wrap>.choose .gchips,.people__grid,.who__panel,.zones{grid-template-columns:minmax(0,1fr)}
  .prog2,.zone__h,.irow{flex-wrap:wrap}
  .prog2__txt{flex:1 1 10em;min-width:0}
  .irow{display:flex;max-width:100%}
  .got__list>li,.got__lab,.pain>span{min-width:0}
  .got__lab,.pain>span{overflow-wrap:break-word}
}
/* ---------- ROUND 5 PHONE FORMS (owner, at 390: "this part should be centred though, and ... this same style boxed is used
   so much maybe they can be cooler or more original ... I like it on desktop"). Phones only (<= 760px); desktop unchanged.
   1. Centred: every block spans the same two gutters (no max-width block hugging the left on a big phone).
   2. Fewer boxes: the rounded boxes stay for the real cards ("What do you need?" tiles, example screens, the sentence card,
      the urgent chip). Lists of links become open rows: a small lane-coloured icon, a big label, a thin rule between rows
      and a quiet arrow (vine services, programs, guides, the business-type setups). Tools and work tags lose their pills.
      Rows stay >= 56px tall, labels >= 18px. ---------- */
@media (max-width:760px){
  .prog2__grid,.work__grid{max-width:none}
  .people__photo{margin-inline:auto;width:100%;max-width:520px}   /* round 8: the image is absolutely placed, so the figure needs a width (it collapsed to 0x0) */
  .learn__art{justify-self:center}
  /* open rows (shared look) */
  .vchips,.gchips,.learn>.wrap>.choose .gchips,.got__list{gap:0}
  .vchips>li+li,.gchips>li+li,.got__list>li+li{border-top:1px solid var(--rule)}
  :is(.vchip,.gchip,.got){min-height:3.75rem;gap:14px;padding:6px 2px;border-radius:0;background:none;box-shadow:none;font-size:var(--fs-body)}
  :is(.vchip,.gchip,.got) .disc{--d:32;background:none;box-shadow:none}
  :is(.vchip,.gchip,.got) .disc .ico{--n:24}
  :is(.vchip,.gchip,.got)::after{content:"→";margin-left:auto;padding-left:10px;font-weight:600;transition:transform .18s var(--ease)}
  :is(.vchip,.gchip,.got):hover{background:none;box-shadow:none;transform:none}
  :is(.vchip,.gchip,.got):hover::after{transform:translateX(3px)}
  :is(.vchip,.gchip,.got):hover .disc{background:none}
  /* vine services: green (the stem's colour) */
  .vchips{margin-top:18px}
  .vchip{font-weight:600}
  .vchip .disc,.vchip::after{color:var(--green)}
  /* guides: sky (learning) */
  .gchip{color:var(--learn-ink);font-weight:650}
  .gchip .disc,.gchip:hover .disc,.gchip::after{color:var(--learn-icon)}
  /* business-type setups: green, sky for a learning item */
  .got__list{margin-top:10px}
  .got .disc,.got::after{color:var(--start-icon)}
  .got.is-learn .disc{background:none;color:var(--learn-icon)}
  /* programs: open rows on the deep green band, a soft rule between, the lane disc kept (it carries the colour code) */
  .prog2__grid{gap:0;margin-top:28px}
  .prog2__grid>li+li{border-top:1px solid rgba(255,253,247,.18)}
  .prog2{gap:18px;padding:24px 0;border-radius:0;background:none}
  .prog2:hover{background:none}
  .prog2>.disc{--d:55}
  /* tools: a two-column list of logo + name, no pills */
  .tools__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5em),1fr));gap:0 20px}   /* 2 a row; 1 at 200% text */
  .tools__row li{min-width:0;overflow-wrap:anywhere}
  .tools__row li{min-height:3.25rem;padding:6px 0;border-radius:0;background:none;box-shadow:0 1px 0 var(--rule);font-size:var(--fs-sm)}
  /* work tags: plain words with a dot between, no pills */
  .ptags{gap:2px 0}
  .ptags li{min-height:0;padding:0;border-radius:0;background:none;font-size:var(--fs-sm);color:var(--ink-2)}
  .ptags li+li::before{content:"\00B7";margin:0 10px;color:var(--ink-3);font-weight:800}
  /* business types: rows of four, the last row centred (was a left-hugging 4 + 4 + 2 grid); fewer a row at large fonts */
  .who__tabs{display:flex;flex-wrap:wrap;justify-content:center}
  .who__tab{flex:0 0 max(calc((100% - 12px) / 4),4.6em);min-width:0}
}
@media (max-width:420px){
  /* intake: "Type:" so label, value and Change fit one line, like "Starting point" */
  .flow__k-l{display:none}
  .flow__k-s{display:inline}
  /* the hub example: tick only, so "Synced" never overflows */
  .hub__ok{font-size:0;gap:0}
  .mock--hub{padding:18px 14px 16px}
  .hub__tools{margin-left:16px}
  .hub__tools li{margin-left:16px}
  .hub__tools li::before{left:-17px;width:16px}
  .hub__tools li:last-child::after{left:-19px}
}
@media (max-width:380px){
  /* vine at 360: a slimmer node column so every word ("Integrations", "Accounting") fits its line */
  .layer{grid-template-columns:48px minmax(0,1fr);column-gap:10px}
  .layer:nth-child(n) .layer__node{width:48px;height:48px;font-size:21px}
  .zone{padding:16px 10px 12px}
  .otiles{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hl::after{transform:none}
  .pxs{display:none}
  .path__leaves path{transform:scale(1)}
  /* no lifts or zooms */
  .otile:hover .otile__plate img,.otile:hover .otile__plate .disc,.otile--urgent:hover,.prog2:hover>.disc,
  .opt:hover,.gchip:hover,.vchip:hover,.uchip:hover,.who__tab:hover .disc,.prog2:hover .odisc img,
  .proj a:hover .shot,a.irow:hover .disc,.vid a:hover .vid__play,.flow .cs-opt:hover,.btn:hover,.btn:active{transform:none}
}

/* >>> HERO-X block (home hero options sky-glow / sky-depth, v3e; owner: "make the hero cooler", calm) >>> */
/* ==========================================================================
   Two extra values for the HERO SWITCH (body[data-hero]). sky-glow won the v3e owner-lens judging and is the default;
   it borrows the pixel-to-crisp cloud-sprout entrance from sky-depth (finer steps). "sky" stays reachable (?hero=sky).
   sky-glow  "Sunlit": bigger type, a CSS sky with a soft sun glow behind the cloud-sprout, which floats on its own layer
             over a soft shadow; 3 live-site line clouds drift slowly in a lane right of the text.
   sky-depth "Layered sky": far haze / mid line clouds / near cloud-sprout move at different rates with the mouse and with
             scroll (d5.js, CSS translate only); the cloud-sprout comes in pixel-to-crisp, sparkles twinkle one at a time.
   Clouds = today's cloudsprout.ca line clouds (ink stroke, see-through paper fill, slow drift + bob, mouse parallax).
   Never over text: they live in .hx__lane, right of the text column (phones: the art zone under the text).
   Reduced motion = the same composition, still. JS off = the same composition; only the CSS drift / float run.
   Classes: .hx (art root) .hx__sky .hx__sun .hx__far .hx__lane .hc (cloud) .hx__m (cloud-sprout) .hx__float .hx__shadow .hx__px
   ========================================================================== */
body[data-hero="sky-glow"] .hero__art[data-variant="sky-glow"],body[data-hero="sky-depth"] .hero__art[data-variant="sky-depth"]{display:block}
body:is([data-hero="sky-glow"],[data-hero="sky-depth"]) .hero__stage>.lc{display:none}
.hx{overflow:hidden;
  --m-w:clamp(240px,23vw,340px);                    /* cloud-sprout width (owner: art subtle, objects smaller) */
  --m-r:max(4%,calc(50% - 540px));                  /* its right edge, inside the 1180 wrap */
  --m-t:20%}
.hx>*{position:absolute}
.hx__sky{inset:0}
/* the cloud-sprout: its own layer. .hx__m = reveal + parallax (translate), .hx__float = the float (transform) */
.hx__m{margin:0;z-index:3;width:var(--m-w);right:var(--m-r);top:var(--m-t);aspect-ratio:760/708}
.hx__float{position:absolute;inset:0;display:block}
.hero__art.hx .hx__float img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.hx__px{position:absolute;inset:-6% -10%;pointer-events:none}
.hx__px .px{width:6px;height:6px;opacity:.8}
.hx__px .px--plus{width:9px;height:9px;background:none}
.hx__px .px--plus::before{left:3px;width:3px;height:9px}
.hx__px .px--plus::after{top:3px;width:9px;height:3px}
/* line clouds: a lane right of the text. Each one drifts across it (100-140 s), bobs, and fades at the lane ends. */
.hx__lane{z-index:2;top:0;bottom:0;right:0;left:max(56%,calc(50% + 70px));container-type:inline-size;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.hc{position:absolute;left:0;top:var(--y);width:var(--w);opacity:var(--o,.7);transform:translateX(var(--rest,30cqw))}
.hc svg{display:block;width:100%;height:auto;overflow:visible;fill:rgba(255,253,247,.6);stroke:rgba(21,23,15,.62);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.hc svg use,.hc svg path{vector-effect:non-scaling-stroke}
.hc--1{--y:8%;--w:150px;--o:.82;--dur:130s;--del:-52s;--bob:9s;--rest:12cqw}
/* the two low clouds pass under the cloud-sprout's floor shadow, never through it (shadow + mouse parallax end near 69%) */
.hc--2{--y:82%;--w:104px;--o:.7;--dur:100s;--del:-18s;--bob:7s;--rest:62cqw}
.hc--3{--y:71%;--w:124px;--o:.56;--dur:150s;--del:-104s;--bob:11s;--rest:30cqw}
@media (prefers-reduced-motion:no-preference){
  html:not(.rm) .hc{animation:hx-go var(--dur) linear var(--del) infinite}
  html:not(.rm) .hc svg{animation:hx-bob var(--bob) ease-in-out infinite alternate}
  html:not(.rm) .hx__float{animation:hx-float 8s ease-in-out infinite alternate}
}
@keyframes hx-go{from{transform:translateX(-100%)}to{transform:translateX(100cqw)}}
@keyframes hx-bob{from{transform:translateY(0) rotate(0)}to{transform:translateY(-6px) rotate(-1deg)}}
@keyframes hx-float{from{transform:translateY(5px) rotate(.4deg)}to{transform:translateY(-9px) rotate(-.7deg)}}

/* ---- sky-glow "Sunlit" ---- */
.hx--glow .hx__sky{background:
  radial-gradient(ellipse 70% 60% at 88% 0%,rgba(255,249,230,.42),rgba(255,249,230,0) 62%),
  linear-gradient(180deg,#3e88d8 0%,#5b9fe3 30%,#92c3ef 62%,#cde5f8 84%,#eaf3f6 100%)}
.hx--glow{--s-w:calc(var(--m-w) * 2.2)}
.hx__sun{z-index:1;width:var(--s-w);aspect-ratio:1;border-radius:50%;
  right:calc(var(--m-r) + var(--m-w) / 2 - var(--s-w) / 2);top:calc(var(--m-t) + var(--m-w) * .44 - var(--s-w) / 2);
  background:radial-gradient(closest-side,rgba(255,244,206,.95),rgba(255,236,186,.6) 30%,rgba(255,228,170,.22) 58%,rgba(255,228,170,0))}
@media (prefers-reduced-motion:no-preference){
  html:not(.rm) .hx__sun.mo-done,html:not(.mo):not(.rm) .hx__sun{animation:hx-breathe 12s ease-in-out infinite alternate}
}
@keyframes hx-breathe{from{opacity:.84;transform:scale(.97)}to{opacity:1;transform:scale(1.02)}}
.hx__shadow{position:absolute;left:24%;right:24%;bottom:-11%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,64,116,.24),rgba(22,64,116,0))}
@media (prefers-reduced-motion:no-preference){
  html:not(.rm) .hx__shadow{animation:hx-shadow 8s ease-in-out infinite alternate}
}
@keyframes hx-shadow{from{transform:scale(1);opacity:1}to{transform:scale(.84);opacity:.55}}
body[data-hero="sky-glow"] .hero__wash{background:
  radial-gradient(ellipse 60% 82% at 22% 50%,rgba(250,252,253,.74) 0%,rgba(250,252,253,.64) 44%,rgba(250,252,253,.22) 70%,rgba(250,252,253,0) 88%)}
/* bigger, confident type (the same words) */
body[data-hero="sky-glow"] .hero h1{font-size:var(--fs-display);line-height:.95;letter-spacing:-.045em;max-width:none}
body[data-hero="sky-glow"] .hero .lead{font-size:var(--fs-lead);max-width:30ch}
body[data-hero="sky-glow"] .hero h1{margin-top:28px}

/* ---- sky-depth "Layered sky" ---- */
.hx--depth{--m-w:clamp(250px,24vw,360px);--m-r:max(4%,calc(50% - 560px));--m-t:17%}
.hx--depth .hx__sky{background:
  radial-gradient(ellipse 60% 40% at 80% 100%,rgba(255,247,226,.5),rgba(255,247,226,0) 70%),
  linear-gradient(180deg,#2f78cc 0%,#4a91dc 26%,#84bbec 56%,#c6e1f7 80%,#e9f2f5 100%)}
/* far plane: soft haze puffs low in the sky (no outline), lighter and blurrier than anything in front */
.hx__far{z-index:1;inset:-4% -2% -10%;background:
  radial-gradient(ellipse 15% 6% at 76% 66%,rgba(255,255,255,.55),rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 11% 5% at 88% 60%,rgba(255,255,255,.42),rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 22% 7% at 64% 76%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 13% 4.5% at 94% 74%,rgba(255,255,255,.4),rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 18% 5% at 44% 80%,rgba(255,255,255,.28),rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 9% 3.5% at 60% 30%,rgba(255,255,255,.22),rgba(255,255,255,0) 72%)}
.hx--depth .hc--1{--y:9%;--w:92px;--o:.42;--dur:170s;--del:-60s;--rest:14cqw}    /* far: small, faint, slow */
.hx--depth .hc--2{--y:40%;--w:118px;--o:.6;--dur:130s;--del:-30s;--rest:8cqw}    /* mid: passes behind the cloud-sprout */
.hx--depth .hc--3{--y:auto;--w:168px;--o:.86;--dur:115s;--del:-70s;--rest:58cqw}  /* near: bigger, in front, low */
.hx--depth .hx__lane{left:max(52%,calc(50% + 40px))}
/* the near lane sits in front of the cloud-sprout (z 4), low in the sky, so the three planes read at a glance */
.hx__lane--near{z-index:4;top:auto;height:30%;bottom:27%}
.hx__lane--near .hc{top:auto;bottom:0}
/* both options: pixel-to-crisp first (d5.js depix on .hx__m), then the float (and the floor shadow, in step) starts */
html.mo:not(.mo-lite) .hx .hx__m:not(.mo-done) :is(.hx__float,.hx__shadow){animation-play-state:paused}
html.mo:not(.mo-lite) .hx .hx__m:not(.mo-done)::before,html.mo:not(.mo-lite) .hx .hx__m:not(.mo-done) .hx__px{opacity:0}
html.mo:not(.mo-lite) .hx .hx__m:not(.mo-done) .hx__shadow{visibility:hidden}
.hx--depth .hx__m::before{content:"";position:absolute;left:8%;right:8%;top:30%;bottom:-6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,252,240,.5),rgba(255,252,240,0))}
/* sparkles: one at a time (6 s loop, each lit about a second), never all at once */
.js .hero .hx--depth .px{animation:hx-seq 6s steps(1,end) var(--w,0s) infinite;opacity:.12}
.hx--depth .px:nth-child(2){--w:-4s}.hx--depth .px:nth-child(3){--w:-2s}
@keyframes hx-seq{0%,72%{opacity:.12}76%{opacity:.5}80%,92%{opacity:.9}96%{opacity:.4}100%{opacity:.12}}
body[data-hero="sky-depth"] .hero__wash{background:
  radial-gradient(ellipse 62% 84% at 22% 48%,rgba(250,252,253,.8) 0%,rgba(250,252,253,.7) 44%,rgba(250,252,253,.26) 70%,rgba(250,252,253,0) 88%)}
body[data-hero="sky-depth"] .hero h1{font-size:var(--fs-display);line-height:.96;letter-spacing:-.043em;max-width:none}

/* ---- phones and small tablets (<= 980): text first on a light top, the cloud-sprout in its own sky zone below ---- */
@media (max-width:980px){
  .hx{--m-w:min(64vw,300px);--m-r:calc(50% - var(--m-w) / 2);--m-t:auto}
  .hx__m{top:auto;bottom:clamp(56px,9vw,84px)}
  body:is([data-hero="sky-glow"],[data-hero="sky-depth"]) .hero__text{padding-bottom:calc(min(64vw,300px) * .93 + 112px)}
  body:is([data-hero="sky-glow"],[data-hero="sky-depth"]) .hero__stage::after{height:96px}
  .hx__lane{left:0;right:0;top:auto;bottom:48px;height:calc(min(64vw,300px) * .93 + 40px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .hc--1,.hx--depth .hc--1{--y:6%;--w:84px;--rest:6cqw}
  .hc--2,.hx--depth .hc--2{--y:58%;--w:66px;--rest:78cqw}
  .hc--3{display:none}
  .hx--glow .hx__sun{top:auto;bottom:calc(clamp(56px,9vw,84px) + var(--m-w) * .5 - var(--s-w) / 2)}
  /* the light wash ends just under the text, measured from the bottom, so the cloud-sprout zone keeps its colour */
  body[data-hero="sky-glow"] .hero__wash,body[data-hero="sky-depth"] .hero__wash{background:
    linear-gradient(to top,rgba(250,252,253,0) 0,rgba(250,252,253,0) calc(min(64vw,300px) * .93 + 76px),
      rgba(250,252,253,.66) calc(min(64vw,300px) * .93 + 170px),rgba(250,252,253,.7) 100%)!important}
  .hx--depth .hx__far{background:
    radial-gradient(ellipse 34% 4% at 22% 84%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 30% 3.5% at 84% 80%,rgba(255,255,255,.42),rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 44% 5% at 54% 92%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%)}
  body[data-hero="sky-glow"] .hero h1{font-size:var(--fs-display);line-height:.98}
  body[data-hero="sky-depth"] .hero h1{font-size:var(--fs-display);line-height:1}
  body[data-hero="sky-glow"] .hero .lead{font-size:var(--fs-lead)}
}
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  html:not(.rm) .hc{animation-duration:calc(var(--dur) * .6)}
}
/* <<< HERO-X block <<< */

/* >>> MOTION block (d5.js MOTION; context/D5-MOTION-BRIEF.md "Pixel field" + owner rounds 1-3) >>> */
/* ==========================================================================
   One family: squares in the lane colour, then modern. Hard steps for reveals, ease-out only for hovers.
   Every hidden start state is scoped under html.mo (set in <head>): JS off, reduced motion and ?rm=1 hide nothing.
   Canvas kinds (clear / sweep / resolve / depix / build) are also skipped under html.mo-lite (save-data, 2G).
   Animates transform / opacity / clip-path only (plus short canvases that d5.js removes).
   ========================================================================== */
:root{--mo-led:360ms;--mo-boot:420ms;
  --edge-up:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='40' shape-rendering='crispEdges'><path d='M0 30h110v10h-110zM120 30h30v10h-30zM160 30h20v10h-20zM190 30h160v10h-160zM360 30h60v10h-60zM430 30h30v10h-30zM470 30h20v10h-20zM500 30h110v10h-110zM620 30h80v10h-80zM710 30h160v10h-160zM880 30h140v10h-140zM1040 30h30v10h-30zM1080 30h10v10h-10zM1100 30h90v10h-90zM1200 30h110v10h-110zM1320 30h10v10h-10zM1340 30h10v10h-10zM1360 30h70v10h-70zM1440 30h160v10h-160zM0 20h30v10h-30zM40 20h20v10h-20zM70 20h10v10h-10zM100 20h20v10h-20zM130 20h20v10h-20zM160 20h110v10h-110zM290 20h40v10h-40zM360 20h30v10h-30zM400 20h20v10h-20zM430 20h10v10h-10zM450 20h10v10h-10zM470 20h10v10h-10zM500 20h10v10h-10zM530 20h10v10h-10zM550 20h40v10h-40zM600 20h10v10h-10zM620 20h20v10h-20zM650 20h40v10h-40zM710 20h10v10h-10zM730 20h20v10h-20zM760 20h40v10h-40zM810 20h60v10h-60zM880 20h30v10h-30zM920 20h40v10h-40zM970 20h20v10h-20zM1000 20h20v10h-20zM1040 20h30v10h-30zM1080 20h10v10h-10zM1100 20h40v10h-40zM1170 20h10v10h-10zM1190 20h40v10h-40zM1240 20h10v10h-10zM1260 20h10v10h-10zM1280 20h10v10h-10zM1300 20h10v10h-10zM1320 20h30v10h-30zM1360 20h30v10h-30zM1400 20h30v10h-30zM1440 20h40v10h-40zM1500 20h30v10h-30zM1540 20h40v10h-40zM1590 20h10v10h-10zM0 10h30v10h-30zM40 10h10v10h-10zM70 10h10v10h-10zM90 10h30v10h-30zM140 10h10v10h-10zM170 10h10v10h-10zM190 10h20v10h-20zM220 10h20v10h-20zM250 10h10v10h-10zM290 10h30v10h-30zM360 10h10v10h-10zM400 10h20v10h-20zM430 10h10v10h-10zM470 10h10v10h-10zM550 10h10v10h-10zM570 10h10v10h-10zM600 10h10v10h-10zM650 10h10v10h-10zM680 10h10v10h-10zM710 10h10v10h-10zM730 10h10v10h-10zM760 10h10v10h-10zM820 10h10v10h-10zM850 10h20v10h-20zM880 10h10v10h-10zM930 10h10v10h-10zM1010 10h10v10h-10zM1060 10h10v10h-10zM1080 10h10v10h-10zM1100 10h30v10h-30zM1150 10h10v10h-10zM1170 10h10v10h-10zM1190 10h40v10h-40zM1240 10h10v10h-10zM1280 10h10v10h-10zM1320 10h10v10h-10zM1360 10h10v10h-10zM1380 10h10v10h-10zM1440 10h10v10h-10zM1460 10h20v10h-20zM1500 10h30v10h-30zM1540 10h40v10h-40zM1590 10h10v10h-10zM20 0h10v10h-10zM40 0h10v10h-10zM70 0h40v10h-40zM140 0h10v10h-10zM190 0h10v10h-10zM220 0h10v10h-10zM360 0h10v10h-10zM430 0h10v10h-10zM550 0h10v10h-10zM570 0h10v10h-10zM600 0h10v10h-10zM650 0h10v10h-10zM690 0h10v10h-10zM710 0h10v10h-10zM730 0h10v10h-10zM860 0h10v10h-10zM930 0h10v10h-10zM1010 0h10v10h-10zM1060 0h10v10h-10zM1120 0h10v10h-10zM1170 0h10v10h-10zM1200 0h10v10h-10zM1220 0h10v10h-10zM1360 0h10v10h-10zM1380 0h10v10h-10zM1440 0h10v10h-10zM1460 0h10v10h-10zM1550 0h20v10h-20z'/></svg>");
  --edge-down:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='40' shape-rendering='crispEdges'><path d='M0 0h110v10h-110zM120 0h30v10h-30zM160 0h20v10h-20zM190 0h160v10h-160zM360 0h60v10h-60zM430 0h30v10h-30zM470 0h20v10h-20zM500 0h110v10h-110zM620 0h80v10h-80zM710 0h160v10h-160zM880 0h140v10h-140zM1040 0h30v10h-30zM1080 0h10v10h-10zM1100 0h90v10h-90zM1200 0h110v10h-110zM1320 0h10v10h-10zM1340 0h10v10h-10zM1360 0h70v10h-70zM1440 0h160v10h-160zM0 10h30v10h-30zM40 10h20v10h-20zM70 10h10v10h-10zM100 10h20v10h-20zM130 10h20v10h-20zM160 10h110v10h-110zM290 10h40v10h-40zM360 10h30v10h-30zM400 10h20v10h-20zM430 10h10v10h-10zM450 10h10v10h-10zM470 10h10v10h-10zM500 10h10v10h-10zM530 10h10v10h-10zM550 10h40v10h-40zM600 10h10v10h-10zM620 10h20v10h-20zM650 10h40v10h-40zM710 10h10v10h-10zM730 10h20v10h-20zM760 10h40v10h-40zM810 10h60v10h-60zM880 10h30v10h-30zM920 10h40v10h-40zM970 10h20v10h-20zM1000 10h20v10h-20zM1040 10h30v10h-30zM1080 10h10v10h-10zM1100 10h40v10h-40zM1170 10h10v10h-10zM1190 10h40v10h-40zM1240 10h10v10h-10zM1260 10h10v10h-10zM1280 10h10v10h-10zM1300 10h10v10h-10zM1320 10h30v10h-30zM1360 10h30v10h-30zM1400 10h30v10h-30zM1440 10h40v10h-40zM1500 10h30v10h-30zM1540 10h40v10h-40zM1590 10h10v10h-10zM0 20h30v10h-30zM40 20h10v10h-10zM70 20h10v10h-10zM90 20h30v10h-30zM140 20h10v10h-10zM170 20h10v10h-10zM190 20h20v10h-20zM220 20h20v10h-20zM250 20h10v10h-10zM290 20h30v10h-30zM360 20h10v10h-10zM400 20h20v10h-20zM430 20h10v10h-10zM470 20h10v10h-10zM550 20h10v10h-10zM570 20h10v10h-10zM600 20h10v10h-10zM650 20h10v10h-10zM680 20h10v10h-10zM710 20h10v10h-10zM730 20h10v10h-10zM760 20h10v10h-10zM820 20h10v10h-10zM850 20h20v10h-20zM880 20h10v10h-10zM930 20h10v10h-10zM1010 20h10v10h-10zM1060 20h10v10h-10zM1080 20h10v10h-10zM1100 20h30v10h-30zM1150 20h10v10h-10zM1170 20h10v10h-10zM1190 20h40v10h-40zM1240 20h10v10h-10zM1280 20h10v10h-10zM1320 20h10v10h-10zM1360 20h10v10h-10zM1380 20h10v10h-10zM1440 20h10v10h-10zM1460 20h20v10h-20zM1500 20h30v10h-30zM1540 20h40v10h-40zM1590 20h10v10h-10zM20 30h10v10h-10zM40 30h10v10h-10zM70 30h40v10h-40zM140 30h10v10h-10zM190 30h10v10h-10zM220 30h10v10h-10zM360 30h10v10h-10zM430 30h10v10h-10zM550 30h10v10h-10zM570 30h10v10h-10zM600 30h10v10h-10zM650 30h10v10h-10zM690 30h10v10h-10zM710 30h10v10h-10zM730 30h10v10h-10zM860 30h10v10h-10zM930 30h10v10h-10zM1010 30h10v10h-10zM1060 30h10v10h-10zM1120 30h10v10h-10zM1170 30h10v10h-10zM1200 30h10v10h-10zM1220 30h10v10h-10zM1360 30h10v10h-10zM1380 30h10v10h-10zM1440 30h10v10h-10zM1460 30h10v10h-10zM1550 30h20v10h-20z'/></svg>")}
/* start states */
html.mo :is([data-reveal="led"],[data-reveal="boot"],[data-reveal="print"],[data-reveal="spark"],[data-reveal="keys"],.rv):not(.mo-go){opacity:0}
html.mo:not(.mo-lite) :is([data-reveal="clear"],[data-reveal="sweep"]):not(.mo-go){opacity:0}
html.mo:not(.mo-lite) [data-reveal="resolve"]:not(.mo-done),
html.mo:not(.mo-lite) [data-reveal="resolve"]:not(.mo-done) *{color:transparent!important}
html.mo:not(.mo-lite) [data-reveal="depix"]:not([data-keep]):not(.mo-done) img,
html.mo:not(.mo-lite) [data-depix]:not(.hero__art):not(.mo-done) img{visibility:hidden}
html.mo:not(.mo-lite) [data-reveal="build"]:not(.mo-done){background:transparent!important}
html.mo [data-reveal="stars"]:not(.mo-go) .star{opacity:.2}
html.mo:not(.mo-lite) :is([data-reveal="clear"],[data-reveal="sweep"],[data-reveal="build"],[data-reveal="resolve"]){position:relative}
/* CSS step-ins: --t is the delay d5.js sets (data-delay + the list stagger); fill "both" keeps them hidden until then */
html.mo :is([data-reveal="led"],.rv).mo-go:not(.mo-done){animation:mo-led var(--mo-led) steps(4,end) var(--t,0ms) both}
html.mo [data-reveal="boot"].mo-go:not(.mo-done){animation:mo-boot var(--mo-boot) steps(1,end) var(--t,0ms) both}
html.mo [data-reveal="print"].mo-go:not(.mo-done){animation:mo-print 500ms steps(10,end) var(--t,0ms) both}
html.mo [data-reveal="spark"].mo-go:not(.mo-done){animation:mo-fade 500ms steps(4,end) var(--t,0ms) both}
html.mo [data-reveal="keys"].mo-go:not(.mo-done){animation:mo-print 500ms steps(5,end) var(--t,0ms) both}
html.mo [data-reveal="stars"].mo-go .star{animation:mo-fade 90ms steps(2,end) calc(var(--t,0ms) + var(--i,0) * 90ms) backwards}
.stars .star:nth-child(2){--i:1}.stars .star:nth-child(3){--i:2}.stars .star:nth-child(4){--i:3}.stars .star:nth-child(5){--i:4}
html.mo .mo-now,html.mo .mo-now *{animation:none!important}
@keyframes mo-led{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mo-boot{0%{opacity:0;clip-path:inset(36% round 2px)}1%{opacity:1;clip-path:inset(36% round 2px)}34%{clip-path:inset(22% round 4px)}67%{clip-path:inset(8% round 30%)}100%{opacity:1;clip-path:inset(0 round 50%)}}
@keyframes mo-print{from{clip-path:inset(0 100% 0 0 round var(--mo-r,0px))}to{clip-path:inset(0 0 0 0 round var(--mo-r,0px))}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
.ask__panel{--mo-r:28px}
/* canvases (d5.js): 1 canvas pixel per cell, scaled up crisp */
.mo-cv{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;image-rendering:pixelated;border-radius:inherit}
.mo-cv--under{z-index:0}
.mo-cv--pix,.mo-cv--res{inset:auto;border-radius:0}
.mo-cv--res{z-index:2}
.sec[data-reveal="build"]>.wrap{position:relative;z-index:1}
/* story colour: a problem row flashes clay tint, a fix row green tint, for one step as it steps in */
.srow,.inbox__rows li{position:relative;isolation:isolate}
:is(.srow,.inbox__rows li)[data-story]::before{content:"";position:absolute;inset:-4px -6px;z-index:-1;border-radius:8px;background:var(--flash,var(--start-tint));opacity:0}
.srow[data-story="bad"]{--flash:var(--urgent-tint)}
html.mo :is(.srow,.inbox__rows li)[data-story].mo-go::before{animation:mo-flash 180ms steps(1,end) calc(var(--t,0ms) + 90ms)}
@keyframes mo-flash{from{opacity:1}to{opacity:1}}
/* the vine: nodes boot when the stem tip reaches them (d5.js adds .is-seen once) */
html.mo .path.has-stem .layer__node:not(.is-seen){opacity:0}
html.mo .path.has-stem .layer__node.is-seen{animation:mo-boot var(--mo-boot) steps(1,end) both}
/* the Pause control of a calm cycle (d5.js cycler): two pixel bars = Pause, a pixel triangle = Play. Never animates.
   With motion on, a hidden one keeps its place (visibility), so showing it never moves the page. */
.cyc{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:0;border-radius:999px;background:rgba(22,26,20,.06);
  font:650 var(--fs-sm)/1 var(--font);color:var(--ink-2);cursor:pointer}
.cyc:hover{background:rgba(22,26,20,.11);color:var(--ink)}
.cyc__i{position:relative;flex:none;width:10px;height:10px}
.cyc__i::before,.cyc__i::after{content:"";position:absolute;top:0;width:3px;height:10px;background:currentColor}
.cyc__i::before{left:1px}.cyc__i::after{right:1px}
.cyc[aria-pressed="true"] .cyc__i::before{left:1px;width:8px;height:10px;clip-path:polygon(0 0,40% 0,40% 10%,70% 10%,70% 30%,100% 30%,100% 70%,70% 70%,70% 90%,40% 90%,40% 100%,0 100%)}
.cyc[aria-pressed="true"] .cyc__i::after{display:none}
html.mo .cyc[hidden]{display:inline-flex!important;visibility:hidden}
/* business types: the 12-square timer (the cycle's clock; it freezes on hold) + Pause */
.who__clock{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px;margin-top:10px}
html.mo .who__clock[hidden]{display:flex!important;visibility:hidden}
.who__timer{position:relative;flex:none;width:118px;height:6px;background:repeating-linear-gradient(90deg,var(--start-tint) 0 8px,transparent 8px 10px)}
.who__fill{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--start) 0 8px,transparent 8px 10px);clip-path:inset(0 100% 0 0)}
/* sentence: the example row (a label, never an instruction) */
.say__ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:-6px 0 6px;font:750 var(--fs-sm)/1.2 var(--font);color:var(--ink-2)}
html.mo .say.is-live .say__ex[hidden]{display:flex!important;visibility:hidden}
.say__ex-t{padding:2px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--sun);color:var(--ink)}
.say__dots{display:inline-flex;gap:5px}
.say__dots i{width:8px;height:8px;background:var(--rule-2)}
.say__dots i.is-on{background:var(--green)}
.say__ex .cyc{margin-left:auto}
/* ask: the calm sample question sits where the placeholder is (aria-hidden); the real placeholder comes back on focus */
.ask__top{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px}
.ask__field{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.ask__field .ask__in{flex:1;width:100%}
.ask__ph{position:absolute;left:4px;right:4px;top:50%;transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font:600 var(--fs-body)/1.2 var(--font);color:#5f665a;pointer-events:none;opacity:0}
.ask.is-cycling .ask__ph{opacity:1}
.ask.is-cycling .ask__in::placeholder{color:transparent}
/* footer colour key: start, run, learn, urgent, programs */
.ft__keys{display:flex;margin:-38px 0 32px}
.ft__keys i{width:28px;height:6px;background:var(--c)}
.ft__keys i.is-run{background:var(--sun)}.ft__keys i.is-prog{background:var(--green-2)}
/* SECTION TRANSITIONS (owner round 3: "the colour transitions are weird"): one family on pages with body[data-edges].
   Light grounds blend (paper <-> cream, 200px); the bold bands (deep green programs, sun closing, ink footer) meet their
   neighbours with a pixel-step edge: 4 rows of 10px squares thinning out (pixel to modern). The band's own edges come
   with its build and step in once; reduced motion = the static edge. No hairlines. */
body[data-edges] .hero+.sec--cream{background:linear-gradient(var(--paper),var(--cream) 200px)}
body[data-edges] .sec--cream+.sec--paper{background:linear-gradient(var(--cream),var(--paper) 200px)}
body[data-edges] .sec--paper+.sec--cream{background:linear-gradient(var(--paper),var(--cream) 200px)}
body[data-edges] :is(.sec--paper,.sec--cream)+.sec--sky{background:linear-gradient(var(--paper),var(--learn-tint) 200px)}   /* v3f: the sky band blends too */
body[data-edges] .sec--sky+.sec--cream{background:linear-gradient(var(--learn-tint),var(--cream) 200px)}
body[data-edges] .sec--sky+.sec--paper{background:linear-gradient(var(--learn-tint),var(--paper) 200px)}
body[data-edges] :is(.sec--green,.sec--sun){position:relative;z-index:1}
body[data-edges] :is(.sec--paper,.sec--cream)+:is(.sec--green,.sec--sun)::before,body[data-edges] .ft::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;
  background:inherit;-webkit-mask:var(--edge-up) var(--edge-x,0px) 0/1600px 40px repeat-x;mask:var(--edge-up) var(--edge-x,0px) 0/1600px 40px repeat-x;pointer-events:none}
body[data-edges] .ft{position:relative;z-index:2}
body[data-edges] .ft::before{background:var(--ink)}
body[data-edges] .sec--green+.sec{position:relative}
body[data-edges] .sec--green+.sec::before{content:"";position:absolute;left:0;right:0;top:-1px;height:40px;background:var(--green-ink);
  -webkit-mask:var(--edge-down) var(--edge-x,0px) 0/1600px 40px repeat-x;mask:var(--edge-down) var(--edge-x,0px) 0/1600px 40px repeat-x;pointer-events:none}
/* round 8: the band's ground is painted at once (no build canvas). Its top edge steps up in 4 rows (320 ms) the moment the
   band arrives (data-edge-in + the unit's .mo-seen); the bottom edge out of the green band is simply there. Each band's
   edge starts at another place in the 1600px mask (--edge-x), so two edges never look the same. */
html.mo:not(.mo-lite) body[data-edges] .sec[data-edge-in]:not(.mo-seen)::before{opacity:0}
html.mo:not(.mo-lite) body[data-edges] .sec[data-edge-in].mo-seen::before{animation:mo-edge-up 320ms steps(4,end)}
#programs{--edge-x:-420px}.close{--edge-x:-910px}.ft{--edge-x:-160px}.sec--green+.sec{--edge-x:-1230px}
@keyframes mo-edge-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes mo-edge-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* BACKGROUND FLAIR (owner round 7: "general flair or some transition in the background so minimal though so it adds
   flair/flavour"). One quiet layer behind a section's content (markup: build_index.flair; at most one per section, most
   sections stay plain). .flair--glow = a soft lane-colour glow drifting very slowly (38 s each way); .flair--dots = a
   barely-there pixel dot grid that fades in once as the section arrives (.mo-seen from the motion engine). Clipped to its
   section, behind the text (isolation), transform / opacity only, no images, zero layout; reduced motion = static. */
.has-flair{position:relative;isolation:isolate}
.flair{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.flair::before{content:"";position:absolute}
.flair--glow{-webkit-mask:linear-gradient(rgba(0,0,0,0),#000 22%,#000 78%,rgba(0,0,0,0));mask:linear-gradient(rgba(0,0,0,0),#000 22%,#000 78%,rgba(0,0,0,0))}
.flair--glow::before{inset:-8%;background:radial-gradient(34% 40% at var(--fx,78%) var(--fy,22%),var(--fc) 0,rgba(255,255,255,0) 72%)}
.flair--learn{--fc:rgba(191,217,239,.5)}
.flair--start{--fc:rgba(195,223,180,.45)}
.flair--run{--fc:rgba(246,220,149,.45)}
html.mo .flair--glow::before{animation:flair-drift 38s ease-in-out infinite alternate}
@keyframes flair-drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(3%,2.5%,0)}}
.flair--dots::before{inset:0;background:radial-gradient(circle,rgba(45,96,64,.16) 1.1px,rgba(45,96,64,0) 1.6px) 0 0/21px 21px;
  -webkit-mask:radial-gradient(55% 60% at 50% 38%,#000 0,rgba(0,0,0,0) 78%);mask:radial-gradient(55% 60% at 50% 38%,#000 0,rgba(0,0,0,0) 78%)}
html.mo .flair--dots::before{transition:opacity 1.6s var(--ease)}
html.mo .flair--dots:not(.mo-seen)::before{opacity:0}
@media (prefers-reduced-motion:reduce){.flair::before{animation:none!important;transition:none!important}}
/* reduced motion via ?rm=1 (html.rm) = the same final state as the media query below */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.rm .hl::after{transform:none}
html.rm .path__leaves path{transform:scale(1)}
@media (max-width:760px){
  .cyc{min-height:44px;padding:0 16px 0 14px;font-size:var(--fs-sm)}
  .who__clock{justify-content:space-between}
  .say__ex{font-size:var(--fs-sm)}
  .ask__ph{font-size:var(--fs-body)}
  .ft__keys{margin:-38px 0 30px}
}
@media (prefers-reduced-motion:reduce){
  .otile:hover .otile__plate img,.otile:focus-visible .otile__plate img,.vid a:hover .vid__thumb,.otile--urgent:hover{transform:none}
}
/* <<< MOTION block <<< */

/* >>> SENTENCE block (home "say it in one sentence" + intake "You said") >>> */
/* ==========================================================================
   SENTENCE (owner request 2026-09-30: "a place where people can add in a sentence what they want,
   but a cool customizable way"). Markup: _build/build_index.py say_form(). Behaviour: d5.js "sentence".
   .say ............ paper card on the closing sun band (#say), a real GET form to intake.html
   .say__line ...... the sentence: "I [run] a [gym] in [Milton] and I want [more calls] [right away]."
   .schip .......... a word chip (button, opens the listbox). .is-blank = dashed blank with a hint word;
                     picked = lane tint + lane icon: sun running, green starting, sky learn/training,
                     clay urgent, cream (.is-neutral) for type / town / when. .is-heard = picked up from the typed words.
                     Sun budget: the band is already sun, so chips use the pale run tint, never solid sun.
   .say__wants ..... up to 3 wants: the want chip + .schip--x extras (a tap removes one) + the dashed .schip--add "+"
   .say__find ...... town search row on top of the list; .say__grp / .say__g = a province group and its sticky heading
   .say__pop ....... the one listbox popover (moved to the end of <main> by d5.js; a bottom sheet under 761px, with a
                     44px Close .say__pop-x) + .say__scrim
   .say__plain ..... JS off: labelled selects (the same fields; d5.js hides them once the chips work: .say.is-live)
   .say__type ...... "Or in your words" (<= 200 characters) + .say__heard (live keyword read-back) + .say__count
   .say__end ....... .say__out (the finished sentence; phones: screen readers only, the chips already show it)
                     + .say__go ("Send it"; .is-urgent = clay "Get help")
   Phones: the sentence line keeps a fixed height (4 lines), so it does not grow under the thumb while typing.
   .saylink ........ compact entry beside "What do you need?" ("Describe" + pencil, in .pos__side)
   .flow__said ..... intake echo: "You said: ..." + Edit (inline)
   ========================================================================== */
.say{position:relative;max-width:920px;margin:40px auto 0;padding:36px 48px 32px;border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2);text-align:left}
.say__line{min-height:4em;font:700 var(--fs-h3)/2 var(--font);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.schip{display:inline-block;max-width:100%;margin:0 .06em;padding:.16em .42em .16em .38em;border:2px solid transparent;border-radius:.42em;
  background:var(--c-tint,var(--cream));color:var(--c-ink,var(--ink));font:inherit;line-height:1.25;letter-spacing:inherit;text-align:left;vertical-align:baseline;cursor:pointer;
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.schip__i{--n:24;margin-right:.24em;vertical-align:-.16em;color:var(--c-icon,var(--ink-2))}
.schip__c{--n:20;margin-left:.2em;vertical-align:-.06em;opacity:.72}
.schip.is-run{background:#fae3a8}   /* a touch deeper than --run-tint so "running" reads as amber on paper (ink 9:1) */
.schip.is-blank{background:transparent;border-color:transparent;border-bottom:2.5px dashed rgba(22,26,20,.55);border-radius:.3em .3em 0 0;color:var(--ink-3);font-weight:600}
.schip.is-blank .schip__i{display:none}
.schip:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.schip.is-blank:hover{background:var(--cream);border-bottom-color:var(--ink-2);color:var(--ink);box-shadow:none;transform:none}
.schip[aria-expanded="true"]{box-shadow:0 0 0 2px var(--ink);transform:none}
.schip.is-heard{box-shadow:0 0 0 2px var(--c-icon,var(--ink-2));animation:say-heard 240ms steps(3,end)}
.schip.is-heard.is-neutral{box-shadow:0 0 0 2px rgba(22,26,20,.22)}   /* cream chips: a soft ring, never a heavy black box */
@keyframes say-heard{from{box-shadow:0 0 0 0 rgba(22,26,20,0)}}   /* round 8: a ring stepping in, no scale or lift */
.say__when[hidden]{display:none}

/* JS off: the same fields as labelled selects. JS on (.is-live): the chips drive them */
.say__plain{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px 20px}
.say__f label{display:block;margin-bottom:6px;font:700 var(--fs-body)/1.3 var(--font);color:var(--ink-2)}
.say__f select{width:100%;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule-2);font:600 var(--fs-body) var(--font);color:var(--ink)}
.say.is-live .say__plain{display:none}
.say:not(.is-live) .say__line,.say:not(.is-live) .say__out,.say:not(.is-live) .say__heard{display:none}

/* free text */
.say__type{margin-top:24px;padding-top:24px;box-shadow:0 -1px 0 var(--rule)}
.say__lab{display:inline-flex;align-items:center;gap:8px;font:750 var(--fs-body)/1.3 var(--font);color:var(--ink-2)}
.say__lab .ico{color:var(--ink-3)}
.say textarea{display:block;width:100%;min-height:84px;margin-top:10px;padding:14px 16px;border:0;border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule-2);
  font:500 var(--fs-body)/1.5 var(--font);color:var(--ink);resize:none;field-sizing:content;max-height:14em;transition:box-shadow .2s var(--ease)}
.say textarea::placeholder{color:#686e63}
.say textarea:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.say__meta{display:flex;align-items:flex-start;gap:4px 16px;min-height:24px;margin-top:8px;font:600 var(--fs-sm)/1.45 var(--font);color:var(--ink-3)}
.say__heard{display:inline-flex;align-items:flex-start;gap:6px;color:var(--green-ink)}
.say__heard .ico{margin-top:1px;color:var(--green)}
.say__count{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}

/* the finished sentence + send */
.say__end{display:flex;align-items:center;justify-content:flex-end;gap:16px 28px;margin-top:20px}
.say__out{flex:1;min-width:0;font:italic 500 var(--fs-body)/1.45 var(--font);color:var(--ink-2);text-wrap:pretty}
.say__go{flex:none}
.say__go-i{display:none}
.say__go.is-urgent{background:var(--clay);color:#fff}
.say__go.is-urgent .say__go-i{display:inline-block}

/* the listbox popover (position: fixed, placed by d5.js under its chip) */
.say__pop{position:fixed;z-index:60;width:320px;max-width:calc(100vw - 32px);padding:8px;border-radius:var(--r-m);background:var(--paper);
  box-shadow:0 0 0 1px var(--rule),var(--sh-2);text-align:left;animation:say-pop .16s var(--ease)}
@keyframes say-pop{from{opacity:0;transform:translateY(-4px)}}
.say__pop-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.say__pop-h{padding:8px 12px 6px;font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3)}
.say__pop-x{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.say__pop-x[hidden]{display:none}
.say__pop-x:hover{background:var(--cream);color:var(--ink)}
.say__opts{position:relative;list-style:none;margin:0;padding:0;max-height:var(--say-max,360px);overflow:auto;overscroll-behavior:contain;outline:none}
.say__o{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px 6px 6px;border-radius:12px;font:600 var(--fs-body)/1.25 var(--font);color:var(--ink);cursor:pointer;scroll-margin:8px}
.say__o.is-active{background:var(--cream)}
.say__opts:focus-visible .say__o.is-active{outline:3px solid var(--green);outline-offset:-3px}
.say__o[aria-selected="true"]{background:var(--c-tint);color:var(--c-ink);font-weight:750}
.say__o[aria-selected="true"] .disc{background:var(--c);color:var(--c-on)}
.say__scrim{position:fixed;inset:0;z-index:59;background:rgba(22,26,20,.32)}

/* up to 3 wants (owner round 2): "more calls, a new website and to be on Google". The extra chips carry a small x (a tap
   removes one); the dashed "+" chip adds one. They wrap with the sentence like any other word. */
.say__wants{display:inline}
.say__sep.is-comma{margin-left:-.14em}
.schip--x .schip__c{--n:18;margin-left:.28em;vertical-align:-.1em;opacity:.55}
.schip--x:hover .schip__c,.schip--x:focus-visible .schip__c{opacity:1}
.schip--add{padding:.16em .34em;border:2px dashed rgba(22,26,20,.32);background:transparent;color:var(--ink-2)}
.schip--add .schip__i{margin:0;color:inherit}
.schip--add:hover{border-color:var(--ink-2);background:var(--cream);color:var(--ink);box-shadow:none}
.schip--add[hidden]{display:none}
/* towns: a search row on top of the list, provinces as quiet sticky headings */
.say__find{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 4px 8px;padding:0 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.say__find[hidden]{display:none}
.say__find:focus-within{box-shadow:inset 0 0 0 2px var(--green)}
.say__find .ico{flex:none;color:var(--ink-3)}
.say__find input{flex:1;min-width:0;height:46px;padding:0;border:0;background:transparent;font:600 var(--fs-body)/1.2 var(--font);color:var(--ink);outline:none}
.say__find input::placeholder{color:#686e63}
.say__grp,.say__sub{list-style:none;margin:0;padding:0}
.say__grp[hidden],.say__o[hidden]{display:none}
.say__g{position:sticky;top:0;z-index:1;margin:0;padding:12px 12px 4px;background:var(--paper);font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3)}

/* compact entry beside "What do you need?" (right column of .pos, under "We stay until it works.") */
.pos__side{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}   /* one row beside the line: the heading row keeps its height */
.saylink{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 16px 0 0;border-radius:var(--r-pill);color:var(--ink);text-decoration:none;font:700 var(--fs-body)/1.2 var(--font)}
.saylink .disc{box-shadow:var(--sh-1)}
.saylink__go{color:var(--green);transition:transform .2s var(--ease)}
.saylink:hover .disc{transform:translateY(-2px);box-shadow:var(--sh-2)}
.saylink:hover .saylink__go{transform:translateX(3px)}

/* intake: "You said: ..." (first context line) + inline edit */
.flow__said{display:block;line-height:1.6}
.flow__said button{padding:10px 10px;min-width:44px;margin:-10px -6px;min-height:0;vertical-align:baseline}   /* 44px+ tap target, line height unchanged */
.flow__said button:focus-visible{outline-offset:-2px}
.flow__said-k{white-space:nowrap}
.flow__said-k .ico{margin-right:6px;vertical-align:-4px;color:var(--ink-3)}
.flow__said q{min-width:0;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.flow__said-ed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.flow__said-ed input{flex:1 1 280px;min-height:48px;padding:0 14px;border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule-2);font:500 var(--fs-body) var(--font);color:var(--ink)}
.flow.is-done .flow__said-ed{display:none}

@media (max-width:760px){
  .say{margin-top:28px;padding:22px 18px 20px;border-radius:var(--r-l)}
  /* a 4-row box (each row is a 44px chip row): typed words fill the chips in place, so nothing below jumps while the
     keyboard is up. Nine in ten filled sentences take 4 rows at 360 to 390; only the longest (a real estate business
     that wants every lead followed up) adds a fifth */
  .say__line{font-size:var(--fs-body);line-height:3.2;min-height:calc(5 * 3.2em)}   /* 5 rows: every example sentence fits, so the calm cycle never moves the page */
  .schip{min-height:3.5rem;padding:6px 10px;line-height:1.3}   /* 2 chips a line, 56px tap targets (older readers) */
  .schip--add{min-width:3.5rem;text-align:center}
  .say__find input{font-size:var(--fs-body)}
  .say__g{font-size:var(--fs-sm)}
  .say__o{min-height:3.5rem;font-size:var(--fs-body)}
  .say__lab,.say__meta{font-size:var(--fs-sm)}
  .say textarea{font-size:var(--fs-body)}
  .say__plain{grid-template-columns:1fr}
  .say__type{margin-top:18px;padding-top:18px}
  .say__end{flex-direction:column;align-items:stretch;gap:12px}
  /* the chips already show the sentence: the read-back is for screen readers only (still the live region) */
  .say__out{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .say__go{width:100%}
  /* the listbox becomes a bottom sheet */
  .say__pop.is-sheet{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;padding:12px 12px calc(12px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;animation-name:say-sheet}
  .say__pop.is-sheet .say__opts{max-height:min(60vh,440px,var(--say-sheet,440px))}
  @keyframes say-sheet{from{transform:translateY(24px);opacity:0}}
}
@media (max-width:380px){
  .say{padding:20px 14px 18px}
}
@media (prefers-reduced-motion:reduce){
  .schip:hover,.saylink:hover .disc,.saylink:hover .saylink__go{transform:none}
}
/* <<< SENTENCE block <<< */

/* >>> ASK block (home FAQ "Questions? Ask us anything." + learn.html closing band) >>> */
/* ==========================================================================
   ASK (owner request 2026-09-30: "an FAQ section that can use an agent and search the cloudsprout site and answer
   the FAQ question on the spot"). Markup: _build/build_index.py ask_box(). Behaviour: d5.js "ask". Engine: ask.js.
   Sky lane (learning): this box answers questions. The primary button stays the green stamp, urgent stays clay.
   .ask ............ the form (role=search). .is-live = the engine is ready (label, chips and note show)
                     .is-answered = an answer is showing (the popular chips step aside for the follow-ups)
                     .ask--compact = learn.html closing band
   .ask__ai ........ mode label pill: "AI answers from our site" (AI endpoint) | "Answers from our site" (site search)
   .ask__panel ..... one white surface: the input bar, then the answer under a hairline (no card in a card)
   .ask__bar ....... chat disc, input, clear (x), "Ask" stamp. Focus = a sky ring round the whole panel
   .ask__out ....... aria-live region: .ask__typing (three sky dots, still in reduced motion), then .ask__ans
   .ask__ans ....... .ask__asked ("You asked: ...", one line), .ask__tag ("AI answer", AI mode only), .ask__urgent
                     (clay row, urgent only), .ask__a (the answer,
                     words fade in, motion only), .ask__src (1 to 3 pages, sky icons), .ask__next (2 follow-up chips),
                     .ask__hand (the handoff, green stamp)
   .ask__chips ..... popular questions: sky tint pills, one tap asks
   .ask__note ...... "Answers can be wrong. Or talk to a person."
   .ask-on ......... set on the section by d5.js: the FAQ accordions fold away (they show with JS off, and for SEO)
   ========================================================================== */
.faq__head{max-width:820px;margin:0 auto;text-align:center}
.faq__list{max-width:800px;margin:48px auto 0}
.ask-on .faq__list{display:none}
.ask{position:relative;max-width:800px;margin:20px auto 0;text-align:center}
.ask__ai{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 16px 5px 12px;border-radius:var(--r-pill);background:var(--learn-tint);color:var(--learn-ink);font:750 var(--fs-sm)/1.2 var(--font)}
.ask__ai-i{color:var(--learn-icon)}
.ask__panel{margin-top:24px;border-radius:28px;background:#fff;box-shadow:var(--sh-2);text-align:left;transition:box-shadow .2s var(--ease)}
/* focus: a sky ring round the input row (the whole panel at rest, the top row once an answer shows) */
.ask__bar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:28px;transition:box-shadow .2s var(--ease)}
.ask__bar:has(.ask__in:focus){box-shadow:inset 0 0 0 3px var(--learn)}
.ask__panel:has(.ask__ans,.ask__typing,.ask__hint) .ask__bar{border-radius:28px 28px 0 0}
.ask__in{flex:1;min-width:0;height:56px;padding:0 4px;border:0;border-radius:0;background:transparent;font:600 var(--fs-body)/1.2 var(--font);color:var(--ink);-webkit-appearance:none;appearance:none}
.ask__in:focus{outline:none}
@supports not selector(:has(a)){.ask__in:focus-visible{outline:3px solid var(--learn);outline-offset:2px}}
.ask__in::placeholder{color:#5f665a;opacity:1}
.ask__clear{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.ask__clear:hover{background:var(--cream);color:var(--ink)}
.ask__go{flex:none;min-height:56px;padding:0 26px;font-size:18px}

/* PREDICTIVE (round 7): up to 5 suggested questions under the bar, over the answer area (nothing below moves). The sky
   focus ring runs on round the list, so bar + list read as one piece. Matching words are a touch stronger; no hint text. */
.ask__panel{position:relative}
.ask__panel.has-sug .ask__bar{border-radius:28px 28px 0 0}
.ask__panel.has-sug .ask__bar:has(.ask__in:focus){box-shadow:inset 3px 0 0 var(--learn),inset -3px 0 0 var(--learn),inset 0 3px 0 var(--learn)}
.ask__panel.has-sug:not(:has(.ask__ans,.ask__typing,.ask__hint)){border-radius:28px 28px 0 0}
.ask__sug{position:absolute;left:0;right:0;z-index:6;margin:0;padding:4px 3px 11px;list-style:none;border-radius:0 0 28px 28px;background:#fff;
  box-shadow:inset 3px 0 0 var(--learn),inset -3px 0 0 var(--learn),inset 0 -3px 0 var(--learn),var(--sh-2);text-align:left;overflow:hidden}
.ask__sug::before{content:"";display:block;height:1px;margin:0 21px 4px;background:var(--rule)}
.ask__sug-o{display:flex;align-items:center;gap:14px;min-height:52px;padding:6px 21px;font:500 var(--fs-body)/1.35 var(--font);color:var(--ink-2);cursor:pointer}
.ask__sug-o b{font-weight:750;color:var(--ink)}
.ask__sug-o .ico{--n:21;flex:none;color:var(--learn-icon)}
.ask__sug-o.is-active{background:var(--learn-soft);color:var(--ink)}
.ask__sug-o.is-active .ico{color:var(--learn)}
html.mo .ask__sug:not([hidden]){animation:ask-sug .16s var(--ease)}
@keyframes ask-sug{from{opacity:0;transform:translateY(-4px)}}
.ask--compact .ask__panel.has-sug .ask__bar,.ask--compact .ask__panel.has-sug:not(:has(.ask__ans,.ask__typing,.ask__hint)){border-radius:24px 24px 0 0}
.ask--compact .ask__sug{border-radius:0 0 24px 24px}
@media (max-width:760px){
  .ask__panel.has-sug .ask__bar,.ask__panel.has-sug:not(:has(.ask__ans,.ask__typing,.ask__hint)){border-radius:22px 22px 0 0}
  .ask__sug{border-radius:0 0 22px 22px}
  .ask__sug-o{min-height:3.5rem;padding:8px 15px;gap:12px}
  .ask__sug::before{margin-inline:15px}
}

/* the answer, in place under the bar */
.ask__out:empty{display:none}
.ask__typing,.ask__hint{display:flex;align-items:center;gap:14px;padding:18px 28px 22px;box-shadow:inset 0 1px 0 var(--rule);font:600 var(--fs-body)/1.35 var(--font);color:var(--ink-2)}
.ask__dots{display:inline-flex;gap:6px}
.ask__dots i{width:9px;height:9px;border-radius:50%;background:var(--learn);opacity:.55;animation:ask-dot 1.2s ease-in-out infinite}
.ask__dots i:nth-child(2){animation-delay:.16s}
.ask__dots i:nth-child(3){animation-delay:.32s}
@keyframes ask-dot{0%,70%,100%{opacity:.3;transform:none}35%{opacity:1;transform:translateY(-3px)}}
.ask__ans{padding:20px 28px 28px;border-radius:0 0 28px 28px;box-shadow:inset 0 1px 0 var(--rule);animation:ask-in .3s var(--ease)}
.ask__ans:focus{outline:none}
.ask__ans:focus-visible{outline:3px solid var(--learn);outline-offset:-3px}
@keyframes ask-in{from{opacity:0;transform:translateY(6px)}}
.ask__asked{margin-bottom:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 var(--fs-sm)/1.4 var(--font);color:var(--ink-3)}
.ask__asked q{color:var(--ink-2);quotes:"\201C" "\201D"}
.ask__asked+.ask__a{margin-top:0}
.ask__tag{display:flex;width:max-content;align-items:center;gap:6px;font:750 var(--fs-sm)/1.2 var(--font);color:var(--learn-ink)}
.ask__tag .ico{color:var(--learn-icon)}
.ask__a{margin-top:10px;max-width:64ch;font:500 var(--fs-body)/1.55 var(--font);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
.ask__a a{padding:3px 0;font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}   /* padding: a 24px+ tap target in the line */
.ask__w{animation:ask-word .5s var(--ease) backwards;animation-delay:calc(var(--i) * 16ms)}
@keyframes ask-word{from{opacity:0}}
.ask__src{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:10px}
.ask__src a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 var(--fs-body)/1.25 var(--font);color:var(--learn-ink);
  text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:rgba(37,100,156,.32);text-underline-offset:5px;transition:text-decoration-color .2s var(--ease)}
.ask__src a:hover{text-decoration-color:currentColor}
.ask__src .ico{color:var(--learn-icon)}
.ask__next ul,.ask__chips{display:flex;flex-wrap:wrap;gap:10px}
.ask__next ul{margin-top:12px}
.ask__chips{justify-content:center;margin-top:20px}
.ask__chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:0;border-radius:var(--r-pill);background:var(--learn-tint);color:var(--learn-ink);
  font:650 var(--fs-body)/1.25 var(--font);text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.ask__chip:hover{transform:translateY(-2px);box-shadow:var(--sh-1);background:#d6e8f7}
.ask__chip:active{transform:none;box-shadow:none}
.ask__hand{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.ask__hbtn{min-height:48px;font-size:var(--fs-body)}
/* urgent: one clay row above the answer. Same symbol + label as everywhere: alert disc, "Broken right now", "Get help" */
.ask__urgent{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;padding:10px 16px 10px 10px;border-radius:var(--r-m);background:var(--urgent-tint);color:var(--urgent-ink)}
.ask__urgent-l{display:inline-flex;align-items:center;gap:12px;margin-right:auto;font:750 var(--fs-body)/1.25 var(--font)}
.ask__call{min-height:48px;padding:0 18px;background:var(--clay);color:#fff;font-size:var(--fs-body);white-space:nowrap;box-shadow:2px 2px 0 var(--ink)}
.ask__call:hover{background:#86361a;box-shadow:3px 3px 0 var(--ink)}
.ask__urgent .go{color:var(--urgent-ink)}
.ask__note{margin-top:16px;font:500 var(--fs-sm)/1.45 var(--font);color:var(--ink-3)}
.ask__note a{display:inline-block;padding:4px 0;font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.ask__hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
/* JS off, or the engine is missing: a plain search form (the label, chips and note need the engine) */
.ask:not(.is-live) .ask__ai,.ask:not(.is-live) .ask__chips,.ask:not(.is-live) .ask__note{display:none}
.ask:not(.is-live) .ask__panel{margin-top:32px}
.ask.is-answered .ask__chips{display:none}

/* compact (learn.html closing band, on sun): a slimmer bar, the same parts */
.ask--compact{max-width:720px;margin-top:24px}
.ask--compact .ask__panel{margin-top:20px;border-radius:24px}
.ask--compact .ask__ans{border-radius:0 0 24px 24px}
.ask--compact .ask__bar{border-radius:24px}
.ask--compact .ask__panel:has(.ask__ans,.ask__typing,.ask__hint) .ask__bar{border-radius:24px 24px 0 0}
.ask--compact .ask__bar{padding:8px 8px 8px 10px}
.ask--compact .ask__disc{--d:34}.ask--compact .ask__disc .ico{--n:21}
.ask--compact .ask__in{height:52px;font-size:var(--fs-body)}
.ask--compact .ask__go{min-height:52px;padding:0 22px}
.sec--sun .ask__note{color:var(--ink-2)}
.sec--sun .ask__ai{background:var(--paper)}

@media (max-width:760px){
  .faq__list{margin-top:32px}
  .ask__panel{margin-top:18px;border-radius:22px}
  .ask__bar,.ask--compact .ask__bar{border-radius:22px}
  .ask__panel:has(.ask__ans,.ask__typing,.ask__hint) .ask__bar{border-radius:22px 22px 0 0}
  .ask__ans,.ask--compact .ask__ans{padding:18px 18px 22px;border-radius:0 0 22px 22px}
  .ask__typing,.ask__hint{padding:16px 18px 18px}
  .ask__bar{gap:8px;padding:8px 8px 8px 10px}
  .ask__bar .ask__disc{--d:55}.ask__bar .ask__disc .ico{--n:28}
  .ask__in,.ask--compact .ask__in{height:3.5rem;font-size:var(--fs-body)}
  .ask__go,.ask--compact .ask__go{min-height:3.5rem;padding:0 16px;font-size:1.0625rem}
  .ask__a{font-size:var(--fs-body)}
  .ask__chips{gap:10px}
  .ask__chip{min-height:3.5rem;padding:8px 18px;font-size:var(--fs-sm)}   /* older readers: 17px labels, 56px taps */
  .ask__note{font-size:var(--fs-sm)}
  .ask__note a{padding:14px 2px;margin:-14px -2px}
  .ask__urgent{padding:12px}
  .ask__urgent-l{margin-right:0;flex-basis:100%}
  .ask__call{flex:1 1 auto}
  .ask__hbtn{width:100%}
}
@media (max-width:480px){
  /* phones: the question gets the room. The chat disc steps out and "Ask" becomes a 48px arrow stamp ("Ask" stays
     its name for screen readers), so about 250px of the question shows at 390 */
  .ask__disc,.ask--compact .ask__disc{display:none}
  .ask__bar,.ask--compact .ask__bar{gap:4px;padding-left:16px}
  .ask__go,.ask--compact .ask__go{width:3.5rem;min-height:3.5rem;height:3.5rem;padding:0;font-size:20px}
  .ask__go-t{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ask__asked{font-size:var(--fs-sm)}
}
@media (prefers-reduced-motion:reduce){
  .ask__chip:hover{transform:none}
  .ask__dots i{opacity:.7}
}
/* <<< ASK block <<< */

/* >>> FAQ+ASK block (v3f, owner round 6: "I need the faq question thing to be everywhere the faq is") >>> */
/* ==========================================================================
   One component on every page that has FAQs: build_index.faq_ask() (pagekit.faq_ask). The ask box (page context for
   ask.js, page-specific popular questions) and, under it, the page's own accordions (FAQPage JSON-LD from the same list).
   .faqa ......... the section (sec--paper or sec--cream). .faqa__head = centred H2 (+ optional line)
   .faqa__list ... the accordions under the box: a quiet label (.faqa__lab), then .faqa__item rows with a thin rule
                   between; .faqa__pm = the plus disc (turns to a minus when open). Open: the answer steps in (motion only).
   JS on or off, the accordions show (they are the FAQ for readers, search engines and screen readers).
   ========================================================================== */
.faqa__head{max-width:820px;margin:0 auto;text-align:center}
.faqa__head .sec-line{margin-inline:auto}
.faqa .ask{margin-top:var(--sp-3)}
.faqa__list{max-width:800px;margin:var(--sp-6) auto 0}
.faqa__lab{margin:0 0 var(--sp-2);font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3)}
.faqa__items{box-shadow:0 -1px 0 var(--rule)}
.faqa__item{box-shadow:0 1px 0 var(--rule)}
.faqa__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:68px;padding:var(--sp-2) 0;cursor:pointer;list-style:none;
  font:700 var(--fs-body)/1.35 var(--font);color:var(--ink);border-radius:8px}
.faqa__item summary::-webkit-details-marker{display:none}
.faqa__item summary:hover .faqa__q{color:var(--green-ink)}
.faqa__q{flex:1;min-width:0;text-wrap:pretty}
.faqa__pm{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--learn-tint);transition:background-color .2s var(--ease)}
.faqa__pm::before,.faqa__pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:var(--learn-ink);transition:transform .25s var(--ease)}
.faqa__pm::after{transform:rotate(90deg)}
.faqa__item[open] .faqa__pm{background:var(--learn)}
.faqa__item[open] .faqa__pm::before,.faqa__item[open] .faqa__pm::after{background:#fff}
.faqa__item[open] .faqa__pm::after{transform:rotate(0)}
.faqa__a p{max-width:var(--measure);padding:0 var(--sp-5) var(--sp-3) 0;font-size:var(--fs-body);line-height:var(--lh);color:var(--ink-2);text-wrap:pretty}
html.mo .faqa__item[open] .faqa__a{animation:mo-led 280ms steps(4,end) both}
.sec--cream .faqa__pm{background:#fff}
/* sentence chips for the programs lane (a build partner): a light deep-green tint, never the dark band colour */
.schip.is-prog,.say__o.is-prog{--c-tint:#e2ece3;--c-ink:var(--prog);--c-icon:var(--prog)}
.say__o.is-prog[aria-selected="true"] .disc{background:var(--prog);color:var(--sun)}
/* closing band, short (v3f): heading, Start here, the phone. No second builder */
.close--short .close__btns{margin-top:var(--sp-4)}
.close--short .close__row{margin-top:var(--sp-3)}
@media (max-width:760px){
  .faqa__list{margin-top:var(--sp-5)}
  .faqa__item summary{min-height:3.75rem;gap:var(--sp-2)}
  .faqa__a p{padding-right:var(--sp-1)}
  .faqa__pm{width:40px;height:40px}
}
/* v3f: 200% text and 320px (WCAG 1.4.4 / 1.4.10) on the intake: the header wraps, values and options never push sideways */
@media (max-width:760px){
  .flow-hd{flex-wrap:wrap;height:auto;min-height:64px;row-gap:0}
  .flow-hd__right{flex-wrap:wrap;justify-content:flex-end}
  .flow__val{white-space:normal;flex-wrap:wrap}
  .flow .cs-q__opts>*,.flow .cs-opt,.flow .cs-opt__text{min-width:0}
  .flow .cs-opt__label{overflow-wrap:anywhere}
}
/* <<< FAQ+ASK block <<< */

/* >>> LEARN block (learn.html) >>> */
/* ==========================================================================
   LEARN PAGE (learn.html, the education vertical, 2026-09-30). Sky owns this page.
   Generated page: _build/build_learn.py. This block is merged from _build/learn.block.css by
   _build/merge_learn_block.py (replaces only the text between the LEARN markers).
   Classes: .pg-learn .lhero .jump .topics .topic .lvids .lvid .guides .guide .tgroups .tgroup .tchip
            .sec--sky .train .train__disc .mods .mod .series .series__hub .series__go .player .pill--w
   v3c: the primary button is the shared green .btn--p (no sky button); guides are all links (no "Soon" cards);
        tools are open groups; modules carry their own icon (no ticks); the series screen has no play button.
   ========================================================================== */
.pg-learn .h2 em,.lhero h1 em{color:var(--learn-icon)}
/* v3d: the H1 accent sits on the sun highlighter, so it takes a deeper sky ink (5.4:1 on sun, 6.7:1 on the sky tint) */
.lhero h1 em{color:#1d4f7c}
.pg-learn .close .h2 em{color:var(--green-ink)}
.nav>li.is-current>.nav__btn,.nav>li.is-current>a{color:var(--learn-icon);box-shadow:inset 0 -3px 0 var(--learn)}
.pill--w{background:#fff;color:var(--learn-ink)}
.sec--sky{background:var(--learn-tint)}

/* hero: calm sky tint, one line cloud, jump chips (sky lane) */
.lhero{position:relative;overflow:hidden;background:linear-gradient(180deg,#d3e6f6 0%,var(--learn-tint) 40%,var(--learn-soft) 76%,var(--paper) 100%)}
.lhero__grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px 56px;align-items:center;padding-top:72px;padding-bottom:64px}
.lhero h1{font-weight:800;font-size:var(--fs-h1);line-height:1;letter-spacing:-.04em}
.lhero h1 em{font-style:italic;font-weight:700}
.lhero .lead{margin-top:20px;font-size:var(--fs-lead);line-height:1.5;font-weight:500;color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px;max-width:500px}
.lhero__art{position:relative;justify-self:end;width:100%;max-width:540px;aspect-ratio:1100/536}
.lhero__art img,.lhero__art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(23,68,104,.16))}
/* v3g: the live-site line clouds (pagekit.clouds) drift in the lane right of the text, behind the art */
.lhero .kclouds{z-index:1}

/* videos: topic picker (round icon buttons, sky) + real thumbnails with a play disc */
.topics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:860px;margin-top:40px}
.topic{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:44px;padding:8px 2px 12px;border:0;border-radius:20px;background:none;cursor:pointer;
  font:650 var(--fs-body)/1.25 var(--font);color:var(--ink-2);text-align:center}
.topic .disc{background:var(--learn-soft);color:var(--learn-icon)}
.topic:hover .disc{background:var(--learn-tint);transform:translateY(-2px)}
.topic[aria-pressed="true"]{color:var(--ink);font-weight:800}
.topic[aria-pressed="true"] .disc{background:var(--learn);color:#fff;box-shadow:0 0 0 6px var(--learn-tint),var(--sh-2);transform:none}
.topic:focus-visible{outline-offset:0}
.topic__lab{max-width:12ch}
.no-js .topics{display:none}
.lvids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;margin-top:48px}
/* v3c: the hero already fades into paper, so the videos band starts closer (calmer first screens, fewer words per screen) */
.lvideos{padding-top:var(--sp-5)}
.js .lvids:not(.is-ready) .lvid:not([data-topics~="pick"]){display:none}
.lvid__a{display:block;border-radius:var(--r-l);color:var(--ink);text-decoration:none}
.lvid .vid__thumb{border-radius:var(--r-l);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lvid .vid__play{left:14px;bottom:14px}
.lvid .vid__play .ico{width:26px;height:26px;margin-left:3px}
.lvid__a:hover .vid__thumb{transform:translateY(-4px);box-shadow:var(--sh-2)}
.lvid__a:hover .vid__play{transform:scale(1.08)}
.lvid__t{display:block;margin-top:16px;font:750 var(--fs-body)/1.3 var(--font);letter-spacing:-.01em;text-wrap:pretty}
.lvid__a:hover .lvid__t{color:var(--learn-icon)}
.lvid__a:focus-visible{outline-offset:6px}

/* help me choose: four question cards, every one a link. Written = "Read it". Not written yet = "Ask us which fits" */
.guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.guide{display:flex;flex-direction:column;align-items:flex-start;gap:24px;height:100%;min-height:208px;padding:28px 24px 24px;border-radius:var(--r-l);
  background:#fff;box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.guide__txt{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:1;min-width:0}
.guide__lab{font:800 var(--fs-lead)/1.2 var(--font);letter-spacing:-.015em;text-wrap:balance}
.guide__txt>:last-child{margin-top:auto}
.guide .disc{background:var(--learn-tint);color:var(--learn-icon)}
a.guide:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
a.guide:hover .disc{background:var(--learn);color:#fff}
.guide__go{display:inline-flex;align-items:center;gap:8px;font:750 var(--fs-body)/1.2 var(--font);color:var(--learn-ink)}
.guide__go span{transition:transform .2s var(--ease)}
a.guide:hover .guide__go span{transform:translateX(3px)}

/* tools: six jobs, open groups (sky disc + name, then logo chips). No card around each group (no card-in-card) */
.tgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 40px;margin-top:48px;align-items:start}
.tgroup{padding:0;background:none}
.tgroup h3{display:flex;align-items:center;gap:14px;font:800 var(--fs-body)/1.2 var(--font);letter-spacing:-.01em;color:var(--learn-ink)}
/* round 8: at 200% text on a 320 screen the name wraps and the disc stays in proportion (no sideways scroll) */
.tgroup h3>span:last-child{min-width:0;overflow-wrap:anywhere}
.tgroup h3 .disc{width:min(calc(var(--d) * .0625rem),18vw);height:min(calc(var(--d) * .0625rem),18vw)}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tchip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 12px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--sh-1);font:700 var(--fs-body)/1.2 var(--font);color:var(--ink)}
.tchip img{width:22px;height:22px;object-fit:contain;filter:grayscale(1) brightness(.3)}
.tools-note{display:flex;align-items:center;gap:10px;margin-top:24px;font:650 var(--fs-body)/1.4 var(--font);color:var(--ink-2)}

/* training (sky band): ONE object (graduation cap on a chat bubble) on a soft round disc, facts, what you learn */
.train__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:center}
.train__art{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1}
.train__disc{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff 0,var(--learn-soft) 58%,#d3e6f6 100%);box-shadow:0 40px 70px -32px rgba(23,68,104,.35)}
.train__obj{position:absolute;left:10%;top:8%;width:80%;height:80%}
.train__obj img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(23,68,104,.22))}
.train__pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.train .facts{margin:28px 0 0}
.train .facts li{gap:16px}
.mods__h{margin-top:32px;font:800 var(--fs-body)/1.2 var(--font);letter-spacing:-.01em;color:var(--learn-ink)}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:16px;align-items:start}
.mod{display:flex;align-items:center;gap:12px;min-height:40px;font:700 var(--fs-body)/1.25 var(--font);color:var(--learn-ink)}
.mod .ico{width:24px;height:24px;stroke-width:1.9;color:var(--learn-icon)}
.train .btn{margin-top:32px}

/* video series slot: a symbol screen (no fake thumbnails, no play button): CloudSprout mark ringed by trade icons */
.series__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 72px;align-items:center}
.series__screen{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);background:radial-gradient(90% 90% at 50% 45%,#3a82c2 0%,#25649c 55%,#174468 100%);box-shadow:var(--sh-2);overflow:hidden}
.series__hub{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%);box-shadow:0 0 0 14px rgba(255,253,247,.14),0 12px 30px rgba(0,0,0,.22)}
.series__hub img{width:64px;height:64px}
.series__pro{position:absolute;transform:translate(-50%,-50%)}
.series__pro .disc{background:rgba(255,253,247,.16);color:#fff}
.series__txt .pill{margin-bottom:20px}
.series__go{margin-top:16px}
.pg-learn .courses{margin-top:32px}

/* video player (native <dialog>: focus stays inside, Esc closes) */
.player{margin:auto;width:min(960px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:0;border:0;border-radius:var(--r-l);background:var(--ink);color:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.player::backdrop{background:rgba(22,26,20,.74)}
.player[open]{animation:tp-in .25s var(--ease)}
.player__bar{display:flex;align-items:center;gap:16px;padding:10px 10px 10px 24px}
.player__t{flex:1;min-width:0;font:750 var(--fs-body)/1.3 var(--font)}
.player__x{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,253,247,.14);color:var(--paper);cursor:pointer}
.player__x:hover{background:rgba(255,253,247,.24)}
.player__x .ico{width:22px;height:22px;stroke-width:2.2}
.player :focus-visible{outline-color:var(--sun)}
.player video,.player iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100svh - 110px);background:#000;border:0}

@media (max-width:1100px){
  .topics{display:flex;overflow-x:auto;gap:4px;max-width:none;margin:32px calc(-1 * var(--gut)) 0;padding:12px var(--gut) 8px;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .topics::-webkit-scrollbar{display:none}
  .topic{flex:0 0 108px;scroll-snap-align:start}
  .lvids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide{min-height:0}
  .tgroups{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
}
@media (max-width:980px){
  .lhero__grid{grid-template-columns:minmax(0,1fr);padding-top:44px;padding-bottom:56px}
  .lhero__art{justify-self:start;max-width:440px}
  .train__grid,.series__grid{grid-template-columns:1fr}
  .train__art{width:min(100%,300px);justify-self:start}
  .series__screen{max-width:560px}
}
@media (max-width:760px){
  .lhero__grid{gap:24px;padding-top:32px;padding-bottom:8px}
  .lhero h1{font-size:var(--fs-h1);overflow-wrap:anywhere}
  .lhero .lead{font-size:var(--fs-body)}
  .lhero__art{max-width:300px;justify-self:center}
  /* v3g: on phones the clouds stay in the art strip at the bottom of the hero, never behind the chips */
  .lhero .kclouds{height:150px}
  .lhero .kclouds .hc--1{--y:6%;--rest:4cqw}
  .jump{gap:10px;margin-top:28px}
  .jump .opt{min-height:60px;gap:10px;padding:8px 10px 8px 8px;font-size:var(--fs-sm)}
  /* v3g phones: all six topics in view (3 x 2), no side scroller; big labels for older readers */
  .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2) 4px;overflow:visible;margin:var(--sp-4) 0 0;padding:0;-webkit-mask-image:none;mask-image:none}
  .topic{flex:none;gap:8px;min-height:56px;padding:6px 2px 8px;font-size:var(--fs-sm)}
  .topic .disc--l{width:var(--disc-m);height:var(--disc-m)}
  .topic .disc--l .ico{width:26px;height:26px;stroke-width:1.75}
  .topic[aria-pressed="true"] .disc{box-shadow:0 0 0 5px var(--learn-tint),var(--sh-2)}
  /* round 8 phones (fewer stacked boxes): one calm sideways row per topic, each card 82% wide so the next one peeks in;
     the themed picture and its words still read at that size */
  .lvids{display:flex;gap:16px;margin:var(--sp-4) calc(-1 * var(--gut)) 0;padding:0 var(--gut) 4px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .lvids::-webkit-scrollbar{display:none}
  .lvids>.lvid{position:relative;flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .lvid .vid__thumb{border-radius:var(--r-m)}
  .lvid__t{margin-top:var(--sp-2);font-size:var(--fs-body);line-height:1.3}
  .lvid .vid__meta{margin-top:4px}
  /* v3g phones (round 5, fewer boxes): guides are open rows with a thin rule, not four cards */
  .guides{grid-template-columns:1fr;gap:0;margin-top:var(--sp-3);border-top:1px solid var(--rule)}
  .guide{flex-direction:row;align-items:center;gap:16px;min-height:72px;padding:var(--sp-2) 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--rule)}
  a.guide:hover{transform:none;box-shadow:none}
  .guide .disc--l{width:var(--disc-m);height:var(--disc-m)}
  .guide .disc--l .ico{width:26px;height:26px;stroke-width:1.75}
  .guide__txt{gap:8px}
  .guide__lab{font-size:var(--fs-body)}
  .tgroups{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:32px}
  .tchips{margin-top:12px}
  /* v3g phones: an open tag cloud (logo + name), no filled pills */
  .tchips{gap:4px var(--sp-3)}
  .tchip{min-height:44px;padding:0;background:none;box-shadow:none;font-size:var(--fs-sm)}
  .train .facts li{font-size:var(--fs-sm)}
  .mods{grid-template-columns:1fr;gap:4px}
  .mod{font-size:var(--fs-sm)}
  .train .btn{width:100%}
  .train__art{width:200px;justify-self:center}
  .series__hub{width:76px;height:76px;box-shadow:0 0 0 10px rgba(255,253,247,.14),0 10px 24px rgba(0,0,0,.22)}
  .series__hub img{width:44px;height:44px}
  .series__pro .disc{width:38px;height:38px}
  .series__pro .disc .ico{width:19px;height:19px}
  .player{width:100vw;max-height:100svh;border-radius:0}
  .player__bar{padding-left:16px}
  .player__t{font-size:var(--fs-sm)}
}
@media (prefers-reduced-motion:reduce){
  .lvid__a:hover .vid__thumb,.lvid__a:hover .vid__play,a.guide:hover,a.guide:hover .guide__go span,.topic:hover .disc{transform:none}
}
/* <<< LEARN block <<< */

/* >>> INTAKE v3g block (intake.html) >>> */
/* ==========================================================================
   INTAKE v3g (2026-09-30): calm pixel step-in per question, lane-colour progress, a designed done state.
   Lane = form[data-lane] (d5.js): green starting, sun running, sky learning, clay urgent, deep green programs.
   Progress: one segment per question (--n, set by d5.js), filled in the lane colour in 3 hard steps (pixel feel).
   Step-in (html.mo only): the question steps in (opacity steps + 8px rise), then each option in order 45ms apart, its icon
   disc boots square to circle. Reduced motion / ?rm=1 / JS off: everything shown at once, nothing moves.
   Done: the lane seal boots, the title and line step in, "What happens next" lights up as a 3-node track, then the buttons.
   ========================================================================== */
.flow__progress{height:8px;margin-top:var(--sp-2);border-radius:2px;background:var(--c-tint,var(--start-tint))}
.flow__progress::before{border-radius:2px;background:var(--c,var(--green));transition:width .36s steps(3,end),background-color .2s}
.flow__progress::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--n,4) - 3px),var(--paper) calc(100% / var(--n,4) - 3px) calc(100% / var(--n,4)))}
.flow form[data-lane="run"] .flow__progress::before{background:var(--run-dot)}
.flow__count{color:var(--c-ink,var(--ink-2))}
/* the question and its options step in, in order */
.flow .cs-q__opts>:nth-child(1){--i:0}.flow .cs-q__opts>:nth-child(2){--i:1}.flow .cs-q__opts>:nth-child(3){--i:2}
.flow .cs-q__opts>:nth-child(4){--i:3}.flow .cs-q__opts>:nth-child(5){--i:4}.flow .cs-q__opts>:nth-child(6){--i:5}
.flow .cs-q__opts>:nth-child(7){--i:6}.flow .cs-q__opts>:nth-child(n+8){--i:7}
.flow .cs-q__fields>:nth-child(1){--i:0}.flow .cs-q__fields>:nth-child(2){--i:1}.flow .cs-q__fields>:nth-child(3){--i:2}
.flow .cs-q__fields>:nth-child(4){--i:3}.flow .cs-q__fields>:nth-child(n+5){--i:4}
html.mo .flow .cs-q.is-current{animation:none}
html.mo .flow .cs-q.is-current .cs-q__legend{animation:mo-led var(--mo-led) steps(4,end) both}
html.mo .flow .cs-q.is-current .cs-q__help{animation:mo-led var(--mo-led) steps(4,end) 80ms both}
html.mo .flow .cs-q.is-current :is(.cs-opt,.cs-field){animation:mo-led 320ms steps(4,end) calc(140ms + var(--i,0) * 45ms) both}
html.mo .flow .cs-q.is-current .cs-opt__icon{animation:mo-boot var(--mo-boot) steps(1,end) calc(180ms + var(--i,0) * 45ms) both}
html.mo .flow .cs-q.is-current :is(.cs-q__legal,.cs-q__error:not([hidden])){animation:mo-led var(--mo-led) steps(4,end) 360ms both}
html.mo .flow form.is-ready .cs-q__nav{animation:mo-led var(--mo-led) steps(4,end) 300ms both}
/* done: seal, words, the "what happens next" track, buttons */
.flow.is-done .flow__progress::after{opacity:0;transition:opacity .2s steps(2,end) .36s}
.flow__seal{display:grid;place-items:center;width:var(--disc-l,55px);height:var(--disc-l,55px);margin-bottom:var(--sp-3);border-radius:50%;background:var(--c);color:var(--c-on)}
.flow__seal .ico{width:28px;height:28px;stroke-width:2.2}
.flow__next{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin:var(--sp-5) 0 0;padding:0;list-style:none;max-width:680px}
.flow__next::before{content:"";position:absolute;left:27px;right:calc(33.3% - 27px);top:26px;height:2px;background:var(--c-tint);transform-origin:left}
.flow__next li{position:relative;display:grid;gap:6px;align-content:start}
.flow__next .disc{position:relative;z-index:1;width:55px;height:55px;background:var(--paper);color:var(--c-icon);box-shadow:inset 0 0 0 2px var(--c-tint)}
.flow__next li.is-on .disc{background:var(--c);color:var(--c-on);box-shadow:none}
.flow__next b{margin-top:var(--sp-1);font:750 var(--fs-body)/1.25 var(--font);color:var(--ink)}
.flow__next span:not(.disc){font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
html.mo .flow .cs-done.is-current .flow__seal{animation:mo-boot var(--mo-boot) steps(1,end) both}
html.mo .flow .cs-done.is-current .cs-done__title{animation:mo-led var(--mo-led) steps(4,end) 160ms both}
html.mo .flow .cs-done.is-current .cs-done__body{animation:mo-led var(--mo-led) steps(4,end) 260ms both}
html.mo .flow .cs-done.is-current .flow__next::before{animation:fn-draw 520ms steps(6,end) 420ms both}
html.mo .flow .cs-done.is-current .flow__next li{animation:mo-led 320ms steps(4,end) calc(420ms + var(--i,0) * 160ms) both}
html.mo .flow .cs-done.is-current .flow__next .disc{animation:mo-boot var(--mo-boot) steps(1,end) calc(440ms + var(--i,0) * 160ms) both}
html.mo .flow .cs-done.is-current :is(.flow__thanks,.flow__note){animation:mo-led var(--mo-led) steps(4,end) 900ms both}
.flow__next li:nth-child(2){--i:1}.flow__next li:nth-child(3){--i:2}
@keyframes fn-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .flow-hd{gap:var(--sp-1)}
  .flow-hd__right{gap:4px}
  .flow__next{grid-template-columns:1fr;gap:var(--sp-3)}
  .flow__next::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;transform-origin:top}
  .flow__next li{grid-template-columns:55px minmax(0,1fr);column-gap:var(--sp-3);align-items:center}
  .flow__next li>:not(.disc){grid-column:2}
  .flow__next li .disc{grid-row:1 / span 2}
  .flow__next b{margin-top:0}
  .flow__next li b:last-child{grid-row:1 / span 2}
  html.mo .flow .cs-done.is-current .flow__next::before{animation-name:fn-draw-y}
}
@keyframes fn-draw-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:400px){ .flow-hd .logo span{font-size:21px} }
/* <<< INTAKE v3g block <<< */

/* >>> SMART block (owner 2026-09-30: "Make sure the forms and pages are smart, also add more options for other option if
   they have something unique or new") >>> */
/* ==========================================================================
   Behaviour: d5.js SMART blocks. Calm, no hint text: a pick is a soft lane tint + ring, a suggestion is a soft ring only.
   Home    .who__panel--other  the Other panel: .xtypes (the extra types, a paper card where the other panels show their
           example) > .xtypes__list > .xtype (disc + label; .is-picked) + .xname ("Something new? Name it" + go)
   Intake  .sbiz            business-type chip picker under the "Business type" line (.sbiz__o, .sbiz__more = the extra types)
           .smart-x         the extra options on "Something else" / "Not sure yet" (square choices; .is-hint = the closest one,
                            .smart-x__path = the closest main path, shown only when the words point there)
           .cs-field__err   plain words under a field (.is-bad = blocks Continue, .is-soft = a "Did you mean" that never blocks)
           .flow__sum       "What you told us" on the thank-you
   Phones (<= 760px): the extra types are the main tabs' round discs, three or so a row (no boxes), every target >= 56px,
   labels >= 17px. Round 7: the "Name it" field is a small ask-style bar (white pill, lightbulb disc, the green stamp).
   ========================================================================== */
/* ---- home: the Other panel (round 7: round discs like the main type tabs + an ask-style "Name it" bar) ---- */
.xtypes{align-self:stretch;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-l);
  background:radial-gradient(120% 90% at 30% 20%,#fff 0,var(--paper) 60%);box-shadow:var(--sh-1)}
.xtypes__h{font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3)}
.xtypes__more{display:none}
.xtypes__body{display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.xtypes__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,7.4em),1fr));gap:var(--sp-3) var(--sp-1);font-size:var(--fs-sm)}
.xtype{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);height:100%;padding:4px 2px 6px;border-radius:var(--r-m);
  color:var(--ink-2);text-decoration:none;text-align:center;font:650 var(--fs-sm)/1.25 var(--font)}
.xtype .disc{background:#fff;color:var(--ink-2);box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.xtype:hover{color:var(--ink)}
.xtype:hover .disc{background:var(--paper);color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.xtype:focus-visible{outline-offset:2px}
.xtype.is-picked{color:var(--ink);font-weight:800}
.xtype.is-picked .disc{background:var(--ink);color:var(--paper);box-shadow:0 0 0 5px #fff,0 0 0 6.5px var(--rule-2),var(--sh-2);transform:none}
.xtype__lab{max-width:12ch;overflow-wrap:break-word;text-wrap:balance}
.xname{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-1);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.xname__lab{font:700 var(--fs-body)/1.3 var(--font);color:var(--ink)}
.xname__bar{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 6px 8px;border-radius:var(--r-pill);background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--rule),var(--sh-1);transition:box-shadow .2s var(--ease)}
.xname__bar:has(.xname__in:focus){box-shadow:inset 0 0 0 3px var(--green),var(--sh-1)}
.xname__disc{background:var(--cream);color:var(--ink-2)}
.xname__in{flex:1;width:0;min-width:0;height:48px;padding:0 4px;border:0;border-radius:0;background:transparent;font:600 var(--fs-body)/1.2 var(--font);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.xname__in:focus{outline:none}
@supports not selector(:has(a)){.xname__in:focus-visible{outline:3px solid var(--green);outline-offset:2px}}
.xname__go{flex:none;min-height:48px;padding:0 20px;font-size:var(--fs-body)}
@media (min-width:981px){.who__panel--other{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:stretch}}
.who__panel--other .who__body{align-self:center}
.flow .smart-x~.cs-q__fields textarea.cs-field__input{min-height:96px}

/* ---- intake: business-type line ("Add" on the contact step when unknown) + the chip picker ---- */
.flow__ctx.is-add b{display:none}
.sbiz{margin:var(--sp-1) 0 var(--sp-3);padding:var(--sp-3);border-radius:var(--r-m);background:var(--cream)}
.sbiz__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));gap:6px}
.sbiz__o{display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere;min-height:48px;padding:4px 12px 4px 4px;border:0;border-radius:var(--r-s);background:#fff;box-shadow:var(--sh-1);
  font:650 var(--fs-body)/1.22 var(--font);color:var(--ink);text-align:left;cursor:pointer;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.sbiz__o .disc{background:var(--cream);color:var(--ink-2)}
.sbiz__o:hover{box-shadow:var(--sh-2)}
.sbiz__o.is-on{background:var(--start-tint);box-shadow:inset 0 0 0 2px var(--start);color:var(--start-ink);font-weight:750}
.sbiz__o.is-on .disc,.sbiz__o[aria-expanded="true"] .disc{background:var(--start);color:#fff}
.sbiz__more{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.sbiz__h{margin-bottom:var(--sp-1);font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3)}
.sbiz__name{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:var(--sp-3)}
.sbiz__name label{font:700 var(--fs-body)/1.3 var(--font)}
/* round 7: the same ask-style bar as the home "Name it" field (.xname__bar: white pill, lightbulb disc, green stamp) */
.sbiz__row{max-width:36rem}

/* ---- intake: extra options on "Something else" / "Not sure yet" ---- */
.flow .smart-x__opts{display:grid;gap:10px;margin-top:var(--sp-4)}
@media (min-width:640px){.flow .smart-x__opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow .smart-x .cs-opt{min-height:60px}
.flow .smart-x .cs-opt::after{border-radius:7px}
.flow .smart-x .cs-opt__icon{width:2.75rem;height:2.75rem}
/* the closest one: a soft lane ring, nothing written */
.flow .smart-x .cs-opt.is-hint:not(:has(input:checked)){box-shadow:inset 0 0 0 2px var(--c),var(--sh-1)}
.flow .smart-x .cs-opt.is-hint:not(:has(input:checked)) .cs-opt__icon{background:var(--c);color:var(--c-on)}
/* the closest main path: its own lane colour (it moves to that path), on the full row */
.flow .smart-x__path{grid-column:1/-1}
.flow .smart-x--path .smart-x__opts{margin-top:var(--sp-2);grid-template-columns:minmax(0,1fr)}
.flow .smart-x--path:not(:has(.smart-x__path:not([hidden]))) .smart-x__opts{margin-top:0}
html.mo .flow .smart-x__path:not([hidden]){animation:mo-led 320ms steps(4,end) both}
.flow .smart-x+.cs-q__fields{margin-top:var(--sp-4)}
.flow .smart-x--path .cs-opt{--i:0}
.flow .smart-x__opts>:nth-child(2){--i:1}.flow .smart-x__opts>:nth-child(3){--i:2}.flow .smart-x__opts>:nth-child(4){--i:3}
.flow .smart-x__opts>:nth-child(5){--i:4}.flow .smart-x__opts>:nth-child(6){--i:5}.flow .smart-x__opts>:nth-child(n+7){--i:6}
.flow .smart-x~.cs-q__fields .cs-field{--i:7}

/* ---- intake: plain words under a field ---- */
.flow .cs-field{align-content:start}
.flow .cs-field__err{position:relative;margin-top:2px;padding-left:18px;font:650 var(--fs-body)/1.45 var(--font);color:var(--urgent-ink);text-wrap:pretty}
.flow .cs-field__err::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;background:var(--urgent)}
.flow .cs-field__err span{margin-right:10px}
.flow .cs-field__err b{font-weight:750;white-space:nowrap}
.flow .cs-field.is-soft .cs-field__err{color:var(--ink-2)}
.flow .cs-field.is-soft .cs-field__err::before{background:var(--run-dot)}
.flow .cs-field.is-bad .cs-field__input{border-bottom-color:var(--urgent);box-shadow:0 2px 0 var(--urgent)}
.flow .cs-field__fix{min-height:44px;margin-top:4px;padding:0 12px;vertical-align:middle;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);font:650 var(--fs-sm) var(--font);color:var(--ink);cursor:pointer}

/* ---- intake: "What you told us" ---- */
.flow__sum{max-width:680px;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-m);background:var(--c-soft,var(--start-soft))}
.flow__sum-h{font:800 var(--fs-lead)/1.2 var(--font);letter-spacing:-.01em;color:var(--ink)}
.flow__sum dl{display:grid;gap:var(--sp-1);margin-top:var(--sp-2)}
.flow__sum dl>div{display:grid;grid-template-columns:minmax(7.5rem,10rem) minmax(0,1fr);gap:4px var(--sp-3);padding-top:var(--sp-1);border-top:1px solid var(--rule)}
.flow__sum dl>div:first-child{border-top:0;padding-top:0}
.flow__sum dt{font:700 var(--fs-sm)/1.5 var(--font);color:var(--ink-3)}
.flow__sum dd{margin:0;font:650 var(--fs-body)/1.45 var(--font);color:var(--ink);overflow-wrap:anywhere}
html.mo .flow .cs-done.is-current .flow__sum{animation:mo-led var(--mo-led) steps(4,end) 340ms both}

@media (max-width:760px){
  /* the Other panel: name, the "not on the list" line, the extra types, then the setups and links (one column, in that
     order: the body's children join the panel grid); the types are open rows in two columns (round 5: fewer boxes) */
  .who__panel--other{gap:0;align-content:start}
  .who__panel--other .who__body{display:contents}
  .who__panel--other .who__name{order:1}
  .who__panel--other .pain{order:2}
  .who__panel--other .got__list{order:4;margin-top:var(--sp-3)}
  .who__panel--other .who__cta{order:5}
  .xtypes{order:3;margin-top:var(--sp-3);padding:0;border-radius:0;background:none}
  /* JS on: "More types" opens the list (aria-expanded), so the panel is no taller than the others until asked */
  .js .xtypes__h{display:none}
  .js .xtypes__more{display:flex;align-items:center;gap:12px;width:100%;min-height:3.5rem;padding:6px 2px;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    background:none;font:700 var(--fs-body)/1.25 var(--font);color:var(--ink);text-align:left;cursor:pointer}
  .js .xtypes__more .disc{--d:32;background:none;color:var(--start-icon)}
  .js .xtypes__more .disc .ico{--n:24}
  .xtypes__chev{margin-left:auto;transition:transform .2s var(--ease)}
  .xtypes__more[aria-expanded="true"] .xtypes__chev{transform:rotate(180deg)}
  .js .xtypes:not(.is-open) .xtypes__body{display:none}
  .js .xtypes.is-open .xtypes__list>li:first-child{border-top:0}
  /* the extra types: the same round discs as the main tabs (three or so a row, the labels >= 17px) */
  .xtypes__list{grid-template-columns:repeat(auto-fill,minmax(min(100%,6.2em),1fr));gap:var(--sp-3) var(--sp-1);padding:var(--sp-3) 0 var(--sp-1)}
  .xtype{font-size:var(--fs-sm)}
  .xtype .disc{--d:55}
  .xtype .disc .ico{--n:28}
  .xtype.is-picked .disc{box-shadow:0 0 0 5px var(--cream),0 0 0 6.5px var(--rule-2),var(--sh-2)}
  .xname{padding-top:var(--sp-3)}
  .xname__in{height:3.5rem}
  .xname__go{min-height:3.5rem;padding:0 18px}
  .xname__bar{padding:4px 4px 4px 6px}
  .sbiz{padding:var(--sp-2)}
  .sbiz__opts{grid-template-columns:minmax(0,1fr)}
  .sbiz__o{min-height:56px}
  .flow .smart-x .cs-opt{min-height:64px}
  .flow__sum{padding:var(--sp-3)}
  .flow__sum dl>div{grid-template-columns:minmax(0,1fr);gap:0}
  .flow .cs-field__fix{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .xtype .disc,.sbiz__o,.xname__bar{transition:none}
}
/* <<< SMART block <<< */

/* >>> ROUND 8 block (audit fixes, 2026-10-01) >>> */
/* ==========================================================================
   Round 8: the owner-lens and accessibility audit. Calmer reveals live in build_index.rv() (one policy for every page);
   this block holds the CSS side: large-text safety, phone tap targets and type, the motion toggle, tidier sections.
   ========================================================================== */
/* footer: the column count follows the reader's own text size. em breakpoints use the browser's default font size, so with
   "Large" or 200% text the footer goes to 3 columns, then to the phone accordions, instead of pushing the page sideways
   (WCAG 1.4.4 / 1.4.10). 6 columns, 3 at <= 68.75em (1100px at 16px), accordions at <= 47.5em (760px; d5.js matches it). */
@media (max-width:68.75em){.ft__cols{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}}
@media (max-width:47.5em){
  .ft__top{flex-direction:column}
  .ft__cols{grid-template-columns:minmax(0,1fr);gap:0;padding:12px 0 24px}
  .ft__cols details{box-shadow:0 1px 0 rgba(255,253,247,.16)}
  .ft__cols summary{display:flex;align-items:center;justify-content:space-between;min-height:3.5rem;margin:0;cursor:pointer;font-size:var(--fs-body)}
  .ft__cols summary::after{content:"+";font-size:20px;color:var(--paper)}
  .ft__cols details[open] summary::after{content:"−"}
  .ft__cols li a{display:flex;min-height:3rem;font-size:var(--fs-body)}
  .ft__cols ul{padding-bottom:12px}
}
/* the motion toggle (d5.js MOTION TOGGLE, WCAG 2.2.2): a quiet pill at the end of the footer's last row */
.ft__still{margin-left:auto;background:rgba(255,253,247,.1);color:rgba(255,253,247,.9)}
.ft__still:hover{background:rgba(255,253,247,.18);color:var(--paper)}
.ft__still:focus-visible{outline-color:var(--sun)}
/* html.still: every endless loop rests where reduced motion puts it (clouds at their rest place, no float, no glow drift) */
html.still :is(.hc,.hc svg,.hx__float,.hx__sun,.hx__shadow,.hero .px,.lc,.mcl,.mcl svg,.pxs .px,.ksub__art img,.pp-sprout img,.eqh__px i),
html.still .flair::before{animation:none!important}
/* off screen: the loops in that block pause (d5.js shared watcher adds .is-off) */
:is(.hero,.ksub,.close,.eqh,.pp-sprout).is-off :is(*,*::before,*::after),.flair.is-off::before{animation-play-state:paused!important}

/* business types: a panel's content sits at the top; "Other" (taller, opened by hand only) takes no room while hidden */
.js .who__panels{align-items:start}
.js .who__panels>.who__panel--other[hidden]{display:none!important}
/* no meaningless three-square pixel clusters (they read as a glitch) */
.scene__px,.people__px,.sv-cluster__px{display:none}
/* "What do you need?" tiles: a learning / programs item keeps its meaning in its label colour, never a key square */
.otile--learn .otile__lab{color:var(--learn-ink)}
.otile--prog .otile__lab{color:var(--prog)}

/* calmer section rhythm (phi in-between steps): 144 / sqrt(phi) = 113 between plain sections, the full 144 around the bold
   bands (deep green programs, sun closing); phones 89 / sqrt(phi) = 70, bands 89 */
:root{--sec:113px;--sec-band:144px}
@media (max-width:980px){:root{--sec:89px;--sec-band:89px}}
@media (max-width:760px){:root{--sec:70px;--sec-band:89px}}
.sec.sec--green,.sec.sec--sun{padding-block:var(--sec-band)}
/* no hairline at section seams on 1.5x screens: each section overlaps the one above by 1px */
body[data-edges] main>section+section{margin-top:-1px}

/* the sentence field grows with its words (field-sizing; d5.js sets the height where it is not supported) */
@supports (field-sizing:content){.paths .say textarea{height:auto}}

/* large text (200%) at 320: no grid track or flex row wider than the screen */
.kside__item>span:last-child{min-width:0;overflow-wrap:anywhere}
.kside__item .disc{width:min(calc(var(--d) * .0625rem),18vw);height:min(calc(var(--d) * .0625rem),18vw)}
.kfact{max-width:100%}
.kfact>span:last-child{min-width:0;overflow-wrap:anywhere}
@media (max-width:760px){.ksub h1,.ksub__lead,.kfact,.jump .opt{overflow-wrap:anywhere}}

@media (max-width:760px){
  /* tap targets >= 56px on phones (older readers): Pause buttons, the menu's Close, breadcrumbs, the review pips */
  .cyc,.menu__close{min-height:3.5rem}
  .kcrumbs a{display:inline-flex;align-items:center;min-height:3.5rem;padding:0}
  .pairs__dot{width:3.5rem;height:3.5rem}
  /* phone type floor: nothing a reader needs under 17px */
  .c-flow,.mock__tag,.lscene .mock__tag{font-size:1.0625rem}
  /* "Questions? Ask us anything.": the green phrase keeps its own line */
  .faqa h2 em{display:block}
  /* learn: "Watch now" sits under its heading (left), and the shorts are one calm sideways row with the next one peeking */
  .watch__body>.go{flex-basis:100%;margin-left:0}
  /* the row bleeds to the edge of its box: the page gutter, or the home "Watch" card's 20px padding (--vb) */
  .vids{display:flex;gap:16px;margin-inline:calc(-1 * var(--vb,var(--gut)));padding:0 var(--vb,var(--gut)) 4px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--vb,var(--gut));scrollbar-width:none;overscroll-behavior-x:contain}
  .watch .vids{--vb:20px}
  .vids::-webkit-scrollbar{display:none}
  .vids>li{position:relative;flex:0 0 82%;min-width:0;scroll-snap-align:start}   /* relative: the hidden "Watch:" stays inside the row */
}
.flow__meta h1{font-size:var(--fs-body)}
/* intake: the segment marks appear (3 calm steps) once the path is known; before that the bar is one plain track */
.flow__progress::after{opacity:0;transition:opacity .3s steps(3,end)}
.flow__progress.is-known::after{opacity:1}
/* intake, JS off: the business type is a plain labelled select (round 8) */
.flow__nojs-type{display:grid;gap:8px;max-width:520px;margin:0 0 var(--sp-4);font:700 var(--fs-body)/1.3 var(--font);color:var(--ink-2)}
.flow__nojs-type select{min-height:3.5rem;padding:0 14px;border:0;border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule-2);font:600 var(--fs-body)/1.2 var(--font);color:var(--ink)}
/* <<< ROUND 8 block <<< */