/* BuildWithBNZ home page (/), Oct 2026: beam.ai's finish, our words. Loaded after bnz.css on / only.
   Block (a) is the colorway: every colour is a token on body.home and equals colorways.json "a" (live: A "Night shift").
   Block (b) holds the constants every colorway shares. Hidden start states only ever live under
   html.js-motion:not(.rv-all) (set in <head>), so with JavaScript off or reduced motion nothing is hidden. */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:102%;ascent-override:94%;descent-override:22%;line-gap-override:0%}
body.home{
--bg:#0A0A0A; --elev-1:#0F0F10; --elev-2:#151517; --elev-3:#1C1C1F;
--line:#FFFFFF14; --line-strong:#FFFFFF24; --edge-hi:#FFFFFF2E; --edge-lo:#FFFFFF0A;
--ink:#F5F3EE; --text:#CFCAC2; --muted:#A8A39B; --faint:#8A857D;
--accent:#EA580C; --accent-hover:#F2661A; --on-accent:#FFFFFF; --accent-ink:#F08A4B; --accent-soft:#EA580C24; --focus:#F08A4B; --btn-glow:#EA580C99; --btn-top:#CC4A0D; --btn-bg:#C2410C;
--glow-1:#EA580C2E; --stage:#EA580C38; --spot:#EA580C1A; --dots:#FFFFFF14; --grid:#FFFFFF0B;
--field-ground:#0A0A0A; --field-core:#F2661A99; --field-mid:#F2661A61; --field-edge:#EA580C2B; --field-opacity:.8;
--win-top:#1E1E21; --win-mid:#141416; --win-bot:#101012; --win-ring:#FFFFFF1F; --win-hi:#FFFFFF29; --pane-bg:#FFFFFF05; --pane-ring:#FFFFFF14;
--mock-bg:#131315; --mock-surface:#1A1A1D; --mock-line:#FFFFFF1A; --mock-ink:#F5F3EE; --mock-muted:#A8A39B;
--needs-bg:#EA580C; --needs-ink:#0A0A0A;
--cta-bg:#0A0A0A; --sky-a:#0A0A0A; --sky-b:#1C0D05; --sky-bloom:#FFB27A4D; --aurora-1:#EA580C; --aurora-2:#9A3A08;
--cta-ink:#F5F3EE; --cta-muted:#BDB8B0; --cta-btn-bg:#C2410C; --cta-btn-ink:#FFFFFF;
--nav-glass:#0F0F10B8; --nav-bg:#0A0A0AF2; --footer-bg:#0A0A0A;
--win-shadow:0 0 0 1px var(--win-ring), inset 0 1px 0 var(--win-hi), 0 24px 48px -24px #00000099, 0 50px 120px -40px #000000F2;
--sh:inset 0 1px 0 #FFFFFF0F, 0 1px 2px #00000066, 0 12px 30px -12px #000000B3;
--sh-lift:inset 0 1px 0 #FFFFFF14, 0 2px 4px #00000066, 0 30px 60px -20px #000000D9;
--sec-shadow:0 24px 48px -12px #000000B3;
background:var(--bg); color:var(--text);
}
body.home{
--display:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --body:var(--display);
--fs-h1:clamp(42px,5.3vw,76px); --fs-h2:clamp(32px,3.9vw,56px); --fs-h2s:clamp(28px,3vw,44px); --fs-stmt:clamp(26px,2.8vw,40px);
--fs-lede:clamp(18px,1.4vw,20px);
--r-s:8px; --r-m:12px; --r-l:18px; --r-xl:24px; --r-pill:999px;
--sec-lg:clamp(64px,11vw,160px); --sec-md:clamp(56px,8vw,120px); --sec-sm:clamp(48px,6.5vw,96px);
--out:cubic-bezier(.22,1,.36,1); --io:cubic-bezier(.65,0,.35,1); --pop:cubic-bezier(.2,1.4,.4,1); --ease:cubic-bezier(.22,.8,.2,1);
--max:1280px; --gutter:clamp(20px,4vw,40px); --nav-h:72px;
font-size:18px; line-height:1.55;
}
@media (max-width:639px){body.home{--nav-h:64px;font-size:17px;--sec-lg:48px;--sec-md:44px;--sec-sm:40px}}

/* type */
.home h1,.home h2,.home h3{font-family:var(--display);font-weight:500;font-stretch:100%;text-transform:none;color:var(--ink);text-wrap:balance}
.home h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em;max-width:900px;margin:0 auto}
.home h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.03em}
.home h3{font-size:20px;line-height:1.25;letter-spacing:-.015em}
.home .lede{font-size:var(--fs-lede);line-height:1.5;color:var(--muted);max-width:640px}
.home .win,.home .mock,.home .labels{font-variant-numeric:tabular-nums}
.home a:focus-visible,.home button:focus-visible,.home summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tlink{color:var(--accent-ink);font-weight:600}
.tlink:hover,.h-alt a:hover,.hfaq .a a:hover{text-decoration:underline;text-underline-offset:3px}
.dk{display:none}

/* buttons */
.home .btn-primary,.home .btn-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border:0;border-radius:12px;
 font:600 17px/1 var(--body);letter-spacing:-.01em;text-transform:none;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 transition:transform .2s var(--out),box-shadow .2s var(--out),background-color .2s}
.home .btn-primary{color:var(--on-accent);background:linear-gradient(180deg,var(--btn-top) 0%,var(--btn-bg) 55%);
 box-shadow:inset 0 1px 0 #FFFFFF47,inset 0 0 0 1px #0000001A,0 .6px .6px -1.25px #000000B8,0 2.3px 2.3px -2.5px #000000A3,0 10px 10px -3.75px #00000040,0 8px 24px -8px var(--btn-glow)}
.home .btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #FFFFFF47,inset 0 0 0 1px #0000001A,0 .6px .6px -1.25px #000000B8,0 2.3px 2.3px -2.5px #000000A3,0 12px 14px -4px #00000040,0 14px 36px -8px var(--btn-glow)}
.home .btn-primary:active,.home .btn-ghost:active{transform:translateY(0) scale(.98)}
.home .btn-primary .arr{display:inline-block;transition:transform .2s var(--out)}
.home .btn-primary:hover .arr{transform:translateX(3px)}
.home .btn-ghost{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.home .btn-ghost:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)}
.home .lg{height:60px;padding:0 30px;font-size:18px}
.home .sm{height:44px;padding:0 18px;font-size:15px;border-radius:10px}
.home .xl{display:flex;width:100%;height:60px;font-size:18px}
.home .tagp{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:0;border-radius:999px;font:500 14px/1 var(--body);color:var(--text);background:color-mix(in srgb,var(--ink) 3%,transparent);box-shadow:inset 0 0 0 1px var(--line-strong);white-space:nowrap}
.pill-link{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;margin-top:20px;border:0;border-radius:10px;font:500 15px/1 var(--body);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color .2s}
.pill-link span{font-size:14px}
.pill-link:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.bm{width:var(--s);height:var(--s);border-radius:calc(var(--s) / 4);background:var(--accent);color:#fff;display:inline-grid;place-items:center;flex:none;font:700 calc(var(--s) * .6)/1 var(--display);font-stretch:100%}
.hbrand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 18px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* nav: a floating glass pill on desktop (clear at the top, glass once scrolled), a glass bar on phone */
.hnav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;pointer-events:none}
.hnav .wrap{pointer-events:auto;position:relative;isolation:isolate;display:flex;align-items:center;gap:20px;width:calc(100% - 2*var(--gutter));max-width:1240px;height:56px;margin:0 auto;padding:0 6px 0 16px;border-radius:999px}
.hnav .wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--nav-glass);
 -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);box-shadow:inset 0 0 0 1px var(--line),var(--sh);opacity:0;transition:opacity .3s var(--out)}
.hnav.solid .wrap::before,.no-scroll .hnav .wrap::before{opacity:1}
.hlinks{display:flex;gap:4px;margin:0 auto}
.hlinks a{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;font:500 15px/1 var(--body);color:var(--text);transition:color .2s,background-color .2s}
.hlinks a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.hcta{display:flex;gap:6px}
@media (max-width:1023px){
 .hnav .wrap{width:100%;max-width:none;height:var(--nav-h);padding:0 var(--gutter);border-radius:0}
 .hnav .wrap::before{box-shadow:inset 0 -1px 0 var(--line)}
 .hlinks,.hcta{display:none}
 .home .burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;margin:0 -10px 0 auto;border:0;border-radius:12px;background:none}
 .home .burger span{display:block;width:20px;height:1.5px;margin:0;border-radius:1px;background:var(--ink);transition:transform .25s var(--out),opacity .2s}
 .home .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
 .home .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
 .home .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
.home .drawer{inset:var(--nav-h) 0 0 0;background:var(--bg);border-top:0;padding:16px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px))}
.home .drawer.open{animation:drawerIn .28s var(--out)}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}}
.home .drawer .xl{margin-bottom:12px}
.home .drawer>a:not([class]),.home .drawer summary{display:flex;align-items:center;min-height:52px;padding:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:18px}
.home .drawer details a{display:flex;align-items:center;min-height:48px;color:var(--muted)}

/* 1 hero: a light field behind static words, then two app windows that tilt up into place */
.home .h-hero{position:relative;isolation:isolate;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 40px) 0 72px;text-align:center;overflow:hidden;background:var(--bg)}
.home .h-hero h1{background:linear-gradient(180deg,var(--ink) 35%,color-mix(in srgb,var(--ink) 74%,var(--bg)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){.home .h-hero h1{background:none;color:CanvasText}}
@supports (overflow-x:clip){.home .h-hero{overflow:visible;overflow-x:clip}}   /* clip the light sideways only, so the window shadows fade out instead of ending in a line */
.h-hero .lede{margin:18px auto 0;max-width:700px;color:var(--text);text-wrap:balance}
.h-hero #hero-start{margin-top:28px;min-width:220px}
.h-alt{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:2px;margin-top:8px;font-size:15px;color:var(--muted)}
.h-alt-t{margin-right:.25em}
.h-alt a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--accent-ink);font-weight:600}
@media (max-width:480px){
 .h-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
 .h-alt-t{grid-column:1/-1;margin:0}
 .h-or,.h-sep{display:none}
 .h-alt a{display:block;min-height:0;height:48px;padding:0 8px;line-height:48px;text-align:center;border-radius:12px;font-size:16px;font-weight:500;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--line-strong)}
 .h-alt a:first-of-type::first-letter{text-transform:uppercase}
}
/* the light field: CSS gradients, no blur, moved by transform only; the two light sources sit outside the text column */
.lf{position:absolute;inset:0 0 auto;height:max(100%,820px);z-index:-1;overflow:hidden;pointer-events:none;background:var(--field-ground);
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%)}
.lf::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--grid) 1px,transparent 1px) 50% 0/64px 64px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 50% 0/64px 64px;
 -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%)}
.lf i{position:absolute;left:-14%;right:-14%;top:-12%;height:112%;opacity:var(--field-opacity);will-change:transform;animation:lfDrift 26s ease-in-out infinite;
 background:radial-gradient(30% 50% at 14% 12%,var(--field-core) 0%,var(--field-mid) 28%,var(--field-edge) 58%,transparent 82%),
  radial-gradient(32% 54% at 86% 18%,var(--field-core) 0%,var(--field-mid) 30%,var(--field-edge) 60%,transparent 84%),
  radial-gradient(60% 34% at 81% 62%,var(--field-edge),transparent 75%)}
@keyframes lfDrift{0%,100%{transform:translate3d(-3.5%,0,0) scale(1.04)}50%{transform:translate3d(3.5%,-1%,0) scale(1.1)}}
.h-hero.off .lf i{animation-play-state:paused}
/* phone: the field keeps a 10% bleed on each side and only scales, so its edge never shows inside the screen */
@keyframes lfDriftP{0%,100%{transform:scale(1.04)}50%{transform:translate3d(0,-1%,0) scale(1.1)}}
@media (max-width:639px){.lf i{left:-10%;right:-10%;animation-name:lfDriftP;background:radial-gradient(36% 30% at 8% 8%,var(--field-core) 0%,var(--field-edge) 50%,transparent 76%),radial-gradient(36% 30% at 92% 18%,var(--field-core) 0%,var(--field-edge) 50%,transparent 76%)}}
/* the stage: w2 overlaps w1 by exactly w1's rail (8 + 44 px), so it never covers an answer */
.h-vis{position:relative;width:min(1160px,100%);height:520px;margin:44px auto 0;text-align:left;perspective:1600px;perspective-origin:50% 0}
.h-vis::before{content:"";position:absolute;left:8%;right:-4%;bottom:-18%;height:70%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 62% 55%,var(--stage),transparent 72%)}
.win{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:8px;border-radius:18px;overflow:hidden;font-size:14px;line-height:1.45}
.w1{position:absolute;right:0;top:0;width:calc(100% - 340px);max-width:820px;transform-origin:50% 0}
.w2{position:absolute;left:0;top:200px;z-index:3;width:392px}
/* windows: double bezel, an icon rail, an app bar */
.w2{grid-template-columns:minmax(0,1fr)}
.wrail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--pane-ring);color:var(--mock-muted)}
.wrail .bm{margin-bottom:8px}
.wrail i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px}
.wrail i.on{background:#FFFFFF0F;box-shadow:inset 0 0 0 1px var(--pane-ring);color:var(--mock-ink)}
.wpane{min-width:0;border-radius:12px;background:var(--pane-bg);box-shadow:inset 0 0 0 1px var(--pane-ring);overflow:hidden}
.whead{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px 0 16px;border-bottom:1px solid var(--pane-ring);font-size:13px;color:var(--mock-muted)}
.whead>.bm{display:none}
.crumb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb i{font-style:normal;opacity:.6;margin:0 6px}
.crumb b,.w2 .whead b{font-weight:600;color:var(--mock-ink)}
.w2 .whead b{flex:1}
.wcrew{display:flex;gap:4px}
.wdot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.wdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);opacity:0;animation:wdot 2.4s var(--out) infinite}
@keyframes wdot{0%{opacity:.8;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.4)}}
.h-hero.off .wdot::after{animation-play-state:paused}
.wbody{padding:16px 18px 18px}
.qyou{margin-bottom:14px;padding:12px 14px;border:0;border-radius:12px;background:#FFFFFF08;box-shadow:inset 0 0 0 1px var(--pane-ring)}
.qyou b{display:block;margin-bottom:2px;font-size:12px;font-weight:500;color:var(--mock-muted)}
.ans{list-style:none;display:grid;gap:0}
.ans li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:center;min-height:48px;padding:10px 4px;border-top:1px solid var(--pane-ring)}
.ans li.say{grid-template-columns:28px minmax(0,1fr);align-items:start;padding:2px 0 12px;border-top:0}
.ans .say b{display:block;font-weight:600}
.ans li:not(.say) .at{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.ans .at>span{min-width:0} .ans .at .chip{flex:none}
.ans li.hot{margin:6px -8px 0;padding:10px 12px}
.yes{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--pane-ring)}
.yes:first-child{border-top:0;padding-top:4px}
.yes b{display:block;font-weight:600}
.yes div span{display:block;font-size:13px;color:var(--mock-muted)}
.wfoot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--mock-muted)}
.w1::after{content:"";position:absolute;top:0;left:0;width:40%;height:1px;background:linear-gradient(90deg,transparent,#FFFFFFB3,transparent);opacity:0;pointer-events:none}
.h-vis.up .w1::after{animation:sweep 1.8s var(--io) 1.1s both}
@keyframes sweep{0%{opacity:0;transform:translateX(-100%)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(250%)}}
.fbtns,.home .mock .row .fbtns{display:flex;gap:6px;flex:none;margin:0}
.q .r{visibility:hidden}
.q .t::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--accent);animation:blink 1s steps(1) infinite}
/* entrance (beam's tilt-up): hidden only under the motion gate; the h1, lede and button never animate */
html.js-motion:not(.rv-all) .h-vis:not(.up) .w1{opacity:0;transform:rotateX(16deg) translateY(36px) scale(.97)}
html.js-motion:not(.rv-all) .h-vis:not(.up) .w2{opacity:0;transform:translateY(48px)}
.h-vis.up .w1{transition:opacity 1s var(--out),transform 1.6s var(--out)}
.h-vis.up .w2{transition:opacity 1s var(--out) .45s,transform 1.4s var(--out) .45s}
.h-vis.anim .ans li{opacity:0;transform:translateY(10px);filter:blur(6px)}
.h-vis.anim .ans .chip{opacity:0;transform:scale(.86)}
.h-vis.play .ans li{transition:opacity .4s var(--out),transform .45s var(--out),filter .4s var(--out);transition-delay:calc(var(--i) * 50ms)}
.h-vis.play .ans .chip{transition:opacity .25s var(--out),transform .32s var(--pop);transition-delay:calc(var(--i) * 50ms + 160ms)}
.ans li.hot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--accent),0 0 28px -4px var(--accent);opacity:0}
.h-vis.play .ans li.hot::after{animation:glowOnce 1.6s var(--out) .6s both}
@keyframes glowOnce{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* raised surfaces: a gradient hairline (these elements use ::before for nothing else) */
.lineup,.bc,.st-vis,.tcells,.rtiles li,.gs-card{position:relative}
.lineup::before,.bc::before,.st-vis::before,.tcells::before,.rtiles li::before,.gs-card::before,.rtiles::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(180deg,var(--edge-hi),var(--edge-lo));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* chips: sentence case, the dot carries the meaning (chips only live on dark mocks, so the dot colours are constants) */
.home .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 8px;border:0;border-radius:999px;font:600 13px/1 var(--body);letter-spacing:0;text-transform:none;white-space:nowrap;
 color:var(--mock-ink);background:#FFFFFF0A;box-shadow:inset 0 0 0 1px #FFFFFF1A;--c:var(--mock-muted)}
.home .chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c)}
.home .chip.verified{--c:#4FC27A} .home .chip.waiting{--c:#A9C3A2} .home .chip.conflict{--c:#F08A4B}
.home .chip.quote{--c:#CFCAC2} .home .chip.estimate{--c:#C9A44F}
.home .chip.reported::before{background:none;box-shadow:inset 0 0 0 1.5px var(--mock-muted)}
.home .chip.unknown{box-shadow:none;outline:1px dashed #FFFFFF59;outline-offset:-1px}
.home .chip.unknown::before{background:none;box-shadow:inset 0 0 0 1.5px var(--mock-ink)}
.home .chip.needs{background:var(--needs-bg);color:var(--needs-ink);box-shadow:none;--c:var(--needs-ink)}
.home .chip.needs::before{opacity:.65}
/* the Sample tag: a sentence-case pill, always visible */
.home .sd{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:0;border-radius:999px;font:600 12.5px/1 var(--body);letter-spacing:.01em;text-transform:none;white-space:nowrap;
 color:var(--mock-ink);background:#FFFFFF0F;box-shadow:inset 0 0 0 1px #FFFFFF38}
.home .mock>.sd{position:absolute;top:12px;right:12px}
.phone>.sd{position:absolute;top:12px;right:14px}
/* fake buttons: aria-hidden spans, not tap targets */
.fa,.fg,.home .mock .row .fa,.home .mock .row .fg{position:relative;display:inline-flex;align-items:center;height:28px;margin:0;padding:0 10px;border-radius:8px;font:600 12.5px/1 var(--body);overflow:hidden}
.fa,.home .mock .row .fa{background:var(--btn-bg);color:var(--on-accent);box-shadow:inset 0 1px 0 #FFFFFF33}
.fg,.home .mock .row .fg{color:var(--mock-ink);box-shadow:inset 0 0 0 1px var(--pane-ring)}
/* window material for every mock: a title bar, rows as a list with hairlines, no box in a box */
.win,.home .mock,.labels,.phone{--ink:var(--mock-ink);--muted:var(--mock-muted);--text:var(--mock-ink);color:var(--mock-ink);border:0;
 background:linear-gradient(180deg,var(--win-top) 0%,var(--win-mid) 26%,var(--win-bot) 100%);box-shadow:var(--win-shadow)}
.home .mock{border-radius:18px;padding:0 0 8px;font-size:14px}
.home .mock .mt{display:flex;align-items:center;height:46px;margin:0;padding:0 96px 0 16px;border-bottom:1px solid var(--pane-ring);font-size:14px;font-weight:600}
.home .mock .row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin:0;padding:12px 16px;border:0;border-top:1px solid var(--pane-ring);border-radius:0;background:none;box-shadow:none}
.home .mock .mt+.row{border-top:0}
.home .mock .row>div{flex:1 1 150px;min-width:0}
.home .mock .row b{font-size:14px;font-weight:600}
.home .mock .row>div>span{font-size:13px;color:var(--mock-muted)}
.home .mock .row.you{margin:10px 12px 4px;border-radius:12px;background:#FFFFFF08;box-shadow:inset 0 0 0 1px var(--pane-ring)}
.home .mock .row.hot,.ans li.hot{position:relative;border-top-color:transparent;border-radius:12px;
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 4%,transparent) 70%);
 box-shadow:inset 2px 0 0 var(--accent),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 8px 30px -10px color-mix(in srgb,var(--accent) 50%,transparent)}
.home .mock .row.hot{margin:4px 8px}
.home .mock .line{padding:12px 16px}
.pn-o li,.jbar>i{border-radius:12px;background:var(--mock-surface);box-shadow:inset 0 0 0 1px var(--pane-ring)}
.phone{position:relative;width:300px;max-width:100%;padding:44px 18px 18px;border-radius:32px;font-size:14px}
.phone::before{content:"";position:absolute;top:12px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px #FFFFFF14}
.labels{border-radius:18px;padding:0 0 8px}
.labels h3{display:flex;align-items:center;height:46px;margin:0;padding:0 16px;border-bottom:1px solid var(--pane-ring);font-size:15px;font-weight:600}
.labels dl{padding:0 16px}

/* reveals (replace bnz.css .fx/.stagger/.mock.rows on these pages): hidden only under the motion gate, never with JS off */
html.js-motion:not(.rv-all) .rv:not(.in){opacity:0;transform:translate3d(0,24px,0)}
html.js-motion:not(.rv-all) .rv.rv-b:not(.in){filter:blur(8px)}
.rv{transition:opacity .8s var(--out),transform 1s var(--out),filter .8s var(--out);transition-delay:var(--rd,0ms)}
html.js-motion:not(.rv-all) .rv-s:not(.in)>:not(.sd):not(.mt){opacity:0;transform:translate3d(0,10px,0)}
.rv-s>*{transition:opacity .5s var(--out),transform .6s var(--out);transition-delay:calc(var(--i,0) * 60ms + 120ms)}
.rule-note,.stmt-l,.h-crew .more{width:fit-content}   /* blurred items stay small */
/* words rise out of a blur (the crew, read and closing headings) */
.blurin .w{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .55s var(--out),transform .6s var(--out),filter .55s var(--out);transition-delay:calc(var(--i) * 35ms)}
.blurin.go .w{opacity:1;transform:none;filter:none}
html.rv-all .blurin .w{opacity:1!important;transform:none!important;filter:none!important}

/* section rhythm: a fading hairline between the quieter sections */
.home .h-rule{padding:clamp(56px,7vw,104px) 0 clamp(16px,3vw,48px)}
.home .h-how{padding:var(--sec-md) 0}
.home .h-crew{padding:var(--sec-lg) 0}
.home .h-read{padding:var(--sec-md) 0}
.home .h-trust{padding:var(--sec-sm) 0}
.home .h-faq{padding:var(--sec-sm) 0 var(--sec-md)}
.h-read,.h-trust,.h-faq{position:relative}
.h-read::before,.h-trust::before{content:"";position:absolute;left:50%;top:0;width:min(1280px,calc(100% - 2*var(--gutter)));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* 2 the rule */
.h-rule .wrap{max-width:960px;text-align:center}
.rule{margin:0}
.rule blockquote p{font:500 clamp(24px,2.6vw,36px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rule figcaption{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px;text-align:left}
.vr{width:1px;height:32px;background:var(--line-strong)}
.rule figcaption b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.rule figcaption span span{font-size:14px;color:var(--muted)}
.rule-note{margin:24px auto 0;font-size:14px;color:var(--muted)}

/* 3 how it works: pinned on desktop with one continuous handover, stacked elsewhere */
.steps4{display:grid;gap:56px}
.st{display:grid;gap:20px}
.st h2{font-size:var(--fs-h2s);line-height:1.08;letter-spacing:-.025em;margin:14px 0 12px}
.st-txt p{font-size:18px;color:var(--muted);max-width:440px}
.st-vis{margin:0;padding:32px 20px;display:grid;place-items:center;overflow:hidden;border-radius:24px;
 background:radial-gradient(circle at 1px 1px,var(--dots) 1px,transparent 0) 0 0/18px 18px,var(--elev-1);box-shadow:var(--sh)}
.st-vis::after{content:"";position:absolute;left:10%;right:10%;bottom:-30%;height:70%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,var(--stage),transparent 72%)}
.st-vis>*{position:relative;z-index:1}
.pcard{width:100%;max-width:460px}
.pn-s{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mock-muted)}
.pbar{display:block;height:4px;margin:10px 0 14px;border-radius:999px;background:var(--mock-surface)}
.pbar i{display:block;width:25%;height:100%;border-radius:999px;background:var(--accent)}
.st-vis.ph{align-items:end;padding-bottom:0}
.st-vis.ph .phone{border-radius:32px 32px 0 0}
.pn-q{color:var(--mock-ink);font:600 20px/1.2 var(--display);letter-spacing:-.01em}
.pn-o{list-style:none;display:grid;gap:6px;margin:14px 0}
.pn-o li{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;font-weight:600}
.pn-o li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--mock-muted)}
.pn-o li.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.pn-o li.on::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--mock-bg)}
.pn-b{display:grid;place-items:center;height:44px;border-radius:12px;background:var(--btn-bg);color:var(--on-accent);font-size:15px;font-weight:700}
.dots{display:none}
.dots button{display:grid;place-items:center;width:46px;height:44px;padding:0 4px}
.dots i{display:block;width:38px;height:3px;border-radius:999px;background:var(--line-strong);overflow:hidden}
.dots b{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
@media (min-width:1024px){
 .st{grid-template-columns:5fr 7fr;gap:64px;align-items:center}
 .st-vis{height:min(520px,calc(100svh - var(--nav-h) - 160px))}
 .home .h-how.pinned{height:352vh;padding:0}
 .h-how.pinned .pin{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));display:flex;align-items:center}
 .h-how.pinned .wrap{width:100%}
 .h-how.pinned .steps4{grid-template-columns:5fr 7fr;gap:0 64px;align-items:center}
 .h-how.pinned .st{display:contents}
 /* one step at a time: home.js picks the step from the scroll position (.act), the crossfade itself is timed, so any
    resting position shows one whole step. Each text starts at the same height, so the label and heading never jump. */
 .h-how.pinned .st-txt{grid-area:1/1;align-self:start;padding-top:clamp(24px,11vh,110px)}
 .h-how.pinned .st-vis{grid-area:1/2}
 .h-how.pinned .st-txt,.h-how.pinned .st-vis{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--out),transform .4s var(--out),visibility 0s .4s}
 .h-how.pinned .st-txt{transform:translate3d(0,16px,0)}
 .h-how.pinned .st.past .st-txt{transform:translate3d(0,-12px,0)}
 .h-how.pinned .st-vis{transform:scale(.975)}
 .h-how.pinned .st.act .st-txt,.h-how.pinned .st.act .st-vis{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .45s var(--out) .1s,transform .6s var(--out) .1s,visibility 0s}
 .h-how.pinned .dots{grid-area:2/1;display:flex;gap:2px;margin-top:36px}
 .home .h-how.pinned+.h-crew{padding-top:max(40px,calc(var(--sec-lg) - 120px))}
 .home .h-rule{padding-bottom:0}
}
/* the step loops: they play once a step is on screen (.play); without it the markup is the finished frame */
.pn-o li.on::after,.home .mock .row.hot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--accent),0 0 24px -4px var(--accent);opacity:0}
.st-vis.play .pn-o li.on::before{animation:pop .32s var(--pop) .3s both}
.st-vis.play .pn-o li.on::after{animation:glowOnce 1.2s var(--out) .3s both}
.st-vis.play .mock .row{animation:rowIn .5s var(--out) both;animation-delay:calc(var(--i,0) * 90ms + 150ms)}
.st-vis.play .mock .row.hot::after{animation:glowOnce 1.6s var(--out) .8s both}
.st-vis.play .mock .row:first-of-type .fa{animation:press 1.4s var(--out) 1.1s both}
.st-vis.play .mock .row:first-of-type .fa::after{content:"";position:absolute;inset:0;background:#FFFFFF40;transform:scaleX(0);transform-origin:left;animation:fill 1s var(--out) 1.25s both}
@keyframes pop{from{transform:scale(.6)}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
@keyframes rowInP{from{opacity:0;transform:translateY(10px)}}
@keyframes press{0%,100%{transform:none}20%{transform:scale(.92)}45%{transform:none}}
@keyframes fill{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* 4 + 5 the crew: a sky, the line-up unveils in 3D on desktop, then one card each */
.h-crew{position:relative;isolation:isolate;overflow:hidden}
@supports (overflow:clip){.h-crew{overflow:clip}}
.h-crew::before{content:"";position:absolute;left:50%;top:0;z-index:-1;width:min(1600px,180%);height:1300px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(46% 34% at 50% 40%,var(--glow-1),transparent 70%)}
.crew-head{position:relative;max-width:900px;margin:0 auto;text-align:center}
.crew-head .lede{margin:18px auto 0;max-width:620px}
.lu-stage{perspective:1700px;perspective-origin:50% 80%;margin-top:56px}
.lineup{max-width:1040px;margin:0 auto;padding:40px 32px;border-radius:24px;text-align:center;transform-origin:50% 100%;
 background:radial-gradient(circle at 1px 1px,var(--dots) 1px,transparent 0) 0 0/18px 18px,var(--elev-1);box-shadow:var(--sh-lift)}
.lineup.unveil,.lineup.unveil .lu-groups,.lineup.unveil .lu-g,.lineup.unveil .lu-g ul{transform-style:preserve-3d}
.lineup.unveil{transition:none}
.lineup.unveil .lu-sara,.lineup.unveil .lu-label{width:fit-content;margin-left:auto;margin-right:auto}
.lu-sara{display:grid;justify-items:center;gap:4px}
.lu-sara b{margin-top:8px;font:600 20px/1.2 var(--display);color:var(--ink)}
.lu-sara span,.lu-g span{font-size:14px;line-height:1.35;color:var(--muted)}
.lu-groups{position:relative;display:grid;grid-template-columns:4fr 2fr;gap:32px;margin-top:20px;padding-top:28px}
.lu-groups::before{content:"";position:absolute;left:50%;top:0;width:1px;height:14px;background:var(--line-strong)}
/* the bus runs from the middle of one group to the middle of the other (columns 4fr 2fr, 32px apart); each group drops from it */
.lu-groups::after{content:"";position:absolute;top:14px;left:calc((100% - 32px) / 3);right:calc((100% - 32px) / 6);height:1px;background:var(--line-strong)}
.lu-g{position:relative}
.lu-g::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:10px;background:var(--line-strong)}
.lu-label{margin-bottom:12px;font:600 14px/1 var(--body);letter-spacing:.04em;text-transform:none;color:var(--muted)}
.lu-g ul{position:relative;list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;padding-top:20px;border-top:1px solid var(--line-strong)}
.lu-g ul::before,.lu-g ul::after{content:"";position:absolute;top:0;left:0;width:1px;height:8px;background:var(--line-strong)}
.lu-g ul::after{left:auto;right:0}
.lu-g li{display:grid;justify-items:center;align-content:start;gap:4px}
.lu-g b{margin-top:6px;font:600 16px/1.2 var(--display);color:var(--ink)}
/* bento: cards stretch to the row, the mocks sit on the bottom edge at one height, so their tops line up */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:48px}
.bc{grid-column:span 4;display:flex;flex-direction:column;padding:28px 28px 0;border-radius:24px;overflow:hidden;background:var(--elev-1);box-shadow:var(--sh);--vh:auto}
.bc>*{position:relative;z-index:1}
.bc.wide{grid-column:span 8}
.bc.short,.bc.you-c{padding-bottom:28px}
.bc-h{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.bc-nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bc-h p{margin-top:4px;font-size:15px;line-height:1.35;color:var(--muted)}
.home .bc .tagp{height:24px;padding:0 10px;font-size:14px}
.tagp.jobs::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.bc-x{margin-bottom:24px}
.bc-t{margin-top:16px;font-size:17px;line-height:1.5;color:var(--text)}
.bc-l{display:flex;gap:8px;margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted)}
.bc-l .ico{flex:none;margin-top:4px;color:var(--accent-ink)}
.bc-n{margin-top:8px;font-size:14px;color:var(--faint)}
.bc-v{margin:auto -8px 0;height:var(--vh);overflow:hidden}
.home .bc-v.mock,.sara-v .mock{border-radius:18px 18px 0 0;padding-bottom:16px}
.sara-v{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.askwrap{display:grid;place-items:center;padding:24px;border-radius:18px 18px 0 0;background:radial-gradient(circle at 1px 1px,var(--dots) 1px,transparent 0) 0 0/18px 18px}
.askbar{display:flex;align-items:center;gap:12px;width:100%;max-width:340px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--elev-2);box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh);font-size:15px;line-height:1.35;color:var(--text)}
.askbar i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.jbar{display:grid;gap:6px}
.jbar>i{display:block;height:6px;overflow:hidden}
.jbar>i>i{display:block;height:100%;background:var(--accent);transform-origin:left;transition:transform 1.2s var(--out) .4s}
html.js-motion:not(.rv-all) .rv-s:not(.in) .jbar>i>i{transform:scaleX(0)}
.plans{display:grid;margin:10px 16px 0}
.pl{grid-area:1/1;color:var(--mock-ink)}
.pl svg{width:100%;height:auto;max-height:132px}
.pl .thin{color:var(--mock-muted)}
.pl .rf{fill:var(--accent-soft);stroke:none}
.pl .isl{fill:color-mix(in srgb,var(--accent) 30%,transparent);stroke:var(--accent)}
.pl text{fill:var(--mock-muted);stroke:none;font:600 8px/1 var(--body);letter-spacing:.04em}
.pl span{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mock-muted)}
html.js-motion .kyle-v .before{animation:kx 8s infinite}
html.js-motion .kyle-v .concept{animation:kx 8s -4s infinite}
html:not(.js-motion) .kyle-v .before{display:none}
.kyle-v.off .pl{animation-play-state:paused}
@keyframes kx{0%,46%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
.kchip{margin:8px 16px 0}
.you-c{box-shadow:var(--sh),inset 0 0 0 1.5px var(--accent)}
.you-i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink)}
.home #c-you{padding-bottom:0}
.home #c-you .bc-v{height:auto}
.home .you-v .row.hot{margin:8px}
.h-crew .more{margin:40px auto 0;text-align:center}
@media (min-width:1024px){.bento .bc{--vh:256px}.bento .bc.wide,.bento .bc.tall{--vh:336px}.sara-v .mock .row{padding-top:8px;padding-bottom:8px}.sara-v .mock .row.you{margin:8px 12px 2px}}
@media (min-width:1024px) and (max-width:1279px){.bento .bc{--vh:304px}.bento .bc.wide,.bento .bc.tall{--vh:408px}}   /* narrower columns wrap more */
/* hover: a soft light follows the pointer (fine pointers only; decorative) */
.bc::after{content:"";position:absolute;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,var(--spot),transparent);
 transform:translate3d(calc(var(--mx,-999px) - 50%),calc(var(--my,-999px) - 50%),0);opacity:0;transition:opacity .35s var(--out)}
.bc.rv{transition:opacity .8s var(--out) var(--rd,0ms),transform 1s var(--out) var(--rd,0ms),translate .35s var(--out)}
.bc::before{opacity:.8;transition:opacity .3s}
@media (hover:hover) and (pointer:fine){.bc:hover{translate:0 -2px}.bc:hover::after,.bc:hover::before{opacity:1}}
/* Taylor reads the lines: a scanning bar, then each label pops in */
.scan::after{content:"";position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 18%,transparent));border-bottom:1.5px solid color-mix(in srgb,var(--accent) 80%,#fff)}
html.js-motion .scan.in::after{animation:scanY 2.4s var(--io) .5s both}
@keyframes scanY{0%{opacity:0;transform:translateY(44px)}10%,90%{opacity:1}100%{opacity:0;transform:translateY(260px)}}
html.js-motion:not(.rv-all) .scan:not(.in) .chip{opacity:0;transform:scale(.86)}
.scan .chip{transition:opacity .25s var(--out),transform .32s var(--pop)}
.scan .row:nth-of-type(1) .chip{transition-delay:.9s} .scan .row:nth-of-type(2) .chip{transition-delay:1.4s}
.scan .row:nth-of-type(3) .chip{transition-delay:1.9s} .scan .row:nth-of-type(4) .chip{transition-delay:2.4s}

/* 6 how to read the answers */
.home .stmt{max-width:900px;font:500 var(--fs-stmt)/1.18 var(--display);letter-spacing:-.025em;color:var(--ink)}
.home .stmt span:not(.w){color:var(--muted)}
.stmt-l{margin-top:24px}
.stmt-l .tlink,.more .tlink,.h-faq .tlink{display:inline-flex;align-items:center;min-height:44px}
.read-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;margin-top:48px;align-items:start}
.rtiles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rtiles li{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:18px;background:var(--elev-1);box-shadow:var(--sh)}
.rtiles p{font-size:17px;line-height:1.45;color:var(--ink)}
.rtiles span{order:2;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.rtiles::before{display:none}
.labels dl>div{padding:12px 0;border-top:1px solid var(--pane-ring)}
.labels dl>div:first-child{border-top:0}
.labels dd{margin-top:6px;font-size:15px;line-height:1.4;color:var(--mock-muted)}

/* 7 trust: one raised card */
.center{max-width:760px;margin:0 auto;text-align:center}
.center .lede{margin:20px auto 0}
.tcells{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border:0;border-radius:24px;overflow:hidden;background:var(--elev-1);box-shadow:var(--sh)}
.tcells li{display:grid;align-content:start;gap:6px;padding:28px;text-align:left;background:none;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.tc-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.tc-i svg{width:20px;height:20px}
.tcells b{font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.tcells li>span:last-child{font-size:15px;line-height:1.45;color:var(--muted)}

/* 8 questions: the rounded bottom lifts off the closing sky */
.h-faq{z-index:1;background:var(--bg);border-radius:0 0 clamp(28px,4vw,48px) clamp(28px,4vw,48px);box-shadow:0 1px 0 var(--line),var(--sec-shadow)}
.h-faq .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
@media (min-width:1024px){.h-faq .wrap>div:first-child{position:sticky;top:calc(var(--nav-h) + 32px)}}
.h-faq h2{margin-bottom:20px}
.hfaq{max-width:720px}
.hfaq details{border-top:1px solid var(--line)}
.hfaq details:last-child{border-bottom:1px solid var(--line)}
.hfaq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 0;font-size:18px;font-weight:500;color:var(--ink);cursor:pointer}
.hfaq summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:32px;height:32px;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);transition:transform .24s var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.75px;background:var(--ink);transform:translate(-50%,-50%)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.hfaq details[open] .pm{transform:rotate(45deg)}
.hfaq .a{max-width:64ch;padding:0 48px 24px 0;font-size:17px;line-height:1.6;color:var(--muted)}
.hfaq .a a{color:var(--accent-ink);font-weight:600}
.hfaq .a a[href^="tel:"]{display:inline-block;padding:11px 0;margin:-11px 0}

/* 9 the closing call: a sky with a bloom and a horizon arc; on desktop it waits under the questions like a curtain */
.h-cta{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:640px;margin-top:-48px;padding:calc(var(--sec-lg) + 48px) 0 clamp(112px,12vw,176px);text-align:center;background:var(--sky-a);color:var(--cta-ink);border:0}
.h-cta::before{content:"";position:absolute;inset:-10% -10% 0;z-index:-2;animation:sky 22s var(--io) infinite alternate;
 background:radial-gradient(42% 26% at 50% 112%,var(--sky-bloom) 0%,color-mix(in srgb,var(--aurora-1) 33%,transparent) 30%,transparent 70%),
  radial-gradient(30% 30% at 12% 20%,color-mix(in srgb,var(--aurora-2) 22%,transparent),transparent 70%),
  radial-gradient(38% 30% at 88% 0%,color-mix(in srgb,var(--sky-bloom) 40%,transparent),transparent 70%),
  linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 100%)}
@keyframes sky{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,-1.5%,0)}}
.h-cta.off::before{animation-play-state:paused}
.h-cta h2{max-width:800px;margin:0 auto;color:var(--cta-ink);text-shadow:0 2px 30px #00000059}
.cta-sub{max-width:560px;margin:18px auto 0;font-size:18px;color:var(--cta-muted)}
.cta-b{display:flex;justify-content:center;gap:12px;margin-top:32px}
.home .h-cta .btn-primary{background:var(--cta-btn-bg);color:var(--cta-btn-ink)}
.home .h-cta .btn-ghost{color:var(--cta-ink);background:color-mix(in srgb,var(--cta-ink) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cta-ink) 30%,transparent)}
.cta-call{margin-top:20px;font-size:15px;color:var(--cta-muted)}
.cta-call a{display:inline-flex;align-items:center;min-height:44px;color:var(--cta-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (min-width:1024px){
 html.js-motion main>section:not(.h-cta){position:relative;z-index:1;background:var(--bg)}
 html.js-motion .h-hero{background:var(--bg)}
 html.js-motion .h-cta{position:sticky;bottom:0;z-index:0;min-height:min(100svh,860px)}
 /* the words ride up behind the questions' edge, slower than the page, so the heading shows before the buttons */
 html.js-motion .h-cta .wrap{transform:translate3d(0,calc((1 - var(--fp,1)) * var(--cth,0px) * .6),0)}
 html.js-motion .h-cta::before{opacity:calc(.35 + .65 * var(--fp,1))}
 html.js-motion .h-cta:focus-within .wrap{transform:none}
}

/* footer: continues the horizon */
.hfoot{position:relative;z-index:1;padding:24px 0 40px;font-size:15px;color:var(--muted);background:var(--footer-bg);border-top:0}
/* the horizon: an arc of the footer's own colour rising into the closing sky, with a glowing rim (gradients, no blur) */
body.home:not(.gs) .hfoot::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:240px;pointer-events:none;--ry:180px;--cy:64px;
 background:radial-gradient(72% var(--ry) at 50% calc(100% + var(--cy)),var(--footer-bg) 99%,color-mix(in srgb,var(--aurora-1) 75%,transparent) 99.7%,color-mix(in srgb,var(--aurora-1) 28%,transparent) 102%,transparent 135%)}
.hfoot .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.hf-tag{margin-top:16px}
.hf-addr{margin-top:8px;font-size:14px}
.hf-contact{display:flex;flex-wrap:wrap;column-gap:16px;font-size:14px}
.hf-contact a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.hf-ai{margin-top:8px;font-size:14px;color:var(--faint)}
.hf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hf-h{margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.hf-cols ul{list-style:none}
.hf-cols a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;font-size:15px;color:var(--text)}
.hfoot a:hover{color:var(--ink)}
.hf-copy{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--faint)}
.actbar{display:none}

/* /get-started/ and its thanks page: the same system, one card on a softer light field */
.home.gs .gs-page{position:relative;isolation:isolate;padding:clamp(32px,6vw,72px) 0 clamp(48px,8vw,96px)}
.home.gs .gs-page .lf{height:820px;opacity:.6;   /* the field fades in under the solid nav instead of starting on a hard line */
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 96px,#000 58%,transparent 94%);mask-image:linear-gradient(180deg,transparent 0,#000 96px,#000 58%,transparent 94%)}
.home.gs .gs-page>.wrap{max-width:760px;text-align:center}
.home.gs h1{font-size:clamp(30px,3vw,40px);font-weight:560;letter-spacing:-.03em}
.home.gs .lede{margin:14px auto 0;font-size:18px}
.home.gs .hnav .wrap::before{opacity:1;background:var(--elev-1);-webkit-backdrop-filter:none;backdrop-filter:none}
.home.gs .hcta.f{display:flex;margin-left:auto}
.gs-card{max-width:720px;margin:32px auto 0;padding:40px;border-radius:24px;text-align:left;background:var(--elev-1);box-shadow:var(--sh-lift)}
.gs-card::after{content:"";position:absolute;left:10%;right:10%;bottom:-24%;height:50%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,var(--stage),transparent 72%)}
.gs .onboard{margin-top:0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.gs .st-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:20px}
.gs .st-progress i{display:block;height:4px;border-radius:999px;background:var(--line-strong);overflow:hidden}
.gs .st-progress b{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--out)}
.gs .st-progress i.done b{transform:none}
.gs .onboard legend{font:500 clamp(24px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.02em;text-transform:none;margin:0 0 16px;color:var(--ink)}
.gs .st-n{font:500 14px/1.2 var(--body);letter-spacing:0;color:var(--muted);margin-bottom:8px}
.gs .choices:not(.compact){grid-template-columns:1fr}
.gs .choices{align-items:stretch}
.gs .choices label{min-height:60px;border:0;border-radius:12px;background:var(--elev-2);box-shadow:inset 0 0 0 1px var(--line-strong);font:500 18px/1.25 var(--body);transition:background-color .2s,box-shadow .2s}
.gs .choices.compact label{min-height:56px;font-size:17px}
.gs .choices input:checked+label{background:color-mix(in srgb,var(--accent) 14%,var(--elev-2));box-shadow:inset 0 0 0 1.5px var(--accent),0 8px 24px -12px var(--btn-glow)}
.gs .choices input:checked+label::before{animation:pop .18s var(--pop)}
.gs .choices label::before{box-shadow:inset 0 0 0 4px var(--elev-2)}
.gs .choices:not(.multi) input:checked+label::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 14%,var(--elev-2))}
.gs .choices.multi input:checked+label::before{border-color:var(--accent);background-color:var(--accent)}
.gs .choices input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.gs .onboard .hint{color:var(--muted)}
.gs .onboard .fld{font:600 15px/1.3 var(--body)}
.gs .onboard input:not([type=radio]):not([type=checkbox]){min-height:56px;border:0;border-radius:12px;background:var(--elev-2);box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .2s}
.gs .onboard input:not([type=radio]):not([type=checkbox]):focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
@media (forced-colors:active){.gs .onboard input:focus{outline:2px solid}}
.gs .onboard .err{border:0;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-ink)}
.gs .onboard .note .link{color:var(--accent-ink);font-weight:600}
.gs .btn-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;font:500 17px/1 var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:4px;touch-action:manipulation}
.gs .st-actions{display:grid;gap:6px;margin-top:22px}
@media (min-width:640px){.gs .st-actions{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center}.gs .st-actions .xl{width:auto;min-width:220px}}
html.js-motion .gs .onboard.js fieldset.on{animation:gsIn .32s var(--out)}
@keyframes gsIn{from{opacity:0;transform:translateY(8px)}}
.gs-talk{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin-top:28px;color:var(--muted)}
.gs-talk .tlink{display:inline-flex;align-items:center;min-height:48px}
.gs-thanks .gs-thanks-h{max-width:none;margin:14px 0 12px}
.home.gs .gs-thanks .lede{margin:0 0 18px;max-width:none}
.gs-ok{display:grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:50%;color:var(--accent-ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
html.js-motion .gs-ok{animation:pop .5s var(--pop) .15s both}
.gs-done{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}

/* tablet */
@media (max-width:1023px){
.home .h-hero{padding:calc(var(--nav-h) + 40px) 0 48px}
.h-vis{height:auto}
.w1{position:relative;right:auto;width:100%;max-width:760px;margin:0 auto;grid-template-columns:minmax(0,1fr)}
.wrail{display:none}
.whead>.bm{display:inline-grid}
.w2{display:none}
html.js-motion:not(.rv-all) .h-vis:not(.up) .w1{transform:rotateX(10deg) translateY(24px) scale(.98)}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.bc,.bc.wide{grid-column:span 1}
.bc.wide,.bc.you-c{grid-column:1/-1}
.lu-groups{grid-template-columns:1fr;gap:28px}
.lu-groups::before{height:28px}
.lu-groups::after,.lu-g::before{display:none}
.read-grid{grid-template-columns:1fr}
.labels{order:-1}
.tcells{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-faq .wrap{grid-template-columns:1fr;gap:32px}
.hfoot .wrap{grid-template-columns:1fr}
}
@media (min-width:1024px){.dk{display:inline}}

/* phone */
@media (max-width:639px){
html.js-motion:not(.rv-all) .rv.rv-b:not(.in){filter:none}
.blurin .w{filter:none}
.home h1{line-height:1.04}
.home .h-hero{padding:calc(var(--nav-h) + 24px) 0 32px}
.h-hero .lede{margin-top:14px}
.h-hero #hero-start{display:flex;width:100%;height:60px;margin-top:24px}
.h-vis{margin-top:28px}
.win{padding:6px}
.wbody{padding:12px}
.ans li:not(.say) .at{display:block}
.ans .at .chip{margin-left:6px;vertical-align:1px}
.h-vis.anim .ans li{filter:none}
/* how */
/* each picture is cropped to 260px from its top (the phone too: its Sample tag and step label stay inside); step 3 shows whole, its point is the set price */
.st-vis,.st-vis.ph{max-height:260px;padding:16px 12px 0;align-items:start}
.st-vis>*{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 98%);mask-image:linear-gradient(180deg,#000 70%,transparent 98%)}
.st[data-i="2"] .st-vis{max-height:none;padding-bottom:16px}
.st[data-i="2"] .st-vis>*{-webkit-mask-image:none;mask-image:none}
.st h2{margin:10px 0 10px}
.pill-link{margin-top:14px}
.steps4{gap:40px}
.st-vis.ph .phone{min-height:0}
.st-vis.ph .pn-o li:nth-child(n+4),.st-vis.ph .pn-b{display:none}
.st-vis.play .mock .row{animation-name:rowInP}
/* crew */
.lu-stage{margin-top:32px}
.lineup{padding:20px 16px}
.lu-sara .av{width:72px;height:72px}
.lu-groups{margin-top:12px;padding-top:12px;gap:20px}
.lu-groups::before,.lu-g ul::before,.lu-g ul::after{display:none}
.lu-g ul{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:10px 12px;padding-top:0;border-top:0}
.lu-g span{text-wrap:balance;hyphens:none}
.lu-g li{grid-template-columns:40px minmax(0,1fr);justify-items:start;text-align:left;column-gap:10px;row-gap:2px}
.lu-g li .av{grid-row:span 2;width:40px;height:40px}
.lu-g b{margin-top:0;font-size:16px}
.lu-label{margin-bottom:10px;text-align:left}
.bento{grid-template-columns:1fr;gap:12px;margin-top:32px}
.bc{padding:16px 16px 0}
.bc.short{padding-bottom:16px}
.bc-x{margin-bottom:16px}
.bc.short .bc-x{margin-bottom:0}
.bc-t{font-size:17px}
.bc-v{margin:auto -4px 0}
.home .bc-v.mock{padding-bottom:6px}
.sara-v{grid-template-columns:1fr}
.h-crew .more{margin-top:24px}
.askwrap{display:none}
/* every card keeps one compact sample (with its Sample tag): a title bar and the one row that tells the story */
.home .bc-v .mt{height:40px}
#c-taylor .row:nth-of-type(n+2),#c-emma .row,#c-richard .row:not(:last-of-type),#c-kyle .kchip,.pl text{display:none}
#c-emma .jbar{padding-top:10px;padding-bottom:10px}
#c-kyle .plans{margin-top:8px;margin-bottom:6px}
#c-kyle .pl svg{max-height:84px}
/* read: the rules as one list card, the agent as a lead-in */
.rtiles{grid-template-columns:1fr;gap:0;border-radius:18px;background:var(--elev-1);box-shadow:var(--sh);position:relative}
.rtiles::before{display:block}
.read-grid{margin-top:28px}
.stmt-l{margin-top:12px}
.rtiles li{display:block;padding:12px 16px;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
.rtiles li:first-child{border-top:0}
.rtiles li::before{display:none}
.rtiles span{float:left;height:24px;margin:0 10px 0 0}
.rtiles p{font-size:17px}
/* trust */
.tcells{grid-template-columns:1fr;margin-top:28px}
.tcells li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 18px}
.tc-i{grid-row:span 2;margin:0}
/* faq, cta */
.hfaq .a{padding-right:0}
.h-faq .wrap{gap:20px}
.h-cta{min-height:0;padding:96px 0 104px}
body.home:not(.gs) .hfoot::before{--ry:150px;--cy:70px}
.cta-b{flex-direction:column}
.cta-b .btn-primary,.cta-b .btn-ghost{display:flex;width:100%;height:60px}
/* footer and the action bar (no blur: the nav is the one glass layer on a phone) */
.hfoot .wrap{gap:24px}
.hf-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hf-cols a{line-height:1.25}
.hfoot{padding-bottom:calc(32px + 77px + env(safe-area-inset-bottom,0px))}
.gs .hfoot{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));
 background:var(--nav-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--line);
 transform:translateY(110%);visibility:hidden;transition:transform .2s var(--ease),visibility 0s .2s}
.actbar.show{transform:none;visibility:visible;transition-delay:0s}
.no-scroll .actbar{transform:translateY(110%);visibility:hidden}
.home .actbar .btn-primary{flex:1;height:56px}
.home .actbar .call{flex:none;width:56px;height:56px;padding:0}
/* get-started */
.home.gs .gs-page>.wrap>.lede{display:none}
.home.gs .hnav .wrap::before{background:var(--bg)}
.home.gs .hcta.f .btn-ghost:not(.call){display:none}
.home.gs .hcta.f .call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.home.gs .hcta.f .call{width:44px;padding:0}
.gs-card{margin-top:20px;padding:0;background:none;box-shadow:none}
.gs-card::before,.gs-card::after{display:none}
/* Back and Continue share one row, so the sticky bar stays about 80px; it lets go while a text field is being typed in */
.gs .onboard.js .st-actions{position:sticky;bottom:0;z-index:5;display:flex;flex-direction:row-reverse;align-items:center;gap:6px;margin:14px calc(-1 * var(--gutter)) 0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
 background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid var(--line)}
.gs .onboard.js .st-actions .xl{flex:1;width:auto;min-width:0}
.gs .onboard.js .st-actions .btn-quiet{flex:none;min-height:60px;padding:0 14px}
.gs .onboard.js:has(input:not([type=radio]):not([type=checkbox]):focus) .st-actions{position:static}
.gs-talk .btn-ghost,.gs-done a{width:100%}
}
@media (max-width:479px){.crumb .c1{display:none}}
/* small phones: the line-up is one list, so no title wraps past two lines */
@media (max-width:480px){
.lu-g ul{grid-template-columns:1fr;gap:12px}
.lu-g li{grid-template-columns:36px minmax(0,1fr)}
.lu-g li .av{width:36px;height:36px}
}
/* /get-started/: a focused field always clears the nav and the action bar */
html:has(body.gs){scroll-padding-top:88px;scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
html:has(body.gs) .gs .onboard{scroll-margin-top:0}
@media (prefers-reduced-motion:reduce){
.home *,.home *::before,.home *::after{animation:none!important;transition:none!important}
.kyle-v .before{display:none}
}