/* Simplicity Idea Tech: site stylesheet v18 (v18 = v3 retry 1: full delivered proofs on phones (no clamp; "On the record:" a visually hidden label below 760 px) with tighter Services spacing; the claims legend and filter above the first family; the three offer buttons on one row at 1024 px and up; link arrows stay with the last word; one solid disclosure style; the builder pages' phone bar. v17 = v3 fix pass 3: at 1024 px and up, in the tilted family frame, the one-column Run timeline keeps 8 px between a step and its detail. v16 = v3 fix pass 2: the offer cards' inline proof link on phones gets 13 px block padding, so its box is >= 44 px tall, and the short case link ("Case A") no longer breaks inside its label. v15 = v3 fix pass 1: the Services phone budget (compact offers, "We can build" and process disclosures, compact delivered lines). v14 = v3 P1: the three offer cards on /services/ and as the builder's suggest card, Services tile lines instead of tile cards, the family scenes in a phone disclosure, the builder's route-scripted "What hurts?" rows, both builders in two columns from 1024 px, the contact "after you email" block with "Good to know"; tighter Services rhythm on phones. v13 = retry 2: hero labels follow the v3 framing and "Difference 0.00" fades in with the "="; /start/ question 1 follows the address; the AI scene's control row collapses in Assistant mode; phone "What you get" disclosures; the Run detail sits under its step; body face for the Move frame title; tab counts and mini-nav chips no longer wrap mid-phrase; secondary ink one step stronger, sentence-case small labels. v11 = v2.1: 3D hero box over a flat poster, mini-nav, Case A story stage, family switcher, six hand-built scenes, label pills, Work-with-us routes, services filter, one-page sheet, footer "=", no motif). Hand-written, no framework. Only transform and opacity animate; everything is one-shot. */
@font-face{font-family:"BC Narrow Fallback";src:local("Arial Narrow"),local("ArialNarrow");size-adjust:100%}
@font-face{font-family:"BC Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:80%;ascent-override:95%;descent-override:22%}
@font-face{font-family:"IS Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:100%}

:root{
 --mark-p:#0F1B2B;--mark-a:#2454D8;
 --bg:#F4F7FB;--surface:#FFFFFF;--sunk:#EAEFF6;--ink:#182332;--ink-2:#475569;
 --accent:#2454D8;--accent-hover:#1B44B8;--accent-ink:#FFFFFF;
 --border:#8391A2;--control-line:#526174;--tint:#DDE7FC;--bar:#C9D7F6;--line:#C9D3E0;
 --band:#2454D8;--band-ink:#FFFFFF;--band-2:#EEF2FD;--band-btn:#FFFFFF;--band-btn-ink:#1B44B8;
 --band-line:rgba(255,255,255,.4);
 --hero:#0F1B2B;--hero-sheet:#172638;--hero-ink:#EDF3FA;--hero-ink-2:#B4C2D3;
 --hero-accent:#91AEFF;--hero-line:#2E4460;--hero-rule:rgba(145,174,255,.10);--hero-bar:#34506F;
 --hero-btn:#91AEFF;--hero-btn-ink:#0B1426;--hero-btn-hover:#B5C8FF;--hero-ghost:#B4C2D3;
 --old:#8391A2;--old-ink:#526174;--new:var(--accent);--stage:var(--sunk);--sheet:var(--surface);
 --h3-old:#8FA3BD;--h3-new:#91AEFF;--h3-eq:#91AEFF;--h3-line:#3B5170;--h3-bg:var(--hero-sheet);
 --pill-bg:var(--tint);--pill-ink:var(--ink);--pill-can-line:var(--control-line);--pill-can-ink:var(--ink-2);
 --tile-icon-bg:var(--tint);--tile-icon:var(--accent);
 --focus:var(--accent);
 --display:"Barlow Condensed","BC Narrow Fallback","BC Fallback","Arial Narrow",Arial,sans-serif;
 --body:"Instrument Sans","IS Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;
 --ease:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.4,0,1,1);
 --d1:160ms;--d2:240ms;--d3:560ms;--d4:900ms;
 --gut:20px;--navh:61px;--max:1280px;--cg:32px;--bar-h:64px;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --mark-p:#FFFFFF;--mark-a:#91AEFF;
 --bg:#101820;--surface:#1A2633;--sunk:#0C131A;--ink:#EDF3FA;--ink-2:#C9D3DF;
 --accent:#91AEFF;--accent-hover:#B5C8FF;--accent-ink:#0B1426;
 --border:#7F8EA3;--control-line:#7F8EA3;--tint:#24385A;--bar:#34507D;--line:#2E3E52;
 --band:#1B2B45;--band-ink:#EDF3FA;--band-2:#C3D0DE;--band-btn:#91AEFF;--band-btn-ink:#0B1426;
 --band-line:#3A4E6B;
 --old:#7F8EA3;--old-ink:#BCC8D6;--hero:#13203A;--hero-sheet:#1B2C4A;--h3-line:#3E5678;color-scheme:dark}}
:root[data-theme="dark"]{
 --mark-p:#FFFFFF;--mark-a:#91AEFF;
 --bg:#101820;--surface:#1A2633;--sunk:#0C131A;--ink:#EDF3FA;--ink-2:#C9D3DF;
 --accent:#91AEFF;--accent-hover:#B5C8FF;--accent-ink:#0B1426;
 --border:#7F8EA3;--control-line:#7F8EA3;--tint:#24385A;--bar:#34507D;--line:#2E3E52;
 --band:#1B2B45;--band-ink:#EDF3FA;--band-2:#C3D0DE;--band-btn:#91AEFF;--band-btn-ink:#0B1426;
 --band-line:#3A4E6B;
 --old:#7F8EA3;--old-ink:#BCC8D6;--hero:#13203A;--hero-sheet:#1B2C4A;--h3-line:#3E5678;color-scheme:dark}
@media (max-width:359.98px){:root{--gut:16px}}
@media (min-width:760px){:root{--gut:32px;--navh:65px}}
@media (min-width:1024px){:root{--gut:48px}}
@media (min-width:1920px){:root{--gut:64px;--max:1360px}}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html:not(.rm){scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;overflow-wrap:break-word}
[hidden]{display:none!important}
/* JS-only buttons are revealed by site.js; reserve their space from first paint (prepaint sets html.js) so nothing shifts */
html.js .btn[data-copy][hidden],html.js .btn[data-b="copy"][hidden],html.js .btn[data-print][hidden]{display:inline-flex!important;visibility:hidden}
svg{max-width:100%}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
figure,blockquote{margin:0}
.grid{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{display:none}
.skip{position:absolute;left:8px;top:-60px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;border-radius:4px}
.skip:focus{top:8px}
.skip:hover{color:var(--accent-ink)}
/* Phosphor Regular, one set site-wide (MIT, assets/licenses/phosphor.v1.txt) */
svg.ic{width:20px;height:20px;flex:none;display:block;fill:currentColor}
.nw{white-space:nowrap}
.nojs-only{display:none}
html:not(.js) .nojs-only{display:block}

/* type */
.h-hero{font:600 clamp(44px,3.4vw + 30px,86px)/.96 var(--display);letter-spacing:-.01em}
.h-page{font:600 clamp(40px,4vw + 24px,80px)/.98 var(--display);letter-spacing:-.005em;max-width:18ch}
.h2{font:600 clamp(32px,4.2vw + 14px,48px)/1.02 var(--display);letter-spacing:-.005em;max-width:22ch}
.h-case{font:600 clamp(30px,2.6vw + 20px,44px)/1.02 var(--display);max-width:20ch}
.h3s{font:600 clamp(20px,1vw + 16px,24px)/1.2 var(--body);letter-spacing:-.01em}
.h-sub{font:600 clamp(26px,1.6vw + 20px,34px)/1.05 var(--display)}
.lead{font-size:clamp(17px,.4vw + 15px,19px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.label{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 14px/20px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.label .no{font:600 16px/20px var(--display);letter-spacing:0;color:var(--accent);font-variant-numeric:tabular-nums}
.label .ic{width:20px;height:20px}
.kind{margin:0 0 10px;font:600 15px/1.4 var(--body);color:var(--accent);text-wrap:balance}
.kind.own-k{color:var(--ink-2)}
.tag{display:block;font:500 15px/1.4 var(--body);color:var(--ink-2)}
/* claim label: text, never colour alone */
.lbl{display:inline-block;width:fit-content;padding:3px 9px;border:1px solid var(--control-line);border-radius:2px;font:600 14px/1.3 var(--body);color:var(--ink);white-space:nowrap}
.lbl.own{border-style:dashed;color:var(--ink-2)}
.icbox{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:10px;background:var(--tile-icon-bg);color:var(--tile-icon)}
.icbox .ic{width:24px;height:24px}

/* marks */
.eq{display:flex;flex-direction:column;gap:3px;width:24px;margin:0 0 20px}
.eq i{display:block;height:3px;background:var(--accent)}
.mark{display:block;width:24.25px;height:28px;flex:none}
.mark .mk-p{fill:var(--mark-p)}.mark .mk-a{fill:var(--mark-a)}
.motif{display:block;width:100%;height:auto}

/* masthead */
.masthead{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);view-transition-name:masthead}
.bar{position:relative;display:flex;align-items:center;gap:8px;min-height:calc(var(--navh) - 1px)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none;font:600 16px/1.25 var(--body);white-space:nowrap}
.brand:hover{color:var(--ink)}
.nav ul{list-style:none;display:flex;align-items:center}
.nav a{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font:500 16px/1.25 var(--body)}
.nav a:hover{color:var(--accent)}
.nav .signin a{font-size:14px;color:var(--ink-2)}
.nav .signin a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nav .signin .ic{width:16px;height:16px}
.nav-mail{display:none}
.cur{position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--accent)}
.nav li:not(.signin):not(.nav-mail) a:not([aria-current])::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d2) var(--ease)}
.nav li:not(.signin):not(.nav-mail) a:not([aria-current]):hover::after,.nav li:not(.signin):not(.nav-mail) a:not([aria-current]):focus-visible::after{transform:scaleX(1)}
.tools{display:flex;align-items:center;gap:4px;flex:none}
.btn.hmail{min-height:44px;margin-right:6px;padding:0 16px;font-size:15px;gap:8px}
.theme .sun,.menu .x{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:block}:root:not([data-theme="light"]) .theme .moon{display:none}}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
.masthead.open .menu .x{display:block}
.masthead.open .menu .m{display:none}
@media (min-width:960px){
 .nav a{padding:0 11px}
 .nav .signin{margin-left:6px;padding-left:6px;border-left:1px solid var(--line)}
 .menu{display:none!important}
 .nav a[aria-current="page"] .cur{view-transition-name:nav-current}
}
@media (max-width:959.98px){
 .btn.hmail{display:none}
 .nav-mail{display:block}
 .nav .nav-mail a{color:var(--accent);font-weight:600}
 html:not(.js) .masthead{position:static}
 html:not(.js) .bar{flex-wrap:wrap;padding-bottom:8px}
 html:not(.js) .nav{flex:1 1 100%;order:3}
 html:not(.js) .nav ul{flex-wrap:wrap;margin-left:-12px}
 html:not(.js) .nav .signin a{padding-left:12px}
 .js .nav ul{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;padding:4px var(--gut) 16px;background:var(--bg);border-bottom:1px solid var(--line);max-height:calc(100vh - var(--navh));max-height:calc(100dvh - var(--navh));overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px)}
 .js .masthead.open .nav ul{visibility:visible;opacity:1;transform:none;transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
 .js .masthead.closing .nav ul{visibility:visible;opacity:0;transform:translateY(-8px);transition:opacity var(--d1) var(--ease-in),transform var(--d1) var(--ease-in)}
 .js .nav a{min-height:52px;padding:0;font-size:18px;border-bottom:1px solid var(--line)}
 .js .nav .nav-mail .ic{width:22px;height:22px}
 .js .nav .signin a{font-size:15px;border-bottom:0}
 .js .nav .cur,.js .nav li:not(.signin):not(.nav-mail) a::after{left:0;right:auto;width:32px;bottom:8px}
 .js .masthead.open .nav li{animation:fade 220ms var(--ease) both}
 .js .masthead.open .nav li:nth-child(2){animation-delay:30ms}
 .js .masthead.open .nav li:nth-child(3){animation-delay:60ms}
 .js .masthead.open .nav li:nth-child(4){animation-delay:90ms}
 .js .masthead.open .nav li:nth-child(5){animation-delay:120ms}
 .js .masthead.open .nav li:nth-child(6){animation-delay:150ms}
}
@media (max-width:359.98px){.brand{font-size:15px;gap:10px}.bar{gap:4px}.tools{gap:0}}
@keyframes fade{from{opacity:0}}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:var(--accent-ink);font:600 16px/1.25 var(--body);text-decoration:none;cursor:pointer;transition:transform 80ms linear}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn:active{transform:translateY(1px)}
.btn .ic{transition:transform 200ms var(--ease)}
.btn:hover .ic.arr,.btn:focus-visible .ic.arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--control-line)}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.icon{width:44px;min-height:44px;padding:0}
.btn.icon .ic{width:24px;height:24px}
.btn.band{min-height:56px;padding:0 24px;font-size:17px;background:var(--band-btn);border-color:var(--band-btn);color:var(--band-btn-ink)}
.btn.band:hover{background:var(--band-2);border-color:var(--band-2);color:var(--band-btn-ink)}
.btn.band-ghost{min-height:56px;padding:0 24px;font-size:17px;background:transparent;border-color:var(--band-2);color:var(--band-ink)}
.btn.band-ghost:hover{background:transparent;border-color:var(--band-ink);color:var(--band-ink)}
.btn.band-quiet{min-height:44px;padding:0 6px;background:transparent;border-color:transparent;color:var(--band-ink);font-size:16px;font-weight:500;text-decoration:underline;text-decoration-color:var(--band-2);text-underline-offset:4px}
.btn.band-quiet:hover{background:transparent;border-color:transparent;color:var(--band-ink);text-decoration-color:currentColor}
.btn.hero{background:var(--hero-btn);border-color:var(--hero-btn);color:var(--hero-btn-ink)}
.btn.hero:hover{background:var(--hero-btn-hover);border-color:var(--hero-btn-hover);color:var(--hero-btn-ink)}
.btn.hero-ghost{background:transparent;border-color:var(--hero-ghost);color:var(--hero-ink)}
.btn.hero-ghost:hover{background:transparent;border-color:var(--hero-ink);color:var(--hero-ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479.98px){.actions .btn{flex:1 1 100%}}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--accent);text-decoration:none}
.more:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:4px}
.more .ic{transition:transform 200ms var(--ease)}
/* retry 1, F7: the label is one flex item; the arrow rides inline with the last word (build.py attach_arrows) */
.more>.mt{min-width:0}
.more .nw>.ic{display:inline-block;margin-left:8px;vertical-align:-4px}
.more:hover .ic,.more:focus-visible .ic{transform:translateX(4px)}
.linkrow{list-style:none;display:flex;flex-wrap:wrap;gap:0 28px;margin-top:16px}

/* sections */
.sec{padding-block:clamp(48px,6vw,96px);border-top:1px solid var(--line)}
[id]{scroll-margin-top:calc(var(--navh) + 16px)}
.head{margin-bottom:clamp(24px,3vw,40px)}
.head .lead{margin-top:16px}
.page-head{padding-block:clamp(32px,4vw,64px) clamp(40px,4vw,64px)}
.page-head .h-page{margin-bottom:20px}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px var(--cg);align-items:end}
@media (min-width:1024px){.ph-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.ph-grid>:first-child{grid-column:1/8}.ph-grid>.facts{grid-column:9/13}}
.facts{border-top:1px solid var(--ink)}
.facts-l{padding:10px 0;font:600 15px/20px var(--body);color:var(--ink-2);border-bottom:1px solid var(--line)}
.facts ul{list-style:none}
.facts li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)}
.facts li b{display:block;font-weight:600;color:var(--ink)}
.jump li{padding:0}
.jump a{display:grid;grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"k ic" "t ic";align-items:center;gap:0 12px;min-height:44px;padding:12px 0;color:var(--ink);text-decoration:none}
.jump .jk{grid-area:k;font:600 15px/20px var(--body);color:var(--accent)}
.jump .jt{grid-area:t;font:500 16px/1.35 var(--body)}
.jump .ic{grid-area:ic;color:var(--accent);transition:transform 200ms var(--ease)}
.jump a:hover .jt{color:var(--accent)}
.jump a:hover .ic,.jump a:focus-visible .ic{transform:translateY(3px)}
@media (min-width:1024px){
 .mg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
 .mg>*{grid-column:4/13;min-width:0}
 .mg>.head{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
 .mg>.head>.label{grid-column:1/4;margin:14px 0 0}
 .mg>.head>.h2,.mg>.head>div{grid-column:4/13}
 .mg>.label{grid-column:1/4;margin:0}
}

/* JS-only controls (scene buttons, filter, AI switch and questions) ship hidden; under html.js their space is reserved
   from first paint so nothing shifts when site.js reveals them. Under reduced motion the scene buttons stay out. */
html.js .filter[hidden],html.js .seg[hidden]{display:flex!important;visibility:hidden}
html.js .filter>[hidden],html.js .seg>[hidden],html.js .as-q[hidden]{display:inline-flex!important;visibility:hidden}
html.js:not(.rm) .scene-run[hidden]{display:inline-flex!important;visibility:hidden}
html.rm [data-run]{display:none!important}
.mono{font-family:var(--mono)!important}

/* home hero band: a dark stage in both themes (dark theme: a raised band plus a 1 px rule); the H1 is the LCP element and never animates */
.hero-band{position:relative;isolation:isolate;background:var(--hero);color:var(--hero-ink);--focus:var(--hero-ink);padding-block:clamp(36px,5vw,88px) clamp(40px,5vw,88px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-band{border-bottom:1px solid var(--hero-line)}}
:root[data-theme="dark"] .hero-band{border-bottom:1px solid var(--hero-line)}
.hb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px var(--cg)}
.hb-art{width:100%;max-width:560px;min-width:0}
@media (min-width:1024px){.hb-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}.hb-copy{grid-column:1/7}.hb-art{grid-column:7/13;justify-self:end}}
.hero-band .label{display:block;color:var(--hero-ink-2)}
.hb-lang{display:block;margin-top:2px;font-weight:500;letter-spacing:.01em;text-transform:none}
.hero-band .h-hero{margin:16px 0 20px;max-width:15ch;color:var(--hero-ink)}
.hero-band .hl{color:var(--hero-accent)}
.hero-band .lead{color:var(--hero-ink-2);max-width:42ch}
.hero-band .actions{margin-top:28px}
.hb-more{margin-top:10px;color:var(--hero-accent)}
.hb-more:hover{color:var(--hero-btn-hover)}
/* the hero box: a reserved 720:560 frame (CLS 0). The poster is the finished picture; the 3D canvas, when it loads,
   fades in over it while the poster's slabs fade out (the ground glow stays). Labels are real text. */
.hero3d{position:relative;width:100%;aspect-ratio:720/560;contain:layout paint;container-type:inline-size;overflow:hidden;background:var(--h3-bg);border:1px solid var(--hero-line)}
.hero3d::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--hero-accent),transparent);opacity:.35}
.h3-poster,.h3-canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
.h3-poster .sl{opacity:1}
.h3-canvas{opacity:0}
.h3-canvas.on{opacity:1}
.hero3d.is-3d .h3-poster .sl{opacity:0}
html.js:not(.rm) .h3-canvas,html.js:not(.rm) .h3-poster .sl{transition:opacity 200ms var(--ease)}
/* labels (HTML text, positions from src/tools/poster-gen.py): Old / New under each stack, "Difference 0.00" in the gap
   directly under the "=" bars, the Illustrative line top-right inside the frame */
.h3-lbl{position:absolute;z-index:1;margin:0;font:500 15px/1.25 var(--body);color:var(--hero-ink-2);white-space:nowrap;transform:translateX(-50%)}
.h3-old{left:20.4%;top:75.7%}
.h3-new{left:79.6%;top:75.7%}
.h3-lbl.h3-old::before,.h3-lbl.h3-new::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;vertical-align:1px;background:var(--h3-old)}
.h3-lbl.h3-new::before{background:var(--h3-new)}
.h3-diff{left:50%;top:43.3%;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:14px;font-size:clamp(14px,2.7cqw,15px);line-height:1.15}
.h3-diff b{font:600 22px/1 var(--display);font-size:clamp(20px,5.2cqw,30px);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--hero-accent)}
.hero3d .h3-ill{position:absolute;z-index:1;top:9px;right:12px;left:12px;margin:0;text-align:right;font:400 13px/18px var(--body);color:var(--hero-ink-2);white-space:normal}
@media (max-width:479.98px){.h3-lbl.h3-old,.h3-lbl.h3-new{font-size:14px}}
/* the narrowest boxes: "Difference" keeps 14 px on a plate of the box colour where it meets the stacks' inner edges */
@container (max-width:330px){.h3-diff span{padding:0 3px;background:var(--h3-bg)}}
/* J9: during the one-shot intro (hero3d adds .h3-intro) the diff label steps back and returns with the "=": opacity only,
   one pass (1.14 s = the intro's last frame), no fill; the poster, reduced motion and no-JS never get the class */
@keyframes h3-dif{0%{opacity:1}16%{opacity:0}79%{opacity:0}to{opacity:1}}
html.js:not(.rm) .hero3d.h3-intro .h3-diff{animation:h3-dif 1140ms ease}
@media print{.hero3d{display:none}}

/* mini-nav under the hero: four anchor chips (two rows below 480 px) */
.mini-wrap{padding-block:18px}
.mini ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:480px){.mini ul{display:flex;flex-wrap:wrap;gap:10px}}
.mini a{display:flex;align-items:center;gap:10px;min-height:44px;height:100%;padding:6px 16px 6px 12px;border:1px solid var(--control-line);border-radius:24px;color:var(--ink);font:500 15px/1.25 var(--body);text-decoration:none}
.mini a:hover{border-color:var(--accent);color:var(--accent)}
.mini .mi-s{display:none}
@media (max-width:479.98px){.mini .mi-l{display:none}.mini .mi-s{display:inline}}
.mi-n{flex:none;font:600 14px/1 var(--mono);color:var(--accent)}

/* shared scene frame: plain app chrome, a plain title and a quiet "Illustrative" tag inside the frame */
.ill-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:10px 14px 9px;border-bottom:1px solid var(--line);font:600 14px/20px var(--body);color:var(--ink)}
.ill-t{display:flex;align-items:center;gap:8px}
.ill-t::before{content:"";flex:none;width:14px;height:3px;margin-bottom:5px;background:var(--accent);box-shadow:0 5px 0 var(--accent)}
.ill-i{font:400 13px/18px var(--body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.scene{position:relative;min-width:0;container-type:inline-size}
.scene-frame{position:relative;background:var(--sheet);border:1px solid var(--line);contain:layout paint}
.scene-body{padding:14px 16px 18px}
.scene-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.scene-ctl:empty{display:none}
html.js:not(.rm) .sc-ai[data-view="as"] .scene-ctl{display:none}
.btn.scene-run{min-height:44px;padding:0 16px;font-size:15px;gap:8px}
.scene-run .ic{width:18px;height:18px}
.scene figcaption{margin-top:8px;font-size:15px;line-height:1.45;color:var(--ink-2)}

/* H2 story: Case A in four chapters. Motion path only under html.js:not(.rm); reduced motion and no-JS show the final frame and a list. */
.story-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.story-rail{list-style:none;display:flex;gap:6px;margin:0}
.story-rail li{flex:1 1 0;padding-top:8px;border-top:3px solid var(--line);font:600 14px/1 var(--mono);color:var(--ink-2)}
.story[data-chapter="1"] .story-rail li:nth-child(-n+1),.story[data-chapter="2"] .story-rail li:nth-child(-n+2),
.story[data-chapter="3"] .story-rail li:nth-child(-n+3),.story[data-chapter="4"] .story-rail li:nth-child(-n+4){border-top-color:var(--accent);color:var(--accent)}
.story-rail .dot{display:none}
.story-stage{min-width:0}
.story-scene .scene-frame{background:var(--stage)}
.story-scene .ill-bar{background:var(--sheet)}
.chapters{list-style:none;counter-reset:ch}
.chapter{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:14px 0;border-top:1px solid var(--line)}
.chapter:last-child{border-bottom:1px solid var(--line)}
.ch-n{font:600 16px/1.7 var(--mono);color:var(--accent)}
.ch-s{font:600 clamp(24px,1.2vw + 19px,34px)/1.15 var(--display);color:var(--ink);text-wrap:balance}
html.js:not(.rm) .story .w{opacity:.6;transition:opacity 240ms var(--ease) calc(var(--i) * 40ms)}
html.js:not(.rm) .story .chapter.is-on .w{opacity:1}
@media (max-width:759.98px){
 html.js:not(.rm) .story-rail{position:sticky;top:calc(var(--navh) - 1px);z-index:3;padding:8px 0 6px;background:var(--bg)}
 html.js:not(.rm) .story-stage{position:sticky;top:calc(var(--navh) + 30px);z-index:2;padding-bottom:10px;background:var(--bg)}
 html.js:not(.rm) .story-grid{gap:0}
 html.js:not(.rm) .chapter{min-height:70vh;min-height:70svh;align-content:start;padding-top:18px;border-top:0}
 html.js:not(.rm) .chapter:last-child{min-height:44vh;min-height:44svh;border-bottom:0}
}
@media (min-width:760px){
 /* the stage is centred in the viewport (--stage-h per breakpoint, measured) and the rail names each state */
 .story{--stage-h:380px;--rail-w:124px}
 .story-grid{grid-template-columns:var(--rail-w) minmax(0,7fr) minmax(0,5fr);gap:0 clamp(24px,3vw,48px)}
 .story-rail{flex-direction:column;gap:0;align-self:start;position:relative;padding-left:14px;border-left:2px solid var(--line)}
 .story-rail li{flex:none;gap:10px;height:56px;padding:0;border:0;display:flex;align-items:center}
 .sr-l{font:500 14px/1.2 var(--body)}
 .story-rail .dot{display:block;position:absolute;left:-2px;top:0;width:2px;height:56px;background:var(--accent);transform:translateY(calc((var(--c,4) - 1) * 100%))}
 .story[data-chapter="1"]{--c:1}.story[data-chapter="2"]{--c:2}.story[data-chapter="3"]{--c:3}.story[data-chapter="4"]{--c:4}
 .story[data-chapter] .story-rail li:nth-child(n){color:var(--ink-2);border:0}
 .story[data-chapter="1"] .story-rail li:nth-child(1),.story[data-chapter="2"] .story-rail li:nth-child(2),
 .story[data-chapter="3"] .story-rail li:nth-child(3),.story[data-chapter="4"] .story-rail li:nth-child(4){color:var(--accent)}
 .story[data-chapter="1"] .story-rail li:nth-child(1) .sr-l,.story[data-chapter="2"] .story-rail li:nth-child(2) .sr-l,
 .story[data-chapter="3"] .story-rail li:nth-child(3) .sr-l,.story[data-chapter="4"] .story-rail li:nth-child(4) .sr-l{font-weight:600}
 .story-stage{align-self:start}
 .chapters{align-self:start}
 html.js:not(.rm) .story-rail,html.js:not(.rm) .story-stage{position:sticky;top:calc(var(--navh) + 16px);top:max(calc(var(--navh) + 16px),calc(50vh - var(--stage-h) / 2));contain:layout paint}
 html.js:not(.rm) .chapter{min-height:58vh;min-height:58svh;align-content:start;padding-top:12px;border:0}
 html.js:not(.rm) .story-rail .dot{transition:transform 320ms var(--ease)}
}
@media (min-width:1024px){.story{--stage-h:441px;--rail-w:140px}}
@media (min-width:1440px){.story{--stage-h:502px}}
@media (max-width:759.98px){.sr-l{display:none}}
/* stage content: two report sheets (surface cards on the sunk stage), links, per-row ticks, the total, live marks, "=" */
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:stretch}
.st-sheet{position:relative;min-width:0;background:var(--sheet);border:1px solid var(--line)}
.st-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:var(--st-hh,44px);padding:8px 12px;border-bottom:1px solid var(--line);font:600 15px/1.25 var(--body)}
.st-sheet.old .st-h{color:var(--old-ink)}
.st-sheet.new .st-h{color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 8px;border-radius:999px;background:var(--tint);font:600 14px/1 var(--body);color:var(--accent)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.st-rows{list-style:none}
.st-rows li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;min-height:var(--st-rh,38px);padding:9px 12px;border-top:1px solid var(--line);font-size:14px;line-height:20px}
.st-rows li:first-child{border-top:0}
.st-n{color:var(--ink-2)}
.st-v{font:500 17px/20px var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}
.st-sheet.old .st-v{color:var(--old-ink)}
.st-ghost{position:absolute;inset:-1px;border:1.5px dashed var(--old);background:var(--stage);opacity:0;pointer-events:none}
.st-mid{display:grid;grid-template-rows:var(--st-hh,44px);align-content:start}
.st-mid .st-eq{align-self:center;justify-self:center;width:26px;gap:6px;margin:0}
.st-mid .st-eq i{height:5px}
.st-links{list-style:none}
.st-links li{position:relative;display:flex;align-items:center;justify-content:center;height:var(--st-rh,38px)}
.st-links li:first-child{margin-top:1px}
.links{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--accent);transform-origin:left}
.ticks{position:relative;display:inline-flex;align-items:center;gap:2px;padding:2px 5px;background:var(--stage);font:600 14px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--accent)}
.ticks .ic{width:13px;height:13px}
.st-total{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:14px;padding-top:10px;border-top:4px double var(--accent);font:600 16px/1.2 var(--body);color:var(--ink)}
.st-total::before{content:none}
.st-total small{display:block;margin-top:4px;font:400 14px/1.35 var(--body);color:var(--ink-2)}
.st-total b{font:600 clamp(32px,2vw + 22px,42px)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--accent)}
@container (max-width:480px){
 .st-body{padding:10px 10px 12px}
 .st-grid{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}
 .st-nl{display:none}
 .st-h{padding:6px 8px;font-size:14px}
 .st-rows li{padding:9px 8px}
 .st-v{font-size:15px}
 .ticks{padding:2px 2px;font-size:14px}
 .ticks .ic{display:none}
 .st-mid .st-eq{width:20px;gap:4px}
 .st-mid .st-eq i{height:4px}
}
@container (min-width:520px){
 .st-mid .st-eq{width:40px;gap:7px}
 .st-mid .st-eq i{height:7px}
 .st-total b{font-size:clamp(44px,2.4vw + 20px,60px)}
}
@media (min-width:1024px){
 .story{--st-hh:52px;--st-rh:50px}
 .story-scene .st-body{padding:20px 22px 24px}
 .story-scene .st-h{padding:8px 14px;font-size:16px}
 .story-scene .st-rows li{padding:14px 14px 0;font-size:15px}
 .story-scene .st-v{font-size:19px}
 .story-scene .st-total{margin-top:20px;padding-top:14px}
}
@media (min-width:1440px){
 .story{--st-hh:60px;--st-rh:62px}
 .story-scene .st-body{padding:24px 26px 28px}
 .story-scene .st-rows li{padding-top:20px}
 .story-scene .st-v{font-size:20px}
 .story-scene .st-mid .st-eq{width:48px;gap:8px}
 .story-scene .st-mid .st-eq i{height:8px}
}
/* states s1-s4 (the HTML ships s4 = the final frame): s1 old sheet + a dashed ghost, s2 the new sheet solid + connectors,
   s3 the 0.00 column row by row + the large total, s4 "Live" on both sheets + the big "=" */
.story-scene[data-state="s1"] .new .st-in{opacity:0}
.story-scene[data-state="s1"] .st-ghost{opacity:1}
.story-scene[data-state="s1"] .links{transform:scaleX(0)}
.story-scene[data-state="s1"] .ticks,.story-scene[data-state="s2"] .ticks{opacity:0;transform:translateY(6px)}
.story-scene[data-state="s1"] .total,.story-scene[data-state="s2"] .total{opacity:0;transform:translateY(8px)}
.story-scene:not([data-state="s4"]) .live{opacity:0}
.story-scene:not([data-state="s4"]) .st-eq{opacity:0;transform:scale(.5)}
html.js:not(.rm) .story-scene .st-in,html.js:not(.rm) .story-scene .st-ghost,html.js:not(.rm) .story-scene .total,
html.js:not(.rm) .story-scene .live,html.js:not(.rm) .story-scene .st-eq{transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
html.js:not(.rm) .story-scene .links{transition:transform 360ms var(--ease);transition-delay:calc(var(--i,0) * 50ms)}
html.js:not(.rm) .story-scene .st-links li{--d:calc(var(--i) * 60ms)}
html.js:not(.rm) .story-scene .ticks{transition:opacity 260ms var(--ease) var(--d),transform 260ms var(--ease) var(--d)}
html.js:not(.rm) .story-scene[data-state="s3"] .total{transition-delay:280ms}
html.js:not(.rm) .story-scene .st-links li:nth-child(1) .links{--i:0}
html.js:not(.rm) .story-scene .st-links li:nth-child(2) .links{--i:1}
html.js:not(.rm) .story-scene .st-links li:nth-child(3) .links{--i:2}
html.js:not(.rm) .story-scene .st-links li:nth-child(4) .links{--i:3}

/* H3 family switcher: vertical tab list left + panel right from 1024 px; a 2 x 3 grid of family buttons above the panel below it */
.deliver{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:1024px){.deliver{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 clamp(32px,3.5vw,56px);align-items:start}}
.fam-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html:not(.js) .fam-list{display:none}
.fam-list [role="tab"]{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no n" "no c";align-content:center;gap:2px 10px;min-height:64px;padding:10px 12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:4px;color:var(--ink);cursor:pointer}
.fam-list [role="tab"]:hover{border-color:var(--accent)}
.fam-list [role="tab"][aria-selected="true"]{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:var(--tint)}
.fam-no{grid-area:no;align-self:start;font:600 14px/22px var(--mono);color:var(--accent)}
.fam-n{grid-area:n;font:600 16px/1.25 var(--body)}
.fam-c{grid-area:c;font:500 15px/1.3 var(--body);color:var(--ink-2)}
@media (min-width:1024px){
 .fam-list{grid-template-columns:minmax(0,1fr);gap:0;position:sticky;top:calc(var(--navh) + 24px);border-top:1px solid var(--ink)}
 .fam-list [role="tab"]{min-height:76px;padding:14px 16px 14px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
 .fam-list [role="tab"]:hover{background:var(--surface)}
 .fam-list [role="tab"][aria-selected="true"]{background:var(--surface)}
 .fam-n{font-size:clamp(17px,.5vw + 12px,19px)}
}
.fam-panel{min-width:0}
.fam-panel+.fam-panel{margin-top:40px}
html.js .fam-panel+.fam-panel{margin-top:0}
.fam-panel:focus-visible{outline-offset:6px}
.fam-ph{font:600 clamp(28px,1.4vw + 22px,36px)/1.05 var(--display);margin-bottom:6px}
html.js .fam-ph{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fam-i{max-width:62ch;font-size:clamp(17px,.3vw + 15px,18px);line-height:1.5;color:var(--ink-2)}
.fam-stage{margin:16px 0 18px}
html.js:not(.rm) .fam-panel.fade{animation:fade 150ms var(--ease) both}
/* compact tiles (Home panels): icon, title, pill */
.tile-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media (min-width:760px){.tile-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
/* flat rows, not cards (beats the generic .tile card rule): icon + title left, pill top-right. wrap-reverse puts the
   pill on its own top line, right-aligned, when the title and pill do not fit on one line. */
.tile.tile-m{display:flex;flex-direction:row;flex-wrap:wrap-reverse;align-items:flex-end;justify-content:space-between;gap:0 12px;min-height:60px;padding:8px 0;background:none;border:0;border-bottom:1px solid var(--line)}
.tm-a{display:flex;align-items:center;gap:12px;min-height:44px;min-width:0;color:var(--ink);text-decoration:none;font:600 16px/1.3 var(--body)}
.tm-a:hover{color:var(--accent)}
.tm-a:hover .tile-h{text-decoration:underline;text-underline-offset:4px}
.tile-m .icbox{flex:none;width:40px;height:40px;border-radius:8px}
.tile-m .icbox .ic{width:22px;height:22px}
.tile-m .pill{margin:2px 0 0 auto}
.all21{margin-top:18px}

/* label pills: text first; delivered = tinted with a dot, can = outlined */
.pill,.pill-sample{display:inline-flex;align-items:center;flex:none;gap:6px;width:fit-content;padding:3px 10px;border:1px solid transparent;border-radius:999px;background:var(--pill-bg);color:var(--pill-ink);font:500 14px/1.3 var(--body);white-space:nowrap}
.pill::before,.pill-sample::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
[data-label="can"] .pill,.pill-sample.can{background:transparent;color:var(--pill-can-ink);border-color:var(--pill-can-line)}
[data-label="can"] .pill::before,.pill-sample.can::before{background:transparent;border:1.5px solid var(--pill-can-line);width:7px;height:7px}

/* ---- the six family scenes ---- */
/* Business systems: payroll flow, five nodes on a track; each lights in order */
.pf{position:relative;padding:6px 0 2px}
.pf-list{list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pf-n{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;text-align:center}
.pf-k{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sheet);border:1.5px solid var(--old)}
.pf-b{display:grid;place-items:center;color:var(--old-ink)}
.pf-on{position:absolute;inset:-1.5px;display:grid;place-items:center;border-radius:50%;background:var(--tint);border:2px solid var(--accent);color:var(--accent)}
.pf-k .ic{width:24px;height:24px}
.pf-l{font:600 14px/1.3 var(--body);color:var(--ink)}
.pf-l small{display:block;font:500 14px/1.3 var(--body);color:var(--ink-2)}
.pf-track{position:absolute;left:10%;right:10%;top:32px;height:2px;background:var(--line)}
.pf-fill{position:absolute;inset:0;background:var(--accent);transform-origin:left}
@container (max-width:519.98px){
 .pf-list{grid-template-columns:minmax(0,1fr);gap:6px}
 .pf-n{flex-direction:row;gap:14px;text-align:left}
 .pf-k{width:40px;height:40px;flex:none}
 .pf-k .ic{width:20px;height:20px}
 .pf-l small{display:inline}
 .pf-track{left:19px;right:auto;top:26px;bottom:22px;width:2px;height:auto}
 .pf-fill{transform-origin:top}
}
.sc-systems[data-state="idle"] .pf-on,.sc-systems[data-state="n1"] .pf-n:nth-child(n+2) .pf-on,
.sc-systems[data-state="n2"] .pf-n:nth-child(n+3) .pf-on,.sc-systems[data-state="n3"] .pf-n:nth-child(n+4) .pf-on,
.sc-systems[data-state="n4"] .pf-n:nth-child(n+5) .pf-on{opacity:0}
.sc-systems[data-state="idle"] .pf-fill,.sc-systems[data-state="n1"] .pf-fill{transform:scaleX(0)}
.sc-systems[data-state="n2"] .pf-fill{transform:scaleX(.25)}
.sc-systems[data-state="n3"] .pf-fill{transform:scaleX(.5)}
.sc-systems[data-state="n4"] .pf-fill{transform:scaleX(.75)}
@container (max-width:519.98px){
 .sc-systems[data-state="idle"] .pf-fill,.sc-systems[data-state="n1"] .pf-fill{transform:scaleY(0)}
 .sc-systems[data-state="n2"] .pf-fill{transform:scaleY(.25)}
 .sc-systems[data-state="n3"] .pf-fill{transform:scaleY(.5)}
 .sc-systems[data-state="n4"] .pf-fill{transform:scaleY(.75)}
}
html.js:not(.rm) .pf-on{transition:opacity 200ms var(--ease)}
html.js:not(.rm) .pf-fill{transition:transform 220ms linear}

/* Move and modernise: parity grid of 25 cases filling in turn */
.pc-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding:4px 0}
.pc-g{display:grid;grid-template-columns:repeat(5,28px);gap:6px}
.pc-g i{position:relative;width:28px;height:28px;background:var(--sheet);border:1px solid var(--old)}
.pc-g i::before{content:"";position:absolute;inset:-1px;background:var(--tint);border:1px solid var(--accent)}
.pc-g i::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:12px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pc-r{min-width:0}
.pc-c{font:600 17px/1.35 var(--body);color:var(--ink)}
.pc-c b{display:block;font:600 clamp(40px,2.4vw + 28px,52px)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--accent)}
.pc-s{margin-top:10px}
.sc-move[data-state="idle"] .pc-g i::before,.sc-move[data-state="idle"] .pc-g i::after{opacity:0}
.sc-move:not([data-state="done"]) .pc-r{opacity:0;transform:translateY(6px)}
html.js:not(.rm) .pc-g i::before,html.js:not(.rm) .pc-g i::after{transition:opacity 240ms var(--ease);transition-delay:calc(var(--i) * 40ms)}
html.js:not(.rm) .sc-move[data-state="idle"] .pc-g i::before,html.js:not(.rm) .sc-move[data-state="idle"] .pc-g i::after{transition-delay:0s}
html.js:not(.rm) .pc-r{transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
@container (max-width:380px){.pc-g{grid-template-columns:repeat(5,24px);gap:5px}.pc-g i{width:24px;height:24px}.pc-g i::after{left:8px;top:4px;width:5px;height:10px}}

/* Documents and reports: an audit binder; sections slot into the index (tabs inside the sheet, no dotted leader) */
.bdr{display:flex;align-items:stretch;max-width:500px}
.bdr-spine{flex:none;display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:30px;background:var(--tint);border:1px solid var(--line);border-right:0}
.bdr-spine i{width:13px;height:13px;border-radius:50%;background:var(--sheet);border:2px solid var(--accent)}
.bdr-sheet{position:relative;flex:1;min-width:0;padding:10px 0 12px 16px;background:var(--sheet);border:1px solid var(--line);box-shadow:4px 4px 0 var(--sunk)}
.bdr-h{padding-right:16px;margin-bottom:4px;font:600 15px/20px var(--body);color:var(--ink-2)}
.bdr-ix{list-style:none}
.bdr-ix li{display:flex;align-items:center;gap:10px;min-height:42px;border-top:1px solid var(--line);font:500 15px/1.3 var(--body);color:var(--ink)}
.bdr-s{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-pg{flex:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bdr-ix .ic{flex:none;width:18px;height:18px;color:var(--accent)}
.bdr-tab{flex:none;align-self:stretch;display:grid;place-items:center;width:34px;margin-left:2px;background:var(--tint);border-left:3px solid var(--accent);font:600 14px/1 var(--mono);color:var(--ink)}
.bdr-f{margin-top:10px;padding-right:16px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.sc-docs[data-state="idle"] .bdr-ix li,.sc-docs[data-state="sec1"] .bdr-ix li:nth-child(n+2),
.sc-docs[data-state="sec2"] .bdr-ix li:nth-child(n+3),.sc-docs[data-state="sec3"] .bdr-ix li:nth-child(n+4){opacity:0;transform:translateX(-18px)}
.sc-docs:not([data-state="done"]) .bdr-f{opacity:0}
html.js:not(.rm) .bdr-ix li,html.js:not(.rm) .bdr-f{transition:opacity 240ms var(--ease),transform 240ms var(--ease)}

/* AI and automation: OCR (document -> fields -> draft) and a scripted assistant */
.seg{display:inline-flex;margin:0 0 14px;border:1px solid var(--control-line);border-radius:4px;overflow:hidden}
.seg button{min-height:44px;padding:0 18px;background:transparent;border:0;font:500 15px/1 var(--body);color:var(--ink);cursor:pointer}
.seg button+button{border-left:1px solid var(--control-line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.sub-l{margin-bottom:8px;font:600 15px/20px var(--body);color:var(--ink-2)}
.sub+.sub{margin-top:18px}
.sc-ai[data-view] .sub-l{display:none}
.sc-ai[data-view] .sub+.sub{margin-top:0}
.sc-ai[data-view="ocr"] .sub-as,.sc-ai[data-view="as"] .sub-ocr{display:none}
.ocr{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1.15fr);align-items:center;gap:10px}
.ocr-doc{display:flex;flex-direction:column;gap:8px;padding:16px 12px;background:var(--bg);border:1px solid var(--line);box-shadow:3px 3px 0 var(--sunk)}
.dl{display:block;height:6px;border-radius:1px;background:var(--line)}
.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}
.fbox{position:relative;display:block;margin-top:6px;padding:14px 8px 8px}
.fbox::before{content:"";position:absolute;inset:0;border:1.5px dashed var(--accent)}
.fbox em{position:absolute;left:6px;top:0;transform:translateY(-55%);padding:0 4px;background:var(--bg);font:600 14px/1 var(--body);font-style:normal;color:var(--accent)}
.fbox .dl{background:var(--bar)}
.ocr-arr{display:grid;place-items:center;color:var(--accent)}
.ocr-arr .ic{width:24px;height:24px}
.ocr-t{margin:0;border-top:1px solid var(--ink)}
.ocr-t div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.3}
.ocr-t dt{color:var(--ink-2)}
.ocr-t dd{margin:0;font:500 15px/1.3 var(--mono);color:var(--ink)}
.ocr-st{display:flex;align-items:center;gap:6px;margin-top:10px;font:600 14px/1.35 var(--body);color:var(--ink)}
.ocr-st .ic{width:18px;height:18px;color:var(--accent)}
@container (max-width:479.98px){.ocr{grid-template-columns:minmax(0,1fr)}.ocr-arr{transform:rotate(90deg);height:26px}}
.sc-ai[data-state="idle"] .fbox::before,.sc-ai[data-state="idle"] .fbox em{opacity:0}
.sc-ai[data-state="idle"] .ocr-t div,.sc-ai[data-state="boxes"] .ocr-t div{opacity:0;transform:translateX(-10px)}
.sc-ai:not([data-state="done"]) .ocr-st{opacity:0}
html.js:not(.rm) .fbox::before,html.js:not(.rm) .fbox em{transition:opacity 220ms var(--ease) calc(var(--i) * 70ms)}
html.js:not(.rm) .ocr-t div{transition:opacity 220ms var(--ease) calc(var(--i) * 70ms),transform 220ms var(--ease) calc(var(--i) * 70ms)}
html.js:not(.rm) .ocr-st{transition:opacity 240ms var(--ease)}
.as-qs{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}
.as-q{min-height:44px;padding:8px 16px;text-align:left;background:transparent;border:1px solid var(--control-line);border-radius:22px;font:500 15px/1.3 var(--body);color:var(--ink);cursor:pointer}
.as-q:hover{border-color:var(--accent);color:var(--accent)}
.as-q[aria-pressed="true"]{border-color:var(--accent);background:var(--tint);color:var(--ink)}
html:not(.js) .as-qs{display:none}
.as-chat{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--bg);border:1px solid var(--line)}
.as-u{align-self:flex-end;max-width:88%;padding:9px 14px;border-radius:14px 14px 3px 14px;background:var(--accent);color:var(--accent-ink);font:500 15px/1.4 var(--body)}
.as-a{align-self:flex-start;max-width:92%;padding:10px 14px;border-radius:14px 14px 14px 3px;background:var(--sheet);border:1px solid var(--line)}
.as-ids{font:500 15px/1.4 var(--mono);color:var(--ink)}
.as-src{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.as-src .ic{width:16px;height:16px}
.sub-as[data-a="wait"] .as-a{opacity:0;transform:translateY(6px)}
html.js:not(.rm) .as-a{transition:opacity 260ms var(--ease),transform 260ms var(--ease)}

/* Apps, web and integrations: a phone and a browser portal joined by the ERP's API */
.ap{display:grid;grid-template-columns:minmax(0,170px) 56px minmax(0,1fr);align-items:center}
.ap-phone{padding:6px 7px 10px;background:var(--sheet);border:2px solid var(--old-ink);border-radius:22px}
.ap-st{padding:2px 10px 6px;font:600 14px/1.2 var(--body);color:var(--ink-2)}
.ap-scr{display:flex;flex-direction:column;gap:6px;padding:12px 10px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.ap-h{font:600 15px/1.25 var(--body);color:var(--ink)}
.ap-f{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 6px;padding-bottom:5px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.3;color:var(--ink-2)}
.ap-f b{font:500 14px/1.3 var(--mono);color:var(--ink)}
.ap-sig{position:relative;display:block;padding-top:2px;color:var(--accent);border-bottom:1.5px solid var(--ink-2)}
.ap-sig svg{display:block;width:100%;max-width:130px;height:auto}
.ap-cover{position:absolute;inset:0 0 1px;background:var(--bg);transform-origin:right;transform:scaleX(0)}
.ap-sl{font-size:14px;line-height:1.3;color:var(--ink-2)}
.ap-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 8px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font:600 14px/1.2 var(--body);text-align:center}
.ap-btn .ic{width:16px;height:16px}
.ap-api{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px}
.ap-line{position:relative;display:block;width:100%;height:2px;background:var(--accent)}
.ap-dot{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:0}
.ap-apil{font:600 14px/1 var(--mono);color:var(--accent)}
.ap-portal{min-width:0;background:var(--sheet);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ap-chrome{display:flex;align-items:center;gap:5px;padding:8px 10px;background:var(--sunk);border-bottom:1px solid var(--line)}
.ap-chrome i{width:8px;height:8px;border-radius:50%;background:var(--old)}
.ap-url{flex:1;height:14px;margin-left:8px;border-radius:7px;background:var(--sheet);border:1px solid var(--line)}
.ap-rec{padding:10px 12px 12px}
.ap-rh{margin-bottom:6px;font:600 15px/1.25 var(--body);color:var(--ink)}
.ap-dl{margin:0}
.ap-dl div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.3}
.ap-dl dt{color:var(--ink-2)}
.ap-dl dd{margin:0;font:500 14px/1.3 var(--mono);color:var(--ink);text-align:right}
.ap-status dd{display:grid;font-family:var(--body);font-weight:600}
.ap-s0,.ap-s1{grid-area:1/1}
.ap-s0{color:var(--ink-2);opacity:0}
.ap-s1{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;color:var(--accent)}
.ap-s1 .ic{width:15px;height:15px}
.sc-apps[data-state="idle"] .ap-cover{transform:scaleX(1)}
.sc-apps:not([data-state="done"]) .ap-s0{opacity:1}
.sc-apps:not([data-state="done"]) .ap-s1{opacity:0}
.sc-apps[data-state="sent"] .ap-dot{opacity:1;transform:translateX(calc(var(--api-w,40px) - 10px))}
.sc-apps[data-state="done"] .ap-dot{transform:translateX(calc(var(--api-w,40px) - 10px))}
html.js:not(.rm) .ap-cover{transition:transform 380ms var(--ease)}
html.js:not(.rm) .ap-dot{transition:transform 380ms var(--ease),opacity 160ms linear}
html.js:not(.rm) .ap-s0,html.js:not(.rm) .ap-s1{transition:opacity 220ms var(--ease)}
.ap-api{--api-w:44px}
@container (max-width:519.98px){
 .ap{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0}
 .ap-phone{width:100%;max-width:230px}
 .ap-api{flex-direction:row;height:48px;--api-w:34px}
 .ap-line{width:2px;height:34px}
 .ap-dot{left:-4px;top:0}
 .sc-apps[data-state="sent"] .ap-dot{transform:translateY(24px)}
 .sc-apps[data-state="done"] .ap-dot{transform:translateY(24px)}
 .ap-portal{width:100%}
}

/* Run: a numberless timeline after go-live; every detail is in the HTML, one shows at a time on wide frames with JS */
.tl{list-style:none;position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.tl-i{position:relative;padding:0 0 12px 30px}
.tl-i::before{content:"";position:absolute;left:8px;top:22px;bottom:-22px;width:2px;background:var(--line)}
.tl-i:last-child::before{content:none}
.tl-step{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;background:none;border:0;text-align:left;font:600 16px/1.3 var(--body);color:var(--ink);cursor:pointer}
.tl-dot{position:absolute;left:-29px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--sheet);border:2px solid var(--accent)}
.tl-n{font:600 14px/1 var(--mono);color:var(--accent)}
.tl-step:hover .tl-k{color:var(--accent)}
.tl-i.is-cur .tl-dot{background:var(--accent)}
.tl-i.is-cur .tl-k{color:var(--accent)}
.tl-d{max-width:60ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
@container (min-width:560px){
 .tl{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px}
 .tl::before{content:"";position:absolute;left:8px;right:8px;top:22px;height:2px;background:var(--line)}
 .tl-i{position:static;padding:0}
 .tl-i::before{content:none}
 .tl-step{flex-direction:column;align-items:flex-start;gap:6px;padding-top:36px;min-height:88px}
 .tl-dot{left:0;top:14px}
 .tl-d{margin-top:4px}
 html.js .tl{padding-bottom:78px}
 html.js .tl-d{position:absolute;left:0;right:0;bottom:0;min-height:66px;margin:0;padding:12px 14px;background:var(--bg);border-left:3px solid var(--accent);opacity:0}
 html.js .tl-i.is-cur .tl-d{z-index:1;opacity:1}
 html.js .tl-i .tl-d{right:auto}
 html.js .tl-i:nth-child(2) .tl-d{left:calc(25% + 3px)}
 html.js .tl-i:nth-child(3) .tl-d{left:auto;right:calc(25% + 3px)}
 html.js .tl-i:nth-child(4) .tl-d{left:auto;right:0}
 html.js .tl-i.is-cur .tl-step::after{content:"";position:absolute;left:2px;bottom:-9px;border:6px solid transparent;border-bottom:0;border-top:7px solid var(--accent)}
 html.js:not(.rm) .tl-d{transition:opacity 180ms var(--ease)}
}

/* H4: two delivered cases, outcome first (h3, then how we knew, then the checks, then label + status + link) */
.cases2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1024px){.cases2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.cc{position:relative;display:flex;flex-direction:column;padding:clamp(20px,3vw,40px)}
.cc.a{background:var(--tint)}
.cc.b{background:var(--surface);border:1px solid var(--line)}
.cc-no{position:absolute;right:clamp(16px,2.4vw,32px);top:clamp(12px,2vw,24px);font:600 clamp(56px,4vw + 30px,88px)/1 var(--display);color:var(--accent);opacity:.18}
.cc .h-case{font-size:clamp(26px,1.6vw + 20px,36px);max-width:20ch;padding-right:48px}
.cc-kind{margin-top:8px;font:500 15px/1.45 var(--body);color:var(--ink-2)}
.cc-l{margin:18px 0 2px}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.cc-foot .cc-lab{margin:0;letter-spacing:.02em;text-transform:none;font-size:15px;color:var(--ink)}
.cc-foot .status{margin:0}
.cc-foot .more{margin-left:auto}
.checks{list-style:none;margin:8px 0 18px}
.checks li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font:600 clamp(18px,.5vw + 16px,21px)/1.35 var(--body)}
.checks .ic{width:22px;height:22px;margin-top:2px;color:var(--accent)}
.checks small{display:block;margin-top:2px;font:400 15px/1.45 var(--body);color:var(--ink-2)}
.status{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:16px;font:600 15px/1.4 var(--body);color:var(--ink)}
.status .ic{width:18px;height:18px}
.status.on::before{content:"";flex:none;width:8px;height:8px;margin:0 5px;border-radius:50%;background:var(--accent)}
.status.done .ic{color:var(--ink-2)}
.status.built{display:inline-flex;margin:0;padding:4px 10px;border:1px solid var(--control-line);border-radius:2px;font-size:14px}
.status.built .ic{width:16px;height:16px;color:var(--control-line)}

/* H5 Work with us: two routes of equal weight, the "=" between them (two parties, one scope) */
.routes{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:760px){.routes{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0;align-items:stretch}}
.route{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:clamp(20px,3vw,36px);background:var(--surface);border:1px solid var(--line)}
.route-h{font:600 clamp(26px,1.4vw + 20px,34px)/1.05 var(--display);text-wrap:balance}
.route-l{font:500 clamp(17px,.3vw + 15px,19px)/1.45 var(--body);color:var(--ink)}
.steps3,.route-p{list-style:none;align-self:stretch;border-top:1px solid var(--line)}
.steps3 li,.route-p li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--ink)}
.s3n{flex:none;width:24px;font:600 15px/1.45 var(--mono);color:var(--accent)}
.route-p .ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent)}
.route .actions{align-items:center;margin-top:auto;padding-top:8px;column-gap:20px}
.route .actions .route-draft{font-weight:500}
.route-eq{display:flex;align-items:center;justify-content:center;min-height:24px}
.route-eq .eq{width:30px;gap:6px;margin:0}
.route-eq .eq i{height:6px}
@media (min-width:760px){.route-eq .eq{width:36px;gap:8px}.route-eq .eq i{height:7px}}
.wwu .linkrow{margin-top:20px}

/* ledger (work) */
.ledger{margin:0}
.ledger>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.ledger>div:first-child{border-top-color:var(--ink)}
.ledger dt{font-size:15px;line-height:1.4;color:var(--ink-2)}
.ledger dd{margin:0;font:600 clamp(34px,3vw + 24px,60px)/1 var(--display);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.total{font-weight:600;font-size:17px;line-height:1.4}
.total::before{content:"";display:block;height:3px;margin-bottom:12px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);box-sizing:content-box}
.outcome{margin-bottom:14px;font:600 20px/1.35 var(--body);color:var(--ink);max-width:34ch}

/* contact band (shared): the two bars meet as "=" beside the heading */
.band{position:relative;isolation:isolate;background:var(--band);color:var(--band-ink);border-top:0;--focus:var(--band-ink)}
.band.sec{padding-block:clamp(44px,5vw,88px)}
.band .label{color:var(--band-2)}
.band-in{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 48px;align-items:end}
@media (min-width:1024px){.band-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.bh-row{display:flex;align-items:flex-end;gap:20px 28px}
.bh{font:600 clamp(40px,5vw + 16px,72px)/.98 var(--display);color:var(--band-ink);max-width:12ch}
.band-eq{display:none;flex:none;width:clamp(120px,10vw,180px);height:auto;margin-bottom:10px;color:var(--band-ink);opacity:.9}
@media (min-width:760px){.band-eq{display:block}}
.b-disp{margin-bottom:18px;font:600 clamp(28px,2.4vw + 18px,48px)/1.05 var(--display);color:var(--band-ink);overflow-wrap:anywhere}
@media (max-width:479.98px){
 .band .actions{gap:10px}
 .band .actions .btn{flex:1 1 auto;min-height:52px;padding:0 14px;font-size:16px;gap:8px}
 .band .actions .copyb{flex-basis:100%;min-height:44px}
}

/* v3 offers: three starting points of equal weight (not tiles: no pill). Full cards on /services/ (3 columns from 1024 px,
   2 + 1 wide from 760 px, stacked below); the compact form is the builder's suggest card. */
.offers3{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:760px){.offers3{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.offers3>li:last-child{grid-column:1/-1}}
@media (min-width:1024px){.offers3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.offers3>li:last-child{grid-column:auto}}
.offer{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.offer-f{padding:clamp(18px,2.2vw,28px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent)}
.offer-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.offer-top .icbox{width:40px;height:40px;border-radius:8px}
.offer-top .icbox .ic{width:22px;height:22px}
.offer-k{font:600 15px/1.35 var(--body);color:var(--accent);text-wrap:balance}
.offer-h{font:600 clamp(26px,1vw + 20px,32px)/1.05 var(--display);letter-spacing:-.005em;text-wrap:balance}
.offer-p{margin-top:10px;max-width:60ch;font-size:16px;line-height:1.55;color:var(--ink)}
.offer-first{display:flex;flex-direction:column;gap:2px;align-self:stretch;margin-top:14px;padding:10px 12px;background:var(--sunk);border-left:3px solid var(--accent)}
.of-l{font:600 14px/20px var(--body);color:var(--ink-2)}
.of-v{font:600 16px/1.45 var(--body);color:var(--ink)}
.offer-pr{margin-top:12px}
.offer-proof{max-width:60ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.offer-proof b{font-weight:600;color:var(--ink)}
.offer .more{font-size:15px}
.offer-end{align-self:stretch;margin-top:4px;padding-top:10px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.offer-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:auto;padding-top:16px}
.offer-acts .btn{min-height:48px}
@media (min-width:760px) and (max-width:1023.98px){.offers3>li:last-child .offer-p,.offers3>li:last-child .offer-proof{max-width:70ch}}
/* three columns: the cards share row tracks (subgrid), so first steps, proofs, end lines and buttons line up */
@supports (grid-template-rows:subgrid){
 @media (min-width:1024px){
  .offers3{row-gap:0}
  .offers3>.offer-f{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start;justify-items:start}
  .offer-f>.offer-first,.offer-f>.offer-end{justify-self:stretch}
  .offer-f>.offer-first{align-self:start}
  .offer-f>.offer-acts{align-self:start;margin-top:0}   /* retry 1, F4: the three "Start with this" on one line; the partner's empty sample slot stays below */
 }
}
/* the builder's suggest card: one at a time under "What hurts?" */
.offer-c{margin-top:14px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent)}
.offer-c .offer-k{color:var(--ink-2)}
.offer-c .offer-h{margin-top:4px;font-size:clamp(24px,.8vw + 20px,28px)}
.offer-c .offer-p{font-size:15px}
.offer-c .offer-first{background:var(--surface)}
.offer-c .offer-s{margin-top:2px}

/* services head, legend, filter, family index */
.svc-head .ph-grid{align-items:start}
.famnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.famnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--control-line);border-radius:22px;color:var(--ink);font-weight:500;text-decoration:none}
.famnav a:hover{border-color:var(--accent);color:var(--accent)}
.legend ul{list-style:none}
.legend li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.legend li>span:last-child{font-size:15px;line-height:1.45;color:var(--ink-2)}
.legend .more{margin-top:4px}
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.flt-l{margin-right:4px;font:600 15px/20px var(--body);color:var(--ink-2)}
.filter button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--control-line);border-radius:22px;font:500 15px/1 var(--body);color:var(--ink);cursor:pointer}
.filter button:hover{border-color:var(--accent);color:var(--accent)}
.filter button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fam-sec{scroll-margin-top:calc(var(--navh) + 8px)}
/* retry 1, F6: the claims legend and the filter sit just above the first family (they filter the family lines, not the offers) */
.legend-sec{padding-top:clamp(16px,3vw,40px)}
.legend-w .lg-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;border-bottom:1px solid var(--line)}
.legend-w .lg-row .filter{border-bottom:0}
.legend-w .lg-row .more{margin-top:0}
@media (min-width:760px){.legend-w ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--cg)}}
.famnav-s{display:none}
@media (max-width:759.98px){
 .famnav-h{display:none}
 .famnav-s{display:block;position:sticky;top:calc(var(--navh) - 1px);z-index:20;padding:6px var(--gut);background:var(--bg);border-bottom:1px solid var(--line)}
 .famnav-s ul{list-style:none;display:flex;border:1px solid var(--control-line);border-radius:4px}
 .famnav-s li{flex:1 0 auto}
 .famnav-s li+li{border-left:1px solid var(--control-line)}
 .famnav-s a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 3px;color:var(--ink);font:500 14px/1.2 var(--body);text-decoration:none}
 .famnav-s li:first-child a{border-radius:3px 0 0 3px}
 .famnav-s li:last-child a{border-radius:0 3px 3px 0}
 .famnav-s a[aria-current]{background:var(--accent);color:var(--accent-ink)}
 html:has(.famnav-s){scroll-padding-top:calc(var(--navh) + 64px)}
 .services [id]{scroll-margin-top:8px}
 .services .fam-sec{padding-block:32px 40px}
}
/* family head: label, h2, intro, count, then the family scene (after the heading in DOM and visual order) */
.fam-head{display:grid;grid-template-columns:minmax(0,1fr);gap:22px var(--cg);align-items:start}
@media (min-width:1024px){.fam-head{grid-template-columns:repeat(12,minmax(0,1fr))}.fam-hc{grid-column:1/6}.fam-scene{grid-column:6/13}}
.fam-scene{order:0;min-width:0;max-width:680px}
@media (min-width:1024px){.fam-scene{justify-self:end;width:100%}}
.fam-hc .h2{font-size:clamp(40px,3.4vw + 24px,72px);line-height:.95}
/* v3: the scene sits in a <details open>; below 760 px site.js closes it behind "Play the <family> scene"; from 760 px the
   summary is hidden and the scene shows as before (JS off: open everywhere) */
.fam-scene-d>summary,.fam-can-d>summary,.proc-d>summary{display:none}
/* fix pass 1: from 760 px the "We can build" list continues the delivered list (one rule, no double line); a list of one
   line spans both columns from 1024 px */
@media (min-width:760px){.tile-lines+.fam-can-d>.tile-lines{margin-top:0;border-top:0}}
@media (min-width:1024px){.tile-lines>li:only-child{grid-column:1/-1}}
@media (max-width:759.98px){
 .fam-scene-d>summary,.fam-can-d>summary,.proc-d>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--control-line);border-radius:4px;background:var(--surface);font:600 16px/1.3 var(--body);color:var(--ink);cursor:pointer;list-style:none}
 .fam-scene-d>summary::-webkit-details-marker,.fam-can-d>summary::-webkit-details-marker,.proc-d>summary::-webkit-details-marker{display:none}
 .fam-scene-d>summary .ic,.proc-d>summary .ic{width:18px;height:18px;color:var(--accent)}
 .fam-scene-d>summary::after,.fam-can-d>summary::after,.proc-d>summary::after{content:"";flex:none;width:8px;height:8px;margin:-4px 4px 0 auto;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
 .fam-scene-d[open]>summary,.proc-d[open]>summary{margin-bottom:12px}
 .fam-scene-d[open]>summary::after,.fam-can-d[open]>summary::after,.proc-d[open]>summary::after{margin-top:4px;transform:rotate(-135deg)}
 .fam-scene-d>summary:hover,.fam-can-d>summary:hover,.proc-d>summary:hover{border-color:var(--accent)}
 .fam-scene-d>summary:focus-visible,.fam-can-d>summary:focus-visible,.proc-d>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
 .fam-can-d{margin-top:8px}
 .cd-dot{flex:none;width:9px;height:9px;margin:0 4px 0 4px;border:1.5px solid var(--pill-can-line);border-radius:50%}
 .fam-can-d>.tile-lines{margin-top:8px}
}
.fam-hc .lead{margin-top:14px}
.fam-count{margin-top:14px;font:600 15px/1.4 var(--body);color:var(--accent)}
.fam-hc .note{margin-top:12px;max-width:56ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.fam-hc .more{margin-top:8px}
@media (min-width:1024px){html.js:not(.rm) .fam-head .scene-frame{transform:perspective(1200px) rotateY(4deg);transform-origin:left center}}
/* fix 3: in the tilted frame the one-column Run timeline keeps a gap between a step and its detail, so the projected detail box starts below the step */
@media (min-width:1024px){@container (max-width:559.98px){html.js:not(.rm) .fam-head .scene-frame .tl-d{margin-top:8px}}}
.rd-line{margin-top:18px;padding:4px 0 4px 16px;border-left:2px solid var(--ink-2)}
.rd-line .kind{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rd-line .kind .ic{width:18px;height:18px}
.rd-line .quote{margin-top:6px;padding-left:0;border-left:0}
.rd-line .more{margin-top:4px}
.rd-by{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink-2)}
/* services tile lines (v3): hairline rows, no card chrome. Top: a 32 px icon tile, the title, the pill (under the title on
   phones); the problem line; delivered: "On the record" on a 3 px accent rule + the case link; can: a native "What you get"
   disclosure (closed at every width) with "Ask about this" on the same row; every line ends with "Ask about this". */
.tile{display:flex;flex-direction:column;min-width:0}
.tile-h{font:600 clamp(20px,1vw + 16px,24px)/1.2 var(--body);letter-spacing:-.01em;max-width:30ch}
.tile-lines{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin-top:20px;border-top:1px solid var(--line)}
@media (min-width:760px){.tile-lines{margin-top:clamp(28px,3vw,40px)}}
@media (min-width:1024px){.tile-lines{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
.tile.tile-l{display:block;padding:14px 0 8px;border-bottom:1px solid var(--line)}
.tl-top{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:6px 12px}
.tl-top .icbox{grid-row:1/3}
.icbox.sm{width:32px;height:32px;border-radius:7px}
.icbox.sm .ic{width:18px;height:18px}
.tile-l .tile-h{padding-top:4px;font:600 17px/1.35 var(--body);letter-spacing:-.005em;max-width:none}
.tile-l .pill{grid-column:2}
@media (min-width:760px){
 .tl-top{grid-template-columns:32px minmax(0,1fr) auto}
 .tl-top .icbox{grid-row:auto}
 .tile-l .pill{grid-column:3;margin-top:3px}
 .tl-p,.tl-proof,.tl-foot{margin-left:44px}
}
.tl-p{margin-top:8px;max-width:62ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tl-proof{margin-top:8px;max-width:62ch;padding-left:12px;border-left:3px solid var(--accent);font-size:15px;line-height:1.5;color:var(--ink-2)}
.tl-proof b{font-weight:600;color:var(--ink)}
.tl-proof+.tl-proof{margin-top:0;padding-top:4px}
.tl-foot{position:relative;margin-top:2px}
.tl-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.tile-l .more{font-size:15px}
.more.ask .ic{width:18px;height:18px}
.more.ask:hover .ic,.more.ask:focus-visible .ic{transform:none}
.tl-foot>.tile-more+.tl-acts{position:absolute;top:0;right:0}
.tile-more>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;font:600 15px/1.3 var(--body);color:var(--ink);cursor:pointer;list-style:none}
.tile-more>summary::-webkit-details-marker{display:none}
.tile-more>summary::after{content:"";flex:none;width:8px;height:8px;margin-top:-4px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
.tile-more[open]>summary::after{margin-top:4px;transform:rotate(-135deg)}
.tile-more>summary:hover{color:var(--accent)}
.tile-more>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tile-get{list-style:none;margin:0 0 8px}
.tile-get li{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:15px;line-height:1.45;color:var(--ink)}
.tile-get .ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--accent)}
/* invitation card */
.invite-sec{padding-block:0 clamp(56px,6vw,96px)}
.invite{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 40px;padding:clamp(20px,3vw,36px);border:1.5px dashed var(--control-line)}
.invite p{color:var(--ink-2);max-width:56ch}
.invite .actions{margin-top:10px}
@media (min-width:1024px){.invite{grid-template-columns:minmax(0,1fr) auto;align-items:center}.invite .actions{grid-column:2;grid-row:1/3;margin:0}}
/* support after go-live, numberless */
.sup-l{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;max-width:880px;border-top:1px solid var(--ink)}
@media (min-width:760px){.sup-l{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sup-l li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font:500 16px/1.45 var(--body)}
.sup-ask{margin:20px 0 14px;font:600 clamp(18px,.5vw + 16px,21px)/1.4 var(--body)}
.quote{margin-top:10px;padding-left:16px;border-left:2px solid var(--ink-2);max-width:66ch;font-size:16px;line-height:1.55}
.kind{margin:0 0 10px;font:600 15px/1.4 var(--body);color:var(--accent);text-wrap:balance}
.kind.own-k{color:var(--ink-2)}

/* services: written thread */
.thread-wrap{position:relative;max-width:880px}
.thread-wrap::before,.rail{content:"";position:absolute;left:5px;top:10px;bottom:34px;width:2px;background:var(--line)}
.rail{background:var(--accent);transform-origin:top}
.thread{list-style:none;position:relative}
.thread li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:4px 12px;padding:0 0 32px 32px}
.node{position:absolute;left:0;top:6px;width:12px;height:12px;border:1.5px solid var(--control-line);background:var(--bg)}
.node i{position:absolute;inset:-1.5px;background:var(--accent)}
.sno{font:600 24px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.st{font-weight:600}
.sn{margin-top:4px;color:var(--ink-2)}
.stx .tag{margin-top:6px}
.thread .ic{width:24px;height:24px;color:var(--ink-2)}
@media (min-width:760px){.thread li{grid-template-columns:56px minmax(0,1fr) 24px;padding-left:40px}}
/* figures and SVG drawing (work) */
.fig figcaption,.cap{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.draw{display:block;width:100%;height:auto;stroke-linecap:square;stroke-linejoin:miter}
.draw .k{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.draw .kd{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:6 4}
.draw .a{fill:var(--accent)}
.draw .t{font:500 15px/1 var(--body);fill:var(--ink-2)}
.draw .t.sm{font-size:14px}
.draw .t.mono{font-family:var(--mono);font-size:14px}
.draw .cn{stroke:var(--ink-2);stroke-width:1.5}
.draw .ah{fill:none;stroke:var(--ink-2);stroke-width:1.5}

/* work */
.case{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.side{padding:clamp(24px,3vw,36px)}
.side.a{background:var(--tint)}
.side.b{background:var(--surface);border:1px solid var(--line)}
.case-id{margin-bottom:8px;font:600 15px/20px var(--body);color:var(--ink-2)}
.case-id .ch-n{margin-right:.5em}
.side .chips{margin:10px 0 0}
.side .outcome{margin-top:20px}
.outc{margin-top:20px;padding-top:12px;border-top:1px solid var(--ink)}
.outc-h{font:600 15px/20px var(--body);color:var(--ink-2)}
.side .checks{margin:6px 0 0}
.scope-h{margin-top:24px}
.side .ledger{margin-top:12px}
.story>*+*{margin-top:32px}
.story>.label.sub+*{margin-top:10px}
.story>p{max-width:62ch}
@media (min-width:1024px){
 .case{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
 .case .side{grid-column:1/6}
 .case .story{grid-column:6/13}
}
@media (min-width:1024px) and (min-height:760px){.case .side{position:sticky;top:calc(var(--navh) + 24px);align-self:start}}
.sub{margin-bottom:0}
.log{list-style:none;margin-top:10px!important;border-top:1px solid var(--ink)}
.log li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.tg{display:flex;align-items:center;gap:6px;align-self:start;font:500 15px/1.4 var(--body);color:var(--ink-2)}
.parity{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:14px}
.parity svg{width:88px;height:88px}
.pc{font:600 15px/1.4 var(--body);color:var(--ink)}
.dlist{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--cg);margin-top:10px;border-top:1px solid var(--ink)}
.dlist li{padding:11px 0;border-bottom:1px solid var(--line);font:500 15px/1.4 var(--body)}
@media (min-width:600px){.dlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deliveries{list-style:none;display:grid;grid-template-columns:repeat(5,40px);gap:8px}
.deliveries li{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-bottom:2px solid var(--accent);font:600 17px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:760px){.deliveries{grid-template-columns:repeat(10,40px)}}
.sheet{max-width:640px;padding:16px clamp(12px,2vw,24px) 12px;background:var(--surface);border:1px solid var(--line)}
.sheet-h,.slip-h{margin-bottom:8px;font:600 15px/20px var(--body);color:var(--ink-2)}
.sheet table{width:100%;border-collapse:collapse}
.sheet th{padding:8px 0;text-align:left;font:600 14px/20px var(--body);color:var(--ink)}
.sheet thead th{border-bottom:1px solid var(--ink)}
.sheet .n{text-align:right}
.sheet td{padding:11px 0;border-bottom:1px solid var(--line);font:500 15px/20px var(--body);white-space:nowrap}
.sheet td+td,.sheet th+th{padding-left:12px}
.sheet .m{font:500 17px/20px var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink-2);text-align:right}
.sheet .d{font:600 20px/20px var(--display);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.sheet tbody tr:last-child td{border-bottom:0}
.sheet tfoot th,.sheet tfoot td{padding-top:12px;border-top:3px double var(--accent);border-bottom:0}
.sheet tfoot .d{font-size:26px;color:var(--accent)}
@media (max-width:479.98px){.sheet .m{font-size:14px;letter-spacing:0}.sheet td+td,.sheet th+th{padding-left:8px}.sheet th{font-size:14px}.sheet td{font-size:14px}}
.u3-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px var(--cg);align-items:center}
@media (min-width:600px){.u3-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.slip{max-width:340px;padding:16px 20px 12px;background:var(--surface);border:1px solid var(--line)}
.slip dl{margin:0;border-top:1px solid var(--line)}
.slip dl>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.slip dt{font-size:14px;line-height:20px;color:var(--ink-2)}
.slip dd{margin:0;font:500 17px/20px var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink-2);text-align:right}
.slip .net dd{font-weight:600;color:var(--ink)}
.slip .net{margin-top:-1px;border-top:3px double var(--accent);border-bottom:0!important}
.slip .net dt{font-weight:600;color:var(--ink)}
.flow{list-style:none;border-top:1px solid var(--ink)}
.flow li{display:flex;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font:500 15px/1.4 var(--body)}
.flow li:first-child{padding-left:28px}
.flow .ic{color:var(--accent)}
.infra{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(24px,4vw,48px);background:var(--sunk);border:1px dashed var(--control-line)}
@media (min-width:1024px){.infra{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:48px}}
.infra .own-k{margin-bottom:16px}
.own-p{max-width:52ch;font-size:clamp(17px,.4vw + 15px,19px);line-height:1.55}
.pron{margin-top:12px;max-width:60ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.infra .more{margin-top:16px}
.i11w{max-width:560px}
.u4{display:none;padding:16px;border:1px dashed var(--control-line)}
@media (max-width:759.98px){.i11w{display:none}.u4{display:block}}
.u4-l{margin-bottom:12px;font:400 14px/20px var(--mono);color:var(--ink-2)}
.sheet-h,.slip-h,.u4-l{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.u4-flow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.u4-flow li{display:flex;align-items:center;gap:10px;font:600 16px/1.3 var(--body)}
.u4-flow .ic,.u4-br .ic{color:var(--ink-2)}
.u4-br{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font:500 15px/1.3 var(--body);color:var(--ink-2)}

/* about */
.lead-ink{font-size:clamp(17px,.4vw + 15px,19px);line-height:1.55}
.lead-p{max-width:62ch}
.ans-h{margin-top:28px;font:600 15px/20px var(--body);color:var(--ink-2)}
.ans{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;max-width:880px;margin-top:10px;border-top:1px solid var(--ink)}
@media (min-width:760px){.ans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ans li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.ans li>span:not(.icbox){font-size:16px;line-height:1.5;color:var(--ink-2)}
.ans b{display:block;font-weight:600;color:var(--ink)}
.linkcard{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:880px;min-height:44px;margin-top:28px;padding:clamp(20px,3vw,28px);background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:clamp(17px,.4vw + 15px,19px);line-height:1.5}
.linkcard:hover{color:var(--ink);border-color:var(--accent)}
.linkcard .ic{color:var(--accent);transition:transform 200ms var(--ease)}
.linkcard:hover .ic,.linkcard:focus-visible .ic{transform:translateX(4px)}
.how4{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;max-width:880px;margin-bottom:12px;border-top:1px solid var(--ink)}
@media (min-width:760px){.how4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.how4 li{padding:14px 0;border-bottom:1px solid var(--line)}
.how4 b{display:block;font-weight:600}
.how4 span{display:block;margin-top:2px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.nfy{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 48px}
.nfy li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;padding:24px 0;border-top:1px solid var(--line)}
.nfy .ic{margin-top:5px;color:var(--ink-2)}
.nfy b{display:block;margin-bottom:6px;font:600 clamp(20px,.6vw + 17px,22px)/1.3 var(--body);color:var(--ink)}
.nfy span{display:block;color:var(--ink-2);max-width:48ch}
@media (min-width:760px){.nfy{grid-template-columns:repeat(2,minmax(0,1fr))}}
.colophon{padding-block:0 clamp(40px,5vw,64px)}
.colophon p{max-width:72ch;padding-top:16px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}

/* contact, start and the email builder */
.k-head,.start-head{padding-bottom:clamp(24px,3vw,40px)}
.k-head .lead,.start-head .lead{max-width:62ch}
.b-sec{padding-bottom:clamp(56px,6vw,96px)}
.builder{max-width:880px;padding:clamp(20px,3vw,36px);background:var(--surface);border:1px solid var(--line)}
.b-top{padding-bottom:14px;border-bottom:1px solid var(--line)}
.b-l{font:600 15px/20px var(--body);color:var(--ink-2)}
.b-addr{margin-top:4px;font:600 clamp(30px,3vw + 16px,52px)/1.05 var(--display);overflow-wrap:anywhere}
/* the questions are inserted by site.js: reserve their height from first paint (v3: four questions, measured floors) */
html.js .b-q{min-height:1050px}
@media (min-width:480px){html.js .b-q{min-height:780px}}
@media (min-width:760px){html.js .b-q{min-height:660px}}
.bq{padding:18px 0 16px;border-bottom:1px solid var(--line)}
.bq-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:600 17px/1.35 var(--body)}
.bq-n{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent);font:600 16px/1 var(--display)}
.bq-n .ic{width:16px;height:16px}
.bq-c{display:flex;flex-wrap:wrap;gap:8px}
.bc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--control-line);border-radius:22px;background:transparent;color:var(--ink);font:500 16px/1.25 var(--body);text-align:left;cursor:pointer;transition:transform 80ms linear}
.bc:hover{border-color:var(--accent);color:var(--accent)}
.bc:active{transform:translateY(1px)}
.bc .ck{display:none;width:18px;height:18px}
.bc[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bc[aria-pressed="true"]:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.bc[aria-pressed="true"] .ck{display:block}
.b-side{display:flex;flex-direction:column}
.b-side .b-incl{order:3;margin-top:24px}
.b-draft{margin-top:18px;padding:14px 16px;background:var(--sunk);border:1px dashed var(--control-line)}
.b-draft .bq-h{margin-bottom:6px}
.bd{margin:0}
.bd>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.bd>div:first-child{border-top:0}
.bd dt{font-size:15px;color:var(--ink-2)}
.bd dd{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.bd [data-d="body"]{white-space:pre-line}
.b-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.b-acts .btn{min-height:48px}
@media (max-width:479.98px){.b-acts .btn{flex:1 1 100%}}
@media (min-width:1024px){
 .builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);grid-template-rows:auto 1fr;column-gap:48px;max-width:none;align-items:stretch}
 .builder>.b-top,.builder>.b-q{grid-column:1}
 .builder>.b-top{align-self:start}
 .builder>.b-side{grid-column:2;grid-row:1/3;padding-left:32px;border-left:1px solid var(--line)}
 .builder .b-side .b-incl{order:0;margin-top:0}
 .builder .b-send{position:sticky;top:calc(var(--navh) + 24px);margin-top:8px}
 .builder .b-draft{margin-top:14px}
 .builder .b-acts{flex-direction:column;align-items:stretch}
 .builder .b-acts .btn{justify-content:flex-start}
 html.js .builder .b-q{min-height:700px}
}
/* v3: "What hurts?" answers are sentences: full-width rows (two columns from 760 px), same pressed state as the chips */
.bq-c[data-route]{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:760px){.bq-c[data-route]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bc.bc-l{align-items:flex-start;width:100%;min-height:48px;padding:12px 14px;border-radius:6px;line-height:1.35}
.bc.bc-l .ck{margin-top:1px}
.b-il{margin-bottom:6px;font:600 15px/20px var(--body);color:var(--ink-2)}
.start-links{margin-top:20px}
.incl{list-style:none}
.incl li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.incl li:last-child{border-bottom:1px solid var(--line)}
.incl .k{font:600 24px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.incl b{display:block;font-weight:600}
.incl span{display:block;font-size:15px;line-height:1.5;color:var(--ink-2)}
.incl.big li{grid-template-columns:56px minmax(0,1fr);padding:24px 0}
.incl.big .k{font-size:40px}
.incl.big b{font-size:clamp(20px,1vw + 16px,24px);line-height:1.2;margin-bottom:4px}
.incl.big span{font-size:17px}
.next-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 48px;align-items:start}
@media (min-width:1024px){.next-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.next{list-style:none;border-top:1px solid var(--ink);max-width:880px}
.next li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.next .sno{font-size:24px}
.gtk-box{padding:16px 20px 10px;background:var(--surface);border:1px solid var(--line)}
.gtk-h{margin-bottom:6px;font:600 15px/20px var(--body);color:var(--ink-2)}
.gtk{list-style:none}
.gtk li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.gtk .ic{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent)}
.gtk-box .more{margin-top:2px}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.two p{margin-top:12px;color:var(--ink-2)}
.two .more{margin-top:8px}
@media (min-width:760px){.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quiet{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;color:var(--ink-2);font-size:15px;text-decoration:underline;text-underline-offset:4px}
.quiet:hover{color:var(--ink)}
.quiet .ic{width:16px;height:16px}
.cr-links{margin-top:4px}
.cr-links .quiet{margin-top:0}

/* field notes */
.note-head .h-page{max-width:22ch}
.print-url{display:none}
.note-body{padding-top:0;border-top:0}
.note-body .label{margin-bottom:10px}
.checklist{list-style:none;max-width:760px;border-top:1px solid var(--ink)}
.checklist li{display:grid;grid-template-columns:24px 28px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,.5vw + 15px,20px);line-height:1.45}
.checklist li::before{content:"";width:22px;height:22px;margin-top:3px;border:1.5px solid var(--control-line);background:var(--surface)}
.cl-n{font:600 24px/1.1 var(--display);color:var(--accent)}
.note-ref{display:flex;align-items:flex-start;gap:10px;max-width:62ch;margin-top:24px;font-weight:600}
.note-ref .ic{width:22px;height:22px;margin-top:2px;color:var(--accent)}
.note-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.nl{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:760px){.nl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.nl-e{display:flex;flex-direction:column;height:100%;padding:clamp(20px,3vw,32px);background:var(--surface);border:1px solid var(--line)}
.nl-s{margin-top:10px;color:var(--ink-2)}
.nl-e .more{margin-top:auto;padding-top:12px}
.notes-list{border-top:0;padding-top:0}

/* one-page summary: a print sheet on screen too */
.cap-sec{padding-block:clamp(20px,3vw,48px) clamp(56px,6vw,96px)}
.cap-tools{display:flex;align-items:center;justify-content:flex-end;gap:16px;max-width:880px;min-height:48px;margin:0 auto 12px}
.cap-hint{color:var(--ink-2);font-size:15px}
.capsheet{max-width:880px;margin:0 auto;padding:clamp(20px,4vw,48px);background:var(--surface);border:1px solid var(--line)}
.cap-h{display:flex;align-items:center;gap:18px;padding-bottom:16px;border-bottom:4px double var(--accent)}
.cap-mark{width:38.1px;height:44px}
.cap-hn .label{margin:0 0 2px}
.cap-t{font:600 clamp(32px,3vw + 20px,48px)/1 var(--display)}
.cap-loc{margin-top:4px;font-size:15px;color:var(--ink-2)}
.cap-lead{margin-top:16px;font-size:clamp(17px,.4vw + 15px,19px);line-height:1.5}
.cap-p{margin-top:8px;color:var(--ink-2)}
.cap-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 40px;margin-top:22px}
@media (min-width:760px){.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cap-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.cap-b{min-width:0}
.cap-bh{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--ink);font:600 15px/20px var(--body);color:var(--ink-2)}
.cap-tiles{list-style:none}
.tile.tile-c{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:2px 12px;padding:6px 0;background:none;border:0;border-bottom:1px solid var(--line);font:500 15px/1.35 var(--body)}
.tc-h{flex:1 1 auto;min-width:0;padding-top:1px}
.tile-c .pill{margin-left:auto;padding:1px 9px}
.cap-case{margin-top:14px}
.cap-case+.cap-case{margin-top:12px}
.cap-k{font:600 14px/1.4 var(--body);color:var(--accent)}
.cap-ch{margin-top:2px;font:600 15px/1.4 var(--body)}
.checks.sm{margin:4px 0 0}
.checks.sm li{padding:2px 0;font-size:15px;font-weight:500}
.checks.sm .ic{width:18px;height:18px;margin-top:1px}
.cap-routes{list-style:none}
.cap-routes li{display:flex;flex-direction:column;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.cap-routes b{font-weight:600}
.cap-routes span{color:var(--ink-2)}
.cap-s{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.cap-mail{display:inline-flex;align-items:center;min-height:44px;font:600 clamp(24px,1.6vw + 18px,30px)/1.1 var(--display);overflow-wrap:anywhere}

/* footer: the "=" mark at every width, no divider motif */
.footer{padding:clamp(40px,5vw,72px) 0 32px;border-top:1px solid var(--line)}
.footer .grid>.eq{display:inline-flex;vertical-align:middle;width:28px;gap:5px;margin:0 12px 0 0}
.footer .grid>.eq i{height:5px}
.wordmark{display:inline;margin:0;font:600 32px/1 var(--display);letter-spacing:-.005em;color:var(--ink);vertical-align:middle}
.foot{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin-top:16px;font-size:15px;line-height:20px;color:var(--ink-2)}
.foot li{display:flex;align-items:center;gap:6px;min-height:44px}
.foot a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--control-line);text-underline-offset:4px}
.foot a:hover{color:var(--accent);text-decoration-color:currentColor}
.foot .ic{width:16px;height:16px}
.band+.footer{border-top:0}

/* phone contact bar: with JS it shows only between the top call-to-action and the contact band/footer (site.js),
   never at the top of the page; body padding + scroll padding keep it off content and focus. Without JS it is a plain
   row at the end of the page, after the footer. */
.cta-bar{display:none}
html:not(.js) .b-bar{display:none}   /* retry 1, B2: the builder pages' bar needs the builder (JS) */
@media (max-width:759.98px){
 html{scroll-padding-bottom:calc(var(--bar-h) + 16px)}
 body.has-bar{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
 .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:10px;min-height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
 .cta-bar .btn{flex:1 1 0;min-height:48px;padding:0 10px;gap:8px;font-size:16px}
 html.js .cta-bar:not(.show){visibility:hidden;transform:translateY(100%)}
 html.js:not(.rm) .cta-bar{transition:transform var(--d2) var(--ease),visibility 0s linear var(--d2)}
 html.js:not(.rm) .cta-bar.show{transition:transform var(--d2) var(--ease),visibility 0s}
 .has-bar .toast{bottom:calc(var(--bar-h) + 14px + env(safe-area-inset-bottom,0px))}
 html:not(.js){scroll-padding-bottom:0}
 html:not(.js) body.has-bar{padding-bottom:0}
 html:not(.js) .cta-bar{position:static;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:4px;background:var(--ink);color:var(--bg);font-size:15px;opacity:0;transform:translate(-50%,8px);transition:opacity 200ms var(--ease),transform 200ms var(--ease);pointer-events:none}
.toast:empty{visibility:hidden}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* motion: first-paint states exist only under html.js:not(.rm). The H1 never moves. All one-shot, nothing loops. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes align{from{transform:scaleX(.6)}}
html.js:not(.rm) .hero-band .actions{animation:rise 600ms var(--ease) both}
html.js:not(.rm) .rv{transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}
html.js:not(.rm) .rv:not(.on){opacity:0;transform:translateY(18px)}
html.js:not(.rm) .rv-g>.rv:nth-child(2){transition-delay:60ms}
html.js:not(.rm) .rv-g>.rv:nth-child(3){transition-delay:120ms}
html.js:not(.rm) .rv-g>.rv:nth-child(4){transition-delay:180ms}
html.js:not(.rm) .rv-g>.rv:nth-child(5){transition-delay:240ms}
html.js:not(.rm) .rv-g>.rv:nth-child(6){transition-delay:300ms}
html.js:not(.rm) .rv .cn{transform-box:fill-box;transform-origin:left;transition:transform var(--d4) var(--ease)}
html.js:not(.rm) .rv .cn.v{transform-origin:top}
html.js:not(.rm) .rv:not(.on) .cn{transform:scaleX(0)}
html.js:not(.rm) .rv:not(.on) .cn.v{transform:scaleY(0)}
html.js:not(.rm) .rv .nd{transition:opacity 400ms var(--ease) 500ms}
html.js:not(.rm) .rv:not(.on) .nd{opacity:0}
.thread .node i{transition:opacity var(--d2) var(--ease)}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  html.js:not(.rm) .rail{transform:scaleY(0);animation:railgrow linear both;animation-timeline:view();animation-range:entry 40% cover 60%}
  html.js:not(.rm) .thread .node i{animation:fade linear both;animation-timeline:view();animation-range:cover 30% cover 45%}
 }
}
@supports not (animation-timeline:view()){html.js:not(.rm) .thread li:not(.past) .node i{opacity:0}}
@keyframes railgrow{to{transform:scaleY(1)}}

/* cross-document view transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:var(--d1) var(--ease-in) both vt-out}
::view-transition-new(root){animation:320ms var(--ease) 60ms both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(masthead){animation:none}
::view-transition-group(nav-current){animation-duration:360ms;animation-timing-function:var(--ease)}
html.vt-theme::view-transition-old(root){animation:var(--d2) var(--ease) both vt-fade}
html.vt-theme::view-transition-new(root){animation:none}
@keyframes vt-fade{to{opacity:0}}

/* reduced motion: final state, nothing moves */
@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 *,*::before,*::after{animation:none!important;transition:none!important}
}
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important}

/* phone density (390 budget): tighter section rhythm, side-by-side hero buttons, shorter story chapters */
@media screen and (max-width:759.98px){
 .sec{padding-block:40px}
 .head{margin-bottom:20px}
 .hero-band{padding-block:28px 36px}
 .hero-band .h-hero{margin:12px 0 16px}
 .hero-band .actions{margin-top:22px;gap:10px}
 .hero-band .actions .btn{flex:1 1 auto;padding:0 14px;gap:8px}
 .hb-grid{gap:24px}
 .mini-wrap{padding-block:12px}
 .mini ul{gap:6px}
 .mini a{min-height:44px;padding:4px 12px 4px 10px;font-size:15px}
 .fam-list [role="tab"]{min-height:56px;padding:8px 10px}
 .fam-stage{margin:12px 0 14px}
 .cc{padding:18px 16px}
 .cc-l{margin:14px 0 0}
 .checks{margin:6px 0 14px}
 .checks li{padding:4px 0}
 .route{padding:18px 16px;gap:10px}
 .route-p li{padding:8px 0}
 .routes{gap:8px}
 .cc .h-case{max-width:none;padding-right:44px}
 .cc-foot{padding-top:12px}
 .footer{padding:32px 0 24px}
 .foot{margin-top:10px}
 html.js:not(.rm) .chapter{min-height:26vh;min-height:26svh}
 html.js:not(.rm) .chapter:last-child{min-height:30vh;min-height:30svh}
 /* Home rhythm (retry 1): more air between the beats, tighter inside them; no enclosing rule on the compact tile list
    (its rows keep their separators) and no decorative icon tile on the route cards */
 .home .sec{padding-block:52px}
 .home .head{margin-bottom:16px}
 .home .tile-list{border-top:0}
 .home .tile-list .tile-m:last-child{border-bottom:0}
 .home .route>.icbox{display:none}
 /* v3 Services on phones (BRIEF-P1 §2 lever c): tighter family heads and process thread, compact offer cards */
 .services .page-head{padding-block:20px 24px}
 /* retry 1, B1 lever 3: the offers and process sections, family sections and heads, lines, invite and support tighter still */
 .services #offers,.services #process{padding-block:32px}
 .services .ph-grid{gap:20px}
 .services .famnav ul{margin-top:16px}
 .services .fam-sec{padding-block:16px 20px}
 /* fix pass 1, lever 5: tighter family heads (34 px name, 15 px intro), the invite on two rows of text and one row of
    buttons (<=220 px), support with 32 px icon tiles (<=400 px) */
 .services .fam-head{gap:10px}
 .services .fam-hc .label{margin-bottom:6px}
 .services .fam-hc .h2{font-size:34px}
 .services .fam-hc .lead{margin-top:6px;font-size:15px;line-height:1.4}
 .services .fam-count{margin-top:6px}
 .services .fam-hc .note{margin-top:8px}
 .services .fam-hc .more{margin-top:0}
 .services .rd-line{margin-top:12px}
 .services .invite-sec{padding-bottom:24px}
 .services .invite{gap:6px;padding:14px 14px 12px}
 .services .invite .h3s{font-size:19px}
 .services .invite p{font-size:15px;line-height:1.45}
 .services .invite .actions{flex-wrap:nowrap;gap:10px;margin-top:8px}
 .services .invite .actions .btn{flex:1 1 auto;min-height:44px;padding:0 12px;gap:8px;font-size:15px}
 .services #support{padding-block:24px}
 .services #support .head{margin-bottom:12px}
 .services .sup-l li{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:8px 0;font-size:15px}
 .services .sup-l .icbox{width:32px;height:32px;border-radius:7px}
 .services .sup-l .icbox .ic{width:18px;height:18px}
 .services #support .btn{min-height:44px}
 .tile-lines{margin-top:10px}
 /* fix pass 1, lever 1: compact offer cards (every line kept verbatim): 32 px icon, 24 px title, 15 px body, the first
    step as one run ("First step: …"), the case/note link inline after the proof, both actions on one row */
 .offers .head{margin-bottom:12px}
 .offers3{gap:8px}
 .offer-f{padding:12px 12px 10px}
 .offer-top{margin-bottom:4px}
 .offer-top .icbox{display:none}
 .offer-f .offer-k{font-size:14px;line-height:1.3}
 .offer-f .offer-h{font-size:24px;line-height:1.05}
 .offer-f .offer-p{margin-top:6px;font-size:15px;line-height:1.45}
 .offer-f .offer-first{display:block;margin-top:8px;padding:6px 10px}
 .offer-f .of-l{display:inline;font-size:14px;line-height:1.4}
 .offer-f .of-l::after{content:":"}
 .offer-f .of-v{display:inline;margin-left:5px;font-size:15px;line-height:1.4}
 .offer-f .offer-pr{margin-top:8px;font-size:15px;line-height:1.45}
 .offer-f .offer-proof{display:inline}
 .offer-f .offer-pr .more{display:inline;min-height:0;margin-left:6px;padding:13px 0}
 .offer-f .offer-pr .more[href*="work/"]{white-space:nowrap}
 .offer-f .offer-pr .more .ic{display:inline-block;width:18px;height:18px;margin-left:4px;vertical-align:-4px}
 .offer-f .offer-end{margin-top:6px;padding-top:6px;font-size:14px;line-height:1.4;letter-spacing:-.005em}
 .offer-f .offer-acts{flex-wrap:nowrap;align-items:center;gap:12px;padding-top:8px}
 .offer-f .offer-acts .btn{flex:none;min-height:44px;padding:0 14px;font-size:15px}
 .offer-f .offer-acts .btn .ic{display:none}
 .offer-f .offer-s{flex:1 1 0;min-width:0;font-size:15px;line-height:1.3}
 .offer-f .offer-s .ic{width:18px;height:18px}
 /* fix pass 1, lever 3: compact lines (the icon tile hides; title + pill on one 44 px row). Delivered lines: the proof
    (clamped to two lines) shares its row with the case link; the problem line, the extra line and "Ask about this" are
    hidden below 760 px (kept in the DOM; the phone bar, the offer cards and the invite carry the ask) */
 .tile.tile-l{padding:8px 0}
 .tile-l .tl-top .icbox{display:none}
 .tl-top{grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:44px;gap:0 10px}
 .tile-l .tile-h{padding-top:0;font-size:15px;line-height:1.3;text-wrap:pretty}
 .tile-l .pill{grid-column:2;padding:2px 8px;font-size:13px}
 .tile-l[data-label="delivered"]{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
 .tile-l[data-label="delivered"] .tl-top{grid-column:1/-1}
 .tile-l[data-label="delivered"] .tl-p,.tile-l[data-label="delivered"] .more.ask{display:none}
 .tile-l[data-label="delivered"] .tl-proof{grid-column:1;margin-top:4px}
 .tile-l[data-label="delivered"] .tl-proof b{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 .tile-l[data-label="delivered"] .tl-foot{grid-column:2;grid-row:2;margin:6px 0 0}
 .tile-l .tl-p{margin-top:4px}
 .services .thread li{padding-bottom:20px}
 .services #support .sup-ask{margin:12px 0 10px;font-size:16px}
}

/* print: black on white, no chrome; notes and the one-page summary fit one A4 page */
@media print{
 @page{size:A4;margin:14mm}
 :root,:root[data-theme="dark"]{--mark-p:#000!important;--mark-a:#000!important;--bg:#fff!important;--surface:#fff!important;--sunk:#fff!important;--ink:#000!important;--ink-2:#222!important;--accent:#000!important;--accent-ink:#fff!important;--line:#999!important;--control-line:#000!important;--tint:#fff!important;--bar:#ccc!important;--pill-bg:#fff!important;--pill-ink:#000!important;--pill-can-line:#000!important;--pill-can-ink:#000!important;color-scheme:light!important}
 html,body{background:#fff!important;color:#000!important;font-size:11pt}
 body.has-bar{padding-bottom:0!important}
 *{animation:none!important;transition:none!important}
 html.js .rv,html.js .rv *{opacity:1!important;transform:none!important}
 .masthead{position:static;border-bottom:1px solid #000}
 .nav,.tools,.skip,.toast,.band,.cta-bar,.footer,.btn,.note-acts,.cap-tools,.famnav,.famnav-s,.linkrow,.mini-wrap,.filter,.scene-ctl,.seg,.as-qs{display:none!important}
 a{color:#000}
 .print-url{display:block;margin:4pt 0 10pt;font:500 11pt/1.3 var(--body)}
 .note .page-head{padding:10pt 0 8pt}
 .note .h-page{font-size:30pt;max-width:none}
 .note .lead{font-size:12pt;color:#000}
 .note-body{padding:0}
 .checklist li{padding:9pt 0;font-size:12.5pt;break-inside:avoid}
 .checklist li::before{border:1.2pt solid #000;background:#fff}
 .cl-n{color:#000}
 .note-ref{margin-top:12pt;font-size:11.5pt}
 .capability .masthead{display:none}
 .cap-sec{padding:0}
 .capability .grid{padding:0;max-width:none}
 .capsheet{max-width:none;padding:0;border:0;font-size:9.5pt;line-height:1.3}
 .cap-h{padding-bottom:6pt;border-bottom:2.5pt double #000}
 .cap-t{font-size:24pt}
 .cap-loc,.cap-p,.cap-s{font-size:9.5pt}
 .cap-lead{margin-top:6pt;font-size:10.5pt}
 .cap-p{margin-top:3pt}
 .cap-grid{grid-template-columns:1fr 1fr;gap:9pt 18pt;margin-top:9pt}
 .cap-col{gap:9pt}
 .cap-bh{margin-bottom:3pt;padding-bottom:2pt;font-size:8.5pt}
 .tile.tile-c,.checks.sm li,.cap-routes li{font-size:9.5pt}
 .tile.tile-c{padding:1.5pt 0}
 .tile-c .pill{padding:0 5pt;font-size:8.5pt;border:.6pt solid #000;background:#fff}
 .pill::before{background:#000!important}
 .cap-case{margin-top:6pt}
 .cap-case+.cap-case{margin-top:5pt}
 .cap-k,.cap-ch{font-size:9.5pt;color:#000}
 .checks.sm li{padding:1pt 0}
 .checks.sm .ic{width:11pt;height:11pt}
 .cap-routes li{padding:2pt 0}
 .cap-mail{min-height:0;font-size:14pt}
 .icbox{background:#fff;border:1px solid #000}
}
/* hero poster fills: flat faces mixed toward --h3-bg exactly as src/hero3d.js shades them, a lighter top face (top light) and a thin lighter rim (generated by src/tools/poster-gen.py) */
.h3-poster .ot{fill:var(--h3-old);fill:color-mix(in srgb,color-mix(in srgb,var(--h3-old) 62%,var(--h3-bg)) 84%,#fff)}
.h3-poster .of{fill:var(--h3-old);fill:color-mix(in srgb,var(--h3-old) 46%,var(--h3-bg))}
.h3-poster .os{fill:var(--h3-old);fill:color-mix(in srgb,var(--h3-old) 33%,var(--h3-bg))}
.h3-poster .ot,.h3-poster .of,.h3-poster .os{stroke:var(--h3-old);stroke:color-mix(in srgb,color-mix(in srgb,var(--h3-old) 62%,var(--h3-bg)) 55%,#fff)}
.h3-poster .nt{fill:var(--h3-new);fill:color-mix(in srgb,color-mix(in srgb,var(--h3-new) 100%,var(--h3-bg)) 84%,#fff)}
.h3-poster .nf{fill:var(--h3-new);fill:color-mix(in srgb,var(--h3-new) 74%,var(--h3-bg))}
.h3-poster .ns{fill:var(--h3-new);fill:color-mix(in srgb,var(--h3-new) 54%,var(--h3-bg))}
.h3-poster .nt,.h3-poster .nf,.h3-poster .ns{stroke:var(--h3-new);stroke:color-mix(in srgb,color-mix(in srgb,var(--h3-new) 100%,var(--h3-bg)) 55%,#fff)}
.h3-poster .et{fill:var(--h3-eq);fill:color-mix(in srgb,color-mix(in srgb,var(--h3-eq) 100%,var(--h3-bg)) 84%,#fff)}
.h3-poster .ef{fill:var(--h3-eq);fill:color-mix(in srgb,var(--h3-eq) 74%,var(--h3-bg))}
.h3-poster .es{fill:var(--h3-eq);fill:color-mix(in srgb,var(--h3-eq) 54%,var(--h3-bg))}
.h3-poster .et,.h3-poster .ef,.h3-poster .es{stroke:var(--h3-eq);stroke:color-mix(in srgb,color-mix(in srgb,var(--h3-eq) 100%,var(--h3-bg)) 55%,#fff)}
.h3-poster .sl path{stroke-width:1.3;stroke-linejoin:round}
.h3-poster .sl .or{fill:none;stroke:var(--h3-line);stroke:color-mix(in srgb,color-mix(in srgb,color-mix(in srgb,var(--h3-old) 62%,var(--h3-bg)) 84%,#fff) 70%,var(--h3-bg));stroke-width:1.0}
.h3-poster .sl .nr{fill:none;stroke:var(--h3-line);stroke:color-mix(in srgb,color-mix(in srgb,color-mix(in srgb,var(--h3-new) 100%,var(--h3-bg)) 84%,#fff) 70%,var(--h3-bg));stroke-width:1.0}
.h3-poster stop{stop-color:var(--h3-line)}
/* og:oldl=20.4% */ /* og:newl=79.6% */ /* og:lbt=75.7% */ /* og:dift=43.3% */