/* Remmy v6: frosted glass on warm stationery. Lock: Dia Browser (light, near-monochrome, one chromatic glow) + Stocketa hero split. */
:root{
  --canvas:#F6F5F2; --card:rgba(255,255,255,.62); --card-strong:rgba(255,255,255,.8);
  --ink:#0B0B0B; --graphite:#57564F; --slate:#8E8C85; --hair:rgba(0,0,0,.07);
  --thread:#D8122C; --thread-text:#B30E2A; --on-thread:#fff;
  --r-card:28px; --r-bubble:18px; --u:8px;
  --shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 0 0 1px rgba(255,255,255,.55) inset, 0 10px 30px rgba(20,18,10,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-synthesis:none;background:var(--canvas);color:var(--ink);font-family:"Geist",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:400}
a{color:inherit;text-decoration:none}
b,strong{font-weight:500}
::selection{background:var(--thread);color:#fff}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(44px,6.4vw,78px);line-height:1.06}
h2{font-size:clamp(32px,4vw,52px);line-height:1.1}
h3{font-size:clamp(20px,1.7vw,24px);line-height:1.25;font-weight:400;letter-spacing:-.02em}
p{margin:0}
.body{color:var(--graphite);font-size:clamp(17px,1.3vw,19px);max-width:36em}

/* ambient glow: the thread's color, diffused */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9;animation:drift 38s ease-in-out infinite alternate}
.glow .g2{animation-duration:46s;animation-delay:-12s}.glow .g3{animation-duration:54s;animation-delay:-25s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-4vh,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.glow i{animation:none}}
.glow .g1{width:56vw;height:56vw;left:52%;top:-18vw;background:radial-gradient(closest-side,rgba(216,18,44,.16),rgba(216,18,44,0))}
.glow .g2{width:46vw;height:46vw;left:-14vw;top:34vh;background:radial-gradient(closest-side,rgba(255,176,5,.14),rgba(255,176,5,0))}
.glow .g3{width:50vw;height:50vw;left:30vw;top:100vh;background:radial-gradient(closest-side,rgba(120,130,255,.12),rgba(120,130,255,0))}

/* nav */
.nav{position:sticky;top:0;z-index:20;padding:12px 20px 0}
.nav-in{max-width:1160px;margin:0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 16px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:var(--shadow)}
.wordmark{display:flex;align-items:center;gap:9px;font-weight:500;font-size:17px;letter-spacing:-.01em}
.wordmark .dot{width:10px;height:10px;border-radius:50%;background:var(--thread);box-shadow:0 0 0 3px rgba(216,18,44,.14)}
.links{display:flex;gap:22px;font-size:14px;color:var(--graphite)}
.links a{transition:color .2s ease}.links a:hover{color:var(--ink)}
@media (max-width:820px){.links{gap:0}.links a{display:none}.links a[href="/story"],.links a[href="/"]{display:block}}

/* glass */
.glass{background:var(--card);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);border-radius:var(--r-card);box-shadow:var(--shadow);position:relative;z-index:3}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 1px 2px rgba(0,0,0,.04)}
.btn{font:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:13px 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{background:#262622;transform:translateY(-1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--ink)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.btn.small{padding:11px 18px;font-size:13px;min-height:42px}
.btn.ghost{background:rgba(0,0,0,.06);color:var(--ink)}.btn.ghost:hover{background:rgba(0,0,0,.1)}

/* layout */
.page{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 28px}
section{position:relative;padding:calc(var(--u)*9) 0}
.sec-head{max-width:40em;margin-bottom:calc(var(--u)*6)}
.sec-head h2{margin-top:18px}
.rise{opacity:0;transform:translateY(12px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.3s}.rise.d3{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.nodes .reveal:nth-child(3){transition-delay:.08s}.nodes .reveal:nth-child(4){transition-delay:.16s}.nodes .reveal:nth-child(5){transition-delay:.24s}.nodes .reveal:nth-child(6){transition-delay:.32s}.nodes .reveal:nth-child(7){transition-delay:.4s}.two > .reveal:nth-child(2){transition-delay:.1s}.other-grid > .reveal:nth-child(2){transition-delay:.1s}
@media (prefers-reduced-motion:reduce){.rise,.reveal{opacity:1;transform:none;animation:none;transition:none}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"text phone" "cta phone";gap:calc(var(--u)*2) calc(var(--u)*8);align-items:center;padding:calc(var(--u)*10) 0 calc(var(--u)*14)}
.hero-text{grid-area:text;align-self:end}
.hero-cta{grid-area:cta;align-self:start}
.phone-wrap{grid-area:phone}
.hero h1{margin-top:22px;margin-bottom:6px}
.hero .lede{margin-top:22px;color:var(--graphite);font-size:clamp(17px,1.4vw,20px);max-width:32em}
.hero .lede .nm{color:var(--ink);font-weight:500}
.via{margin-top:14px;font-size:15px;color:var(--thread-text)}
.cta{margin-top:26px;max-width:36em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bar{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;padding:6px;border-radius:999px}
.bar label span{position:absolute;left:-9999px}
.bar input{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-radius:999px;padding:11px 16px;width:100%;transition:background .2s ease}
.bar input:focus{outline:none;background:rgba(255,255,255,.7)}
.bar input::placeholder{color:var(--slate)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{display:block;font-size:14px;color:var(--graphite);margin-top:10px;min-height:1.2em}
.status.err{color:var(--thread-text)}
.fine{font-size:13.5px;color:var(--graphite);margin-top:12px;line-height:1.45;max-width:34em}
.fine .count{color:var(--ink)}.fine .count b{font-weight:500;color:var(--ink)}
.done{padding:26px 28px;margin-top:6px}
.done .pos{font-weight:300;font-size:56px;letter-spacing:-.04em;line-height:1;color:var(--thread)}
.done h3{margin-top:10px}
.done h3:focus{outline:none}
.done p{color:var(--graphite);margin-top:10px;font-size:16px}
.linkrow{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}
.linkrow input{font:inherit;font-size:14px;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--hair);border-radius:999px;padding:10px 14px;width:100%;min-width:0}
.linkrow input:focus{outline:none;border-color:var(--ink)}
.knots{font-size:14px;color:var(--graphite);margin-top:10px}
.done form{margin-top:18px;display:grid;gap:12px}
label{display:grid;gap:6px;position:relative}
label span{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
label span em{font-style:normal;text-transform:none;letter-spacing:0}
input,textarea{font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--hair);border-radius:14px;padding:12px 14px;width:100%;transition:border-color .2s ease}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{resize:vertical;min-height:64px}
.submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* the rotating action word: its own line, fixed height, so the headline never reflows */
.rotline{display:block;position:relative;height:1.18em;overflow:hidden;color:var(--thread-text)}
html.static .nav{position:absolute;left:0;right:0}
html.static .page{padding-top:72px}
.rotline .rot-word{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(115%);opacity:0}
.rotline .rot-word.is-in{transform:translateY(0);opacity:1}
.rotline.animate .rot-word{transition:transform .55s cubic-bezier(.2,.7,.2,1) .1s,opacity .3s ease .12s}
.rotline.animate .rot-word.is-out{transform:translateY(-115%);opacity:0;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
@media (prefers-reduced-motion:reduce){.rotline{color:var(--ink)}.rotline .rot-word{transform:none;opacity:1}}

/* iphone */
.phone-wrap{position:relative;z-index:3;justify-self:center;width:min(100%,306px)}
.iphone{position:relative;z-index:3;width:100%;animation:float 7s ease-in-out infinite;width:min(100%,318px);background:#0C0C0D;border-radius:54px;padding:11px;box-shadow:0 40px 80px rgba(20,18,10,.22),0 0 0 1px rgba(255,255,255,.18) inset,0 0 0 2px #1c1c1e}
.iphone .screen{background:#fff;border-radius:44px;height:590px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.iphone .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:100px;height:30px;background:#0C0C0D;border-radius:20px}
.iphone .sb{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 0 30px;font-size:15px;font-weight:500;letter-spacing:-.01em;height:50px}
.iphone .sys{display:flex;gap:5px;align-items:center;fill:#000;color:#000}
.iphone .chead{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;padding:8px 10px 8px;border-bottom:1px solid rgba(0,0,0,.08);background:rgba(250,250,250,.9)}
.iphone .back{color:#1a73e8;font-size:26px;line-height:1;padding-left:6px;color:#0a84ff;font-weight:300}
.iphone .avatar{grid-column:2;justify-self:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(160deg,#fff 0%,#f3e9e6 100%);box-shadow:0 0 0 1px rgba(0,0,0,.06);display:grid;place-items:center}
.iphone .chead b{grid-column:2;justify-self:center;font-size:11.5px;font-weight:400;margin-top:3px;color:#111}
.iphone .vid{grid-column:3;grid-row:1;color:#0a84ff}
.iphone .stamp,.iphone .chat .stamp{text-align:center;font-size:11px;color:#8e8e93;padding:8px 0 4px;align-self:center}
.iphone .chat{flex:1;display:flex;flex-direction:column;gap:5px;padding:0 12px 8px;overflow:hidden;justify-content:flex-end;transition:opacity .5s ease}
.iphone .chat.fade{opacity:0}
.b{max-width:80%;padding:8px 13px;border-radius:var(--r-bubble);font-size:15px;line-height:1.3;letter-spacing:-.005em;position:relative}
.b.r{align-self:flex-start;background:#E9E9EB;color:#000;border-bottom-left-radius:5px}
.b.u{align-self:flex-end;background:var(--thread);color:#fff;border-bottom-right-radius:5px}
.iphone .b{opacity:0;transform:translateY(8px) scale(.97);animation:pop .35s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.b.typing{padding:11px 14px;display:flex;gap:4px;align-items:center}
.b.typing i{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:blink 1s infinite ease-in-out}
.b.typing i:nth-child(2){animation-delay:.15s}.b.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.delivered{align-self:flex-end;font-size:10.5px;color:#8e8e93;margin:-2px 6px 0 0}
.iphone .composer{margin:8px 12px 6px;height:36px;border:1px solid rgba(0,0,0,.16);border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 13px;color:#9a9a9f;font-size:15px}
.iphone .homebar{width:130px;height:5px;background:#000;border-radius:3px;margin:4px auto 8px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.iphone .b{opacity:1;transform:none;animation:none}.iphone{animation:none}}

/* anchors for the thread */
[data-block]{position:relative}
.anchor{position:absolute;left:50%;top:50%;width:1px;height:1px;transform:translate(-50%,-50%);pointer-events:none}
.anchor.knot{position:relative;left:auto;top:auto;transform:none;display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--thread);box-shadow:0 0 0 3px var(--canvas),0 0 0 4px var(--thread);vertical-align:middle}

/* asks: cards under which the thread runs */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c" "f e d" "g h i";gap:22px}
.card.soft{background:rgba(255,255,255,.3);box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;display:flex;flex-direction:column;justify-content:center;gap:10px;text-decoration:none;transition:transform .2s ease,background .2s ease}
.card.soft:hover{transform:translateY(-2px);background:rgba(255,255,255,.5)}
.card.soft .ask-yours{font-size:17px;color:var(--graphite);max-width:22em}
.card.soft .more{font-size:14px;font-weight:500;color:var(--ink)}
.card{padding:22px 22px 24px}
.card .tag{position:absolute;top:-12px;left:20px;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);background:var(--card-strong);backdrop-filter:blur(12px);padding:5px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.8) inset,0 1px 2px rgba(0,0,0,.05)}
.mini{display:flex;flex-direction:column;gap:6px;margin-top:8px;min-height:96px}
.mini .b{font-size:14.5px}
.mini .b{opacity:0;transform:translateY(6px) scale(.98)}
.mini .b.on{animation:pop .35s cubic-bezier(.2,.7,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.mini .b{opacity:1;transform:none}}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "d c" "e f" "h g" "i i"}}
@media (max-width:640px){.cards{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h" "i"}}

/* scenarios: one conversation at a time */
.sec-head .hint{margin-top:12px;font-size:15px;color:var(--graphite)}
.scenarios{display:flex;flex-direction:column;padding:10px;max-width:760px;margin:0 auto}
.scen-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 10px 10px 18px}
.scen-label{font-size:16px;font-weight:500;letter-spacing:-.01em}
.scen-count{font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums;margin-left:auto}
.scen-nav{display:flex;gap:8px}
.scen-nav button{width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.05);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s ease,transform .15s ease}
.scen-nav button:hover{background:rgba(0,0,0,.1)}
.scen-nav button:active{transform:scale(.94)}
.scen-nav button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--ink)}
.convo-pane{position:relative;background:rgba(255,255,255,.4);border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;display:flex;flex-direction:column;min-height:270px;touch-action:pan-y}
.convo{flex:1;display:flex;flex-direction:column;gap:7px;padding:22px 22px 22px;justify-content:flex-start;overflow:hidden;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.convo.fade{opacity:0;transform:translateX(var(--sdx,0))}
.convo .b{max-width:78%;font-size:15.5px}
@media (max-width:820px){
  .convo-pane{min-height:280px}
  .convo{padding:18px 16px 16px}
  .convo .b{max-width:86%}
}

/* how: one panel, three knots on one thread */
.steps{list-style:none;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:10px 8px 14px;position:relative}
.steps::before{content:"";position:absolute;left:5%;right:5%;top:44px;height:2px;background:linear-gradient(90deg,transparent,var(--thread) 8%,var(--thread) 92%,transparent);opacity:.5;border-radius:2px}
.steps li{padding:18px 22px 18px;position:relative}
.steps li + li{border-left:1px solid var(--hair)}
.steps .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--thread);color:#fff;font-size:15px;font-weight:500;margin-bottom:16px;box-shadow:0 0 0 4px var(--canvas)}
.steps h3{margin-bottom:8px}
.steps p{color:var(--graphite);font-size:14.5px}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;padding:8px 6px 10px}
  .steps::before{left:43px;right:auto;top:9%;bottom:9%;width:2px;height:auto;background:linear-gradient(180deg,transparent,var(--thread) 8%,var(--thread) 92%,transparent)}
  .steps li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;align-items:start}
  .steps li .n{grid-column:1;margin-bottom:0;margin-top:2px}
  .steps li h3{grid-column:2;grid-row:1;align-self:center}
  .steps li p{grid-column:2}
  .steps li + li{border-left:0;border-top:1px solid var(--hair)}
}

/* getting in */
.gettin{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:calc(var(--u)*7);align-items:start}
.gettin ol{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px;counter-reset:g}
.gettin ol li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px}
.gettin ol li::before{counter-increment:g;content:counter(g);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--thread);color:#fff;font-size:14px;font-weight:500}
.gettin ol b{display:block;font-weight:500;font-size:17px;margin-bottom:3px;letter-spacing:-.01em}
.gettin ol p{color:var(--graphite);font-size:15.5px}
.gettin .later{margin-top:22px;font-size:15px;color:var(--graphite);max-width:36em}
.onb{padding:20px 22px 22px}
.onb .mini{margin-top:0;min-height:0}
.onb .mini .b{font-size:15px;max-width:82%}
@media (max-width:820px){.gettin{grid-template-columns:1fr}}

/* ecosystem */
.eco-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:calc(var(--u)*8);align-items:center}
.eco-text h2{margin-top:18px}
.eco-text .body{margin-top:18px}
.eco-text .body + .body{margin-top:12px}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.nodes{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.nodes .cap{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);padding:0 6px 2px 24px}
.nodes li{display:flex;align-items:baseline;gap:16px;padding:16px 20px;border-radius:18px}
.nodes li b{font-weight:500;font-size:16px;letter-spacing:-.01em}
.nodes li span{font-size:13px;color:var(--slate);white-space:nowrap}
.nodes li.soft{background:transparent;box-shadow:none;border:1px dashed rgba(0,0,0,.18);backdrop-filter:none;-webkit-backdrop-filter:none}
.nodes li.soft b{color:var(--graphite);font-weight:400}
@media (max-width:820px){.eco-grid{grid-template-columns:1fr}}

/* other end + story */
.other-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;align-items:stretch}
.quote{padding:32px 34px 34px}
.quote h2{margin-top:18px;font-size:clamp(28px,3vw,40px)}
.quote .body{margin-top:16px}
blockquote{margin:26px 0 0;padding:0;font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.03em}
blockquote .who{display:block;margin-top:10px;font-size:14px;color:var(--slate);font-weight:400;letter-spacing:0}
.story{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:start;padding:28px;transition:transform .2s ease,box-shadow .2s ease}
.story:hover{transform:translateY(-2px)}
.story img{width:120px;height:120px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 0 5px rgba(216,18,44,.5)}
.story h3{margin-top:12px}
.story p{color:var(--graphite);font-size:15px;margin-top:8px}
.story .more{display:inline-block;margin-top:12px;font-size:14px;font-weight:500}
@media (max-width:820px){.other-grid{grid-template-columns:1fr}.story{grid-template-columns:96px 1fr}.story img{width:96px;height:96px}}

/* who + believe */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.two > div{padding:28px 30px 30px}
.two dl{margin:18px 0 0;display:grid;gap:16px}
.two dt{font-size:19px;font-weight:400;letter-spacing:-.02em}
.two dd{margin:3px 0 0;color:var(--graphite);font-size:15.5px;max-width:36ch}
.last{padding-top:0}
.lastq{margin:0 auto;max-width:46em;padding:32px 36px 34px}
.lastq blockquote{font-size:clamp(20px,2vw,25px);line-height:1.3}
.lastq blockquote + blockquote{margin-top:22px}
@media (max-width:640px){.lastq{padding:26px 22px 28px}}
.believe{margin:calc(var(--u)*10) auto 0;max-width:38em;padding:32px 36px 34px}
.believe p{font-weight:300;font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.03em}
.believe p + p{margin-top:12px}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* invite */
.invite{display:grid;justify-content:center}
.ask{width:min(100%,640px);padding:32px 34px 34px}
.ask h2{margin-top:16px;font-size:clamp(28px,3vw,40px)}
.ask form{margin-top:22px;display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

footer.site{padding:calc(var(--u)*6) 0 calc(var(--u)*10);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--slate);font-size:14px;align-items:center;border-top:1px solid var(--hair)}
footer .end{display:flex;align-items:center;gap:12px;color:var(--graphite);font-weight:400}
@media (max-width:900px){footer.site{flex-direction:column;align-items:flex-start;gap:36px;padding-bottom:calc(var(--u)*14)}footer .end{margin-top:12px}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-areas:"text" "cta" "phone";gap:calc(var(--u)*5);padding-top:calc(var(--u)*5);padding-bottom:calc(var(--u)*6)}
  .hero-text,.hero-cta{align-self:auto}
  .hero-cta{margin-top:0}
  .phone-wrap{justify-self:center;width:min(100%,300px)}
  .iphone .screen{height:480px}
  .bar{grid-template-columns:1fr;border-radius:26px;padding:8px}
  .bar input{background:rgba(255,255,255,.6)}
  section{padding:calc(var(--u)*7) 0}
  .page{padding:0 22px}
}

/* Post-signup questions from Red, inside the done card */
[hidden]{display:none!important}
.askred{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.askred .mini{min-height:0;margin-top:0}
.askred .mini .b{max-width:88%}
.done .askred form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.askred input{font:inherit;font-size:15px;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--hair);border-radius:999px;padding:10px 14px;width:100%;min-width:0}
.askred input:focus{outline:none;border-color:var(--ink)}
.askred .status{font-size:13px;color:var(--slate);margin-top:6px;display:block}
.askred .status.err{color:var(--thread-text)}

/* The application stepper: same chat grammar, standalone card */
.apply.stepper{border-top:none;margin-top:0;padding:20px 22px 16px}
.stepper form{display:flex;flex-wrap:wrap;gap:8px}
.stepper input[name=a]{flex:1 1 170px;min-width:0}
.stepper .skip{white-space:nowrap;flex:none}
.step-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:18px;margin-top:6px}
.step-count{font-size:12px;color:var(--graphite);font-variant-numeric:tabular-nums;margin-left:auto}
.hero .apply.stepper{max-width:560px}

/* The tangle: Red's mark. Draws itself in on load; loops (untangle/retangle) when Red is thinking. */
.tangle{display:block;width:100%;height:100%}
.tangle path{fill:none;stroke:var(--thread);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;animation:tangle-in 1.6s cubic-bezier(.3,0,.3,1) .2s both}
@keyframes tangle-in{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.tangle.loop path,.wordmark:hover .dot .tangle path{animation:tangle-loop 3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes tangle-loop{0%{stroke-dashoffset:0}50%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tangle path,.tangle.loop path{animation:none}}
.wordmark .dot{width:22px;height:22px;border-radius:0;background:none;box-shadow:none;display:block}
footer.site .knot{width:22px;height:22px;border-radius:0;background:none;box-shadow:none;display:inline-block;vertical-align:middle}
.b.thinking{padding:7px 12px;display:flex;align-items:center}
.b.thinking .tangle{width:20px;height:20px}
.b.thinking .tangle path{stroke-width:2.8}

/* The gate: a quiet cover. Pull the thread to open the page. */
.gate{position:fixed;inset:0;z-index:60;background:var(--canvas);display:grid;place-items:center;opacity:1;transition:opacity .55s ease,transform .7s cubic-bezier(.55,0,.35,1)}
.gate::before{content:'';position:absolute;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(216,18,44,.1),rgba(216,18,44,0));pointer-events:none}
.gate-in{position:relative;display:grid;justify-items:center;gap:18px;padding:24px;text-align:center}
.gate-tangle{width:104px;height:104px}
.gate-tangle path{stroke-width:2}
.gate-name{font-weight:500;font-size:19px;letter-spacing:-.01em}
.gate-line{font-size:15px;color:var(--graphite);margin:0;max-width:24em}
.gate-btn{margin-top:10px;padding:15px 26px;font-size:15px}
.gate.leaving{opacity:0;transform:translateY(-3vh)}
.gate.leaving .gate-tangle path{animation:tangle-out .7s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes tangle-out{to{stroke-dashoffset:100}}
html.gated{overflow:hidden}
html.gated .rise{animation-play-state:paused}


/* Ultra pass: motion + depth (2026-09-03) */
.glass.deep{background:var(--card-strong);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.nodes li.glass{background:rgba(255,255,255,.44)}
#how::before{content:"";position:absolute;inset:-12% -18%;background:radial-gradient(42% 55% at 78% 18%,rgba(255,176,5,.11),transparent 70%);filter:blur(70px);z-index:0;pointer-events:none}
#eco::before{content:"";position:absolute;inset:-12% -18%;background:radial-gradient(42% 55% at 15% 70%,rgba(120,130,255,.09),transparent 70%);filter:blur(70px);z-index:0;pointer-events:none}
#invite::before{content:"";position:absolute;inset:-12% -18%;background:radial-gradient(42% 55% at 50% 60%,rgba(216,18,44,.1),transparent 70%);filter:blur(70px);z-index:0;pointer-events:none}
#how{padding-top:calc(var(--u)*14)}
#invite{padding-top:calc(var(--u)*14);padding-bottom:calc(var(--u)*13)}
#onboarding{padding-bottom:calc(var(--u)*5)}
#eco{padding-top:calc(var(--u)*5)}
/* the steps line draws; the numerals tie on like knots */
.steps::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.steps.in::before{transform:scaleX(1)}
.steps .n{opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.steps.in .n{opacity:1;transform:scale(1)}
.steps.in li:nth-child(1) .n{transition-delay:.2s}.steps.in li:nth-child(2) .n{transition-delay:.45s}.steps.in li:nth-child(3) .n{transition-delay:.7s}.steps.in li:nth-child(4) .n{transition-delay:.95s}
@media (max-width:820px){.steps::before{transform:scaleY(0);transform-origin:center top}.steps.in::before{transform:scaleY(1)}}
/* the creed lands line by line */
.believe p{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.believe.in p{opacity:1;transform:none}
.believe.in p:nth-child(2){transition-delay:.18s}.believe.in p:nth-child(3){transition-delay:.36s}.believe.in p:nth-child(4){transition-delay:.54s}
.believe.reveal{transition-duration:.7s}
/* the eco list slides on from the thread's side, each pill knotted */
.nodes .reveal{transform:translateX(-16px)}
.nodes .reveal.in{transform:none}
.nodes li.glass{position:relative;padding-left:38px}
.nodes li.glass::before{content:"";position:absolute;left:18px;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--thread);box-shadow:0 0 0 3px rgba(216,18,44,.12)}
/* scenario label swap */
.scen-label{transition:opacity .16s ease,transform .16s ease}
.scen-label.swap{opacity:0;transform:translateY(-6px)}
/* phone realism: sheen + grounded float shadow */
.iphone::after{content:"";position:absolute;inset:0;border-radius:54px;background:linear-gradient(118deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);pointer-events:none}
.phone-wrap{position:relative}
.phone-wrap::after{content:"";position:absolute;left:12%;right:12%;bottom:-30px;height:24px;border-radius:50%;background:radial-gradient(50% 50%,rgba(20,18,10,.16),transparent 70%);filter:blur(6px);animation:floatShadow 7s ease-in-out infinite;z-index:0}
@keyframes floatShadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.92);opacity:.6}}
/* the honest meter: a short thread, a knot at its leading edge */
.meter{display:block;max-width:220px;height:2px;border-radius:2px;background:rgba(0,0,0,.08);margin-top:10px;position:relative}
.meter i{position:absolute;top:0;bottom:0;left:0;width:1%;background:var(--thread);border-radius:2px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.meter i::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--thread)}
.hero-text .chip{margin-bottom:14px}
.fine b{color:var(--ink)}
/* the footer finale */
footer.site{padding-top:calc(var(--u)*12)}
footer.site .knot{width:44px;height:44px}
footer .end > span:first-child{color:var(--thread-text);font-size:15px}
/* nav tangle optics */
.wordmark .dot{transform:translateY(-2px)}
.wordmark .dot .tangle path,footer.site .knot .tangle path{stroke-width:2}
/* mobile nav link tap area */
@media (max-width:820px){.links a{padding:14px 10px;margin:-14px -10px}}
@media (prefers-reduced-motion:reduce){
  .steps::before,.steps.in::before{transform:none;transition:none}
  .steps .n,.steps.in .n{opacity:1;transform:none;transition:none}
  .believe p,.believe.in p{opacity:1;transform:none;transition:none}
  .nodes .reveal{transform:none}
  .convo,.convo.fade{transform:none}
  .phone-wrap::after{animation:none}
  .scen-label,.scen-label.swap{opacity:1;transform:none;transition:none}
}
html.static .steps::before{transform:none;transition:none}
html.static .steps .n{opacity:1;transform:none;transition:none}
html.static .believe p{opacity:1;transform:none;transition:none}