*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-0.012em;margin:0 0 var(--space-s);text-wrap:balance}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}h3{font-size:var(--step-1);letter-spacing:-0.01em;line-height:1.15}
p{margin:0 0 var(--space-s)}a{color:var(--thread);text-underline-offset:3px}
.wrap{width:min(1200px,100% - 2*var(--space-m));margin-inline:auto}
:focus-visible{outline:3px solid var(--thread);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--space-s);top:var(--space-s);background:var(--patch);padding:8px 12px;z-index:20}
.btn{display:inline-flex;align-items:center;min-height:44px;background:var(--thread);color:#fff;font:700 var(--step--1)/1 var(--font-body);padding:0 18px;border-radius:var(--r-pill);text-decoration:none;border:0;cursor:pointer;transition:background var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}
.btn:hover{background:var(--thread-hover)}.btn:active{transform:translateY(1px)}.btn.big{min-height:54px;padding:0 26px;font-size:var(--step-0)}
.link{font-weight:700;color:var(--on-shirt)}
/* header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in oklch,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:var(--space-m);min-height:72px}
.patchlogo{height:44px;width:auto;display:block}
.top nav{display:flex;gap:var(--space-m);margin-left:auto}.top .btn{margin-left:auto}.top nav+.btn{margin-left:0}.top nav a{color:var(--ink);font-weight:600;font-size:var(--step--1);text-decoration:none;padding:10px 2px}.top nav a:hover{color:var(--thread);text-decoration:underline}
/* hero: the shirt */
.hero{position:relative;margin:var(--space-s);border-radius:28px;background:var(--shirt);color:var(--on-shirt);padding:var(--space-2xl) 0 var(--space-xl);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(45deg,oklch(1 0 0 / .05) 0 2px,oklch(0 0 0 / .08) 2px 4px)}

.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-xl);align-items:center}
.hero h1 span{color:var(--on-shirt-soft)}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--on-shirt);max-width:32ch;margin-block:var(--space-m) var(--space-l)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--space-m);align-items:center}
.call{margin:0;position:relative;padding-top:104px}
.sewn{position:absolute;top:0;right:18px;width:200px;transform:rotate(-6deg);z-index:2;filter:drop-shadow(0 4px 3px oklch(0 0 0 / .35))}.patchbig{width:100%;height:auto;display:block}
.callcard{background:var(--patch);color:var(--ink);border-radius:var(--r-card);padding:var(--space-s) var(--space-s) var(--space-2xs);box-shadow:0 22px 50px oklch(0.2 0.06 258 / .45);height:470px;display:flex;flex-direction:column;position:relative}

.tabs{display:flex;gap:6px;margin-bottom:var(--space-xs);position:relative;z-index:1}
.tabs button{flex:1;white-space:nowrap;padding:0 8px;min-height:36px;font:700 var(--step--1)/1 var(--font-body);border:0;background:var(--mist);color:var(--muted);border-radius:var(--r-pill);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.callhead{display:flex;align-items:center;gap:12px;padding:6px 2px 12px;border-bottom:1px solid var(--line)}
.av{position:relative;width:44px;height:44px;flex:none}.av svg{width:44px;height:44px}.live{position:absolute;right:-1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:oklch(0.65 0.17 150);border:2px solid #fff}
.who{flex:1;min-width:0;line-height:1.25}.who b{display:block;font-size:var(--step--1);line-height:1.25}.who small{color:var(--muted);font-size:13px}
.wave{display:flex;align-items:center;gap:3px;height:30px;flex:none}.wave i{width:3px;height:6px;border-radius:2px;background:var(--thread);transform-origin:center;transition:transform 120ms linear}.wave.caller i{background:var(--ink)}
.pause{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.pause span{width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}.pause[aria-pressed=true] span{border:0;width:0;height:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.caps{flex:1;display:flex;flex-direction:column;gap:10px;padding:var(--space-xs) 2px;overflow:hidden}
.line{max-width:88%;padding:10px 14px;border-radius:16px;font-size:16px;line-height:1.45;animation:say var(--dur-base) var(--ease-out) both}
@keyframes say{from{opacity:0;transform:translateY(6px)}}
.line.f{background:color-mix(in oklch,var(--thread) 9%,white);border-bottom-left-radius:4px}.line.c{background:var(--mist);align-self:flex-end;border-bottom-right-radius:4px}
.line .s{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--thread)}.line.c .s{color:var(--muted)}
figcaption{font-size:12px;color:var(--muted);padding:4px 2px 6px;position:relative;z-index:1}
/* sections */
section{padding-block:var(--space-2xl)}.band{background:var(--mist)}
.intro{font-size:var(--step-1);line-height:1.5;color:var(--muted);max-width:44ch;margin-bottom:var(--space-xl)}
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-m)}
.tile{background:var(--patch);border-radius:var(--r-card);padding:var(--space-l);border:1px solid var(--line)}.tile.wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-l);align-items:start}.tile.wide h3,.tile.wide>p{grid-column:1}.tile.wide .outcomes{grid-column:2;grid-row:1/span 2}
.tile p{color:var(--muted)}
.outcomes{list-style:none;margin:0;padding:0;display:grid;gap:10px}.outcomes li{border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:var(--step--1);line-height:1.45}
.tag{display:inline-block;font:800 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r-tag);margin-right:8px;background:var(--mist);color:var(--ink);vertical-align:2px}.tag.hot{background:var(--thread);color:#fff}.tag.quiet{background:transparent;border:1px solid var(--line);color:var(--muted)}
.clock{list-style:none;margin:var(--space-m) 0 0;padding:0;border-left:3px solid var(--thread);padding-left:var(--space-s)}.clock li{margin-bottom:10px;font-size:var(--step--1)}.clock time{display:inline-block;width:52px;font-weight:800;color:var(--ink)}
.next{font:700 12px/1 var(--font-body);background:var(--ink);color:#fff;padding:4px 8px;border-radius:var(--r-tag);vertical-align:4px;margin-left:6px}
.due{margin-top:var(--space-m);border:1px solid var(--line);background:var(--mist);border-radius:14px;padding:12px 14px;font-size:var(--step--1);color:var(--ink)!important}.due span{color:var(--thread);font-weight:700}
/* diagram */
.diagram{margin:0 0 var(--space-xl)}.diagram svg{width:100%;height:auto;display:block}
.dg-lines{stroke:var(--thread)}.dg-node circle{fill:var(--patch);stroke:var(--ink);stroke-width:2}.dg-ico{fill:none;stroke:var(--ink);stroke-width:3}.dg-ico-l{stroke:var(--ink);stroke-width:3}
.diagram text{font:700 19px var(--font-body);fill:var(--ink)}.diagram .dg-sub{font-weight:400;font-size:16px;fill:var(--muted)}
.dg-out rect{fill:var(--patch);stroke:var(--ink);stroke-width:2}.dg-out rect.hot{fill:var(--thread);stroke:var(--thread)}.dg-out text{font-size:17px}.dg-out text.w{fill:#fff}
.dg-dot{fill:var(--thread)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l);counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:var(--space-s)}.steps h3::before{content:counter(s) ". ";color:var(--thread)}.steps p{color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-xl);align-items:start}
.who{margin:0;display:grid;gap:var(--space-m)}.who dt{font:800 var(--step-2)/1 var(--font-display);letter-spacing:-.02em}.who dd{margin:6px 0 0;color:var(--muted)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l)}.three p{color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m);align-items:stretch}
.plan{background:var(--patch);border:2px solid var(--line);border-radius:var(--r-card);padding:var(--space-l)}.plan.pick{border-color:var(--ink)}
.amt{font:800 var(--step-3)/1 var(--font-display);margin:var(--space-xs) 0 var(--space-s)}.amt small{font:600 var(--step-0) var(--font-body);color:var(--muted)}
.plan ul{padding-left:1.1em;color:var(--muted);margin:0}.fine{font-size:var(--step--1);color:var(--muted);margin-top:var(--space-s)}
.cta{background:var(--shirt);color:var(--on-shirt)}.cta p{color:var(--on-shirt-soft)}
form{background:var(--patch);color:var(--ink);border-radius:var(--r-card);padding:var(--space-l);display:grid;gap:var(--space-s)}
.field label{display:block;font-weight:700;font-size:var(--step--1);margin-bottom:6px}
input,select{width:100%;min-height:48px;font:inherit;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r-input);background:#fff;color:var(--ink)}
input:focus-visible,select:focus-visible{outline:3px solid var(--thread);outline-offset:1px;border-color:var(--thread)}
.err{display:none;color:var(--thread);font-size:var(--step--1);font-weight:600;margin:6px 0 0}.field.bad input{border-color:var(--thread)}.field.bad .err{display:block}
form .fine{color:var(--muted)}.ok{background:var(--mist);border-radius:var(--r-input);padding:12px 14px;font-weight:700;margin:0}
footer{padding-block:var(--space-l);color:var(--muted);font-size:var(--step--1)}footer .bar{flex-wrap:wrap}footer a{margin-left:auto}
.draft{position:fixed;bottom:12px;left:12px;background:oklch(0.95 0.08 95);color:oklch(0.35 0.08 80);border-radius:10px;padding:8px 12px;font-size:13px;z-index:30}
@media (max-width:960px){.top nav+.btn{margin-left:auto}.herogrid,.two{grid-template-columns:1fr}.top nav{display:none}.tile.wide{grid-template-columns:1fr}.tile.wide .outcomes{grid-column:1;grid-row:auto}.bento,.steps,.three,.plans{grid-template-columns:1fr}.plans{gap:var(--space-l)}.tile.wide{grid-column:auto}.sewn{width:150px}.call{padding-top:84px}.callcard{height:440px}.hero{margin:var(--space-2xs)}}
@media (max-width:600px){.hero{padding:var(--space-l) 0 var(--space-l)}.sewn{display:none}.call{padding-top:0}.lede{font-size:var(--step-0);margin-block:var(--space-s) var(--space-m)}.ctas .link{display:none}.callcard{height:400px}.wave{display:none}}
@media (max-width:480px){.top .btn{padding:0 14px}.patchlogo{height:38px}.tabs button{font-size:12.5px;padding:0 4px}}

.diagram .dg-v{display:none}@media (max-width:600px){.diagram .dg-h{display:none}.diagram .dg-v{display:block;max-width:360px;margin-inline:auto}}

/* carry the shirt below the hero: seams, patches, twill */


.twill{position:relative;isolation:isolate}.twill::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(45deg,oklch(1 0 0 / .05) 0 2px,oklch(0 0 0 / .08) 2px 4px)}
.tile{position:relative}
.next{background:var(--patch);color:var(--thread);border:2px solid var(--thread);border-radius:var(--r-pill);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px color-mix(in oklch,var(--thread) 50%,transparent)}

.badges{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-l)}.badges li{display:grid;grid-template-columns:64px 1fr;gap:var(--space-m);align-items:start}.badges p{color:var(--muted);margin:0}.badges h3{margin-bottom:6px}
.bdg{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--thread);color:#fff;font:800 20px var(--font-display);}
@media (max-width:600px){.herotext h1{font-size:2.35rem}.hero{padding-top:var(--space-m)}.lede{font-size:1rem;line-height:1.45}.ctas{margin:0}.callcard{height:390px}}

/* pricing */
.compare{list-style:none;margin:0 0 var(--space-xl);padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--patch)}
.compare li{padding:var(--space-s) var(--space-m);border-right:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}.compare li:last-child{border-right:0}
.compare b{display:block;color:var(--ink);font-size:var(--step-0);margin-bottom:4px}.compare .us{background:var(--ink);color:var(--on-shirt-soft)}.compare .us b{color:#fff}
.plan{position:relative;display:flex;flex-direction:column}.plan h3{margin-bottom:4px}.for{color:var(--muted);font-size:var(--step--1);margin:0;min-height:3.2em}
.plan ul{margin-top:var(--space-xs)}.plan li{margin-bottom:6px}.plan.pick{border-color:var(--thread);box-shadow:0 10px 30px oklch(0.3 0.08 258 / .12)}
.pop{position:absolute;top:-13px;left:var(--space-l);background:var(--thread);color:#fff;font:700 12px/1 var(--font-body);padding:6px 10px;border-radius:var(--r-pill)}
/* story diagram */
.dgx{margin:0 0 var(--space-xl);background:var(--patch);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--space-l)}
.dgx-art svg{width:100%;height:auto;display:block}.dgx-v{display:none!important}
.dgx .paths path{fill:none;stroke:var(--line);stroke-width:3;transition:stroke var(--dur-base) var(--ease-out)}.dgx .paths path.on{stroke:var(--thread)}
.dgx .node circle{fill:var(--paper);stroke:var(--ink);stroke-width:2;transition:fill var(--dur-base)}.dgx .node.on circle{fill:color-mix(in oklch,var(--thread) 12%,white);stroke:var(--thread)}
.dgx .ico{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dgx text{fill:var(--ink);font-family:var(--font-body)}.dgx text.b{font-weight:700}.dgx text.s{fill:var(--muted)}
.dgx .dot{fill:var(--thread)}.dgx .result rect{fill:var(--thread)}.dgx .result text{fill:#fff;font-weight:700}.dgx .result{transition:opacity var(--dur-base) var(--ease-out)}
.dgx-ctl{border-top:1px solid var(--line);margin-top:var(--space-m);padding-top:var(--space-m)}
.dgx-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:var(--space-s)}
.dgx-steps button[role=tab]{min-height:40px;font:700 var(--step--1)/1 var(--font-body);border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:0 14px;cursor:pointer}
.dgx-steps button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.dgx-pause{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center}
.dgx-pause span{width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}.dgx-pause[aria-pressed=true] span{border:0;width:0;height:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.dgx figcaption{padding:0;font-size:var(--step-0);color:var(--ink);min-height:4.8em}.dgx-dir{display:block;font:700 12px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--thread)}
.dgx-t{display:block;font:800 var(--step-1)/1.2 var(--font-display);margin:2px 0 4px}.dgx-d{color:var(--muted)}
@media (max-width:960px){.compare{grid-template-columns:1fr 1fr}.compare li:nth-child(2){border-right:0}.compare li:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:600px){.dgx-h{display:none!important}.dgx-v{display:block!important;max-width:380px;margin:0 auto}.dgx{padding:var(--space-s)}.compare{grid-template-columns:1fr}.compare li{border-right:0;border-bottom:1px solid var(--line)}.dgx-steps button[role=tab]{font-size:13px;padding:0 10px}}
@media (min-width:961px){.dgx{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--space-xl);align-items:center}
.dgx-ctl{border-top:0;border-left:1px solid var(--line);margin:0;padding:0 0 0 var(--space-l)}
.dgx-steps{flex-direction:column;align-items:stretch}.dgx-steps button[role=tab]{text-align:left;min-height:44px}.dgx-pause{margin:6px 0 0;align-self:flex-start}}
.dgx-ctl{display:flex;flex-direction:column}.dgx-ctl .dgx-pause{order:2;margin:0 0 var(--space-s)}.dgx-ctl figcaption{order:3}
@media (max-width:960px){.dgx-ctl{flex-direction:column}}
.instead{margin:var(--space-s) 0 0;padding-top:var(--space-s);border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}.plan ul{margin-bottom:0}

/* ===== Polish (Marc approved all nine ideas, 2026-10-28; built as switchable mock-up D in
   docs/design/mockups/2026-10-28-trends/d-polish, folded in here on the revised page of 2026-10-27).
   Stitching stays only in the logo (Marc, 2026-10-27). Everything that moves is off under prefers-reduced-motion. ===== */
/* tone: bands graded top to bottom instead of one flat fill; the cta band likewise */
.band{background:linear-gradient(180deg,oklch(0.955 0.016 258) 0%,var(--mist) 22%,var(--mist) 78%,oklch(0.955 0.016 258) 100%)}
main section:not(.band):not(.hero):not(.cta){background:linear-gradient(180deg,var(--paper),oklch(0.99 0.004 85) 50%,var(--paper))}
.top{background:color-mix(in oklch,var(--paper) 90%,transparent)}
.callcard,.tile,.plan,form,.dgx{background:#fff}
.cta{background:linear-gradient(180deg,var(--shirt-dark),var(--shirt) 30%,var(--shirt) 70%,var(--shirt-dark))}
/* lighting on the shirt: a key light top-left, fall-off bottom-right, a real weave under the twill */
.hero::before{background:
  radial-gradient(120% 95% at 12% -5%, oklch(1 0 0 / .16), transparent 55%),
  radial-gradient(90% 80% at 100% 110%, oklch(0 0 0 / .34), transparent 62%),
  repeating-linear-gradient(45deg, oklch(1 0 0 / .055) 0 2px, oklch(0 0 0 / .085) 2px 4px)}
.hero .weave{position:absolute;inset:0;z-index:-1;opacity:.22;mix-blend-mode:soft-light;pointer-events:none;background:#808080;filter:url(#weave)}
@media (max-width:960px){.hero .weave{display:none}}
.cta::before{background:
  radial-gradient(100% 90% at 10% 0%, oklch(1 0 0 / .13), transparent 55%),
  radial-gradient(80% 80% at 100% 100%, oklch(0 0 0 / .3), transparent 60%),
  repeating-linear-gradient(45deg, oklch(1 0 0 / .05) 0 2px, oklch(0 0 0 / .08) 2px 4px)}
.hero h1{text-shadow:0 2px 0 oklch(0 0 0 / .18),0 12px 30px oklch(0 0 0 / .25)}
/* depth: layered shadows, a light edge on cards, a sheen on the patch, buttons with weight */
.callcard{box-shadow:inset 0 1px 0 #fff,0 1px 2px oklch(0.2 0.06 258 / .18),0 10px 20px -10px oklch(0.2 0.06 258 / .45),0 36px 70px -24px oklch(0.15 0.06 258 / .65)}
.tile,.plan,form,.dgx{border-color:color-mix(in oklch,var(--line) 70%,transparent);box-shadow:inset 0 1px 0 #fff,0 1px 2px oklch(0.2 0.06 258 / .08),0 10px 28px -14px oklch(0.2 0.06 258 / .28)}
.plan.pick{border-color:var(--thread);box-shadow:inset 0 1px 0 #fff,0 1px 2px oklch(0.2 0.06 258 / .08),0 14px 34px -14px oklch(0.3 0.08 258 / .35)}
.outcomes li,.due{background:#fff;box-shadow:0 1px 1px oklch(0.2 0.06 258 / .06),0 3px 8px -4px oklch(0.2 0.06 258 / .18)}
.btn{box-shadow:inset 0 1px 0 oklch(1 0 0 / .22),0 2px 0 var(--thread-hover),0 8px 18px -8px oklch(0.52 0.2 25 / .7)}
.btn:active{box-shadow:inset 0 1px 0 oklch(1 0 0 / .1),0 0 0 var(--thread-hover),0 3px 8px -6px oklch(0.52 0.2 25 / .6);transform:translateY(2px)}
.sewn{filter:drop-shadow(0 2px 1px oklch(0 0 0 / .25)) drop-shadow(0 10px 10px oklch(0 0 0 / .35))}
.sewn::after{content:"";position:absolute;inset:3% 2%;border-radius:50%;pointer-events:none;background:radial-gradient(90% 70% at 28% 18%, oklch(1 0 0 / .38), transparent 55%),radial-gradient(80% 60% at 75% 95%, oklch(0 0 0 / .1), transparent 60%)}
.patchlogo{filter:drop-shadow(0 1px 1px oklch(0 0 0 / .2))}
.bdg{box-shadow:inset 0 1px 0 oklch(1 0 0 / .25),0 2px 0 var(--thread-hover),0 8px 16px -8px oklch(0.52 0.2 25 / .6)}
.tabs button[aria-selected=true],.dgx-steps button[aria-selected=true]{box-shadow:0 2px 6px -2px oklch(0 0 0 / .4)}
.top{box-shadow:0 1px 0 oklch(1 0 0 / .6) inset,0 6px 20px -16px oklch(0.2 0.06 258 / .4)}
input,select{box-shadow:inset 0 1px 2px oklch(0.2 0.06 258 / .08)}
/* film grain (off on phones) */
body::after{content:"";position:fixed;inset:-50%;z-index:25;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
@media (max-width:600px){body::after{display:none}}
/* the hero arrives once: headline lines rise, the card lifts in, the patch is pressed on last */
.hero h1 .l{color:var(--on-shirt)}.hero h1 .l span{color:var(--on-shirt-soft)}
.js .hero h1{overflow:hidden}
.js .hero h1 .l{display:block;animation:rise 700ms var(--ease-out) both}
.js .hero h1 .l+.l{animation-delay:120ms}
.js .lede{animation:rise 700ms var(--ease-out) 260ms both}
.js .ctas{animation:rise 700ms var(--ease-out) 380ms both}
.js .callcard{animation:lift 900ms var(--ease-out) 300ms both}
.js .sewn{animation:press 600ms cubic-bezier(.2,1.4,.3,1) 1000ms both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes lift{from{opacity:0;transform:translateY(36px) scale(.985)}}
@keyframes press{from{opacity:0;transform:rotate(-6deg) scale(1.35)}60%{opacity:1}to{transform:rotate(-6deg) scale(1)}}
/* the call is alive: smoother waveform, a speaking ring on the avatar, captions word by word */
.wave{height:34px;gap:3px}
.wave i{transition:transform 240ms cubic-bezier(.3,.9,.3,1)}
.av::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--thread);opacity:0}
.callcard[data-speaking="f"] .av::before{animation:ring 1.3s ease-out infinite}
.callcard[data-speaking="c"] .av::before{border-color:var(--ink);animation:ring 1.3s ease-out infinite}
@keyframes ring{from{opacity:.7;transform:scale(.9)}to{opacity:0;transform:scale(1.45)}}
.line .w{display:inline-block;animation:wordin 320ms var(--ease-out) both}
@keyframes wordin{from{opacity:0;transform:translateY(4px)}}
.line.f{background:linear-gradient(180deg,color-mix(in oklch,var(--thread) 7%,white),color-mix(in oklch,var(--thread) 11%,white))}
/* settle in on scroll: once, 14 px, 500 ms, staggered */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js section.in .rv{opacity:1;transform:none}
.js section.in .rv:nth-child(2){transition-delay:80ms}
.js section.in .rv:nth-child(3){transition-delay:160ms}
.js section.in .rv:nth-child(4){transition-delay:240ms}
.js section.in .rv:nth-child(5){transition-delay:320ms}
.js section.in .rv:nth-child(6){transition-delay:400ms}
.js .steps li{position:relative;border-top-color:transparent}
.js .steps li::before{content:"";position:absolute;left:0;top:-3px;height:3px;width:0;background:var(--ink);transition:width 700ms var(--ease-out)}
.js section.in .steps li::before{width:100%}
.js section.in .steps li:nth-child(2)::before{transition-delay:150ms}
.js section.in .steps li:nth-child(3)::before{transition-delay:300ms}
.js .clock li{opacity:0;transform:translateX(-8px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.js section.in .clock li{opacity:1;transform:none}
.js section.in .clock li:nth-child(2){transition-delay:450ms}
.js section.in .clock li:nth-child(3){transition-delay:900ms}
.js .bdg{transform:scale(.6);opacity:0;transition:transform 500ms cubic-bezier(.2,1.3,.3,1),opacity 300ms}
.js section.in .bdg{transform:none;opacity:1}
.js section.in .badges li:nth-child(2) .bdg{transition-delay:150ms}
.js section.in .badges li:nth-child(3) .bdg{transition-delay:300ms}
/* the call flows: nodes pop as the call reaches them, the phone rings, the result pill casts a shadow (the dot's journey is the revision's own signature motion; no dashes, since stitching lives only in the logo) */
.dgx .node circle{transform-box:fill-box;transform-origin:center}
.dgx .node.on circle{animation:nodepop 500ms cubic-bezier(.2,1.3,.3,1)}
@keyframes nodepop{from{transform:scale(.9)}50%{transform:scale(1.06)}to{transform:scale(1)}}
.dgx .node[data-n="A"].on rect.ico,.dgx .node[data-n="C"].on rect.ico{transform-box:fill-box;transform-origin:center;animation:ringing 2.6s ease-in-out infinite}
@keyframes ringing{0%,10%{transform:rotate(0)}2%{transform:rotate(-4deg)}4%{transform:rotate(4deg)}6%{transform:rotate(-3deg)}8%{transform:rotate(3deg)}}
.dgx .result{filter:drop-shadow(0 3px 6px oklch(0.52 0.2 25 / .4))}
/* hover and press: buttons lift, nav links underline from the left, cards lift, the patch wobbles once */
.btn{transition:background var(--dur-quick) var(--ease-out),transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 oklch(1 0 0 / .22),0 3px 0 var(--thread-hover),0 12px 22px -8px oklch(0.52 0.2 25 / .75)}
.top nav a{background-image:linear-gradient(var(--thread),var(--thread));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size 220ms var(--ease-out),color 150ms;text-decoration:none}
.top nav a:hover{background-size:100% 2px;text-decoration:none}
.tile,.plan{transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out)}
.tile:hover,.plan:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 2px 4px oklch(0.2 0.06 258 / .08),0 18px 36px -16px oklch(0.2 0.06 258 / .4)}
.tabs button,.dgx-steps button[role=tab]{transition:background 180ms var(--ease-out),color 180ms var(--ease-out),transform 120ms}
.tabs button:hover{background:color-mix(in oklch,var(--mist) 60%,var(--line))}
.dgx-steps button[role=tab]:hover{background:var(--mist)}.dgx-steps button[aria-selected=true]:hover{background:var(--ink)}
.tabs button:active,.dgx-steps button:active{transform:scale(.97)}
.sewn:hover{animation:wobble 700ms var(--ease-out)}
@keyframes wobble{0%{transform:rotate(-6deg)}25%{transform:rotate(-2deg) scale(1.03)}50%{transform:rotate(-8deg)}75%{transform:rotate(-5deg)}100%{transform:rotate(-6deg)}}
.outcomes li{transition:transform 180ms var(--ease-out),box-shadow 180ms}
.outcomes li:hover{transform:translateX(3px)}
.link{background-image:linear-gradient(currentColor,currentColor);background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;text-decoration:none;transition:background-size 200ms var(--ease-out)}
.link:hover{background-size:0 2px}
.pause,.dgx-pause{transition:transform 150ms,background 150ms}.pause:hover,.dgx-pause:hover{background:var(--mist);transform:scale(1.06)}
/* reduced motion: every idea that moves is off */
@media (prefers-reduced-motion:reduce){
  .js .hero h1 .l,.js .lede,.js .ctas,.js .callcard,.js .sewn,
  .callcard[data-speaking] .av::before,.line .w,
  .dgx .node.on circle,.dgx .node.on rect.ico,
  .sewn:hover{animation:none!important}
  .js .rv,.js .clock li,.js .bdg{opacity:1!important;transform:none!important;transition:none!important}
  .js .steps li::before{width:100%!important;transition:none!important}
}

/* orientation (Marc, 2026-10-29): say what it is before the headline, and keep the label in the header */
.tagline{font:600 var(--step--1)/1.2 var(--font-body);color:var(--muted);padding-left:var(--space-s);border-left:1px solid var(--line);max-width:24ch}
@media (max-width:700px){.tagline{display:none}}
.eyebrow{font:700 var(--step-0)/1.3 var(--font-body);color:var(--on-shirt-soft);margin:0 0 var(--space-s)}
.js .eyebrow{animation:rise 700ms var(--ease-out) both}

/* form: honeypot off-screen, send error */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.err.send{display:block}