/* Goudplevier home: the plover's stage, proposal, showcase, founder, answers. */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
/* ===== home: the plover's stage ===== */

/* ---------- hero v3: the plover's stage ---------- */
.hstage{position:relative;isolation:isolate;margin:8px 0 0;border-radius:36px;background:#0B0B0B;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(36px,5vw,72px) clamp(24px,4.5vw,64px);overflow:hidden;min-height:640px}
.hs-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hs-bg .g1{position:absolute;right:-10%;top:-20%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(242,194,48,.32),rgba(242,194,48,0) 70%);animation:glow 9s ease-in-out infinite}
.hs-bg .g2{position:absolute;left:-15%;bottom:-40%;width:70%;height:110%;background:radial-gradient(closest-side,rgba(43,91,255,.35),rgba(43,91,255,0) 70%);animation:glow 11s ease-in-out -4s infinite}
.hs-bg .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(80% 70% at 70% 45%,#000,transparent);mask-image:radial-gradient(80% 70% at 70% 45%,#000,transparent)}
@keyframes glow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,4%) scale(1.08)}}
.hs-k{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.85rem;font-weight:700;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 13px;border-radius:99px}
.hs-k span{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(242,194,48,.2)}
.hstage h1{color:#fff;font-size:clamp(2.8rem,5.4vw,4.9rem);line-height:.95;letter-spacing:-.05em;margin-top:22px}
.hstage h1 .accent{color:var(--gold)}
.hs-sub{margin-top:22px;font-size:1.15rem;line-height:1.5;color:rgba(255,255,255,.78);max-width:34ch}
.hs-by{margin-top:26px;font-size:1rem;color:rgba(255,255,255,.66)}
.hs-founder{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px;transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){.hs-founder:hover{color:#B8860B}}
.hs-founder[data-arrow]::after{content:" " attr(data-arrow);color:var(--gold);font-weight:700}
#who{scroll-margin-top:90px}
#who .byline.flash{animation:flash 1.4s cubic-bezier(.23,1,.32,1)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(242,194,48,.0)}25%{box-shadow:0 0 0 8px rgba(242,194,48,.55)}100%{box-shadow:0 0 0 0 rgba(242,194,48,0),0 50px 90px -60px rgba(40,30,10,.45)}}

.hs-stage{position:relative;display:flex;flex-direction:column;gap:16px;min-height:520px;justify-content:flex-start}
.hs-stage>*,.hs-ctl>*{flex-shrink:0}
.hs-trail{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-height:30px}
.hs-trail span{font-size:.8rem;font-weight:600;color:#0B0B0B;background:var(--gold);padding:6px 11px;border-radius:99px;animation:pop 420ms cubic-bezier(.34,1.56,.64,1) both}
.hs-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:6px}
.hs-bird{position:relative;width:170px}
.hs-bub{position:relative;align-self:start;margin-top:4px;background:#fff;color:#0B0B0B;border-radius:26px 26px 26px 8px;padding:20px 22px;min-height:112px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);transform-origin:0% 80%;transition:transform 260ms cubic-bezier(.23,1,.32,1)}
.hs-bub::before{content:"";position:absolute;left:-12px;bottom:26px;width:24px;height:24px;background:#fff;clip-path:polygon(100% 0,0 60%,100% 100%)}
.hs-bub{opacity:0;transform:scale(.9)}
.hs-bub.on{opacity:1;transform:none;transition:opacity 200ms ease,transform 420ms cubic-bezier(.34,1.56,.64,1)}
.hs-bub.pulse{animation:bubPop 420ms cubic-bezier(.34,1.56,.64,1)}
@keyframes bubPop{0%{transform:scale(.94)}100%{transform:scale(1)}}
.hs-bub{min-width:0}
.hs-bub p{overflow-wrap:break-word;margin:0;font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.4;letter-spacing:-.012em;font-weight:500}
.hs-bub .hlg{font-weight:800;background:linear-gradient(rgba(242,194,48,.62),rgba(242,194,48,.62)) no-repeat 0 88%/0% 38%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:hlGrow 520ms cubic-bezier(.23,1,.32,1) forwards}
@keyframes hlGrow{to{background-size:100% 38%}}
.hs-bub .w{display:inline-block;opacity:0;transform:translateY(6px);filter:blur(3px);animation:wIn 360ms cubic-bezier(.23,1,.32,1) forwards}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}
.hs-bub .sub{display:block;margin-top:10px;font-size:.92rem;font-weight:500;color:#5b574f}

.hs-ctl{display:flex;flex-direction:column;gap:12px;min-height:128px}
.hs-chips{display:flex;flex-wrap:wrap;gap:8px}
.hs-chips button{all:unset;box-sizing:border-box;cursor:pointer;font-size:.92rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);padding:10px 15px;border-radius:14px;line-height:1.25;animation:chipUp 380ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--i,0)*45ms);transition:background 150ms ease,border-color 150ms ease,color 150ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.hs-chips button.more{border-style:dashed;color:rgba(255,255,255,.7)}
.hs-chips button:active{transform:scale(.96)}
.hs-chips button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.hs-chips button:hover{background:var(--gold);border-color:var(--gold);color:#0B0B0B}}
@keyframes chipUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hs-in{display:flex;align-items:center;gap:8px;background:#fff;border-radius:18px;padding:6px 6px 6px 18px;box-shadow:0 20px 40px -24px rgba(0,0,0,.9);transition:box-shadow 160ms ease;animation:chipUp 380ms cubic-bezier(.23,1,.32,1) both}
.hs-in:focus-within{box-shadow:0 0 0 4px rgba(242,194,48,.55),0 20px 40px -24px rgba(0,0,0,.9)}
.hs-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#0B0B0B;padding:10px 0}
.hs-in input::placeholder{color:#8a857c}
.hs-in button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--gold);color:#0B0B0B;transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 150ms ease}
.hs-in button:disabled{opacity:.35;cursor:default}
.hs-in button:not(:disabled):active{transform:scale(.93)}
.hs-mini{background:#fff;color:#0B0B0B;border-radius:22px;padding:16px 18px;position:relative;overflow:hidden;animation:cardUp 560ms cubic-bezier(.34,1.3,.64,1) both;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.hs-mini::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--gold)}
.hs-mini small{font-family:ui-monospace,Menlo,monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#6f6a61}
.hs-mini h4{font-size:1.15rem;letter-spacing:-.02em;margin:4px 0 10px}
.hs-mini .f{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hs-mini .f div{background:#F4F1EA;border-radius:10px;padding:8px 10px}
.hs-mini .f span{display:block;font-size:.66rem;color:#6f6a61;text-transform:uppercase;letter-spacing:.05em}
.hs-mini .f b{font-size:1.05rem;letter-spacing:-.02em}
.hs-mini .row{display:flex;gap:8px;margin-top:12px}
.hs-mini .btn{flex:1;justify-content:center}
.hs-mini .btn.gold{background:var(--gold);border-color:var(--gold);color:#0B0B0B}
@keyframes cardUp{from{opacity:0;transform:translateY(24px) rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
.hs-again{all:unset;cursor:pointer;align-self:flex-end;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ---------- the plover's acting ---------- */
.host{display:block;overflow:visible;animation:none}
.host .shadow{transform-box:fill-box;transform-origin:center;transition:transform 300ms ease}
.host .wing{transform-box:fill-box;transform-origin:10% 20%}
.host .head{transform-box:fill-box;transform-origin:50% 90%;transition:transform 420ms cubic-bezier(.34,1.56,.64,1);animation:none}
.host .gaze{transition:transform 300ms cubic-bezier(.23,1,.32,1)}
.host .jaw,.host .mouth{transform-box:fill-box;transform-origin:50% 0}
.host .mouth{transform:scaleY(0)}
.host .glint rect{transform-box:fill-box;transform:translateX(-40px) rotate(25deg)}
.host .thought circle{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 260ms cubic-bezier(.34,1.56,.64,1)}
.host .tuft{transform-box:fill-box;transform-origin:30% 100%;animation:tuft 4s ease-in-out infinite}
@keyframes tuft{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
.hs-bird .body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
/* entrance: drops in, squashes, waves */
.hs-bird.enter .hop{animation:dropIn 900ms cubic-bezier(.34,1.3,.64,1) both}
@keyframes dropIn{0%{transform:translateY(-140px) scale(.9,1.1);opacity:0}55%{transform:translateY(0) scale(1.12,.86);opacity:1}72%{transform:translateY(-10px) scale(.97,1.04)}100%{transform:none}}
.hs-bird.wave .wing{animation:wave 380ms ease-in-out 4 alternate}
@keyframes wave{from{transform:rotate(0)}to{transform:rotate(-38deg)}}
/* talking: jaw flaps, head bobs a little */
.hs-bird.talk .jaw{animation:jaw 150ms ease-in-out infinite alternate}
.hs-bird.talk .mouth{animation:mouth 150ms ease-in-out infinite alternate}
.hs-bird.talk .head{transform:rotate(-2deg)}
@keyframes jaw{from{transform:translateY(0)}to{transform:translateY(3px) scaleY(1.2)}}
@keyframes mouth{from{transform:scaleY(.2)}to{transform:scaleY(1.2)}}
/* listening: head tilts toward the text box, eyes drop to it */
.hs-bird.listen .head{transform:rotate(9deg) translateY(2px)}
.hs-bird.listen .gaze{transform:translate(1.5px,2.5px)}
.hs-bird.nod .head{animation:nod2 360ms ease-in-out}
@keyframes nod2{50%{transform:rotate(9deg) translateY(5px)}}
/* thinking: looks up, thought bubbles rise */
.hs-bird.think .head{transform:rotate(-10deg)}
.hs-bird.think .gaze{transform:translate(2px,-3px)}
.hs-bird.think .thought circle{transform:scale(1)}
.hs-bird.think .thought circle:nth-child(2){transition-delay:120ms}.hs-bird.think .thought circle:nth-child(3){transition-delay:240ms}
.hs-bird.think .thought{animation:float2 1.2s ease-in-out infinite}
@keyframes float2{50%{transform:translateY(-3px)}}
/* happy: a big squash hop with sparkles */
.hs-bird.happy .hop{animation:happyHop 640ms cubic-bezier(.34,1.3,.64,1)}
.hs-bird.happy .shadow{transform:scale(.7)}
@keyframes happyHop{0%{transform:none}20%{transform:translateY(3px) scale(1.1,.9)}50%{transform:translateY(-26px) scale(.95,1.06) rotate(-4deg)}80%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
.sparks{position:absolute;inset:0;pointer-events:none}
.spk{position:absolute;width:14px;height:14px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.s1{left:6%;top:18%}.s2{left:82%;top:6%;background:#fff}.s3{left:92%;top:44%}.s4{left:-4%;top:52%;background:#fff}.s5{left:30%;top:-6%}.s6{left:64%;top:-10%;background:#FF8A00}
.hs-bird.happy .spk{animation:spark 720ms cubic-bezier(.23,1,.32,1) both}
.hs-bird.happy .s2{animation-delay:60ms}.hs-bird.happy .s3{animation-delay:120ms}.hs-bird.happy .s4{animation-delay:90ms}.hs-bird.happy .s5{animation-delay:30ms}.hs-bird.happy .s6{animation-delay:150ms}
@keyframes spark{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.3) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg) translateY(-14px)}}
/* proud: glasses glint */
.hs-bird.glint .glint rect{animation:glint 900ms cubic-bezier(.23,1,.32,1)}
@keyframes glint{from{transform:translateX(-40px) rotate(25deg)}to{transform:translateX(40px) rotate(25deg)}}

.prop-wrap.on{margin-top:48px}

/* hero split: the question on cream, the plover's stage in the dark card */
.hx{padding-top:clamp(16px,3.5vw,44px)}
.hx-copy{text-align:center;max-width:1000px;margin:0 auto clamp(22px,2.6vw,32px)}
.hx h1{font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:.95;letter-spacing:-.05em;color:var(--ink);margin-top:18px}
.hx .hs-sub{margin:20px auto 0;color:var(--grey);max-width:46ch;font-size:1.15rem}
.hx .hstage{display:block;min-height:0;margin:0;padding:clamp(24px,3vw,40px) clamp(18px,4vw,56px)}
.hx .hs-stage{max-width:780px;margin:0 auto;min-height:440px;height:auto}
.hx .hs-bird{width:190px}.hx .hs-bird svg{width:190px;height:auto}
@media (max-width:980px){.hx .hs-stage{height:auto;min-height:470px}.hx .hs-bird,.hx .hs-bird svg{width:130px}}
@media (max-width:980px){.hstage{grid-template-columns:1fr;min-height:0}.hs-stage{height:auto;min-height:480px}.hs-bird{width:120px}.hs-bird svg{width:120px;height:auto}}
@media (prefers-reduced-motion:reduce){.hstage *{animation:none!important;transition:none!important}.hs-bub .w{opacity:1;transform:none;filter:none}.hs-bub .hlg{background-size:100% 38%}}
/* ===== home: proposal ===== */
/* ---------- 2. Proposal ---------- */
.prop-wrap{display:none;padding-top:0;scroll-margin-top:96px}
.prop-wrap.on{display:block}
.paper{max-width:900px;margin:0 auto;background:#fff;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 80px -40px rgba(0,0,0,.45);padding:clamp(24px,4vw,52px);position:relative;animation:paperIn 420ms var(--ease-out) both}
@keyframes paperIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.paper::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--gold);border-radius:6px 6px 0 0}
.p-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.paper h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;margin-top:18px;text-align:left}
.p-when{color:var(--grey);font-size:1.05rem;margin-top:6px}
.p-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-facts div{padding:16px 0}
.p-facts div+div{padding-left:20px;border-left:1px solid var(--line)}
.p-facts span{display:block;font-size:.75rem;color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.p-facts b{font-size:1.6rem;letter-spacing:-.03em}
.p-facts small{font-size:.8rem;color:var(--grey);font-weight:500}
.p-weeks{display:flex;gap:6px;margin-top:26px}
.p-week{flex:1;min-width:0}
.p-week i{display:block;height:8px;border-radius:99px;background:var(--ink);transform-origin:left;animation:grow 500ms var(--ease-out) both}
.p-week:nth-child(2) i{animation-delay:80ms}.p-week:nth-child(3) i{animation-delay:160ms}.p-week:nth-child(4) i{animation-delay:240ms}.p-week:nth-child(5) i{animation-delay:320ms}.p-week:nth-child(6) i{animation-delay:400ms}
.p-week:last-child i{background:var(--gold)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.p-week b{display:block;font-size:.72rem;margin-top:8px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.p-week p{font-size:.86rem;margin-top:2px;line-height:1.35}
.p-cols{display:grid;grid-template-columns:1fr 1fr 210px;gap:28px;margin-top:30px;text-align:left}
.p-cols h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:10px}
.p-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
.p-cols li{padding-left:22px;position:relative;line-height:1.4}
.p-cols li::before{content:"\2713";position:absolute;left:0;font-weight:800;font-size:.8rem}
.p-cols .need li::before{content:"\2192";font-weight:600}
.p-proof{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.p-proof img{display:block;width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:left top}
.p-proof span{display:block;font-size:.78rem;font-weight:600;padding:8px 10px;border-top:1px solid var(--line)}
.p-note{margin-top:26px;padding:14px 16px;border-radius:12px;background:var(--bg-2,#F4F0F1);font-size:.9rem;text-align:left}
.p-note[hidden]{display:none}
.p-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:28px}
.p-act .link{all:unset;cursor:pointer;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;color:var(--grey);padding:8px}
.p-sign{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--grey);text-align:left}
.p-sign .sig{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.6rem;color:var(--ink)}


@media (max-width:960px){.p-cols{grid-template-columns:1fr 1fr}.p-cols .pf{grid-column:1/-1;max-width:220px}.mrow{grid-template-columns:2.2em 1fr auto}.mrow b{display:none}.routine{grid-template-columns:1fr}.sc.board{grid-template-columns:repeat(2,1fr)}.oldweb .hero2{grid-template-columns:1fr}.sheet{width:70%}}
@media (max-width:640px){.p-facts{grid-template-columns:1fr}.p-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.p-weeks{flex-wrap:wrap}.p-week{flex:1 1 40%}.p-cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.paper,.p-week i{animation:none}}
/* ===== home: showcase ===== */


/* ---- dashboards: the race (after José's team dashboard) ---- */
.s-race{--rb:#121211;--rs:#1b1b19;--rl:#2b2b28;--ri:#eeeeea;--ri2:#a5a59d;--ri3:#8d8d83;--brand:#e8894f;--brand-bg:#2a1a10;--done:#4cc58c;--road:#1f1f1d;--road-line:#34342f;
  --sq-fur:#d06a33;--sq-belly:#f0c19c;--sq-dark:#9a4519;--sq-arm:#b0501e;--sq-ink:#121211;--sq-car:#d8d4cb;--sq-sill:#a39e93;--sq-tyre:#0c0c0b;--sq-rim:#8f8b82;--sq-scarf:#e8503f;--sq-glass:rgba(150,190,235,.5);--sq-lens:rgba(215,235,255,.3);--sq-strap:#2a1d15;--sq-lamp:#ffd98a;--sq-line:#55534d;
  background:var(--rb);color:var(--ri);padding:3.2% 3.6%;display:flex;flex-direction:column;gap:2.4%;font-size:clamp(.5rem,.95vw,.8rem)}
.rc-top{display:flex;justify-content:space-between;align-items:flex-start}
.rc-top .eb{font:700 .78em/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.rc-top h3{font-size:2.05em;letter-spacing:-.035em;margin-top:.35em;color:var(--ri)}
.rc-top p{color:var(--ri3);margin-top:.25em}
.rc-top .live{display:inline-flex;align-items:center;gap:.5em;color:var(--ri2);font-size:.85em}
.rc-top .live::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--done);animation:ping 1.8s infinite}
.rc-card{background:var(--rs);border:1px solid var(--rl);border-radius:14px;padding:1.2em 1.6em 1em}
.rc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1em}
.rc-head .lbl{display:block;font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ri3)}
.rc-head b{font-size:1.1em}
.rc-stats{display:flex;gap:1.6em;color:var(--ri3);font-size:.82em}
.rc-stats b{color:var(--ri);font-size:1.4em;letter-spacing:-.02em;margin-right:.2em;font-variant-numeric:tabular-nums}
.tk{position:relative;margin:7.4em 1.8em .3em 0}
.road{position:relative;height:3em;border-radius:8px;background:var(--road);border:1px solid var(--rl);overflow:hidden;display:flex}
.road::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--road-line)}
.gone{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--brand-bg);border-right:2px solid var(--brand);transition:width 1600ms cubic-bezier(.77,0,.175,1)}
.tw{flex:1;position:relative;z-index:1;border-left:1px solid #3d3d38;display:flex;flex-direction:column;justify-content:center;padding:0 .5em}
.tw:first-child{border-left:0}
.tw span{font:700 .8em/1.1 ui-monospace,Menlo,monospace;color:var(--ri2);background:var(--road);align-self:flex-start;padding:1px 3px;border-radius:3px}
.tw em{font-style:normal;font-size:.72em;color:var(--ri3);background:var(--road);align-self:flex-start;padding:0 3px;border-radius:3px;margin-top:2px}
.tw.now span{background:var(--ri);color:var(--rb)}
.tw.past span,.tw.past em{background:transparent}
.runner{position:absolute;bottom:3em;left:0;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;transition:left 1600ms cubic-bezier(.77,0,.175,1)}
.runner .sq{width:5.4em;height:5.4em;display:block;overflow:visible}
.today{font:700 .68em/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#f0a877;background:var(--brand-bg);border:1px solid #5a3620;padding:3px 5px;border-radius:4px;margin-bottom:1px}
.chk{position:absolute;right:-1.8em;bottom:0;width:1.6em;height:6em;background:linear-gradient(var(--ri2),var(--ri2)) 0 0/2px 100% no-repeat}
.chk::after{content:"";position:absolute;left:2px;top:0;width:1.5em;height:1.2em;background:conic-gradient(#fff 25%,#111 0 50%,#fff 0 75%,#111 0) 0 0/.6em .6em}
.rc-bars{display:grid;gap:.6em;margin-top:1.3em;border-top:1px solid var(--rl);padding-top:1em}
.rc-bars div{display:grid;grid-template-columns:7em 1fr 3em;align-items:center;gap:1em;font-size:.88em;color:var(--ri2)}
.rc-bars i{height:.5em;border-radius:99px;background:#222220;overflow:hidden}
.rc-bars u{display:block;height:100%;width:0;border-radius:99px;background:var(--ri3);transition:width 1200ms cubic-bezier(.23,1,.32,1) 400ms}
.rc-bars u.g{background:var(--done)}
.rc-bars b{color:var(--ri);text-align:right}
.s-race.go .rc-bars u{width:var(--w)}
.rc-say{margin-top:.9em;color:var(--ri2);font-size:.92em}
.rc-say b{color:var(--ri)}
.rc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4%;flex:1;min-height:0}
.rc-kpis>div{background:var(--rs);border:1px solid var(--rl);border-radius:14px;padding:1em 1.1em;display:flex;flex-direction:column;position:relative;overflow:hidden}
.rc-kpis span{color:var(--ri2);font-size:.85em}
.rc-kpis p{margin-top:.3em;color:var(--ri3)}
.rc-kpis p b{font-size:2.5em;letter-spacing:-.04em;color:var(--ri);font-variant-numeric:tabular-nums;margin-right:.1em}
.scene em{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;letter-spacing:0!important;font-variation-settings:normal!important}
.rc-kpis em{font-style:normal;font-size:.78em;font-weight:600;color:var(--ri3);margin-top:.2em}
.rc-kpis em.up{color:var(--done)}
.spk{position:absolute;right:1em;bottom:.9em;width:42%;height:auto;overflow:visible}
.spk .l{fill:none;stroke:var(--done);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms cubic-bezier(.23,1,.32,1) 600ms}
.spk .base{stroke:#3d3d38;stroke-width:1;stroke-dasharray:2 2}
.spk circle{fill:var(--done);opacity:0;transition:opacity 200ms ease 1600ms}
.s-race.go .spk .l{stroke-dashoffset:0}.s-race.go .spk circle{opacity:1}
/* the squirrel, as in the dashboard */
.sq .fur{fill:var(--sq-fur)} .sq .belly{fill:var(--sq-belly)} .sq .arm{fill:var(--sq-arm)} .sq .ink{fill:var(--sq-ink)} .sq .glint{fill:#fff}
.sq .body{fill:var(--sq-car)} .sq .sill,.sq .wing{fill:var(--sq-sill)} .sq .stripe{stroke:var(--sq-fur)} .sq .glass{fill:var(--sq-glass)}
.sq .roundel{fill:#fff;stroke:var(--sq-sill);stroke-width:.6} .sq .num{font:800 5.4px/1 system-ui,sans-serif;fill:#171714} .sq .lamp{fill:var(--sq-lamp)}
.sq .tyre{fill:var(--sq-tyre)} .sq .rim{fill:var(--sq-rim)} .sq .spoke{stroke:var(--sq-tyre)} .sq .scarf{fill:var(--sq-scarf)} .sq .strap{stroke:var(--sq-strap)}
.sq .lens{fill:var(--sq-lens);stroke:var(--sq-strap)} .sq .swheel{fill:none;stroke:var(--sq-tyre)} .sq .col{stroke:var(--sq-tyre)}
.sq .speed{stroke:var(--sq-line);stroke-width:1.6;opacity:0} .sq .puff{fill:var(--sq-line)}
.sq .tail{transform-box:fill-box;transform-origin:80% 89%} .sq .eye{transform-box:fill-box;transform-origin:center}
.sq .wh,.sq .puff{transform-box:fill-box;transform-origin:center} .sq .scarf-t{transform-box:fill-box;transform-origin:100% 40%}
.sq.alive .wh{animation:sq-spin 1.3s linear infinite} .sq.alive .scarf-t{animation:sq-flap 1.8s ease-in-out infinite}
.sq.alive .chassis{animation:sq-idle 2.6s ease-in-out infinite} .sq.alive .tail{animation:sq-flick 7.2s cubic-bezier(.37,0,.63,1) infinite}
.sq.alive .eye{animation:sq-blink 5.3s linear infinite} .sq.alive .p1{animation:sq-puff 4.2s ease-out infinite} .sq.alive .p2{animation:sq-puff 4.2s ease-out 260ms infinite}
.sq.hop{animation:sq-bounce 520ms cubic-bezier(.45,0,.55,1) infinite} .sq.hop .wh{animation:sq-spin 320ms linear infinite}
.sq.hop .scarf-t{animation:sq-flap 420ms ease-in-out infinite} .sq.hop .speed{opacity:1}
.sq.hop .speed path{animation:sq-streak 640ms linear infinite} .sq.hop .speed path:nth-child(2){animation-delay:-220ms} .sq.hop .speed path:nth-child(3){animation-delay:-420ms}
.sq.hop .p1{animation:sq-puff 900ms ease-out infinite} .sq.hop .p2{animation:sq-puff 900ms ease-out 300ms infinite}
@keyframes sq-spin{to{transform:rotate(360deg)}}
@keyframes sq-flap{0%,100%{transform:rotate(0) scaleY(1)}50%{transform:rotate(-7deg) scaleY(.85)}}
@keyframes sq-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(.6px)}}
@keyframes sq-puff{0%,70%{opacity:0;transform:translate(0,0) scale(.4)}76%{opacity:.8}100%{opacity:0;transform:translate(-9px,-3px) scale(1.6)}}
@keyframes sq-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}}
@keyframes sq-streak{0%{transform:translateX(8px);opacity:0}30%{opacity:1}100%{transform:translateX(-8px);opacity:0}}
@keyframes sq-flick{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-10deg)}88%{transform:rotate(5deg)}92%{transform:rotate(-3deg)}96%{transform:rotate(1deg)}}
@keyframes sq-blink{0%,93%,97%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@media (max-width:760px){.rc-kpis{grid-template-columns:repeat(2,1fr)}.rc-stats{display:none}}
@media (prefers-reduced-motion:reduce){.sq *,.sq{animation:none!important}.runner,.gone,.rc-bars u,.spk .l{transition:none!important}}

/* ---------- the stage ---------- */
.sstage{position:relative;max-width:1040px;margin:22px auto 0;aspect-ratio:16/9.4;border-radius:26px;overflow:hidden;background:#0B0B0B;box-shadow:0 60px 100px -50px rgba(0,0,0,.6);text-align:left;isolation:isolate}
.st-scene,.st-before{position:absolute;inset:0}
.st-scene.swap{animation:sceneIn 380ms var(--ease-out) both}
@keyframes sceneIn{from{opacity:0;transform:scale(1.02);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.st-before{z-index:5;clip-path:circle(0% at 60px calc(100% - 44px));transition:clip-path 220ms var(--ease-out)}
.sstage.peeking .st-before{clip-path:circle(150% at 60px calc(100% - 44px));transition:clip-path 700ms cubic-bezier(.77,0,.175,1)}
.bf-tag{position:absolute;right:16px;top:16px;z-index:6;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(11,11,11,.85);color:#fff;opacity:0;transition:opacity 150ms ease}
.sstage.peeking .bf-tag{opacity:1}
.peek{all:unset;cursor:pointer;position:absolute;left:18px;bottom:18px;z-index:7;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.85rem;font-weight:700;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);-webkit-user-select:none;user-select:none;touch-action:none;transition:transform 160ms var(--ease-out)}
.peek:active{transform:scale(.97)}
.peek:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.peek .ring{width:28px;height:28px;border-radius:50%;background:var(--ink);position:relative}
.peek .ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--gold);transition:transform 200ms var(--ease-out)}
.sstage.peeking .peek .ring::after{transform:scale(1.5)}
.st-cap{max-width:720px;margin:18px auto 0;font-size:1.02rem}
.st-cap a{font-weight:700;color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.scene{position:absolute;inset:0;overflow:hidden;color:#fff;font-size:clamp(.62rem,1.15vw,.9rem)}
.scene p,.scene h3{margin:0;max-width:none;text-align:left}

/* products */
.s-products{background:radial-gradient(70% 90% at 80% 30%,rgba(255,46,158,.35),transparent 60%),radial-gradient(60% 70% at 20% 90%,rgba(0,208,114,.25),transparent 60%),#0B0E15;display:grid;grid-template-columns:1fr 1.25fr;align-items:center;padding:0 6%}
.sp-mark{width:3.2em;height:auto;margin-bottom:1.2em}
.s-products h3{font-size:3.4em;letter-spacing:-.05em;line-height:1;color:#fff}
.s-products p{margin-top:.8em;font-size:1.15em;color:rgba(255,255,255,.75);max-width:26ch}
.s-products .chips{list-style:none;padding:0;margin:1.4em 0 0;display:flex;flex-wrap:wrap;gap:.5em}
.s-products .chips li{font-size:.95em;font-weight:700;padding:.45em .9em;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.phones{position:relative;height:100%}
.ph{position:absolute;top:50%;width:30%;margin:0;border-radius:2.2em;padding:.55em;background:#15161c;box-shadow:0 40px 60px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12);animation:float 6s ease-in-out infinite}
.ph img{display:block;width:100%;height:auto !important;aspect-ratio:780/1688;object-fit:cover;object-position:top;border-radius:1.7em;background:#fff}
.p1{left:0;width:34%;transform:translateY(-46%) rotate(-7deg);animation-delay:-1s}
.p2{left:31%;transform:translateY(-52%);z-index:2;width:38%;animation-delay:-3s}
.p3{left:66%;width:34%;transform:translateY(-46%) rotate(7deg);animation-delay:-5s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* systems */
.s-systems{background:#0B0E15}
.slides,.slide{position:absolute;inset:0;margin:0}
.slide{opacity:0;transition:opacity 900ms ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform-origin:50% 100%;transition:transform 6s linear}
.slide.on img{transform:scale(1.04)}
.slide figcaption{display:none;position:absolute;right:4%;bottom:6%;font-size:1.05em;font-weight:700;background:rgba(11,14,21,.8);padding:.5em .9em;border-radius:999px;backdrop-filter:blur(6px)}
.sy-label{display:none;position:absolute;left:4%;top:5%;display:grid;gap:.1em;background:rgba(11,14,21,.78);padding:.8em 1.1em;border-radius:14px;backdrop-filter:blur(8px)}
.sy-label b{font-size:1.5em;letter-spacing:-.03em}.sy-label span{color:rgba(255,255,255,.7)}
.dots{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.35);transition:width 300ms var(--ease-out),background 300ms ease}
.dots i.on{width:22px;background:#fff}

/* websites */
.s-websites{background:radial-gradient(80% 90% at 20% 10%,#2A1BFF,transparent 60%),radial-gradient(70% 80% at 90% 90%,#35F0A8,transparent 60%),#0B3FC9;display:grid;place-items:center}
.browser{width:72%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 50px 80px -40px rgba(0,0,0,.7);transform:perspective(1400px) rotateX(4deg)}
.chrome{display:flex;align-items:center;gap:1em;padding:.7em 1em;background:#EDEDF0}
.tl{display:flex;gap:.4em}.tl i{width:.8em;height:.8em;border-radius:50%;background:#FF5F57}.tl i:nth-child(2){background:#FEBC2E}.tl i:nth-child(3){background:#28C840}
.url{flex:1;max-width:60%;margin:0 auto;background:#fff;border-radius:8px;padding:.35em .8em;color:#333;font-size:.95em;display:flex;gap:.5em;align-items:center}
.url .u::after{content:"";display:inline-block;width:1px;height:1em;background:#333;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.view{position:relative;aspect-ratio:1440/900}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 700ms ease}
.shot.on{opacity:1}

/* dashboards */
.s-dash{background:#0F1115;padding:4% 4.5%;display:grid;grid-template-rows:auto auto 1fr;gap:4%}
.dh{display:flex;justify-content:space-between;align-items:center}
.dh b{font-size:1.5em;letter-spacing:-.03em;display:block}.dh span{color:rgba(255,255,255,.55)}
.dh .live{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:#35F0A8}
.dh .live::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#35F0A8;box-shadow:0 0 0 0 rgba(53,240,168,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 .6em rgba(53,240,168,0)}100%{box-shadow:0 0 0 0 rgba(53,240,168,0)}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:3%}
.kpis div{background:#171A20;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:1em 1.1em;display:grid}
.kpis span{color:rgba(255,255,255,.55);font-size:.9em}
.kpis b{font-size:2.6em;letter-spacing:-.05em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpis small{color:rgba(255,255,255,.45)}
.kpis em{font-style:normal;font-weight:700;font-size:.85em;margin-top:.4em;color:rgba(255,255,255,.6)}
.kpis em.good{color:#35F0A8}
.charts{display:grid;grid-template-columns:1.5fr 1fr;gap:3%;min-height:0}
.card-c{background:#171A20;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:1em 1.1em;display:flex;flex-direction:column;min-height:0}
.card-c span{color:rgba(255,255,255,.55);font-size:.9em}
.line{flex:1;width:100%;margin-top:.6em}
.line .stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease-out) .2s forwards}
.line .area{opacity:0;animation:fadeIn2 .8s ease 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn2{to{opacity:1}}
.card-c .bars{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10%;align-items:end;margin-top:.8em;min-height:0}
.card-c .bars div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.4em}
.card-c .bars i{width:100%;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(#5CB6FF,#1E2BFF);transform-origin:bottom;animation:rise 900ms var(--ease-out) both}
.card-c .bars div:nth-child(4) i{background:linear-gradient(#FFE68A,#F2C230)}
.card-c .bars div:nth-child(2) i{animation-delay:80ms}.card-c .bars div:nth-child(3) i{animation-delay:160ms}.card-c .bars div:nth-child(4) i{animation-delay:240ms}
.card-c .bars b{font-size:.8em;font-weight:600;color:rgba(255,255,255,.6)}
@keyframes rise{from{transform:scaleY(0)}}

/* automations */
.s-auto{background:radial-gradient(60% 80% at 30% 20%,rgba(30,43,255,.45),transparent 60%),radial-gradient(60% 70% at 80% 90%,rgba(0,168,150,.4),transparent 60%),#080B1A}
.flow{position:absolute;left:0;top:6%;width:72%;height:84%}
.node{position:absolute;width:11.5%;transform:translate(-50%,-50%);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);border-radius:14px;padding:.7em .8em;display:grid;gap:.1em;animation:nodePulse 1.333s infinite}
.node i{font-style:normal;width:2em;height:2em;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.14);margin-bottom:.4em}
.node b{font-size:.95em}.node span{font-size:.8em;color:rgba(255,255,255,.6)}
.n1{left:6%;top:50%}.n2{left:22%;top:20%}.n3{left:36%;top:62%}.n4{left:50%;top:30%}.n5{left:60%;top:50%}
.n5 i{background:#35F0A8;color:#08331F}
@keyframes nodePulse{0%,100%{border-color:rgba(255,255,255,.16)}10%{border-color:#F2C230;box-shadow:0 0 0 4px rgba(242,194,48,.18)}35%{border-color:rgba(255,255,255,.16);box-shadow:none}}
.log{position:absolute;right:3%;top:7%;bottom:7%;width:25%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1em;display:flex;flex-direction:column;overflow:hidden}
.lh b{display:block;font-size:1.2em}.lh span{color:rgba(255,255,255,.6);font-size:.85em}.lh em{font-family:inherit;font-style:normal;color:#F2C230;font-weight:700}
.log ul{list-style:none;padding:0;margin:.9em 0 0;display:flex;flex-direction:column;gap:.5em;font-family:ui-monospace,Menlo,monospace;font-size:.78em}
.log li{background:rgba(0,0,0,.25);border-radius:8px;padding:.55em .7em;animation:msgIn 300ms var(--ease-out) both;color:rgba(255,255,255,.85)}
.log li b{color:#35F0A8;font-weight:700}
.log li.flag b{color:#F2C230}

/* requirements */
.s-req{background:linear-gradient(180deg,#FBF8F1,#F1EADB);color:var(--ink)}
.lanes{position:absolute;left:2%;top:8%;width:56%;height:78%}
.flowline{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s var(--ease-out) .2s forwards}
.stories{position:absolute;right:4%;top:8%;width:36%;height:84%}
.s-req .story{display:block;position:absolute;left:0;right:0;background:#fff;border-radius:14px;padding:1em 1.1em;box-shadow:0 24px 40px -24px rgba(0,0,0,.45);border:1px solid rgba(0,0,0,.06)}
.s-req .story span{font-family:ui-monospace,Menlo,monospace;font-size:.72em;letter-spacing:.08em;color:#8a857d}
.scene .s-req .story p{margin:.3em 0 0;font-size:.95em;line-height:1.35;font-weight:500}
.s-req .story ol{list-style:none;padding:0;margin:.7em 0 0;display:grid;gap:.3em;font-size:.85em}
.s-req .story ol b{display:inline-block;min-width:3.4em;color:#B8860B}
.st3{top:0;transform:rotate(5deg) translateX(10%)}
.st2{top:5%;transform:rotate(-4deg) translateX(-6%)}
.st1{top:26%;animation:deal 700ms var(--ease-out) .4s both}
@keyframes deal{from{opacity:0;transform:translateY(20px) rotate(3deg)}to{opacity:1;transform:none}}
.signed{position:absolute;left:6%;bottom:9%;font-weight:800;color:#0a7a45;border:2px solid #0a7a45;border-radius:10px;padding:.4em .8em;transform:rotate(-6deg);animation:stamp 500ms cubic-bezier(.34,1.56,.64,1) 1.8s both}
@keyframes stamp{from{opacity:0;transform:rotate(-6deg) scale(1.6)}to{opacity:1;transform:rotate(-6deg) scale(1)}}

/* diary before */
.diary{background:#FFFDF6;color:#23305C;font-family:"Fraunces",Georgia,serif;font-style:italic;padding:6% 8%}
.diary .lines{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2.4em,rgba(80,120,200,.25) 2.4em calc(2.4em + 1px));}
.diary::before{content:"";position:absolute;left:6%;top:0;bottom:0;width:1px;background:rgba(220,60,60,.4)}
.diary p{position:relative;font-size:1.45em;line-height:1.66;margin:0}
.diary .d1{font-size:2em;text-decoration:underline}
.diary .d5{color:#B32424}
.diary .d6{transform:rotate(-3deg);display:inline-block;font-weight:700}

@media (max-width:760px){.sstage{aspect-ratio:4/5}.s-products{grid-template-columns:1fr;padding:8% 6%}.phones{height:auto;min-height:60%}.log{display:none}.flow{width:100%}.node{width:26%}.n2{left:30%}.n3{left:44%}.n4{left:70%;top:20%}.n5{left:66%;top:66%}.kpis{grid-template-columns:repeat(2,1fr)}.charts{grid-template-columns:1fr}.lanes{width:94%;height:44%}.stories{left:6%;right:6%;width:auto;top:48%;height:48%}.browser{width:92%}}
@media (prefers-reduced-motion:reduce){.ph,.node,.dh .live::before,.url .u::after{animation:none}.slide img{transition:none;transform:none}.st-scene.swap{animation:fadeIn 150ms ease both}.sstage.peeking .st-before{transition-duration:150ms}}
/* ===== home: before scenes ===== */
/* scenes: the "before" worlds */
.sc p,.sc h3{margin:0;max-width:none;text-align:left}
.sc{position:absolute;inset:0;overflow:hidden;text-align:left;font-size:clamp(.62rem,1.2vw,.86rem)}
.mail{background:#F7F7F8;padding:4%}
.mail .bar2{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:3%}
.mail .bar2 span{font-weight:600;color:#C23;background:#FDE8EA;padding:3px 9px;border-radius:99px;font-size:.85em}
.mrow{display:grid;grid-template-columns:2.2em 9em 1fr auto;gap:1em;align-items:center;background:#fff;padding:.9em 1em;border-radius:10px;margin-bottom:.55em;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.mrow .avt{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8em}
.mrow b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#555}
.mrow p strong{color:#111;font-weight:600}
.mrow time{color:#888;font-size:.9em}
.sticky{position:absolute;right:7%;bottom:9%;width:28%;background:#FFE680;padding:1.2em;transform:rotate(3deg);box-shadow:0 14px 24px -12px rgba(0,0,0,.4);font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.25em;line-height:1.25}
.sheets{background:#EEF1EE;padding:5%}
.sheet{position:absolute;width:44%;background:#fff;border-radius:8px;box-shadow:0 20px 36px -20px rgba(0,0,0,.45);overflow:hidden}
.sheet .fn{background:#1D6F42;color:#fff;font-weight:600;padding:.6em .9em;font-size:.9em}
.sheet .fn.p{background:#C4471E}
.sheet table{width:100%;border-collapse:collapse;font-size:.9em}
.sheet td{border:1px solid #E3E3E3;padding:.45em .7em}
.sheet td.k{background:#FFF6CC;font-weight:700}
.bubble{position:absolute;left:34%;bottom:8%;background:#fff;border:2px solid #C23;color:#C23;font-weight:700;padding:.8em 1.1em;border-radius:14px 14px 14px 2px;font-size:1.05em;box-shadow:0 12px 24px -14px rgba(0,0,0,.4)}
.routine{background:#F5F2EC;padding:5% 6%;display:grid;grid-template-columns:1.5fr 1fr;gap:5%;align-items:center}
.steps{display:grid;gap:.6em}
.steps div{background:#fff;border-radius:10px;padding:.8em 1em;display:flex;justify-content:space-between;gap:1em;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.steps em{font-style:normal;color:#888}
.clock{text-align:center}
.clock b{display:block;font-size:4.2em;letter-spacing:-.05em;line-height:1}
.clock span{color:#777}
.clock .x40{display:inline-block;margin-top:1em;background:var(--ink);color:#fff;font-weight:700;padding:.5em 1em;border-radius:99px}
.napkin{background:radial-gradient(120% 90% at 30% 20%,#FFFDF6 0%,#F3EBD9 70%,#E8DCC2 100%);font-family:"Fraunces",Georgia,serif;font-style:italic;color:#2B2A6B}
.napkin .t1{position:absolute;left:8%;top:10%;font-size:2.2em}
.napkin .t2{position:absolute;left:10%;top:30%;font-size:1.3em;line-height:1.7}
.napkin svg{position:absolute;right:10%;top:12%;width:26%;height:auto}
.napkin .ring{position:absolute;right:30%;bottom:-8%;width:26%;aspect-ratio:1;border-radius:50%;border:.6em solid rgba(150,100,50,.18)}
.oldweb{background:#fff;font-family:Georgia,serif}
.oldweb .nav{display:flex;gap:1.4em;padding:1em 3%;background:#2E4A7A;color:#fff;font-size:.9em;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.oldweb .hero2{display:grid;grid-template-columns:1.2fr 1fr;gap:4%;padding:5% 4%}
.oldweb h3{font-size:2.3em;color:#2E4A7A;line-height:1.1}
.oldweb .lorem{margin-top:.8em;color:#666;line-height:1.5}
.oldweb .btns{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.2em}
.oldweb .btns span{background:#E87722;color:#fff;padding:.5em .9em;font-family:Arial,sans-serif;font-size:.85em}
.oldweb .btns span:nth-child(2n){background:#2E4A7A}
.oldweb .stock{background:linear-gradient(160deg,#9DB7D5,#D9E4F0);border-radius:4px;display:grid;place-items:center;color:#fff;font-size:3em}
.oldweb .cookie{position:absolute;left:0;right:0;bottom:0;background:#222;color:#ddd;padding:1.1em 4%;font-family:Arial,sans-serif;display:flex;justify-content:space-between;gap:1em;align-items:center}
.oldweb .cookie span{background:#E87722;color:#fff;padding:.4em .8em;white-space:nowrap}
.sc.board{background:#EBECF0;padding:4%;display:grid;grid-template-columns:repeat(4,1fr);gap:3%}
.col h5{font-size:.95em;margin-bottom:.6em;display:flex;justify-content:space-between}
.col h5 span{color:#888}
.card{background:#fff;border-radius:6px;padding:.55em .7em;margin-bottom:.45em;box-shadow:0 1px 0 rgba(0,0,0,.12);font-size:.88em}
.card u{text-decoration:none;display:inline-block;margin-top:.3em;font-size:.8em;font-weight:700;padding:.1em .45em;border-radius:4px;background:#FDE8EA;color:#C23}
.card.more{background:transparent;box-shadow:none;color:#888;text-align:center}
.goal{position:absolute;left:4%;right:4%;bottom:5%;background:#fff;border:2px dashed #C23;border-radius:10px;padding:.8em 1em;font-weight:700;color:#C23}
.update{background:#fff;padding:5% 6%}
.update .hdr{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:.8em;color:#777;text-transform:uppercase;letter-spacing:.06em}
.update h3{font-size:2.2em;letter-spacing:-.03em;margin-top:.4em}
.update .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;margin-top:1.4em}
.update .grid4 div{border-top:3px solid var(--ink);padding-top:.6em}
.update .grid4 div:nth-child(3){border-color:var(--gold)}
.update .grid4 b{font-size:2.4em;display:block;letter-spacing:-.04em}
.update ul{margin-top:1.4em;padding:0;list-style:none;display:grid;gap:.5em}
.update li{padding-left:1.4em;position:relative}
.update li::before{content:"\2713";position:absolute;left:0;font-weight:800}
.update svg{position:absolute;right:6%;bottom:10%;width:26%;height:auto}


@keyframes fadeIn{from{opacity:0}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ping{70%{box-shadow:0 0 0 .6em rgba(53,240,168,0)}100%{box-shadow:0 0 0 0 rgba(53,240,168,0)}}
/* ===== home: price line, founder, answers ===== */
.pricebar{margin-top:16px;background:var(--ink);color:#fff;border-radius:20px;padding:20px 24px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;text-align:left}
.pricebar div{display:flex;flex-wrap:wrap;gap:8px 28px}
.pricebar span{font-size:.95rem;color:rgba(255,255,255,.75)}
.pricebar span b{color:#fff;font-size:1.15rem}
.pricebar a{color:#fff;font-weight:700;text-underline-offset:3px}

/* ---------- one system: light middle, black ends ---------- */
/* founder: a light card */
#who .byline{background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.04),0 50px 90px -60px rgba(40,30,10,.45)}
#who .byline-art{background:radial-gradient(circle at 50% 58%,#FFF1BF 0,#FCF6E6 55%,#fff 100%);border-radius:24px}
#who .byline-art::before{opacity:0}
#who .byline::after{border-color:rgba(0,0,0,.05)}
#who .byline-perch{filter:drop-shadow(0 18px 18px rgba(150,105,0,.28))}
#who .byline-glow{opacity:.55}
#who .byline-rings i:nth-child(1){border-color:rgba(184,134,11,.28)}#who .byline-rings i:nth-child(2){border-color:rgba(184,134,11,.16)}#who .byline-rings i:nth-child(3){border-color:rgba(184,134,11,.09)}
#who .byline .kicker,#who .byline .kicker.pill-kicker{background:#FBF7EE;color:var(--ink);border-color:rgba(0,0,0,.06)}
#who .byline h2{color:var(--ink)}#who .byline h2 em{color:#B8860B}
#who .byline p{color:#4F4B44}
#who .byline-creed{color:var(--ink)!important}#who .byline-creed em{color:#B8860B}
#who .byline-sign{border-top-color:rgba(0,0,0,.08)}#who .byline-sign .sig{color:var(--ink)}#who .byline-facts{color:var(--grey)}
#who .byline-cta .btn.white{background:var(--ink);color:#fff;border-color:var(--ink)}
#who .byline-cta .btn.ghost{color:var(--ink);border-color:rgba(0,0,0,.18)}
#who .on-dark .bird,#who .bird.on-dark{--halo:transparent}
.byline-who{margin-top:18px!important;background:#FFF7DC;border-radius:14px;padding:12px 16px;color:var(--ink)!important;font-size:.95rem}
.byline-who b{font-weight:800}
/* showcase: dark work inside a white frame, tabs as one segmented control */
.proof .sstage{border:10px solid #fff;border-radius:34px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 50px 90px -55px rgba(40,30,10,.5)}
/* price line: gold, not another black bar */
.pricebar{background:var(--gold);color:var(--ink);box-shadow:0 30px 60px -40px rgba(184,134,11,.8)}
.pricebar span{color:rgba(11,11,11,.7)}.pricebar span b{color:#0B0B0B}.pricebar a{color:#0B0B0B}
.how3 div{box-shadow:0 1px 0 rgba(0,0,0,.04)}
/* straight answers */
.answers{padding-top:clamp(40px,6vw,80px)}
.ans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,4vw,40px);text-align:left}
.ans article{background:#fff;border-radius:24px;padding:26px 26px 28px;position:relative;overflow:hidden}
.ans article::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(242,194,48,.28),transparent 70%)}
.an-n{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;font-weight:700;color:#B8860B;letter-spacing:.08em}
.ans h3{font-size:1.35rem;letter-spacing:-.03em;margin-top:12px}
.ans p{color:#4F4B44;margin-top:10px;font-size:.98rem;line-height:1.55}
@media (max-width:900px){.ans{grid-template-columns:1fr}}


/* phones: the dark card hugs the conversation instead of holding a fixed height */
@media (max-width:640px){.hx .hs-stage{min-height:0}.hx .hstage{padding:22px 16px 24px}}

/* the dark card can never be scrolled inside, even by focus or scrollIntoView */
.hstage{overflow:clip}

/* ---------- showcase tabs: one clean pill switch ---------- */
.proof .tabs{display:inline-flex;align-items:center;gap:2px;margin-top:28px;padding:5px;background:#fff;border-radius:999px;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 34px -22px rgba(40,30,10,.45);max-width:100%}
.proof .tab{all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;font-family:var(--sans);font-size:.93rem;font-weight:600;
  line-height:1;padding:12px 18px;border-radius:999px;color:#3d3a35;
  transition:background-color 180ms ease,color 180ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.proof .tab[aria-selected="true"]{background:var(--ink);color:#fff}
.proof .tab:active{transform:scale(.97)}
.proof .tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.proof .tab:not([aria-selected="true"]):hover{background:#F4F0E6;color:var(--ink)}}
/* phones: separate pills in one row you can swipe, bleeding to the screen edge */
@media (max-width:720px){
  .proof .tabs{display:flex;gap:8px;margin:24px -16px 0;padding:4px 16px 10px;background:none;box-shadow:none;border-radius:0;
    max-width:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
  .proof .tabs::-webkit-scrollbar{display:none}
  .proof .tab{flex:none;scroll-snap-align:center;background:#fff;padding:11px 16px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 8px 18px -14px rgba(40,30,10,.5)}
  .proof .tab[aria-selected="true"]{background:var(--ink)}
}

/* accepting a proposal, in place */
.p-accept{margin-top:26px;padding:22px;border-radius:18px;background:#FBF8F1;border:1px solid var(--line);display:grid;gap:12px;text-align:left;animation:gpIn 320ms cubic-bezier(.23,1,.32,1) both}
.p-accept h4{font-size:1.15rem;letter-spacing:-.02em}
.p-accept label{display:grid;gap:6px;font-size:.86rem;font-weight:600}
.p-accept label span{font-weight:500;color:var(--grey)}
.p-accept input,.p-accept textarea{font:inherit;font-size:16px;padding:12px 13px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--ink)}
.p-accept input:focus,.p-accept textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(242,194,48,.35)}
.pa-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p-accept .btn{justify-self:start}
.pa-fine{margin:0;font-size:.82rem;color:var(--grey)}
.p-sent{margin-top:26px}
@media (max-width:640px){.pa-row{grid-template-columns:1fr}.p-accept .btn{justify-self:stretch;justify-content:center}}