/* Talk Crew landing. Colours mirror design/brand/talkcrew/tokens/talkcrew.css. */

:root {
  /* Display font is a single token (brand face: Sora). To change it, swap the Google Fonts
     link in index.html and this value; every headline and big number follows. */
  --tc-font-display: "Sora", Geist, system-ui, sans-serif;
  --tc-font-body: Geist, system-ui, sans-serif;
  --tc-font-mono: "Geist Mono", ui-monospace, monospace;

  --tc-ink: #16181D;
  --tc-ink-2: #2A2D35;
  --tc-paper: #F6F1E7;
  --tc-signal: #FF5B2E;
  --tc-chat: #BCD7FF;      --tc-chat-hi: #E3EEFF;      --tc-chat-ink: #1E4FA3;
  --tc-voice: #FFC9A8;     --tc-voice-hi: #FFE6D6;     --tc-voice-ink: #9A3F12;
  --tc-email: #FFE48F;     --tc-email-hi: #FFF3C9;     --tc-email-ink: #6E5200;
  --tc-whatsapp: #AEEACB;  --tc-whatsapp-hi: #DDF6E9;  --tc-whatsapp-ink: #146B48;
  --tc-agent: #D9C9FF;

  --text-2: #5f5a52;
  --text-3: #8d877c;
  --line: rgb(22 24 29 / .09);
  --glass: rgb(255 255 255 / .62);
  --glass-line: rgb(255 255 255 / .85);
  --shadow: 0 1px 2px rgb(60 40 10 / .05), 0 18px 40px -22px rgb(60 40 10 / .28);
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--tc-font-body);
  color: var(--tc-ink);
  background: var(--tc-paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* Pastel mist, fixed behind everything: matte, low contrast, no highlights. */
.mist { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 100%, rgb(188 215 255 / .55), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgb(174 234 203 / .45), transparent 70%),
    radial-gradient(40% 35% at 100% 0%, rgb(255 201 168 / .28), transparent 70%),
    var(--tc-paper);
}

.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.display { font-family: var(--tc-font-display); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.muted { color: var(--text-3); }
.eyebrow { font: 500 11.5px var(--tc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lede { font-size: clamp(16px, 1.45vw, 19px); color: var(--text-2); max-width: 32em; line-height: 1.55; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; white-space: nowrap; transition: transform .15s var(--ease), background .2s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--tc-ink); color: #fff; }
.btn-ink:hover { background: var(--tc-ink-2); }
.btn-signal { background: var(--tc-signal); color: var(--tc-ink); }
.btn-glass { background: var(--glass); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--glass-line), 0 1px 2px rgb(60 40 10 / .06); }
.btn-glass:hover { background: rgb(255 255 255 / .85); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip-live { background: #E6F7EE; color: #1F7A52; }
.chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2FB574; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.glass { background: var(--glass); backdrop-filter: blur(22px) saturate(1.1); border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--shadow); }

/* Placeholder marker (prices not final). */
.tbd { display: inline-flex; align-items: center; font: 500 10.5px var(--tc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-voice-ink); border: 1px dashed currentColor; border-radius: 6px; padding: 2px 6px; vertical-align: middle; white-space: nowrap; }

/* ---------- Floating nav ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 30; }
.nav .bar { width: min(1240px, 100% - 24px); margin-inline: auto; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 10px 0 20px; border-radius: 20px; background: rgb(246 241 231 / .7); backdrop-filter: blur(18px); border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 8px 30px -18px rgb(60 40 10 / .25); }
.nav .logo img { height: 24px; width: auto; }
.nav .links { display: flex; gap: 26px; font-size: 14.5px; color: var(--text-2); margin-inline: auto; }
.nav .links a:hover { color: var(--tc-ink); }
.nav .end { display: flex; align-items: center; gap: 6px; }
.nav .signin { font-size: 14.5px; padding: 0 12px; color: var(--text-2); }
.nav .bar, .nav .links, .nav .signin { transition: background .5s, color .5s, border-color .5s; }
.nav .on-dark { display: none; }
body.nightnav .nav .bar { background: rgb(22 24 29 / .55); border-color: rgb(255 255 255 / .1); }
body.nightnav .nav .links, body.nightnav .nav .signin { color: rgb(255 255 255 / .7); }
body.nightnav .nav .on-light { display: none; }
body.nightnav .nav .on-dark { display: block; }
body.nightnav .nav .btn-ink { background: #fff; color: var(--tc-ink); }

/* ---------- Scroll story ---------- */
.story { height: 560vh; position: relative; }
.anchor { position: absolute; top: 33%; }
.static .anchor { ; bottom: 0; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.layer { position: absolute; inset: 0; display: flex; pointer-events: none; }
.layer > * { pointer-events: auto; }

.t0 { align-items: center; }
.t0 .inner { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.t0 h1 { font-size: clamp(42px, 4.75vw, 76px); }
.t0 .lede { margin-top: 26px; max-width: 27em; }
.cta-row { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.hero-note { margin-top: 20px; font-size: 13.5px; color: var(--text-3); display: flex; gap: 18px; flex-wrap: wrap; }
.scrollcue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 11px var(--tc-font-mono); letter-spacing: .14em; color: var(--text-3); }
.scrollcue::after { content: ""; width: 1px; height: 36px; background: linear-gradient(var(--text-3), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2FB574; margin-right: 8px; vertical-align: 1px; animation: pulse 1.6s infinite; }

/* The mark: four petal-shaped windows, each playing a live conversation. Placed by main.js. */
.mark { position: absolute; left: 0; top: 0; width: 640px; height: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2%; transform-origin: 0 0; will-change: transform; z-index: 2; }
.pet { position: relative; overflow: hidden; will-change: transform; font-size: var(--fs, 13px); transition: box-shadow .4s var(--ease); }
.pet-chat { border-radius: 50% 50% 0 50%; background: linear-gradient(150deg, var(--tc-chat-hi), var(--tc-chat)); }
.pet-voice { border-radius: 50% 50% 50% 0; background: linear-gradient(150deg, var(--tc-voice-hi), var(--tc-voice)); }
.pet-whatsapp { border-radius: 50% 0 50% 50%; background: linear-gradient(150deg, var(--tc-whatsapp-hi), var(--tc-whatsapp)); }
.pet-email { border-radius: 0 50% 50% 50%; background: linear-gradient(150deg, var(--tc-email-hi), var(--tc-email)); }
.win { position: absolute; inset: 15% 14% 15% 16%; display: flex; flex-direction: column; justify-content: center; gap: .8em; }
.pet-voice .win { inset: 17% 17% 15% 15%; }
.pet-whatsapp .win { inset: 15% 15% 17% 17%; }
.pet-email .win { inset: 15% 17% 17% 15%; }
.wh { display: flex; align-items: center; gap: .5em; font-size: .9em; color: rgb(22 24 29 / .62); }
.wh b { font-weight: 500; white-space: nowrap; }
.wh .ld { width: .5em; height: .5em; border-radius: 50%; background: #2FB574; flex: none; animation: pulse 2s infinite; }
.feed { display: flex; flex-direction: column; gap: .5em; min-height: 0; }
.feed > * { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feed > .on { opacity: 1; transform: none; }
.feed.out > * { opacity: 0; transition-duration: .6s; }
.feed > .leave { opacity: 0; transform: translateY(-6px); }
.feed > .gone { display: none; }
.b { max-width: 86%; padding: .55em .85em; border-radius: 1.2em; line-height: 1.3; background: rgb(255 255 255 / .82); align-self: flex-start; border-bottom-left-radius: .35em; }
.b.a { align-self: flex-end; background: var(--tc-ink); color: #fff; border-bottom-left-radius: 1.2em; border-bottom-right-radius: .35em; }
.pet-whatsapp .b.a { background: #14532d; }
.t { line-height: 1.3; }
.t small, .mail small { display: block; font: 500 .72em var(--tc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(22 24 29 / .45); }
.t.a { color: var(--tc-voice-ink); }
.pet-voice .wave { height: 2em; }
.mail { background: rgb(255 255 255 / .8); border-radius: .9em; padding: .6em .8em; line-height: 1.35; }
.mail.a { background: rgb(255 255 255 / .95); }
.sent { font-size: .85em; font-weight: 600; color: #1F7A52; }
.typingb { align-self: flex-end; background: var(--tc-ink); border-radius: 1.2em; padding: .65em .9em; display: inline-flex; gap: 4px; }
.typingb i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.typingb i:nth-child(2) { animation-delay: .15s; } .typingb i:nth-child(3) { animation-delay: .3s; }

/* ---------- A day with your crew (scroll time-lapse) ---------- */
.night { position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(70% 60% at 50% 45%, #232634, #16181D 70%); pointer-events: none; }
.flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.day { z-index: 4; display: block; color: var(--tc-ink); transition: color .6s var(--ease); }
.day .dayclock { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); text-align: center; }
.bigclock { font-size: clamp(60px, 7.6vw, 120px); font-weight: 500; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -.05em; margin-top: 10px; }
.phase { margin-top: 10px; font-size: 15px; color: var(--text-2); transition: color .6s; min-height: 1.5em; }
.counters { position: absolute; top: 38%; display: grid; gap: 36px; width: min(22vw, 270px); }
.counters.left { left: max(32px, 4.5vw, calc(50vw - 700px)); }
.counters.right { right: max(32px, 4.5vw, calc(50vw - 700px)); text-align: right; }
.ctr b { display: block; font-size: clamp(36px, 3.7vw, 56px); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.ctr span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); transition: color .6s; }
.ctr.save b { color: var(--tc-signal); }
.hub { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: var(--tc-ink); display: grid; place-items: center; box-shadow: 0 0 0 8px rgb(22 24 29 / .06), 0 20px 40px -18px rgb(22 24 29 / .6); transition: box-shadow .3s; }
.hub svg { width: 54px; height: 54px; animation: spin 24s linear infinite; }
.hub.ping { box-shadow: 0 0 0 14px rgb(22 24 29 / .09), 0 20px 40px -18px rgb(22 24 29 / .6); }
@keyframes spin { to { transform: rotate(360deg); } }
.hubcap { position: absolute; left: 50%; top: calc(50% + 72px); transform: translateX(-50%); font: 500 11.5px var(--tc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; transition: color .6s; }
.ledger { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); width: min(440px, 40vw); list-style: none; padding: 0; display: grid; gap: 8px; }
.ledger li { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-radius: 16px; background: rgb(255 255 255 / .78); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 10px 26px -18px rgb(60 40 10 / .4); font-size: 14.5px; animation: pop .5s var(--ease) both; }
.ledger li:nth-child(2) { opacity: .72; } .ledger li:nth-child(3) { opacity: .45; }
.ledger li i { width: 10px; height: 10px; border-radius: 50%; }
.ledger li time { font: 500 12px var(--tc-font-mono); color: var(--text-3); }
.ledger li b { font-weight: 500; }
.ledger li b::before { content: "✓ "; color: #2FB574; }
@keyframes pop { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.footnote { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12px; color: var(--text-3); white-space: nowrap; transition: color .6s; }
/* After dark the stage goes ink and the crew keeps going. */
.stage.dark .day { color: #fff; }
.stage.dark .phase, .stage.dark .ctr span { color: rgb(255 255 255 / .62); }
.stage.dark .hubcap, .stage.dark .footnote, .stage.dark .day .eyebrow { color: rgb(255 255 255 / .45); }
.stage.dark .hub { background: #fff; box-shadow: 0 0 0 8px rgb(255 255 255 / .06); }
.stage.dark .hub.ping { box-shadow: 0 0 0 14px rgb(255 255 255 / .1); }
.stage.dark .ledger li { background: rgb(42 45 53 / .85); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.stage.dark .ledger li b::before { color: #6EE7A8; }

.t0 { z-index: 3; }

.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave span { width: 3px; border-radius: 3px; background: var(--tc-voice-ink); opacity: .7; animation: wave 1.2s var(--ease) infinite alternate; }
@keyframes wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- Sections ---------- */
section { padding: 140px 0; position: relative; }
.head { max-width: 860px; }
.head h2 { font-size: clamp(38px, 4.6vw, 68px); margin-top: 18px; }
.head .lede { margin-top: 20px; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

/* Everyday life: illustrative conversations */
.life { display: grid; gap: 22px; margin-top: 72px; }
.scene { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; padding: 44px; border-radius: 34px; }
.scene:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
.scene:nth-child(even) .copy { order: 2; }
.scene .copy h3 { font-size: clamp(26px, 2.5vw, 36px); margin-top: 14px; }
.scene .copy p { color: var(--text-2); margin-top: 14px; max-width: 28em; }
.scene .tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.scene .tag svg { width: 22px; height: 22px; }
.s-chat { background: linear-gradient(160deg, rgb(227 238 255 / .9), rgb(188 215 255 / .55)); }
.s-voice { background: linear-gradient(160deg, rgb(255 230 214 / .9), rgb(255 201 168 / .5)); }
.s-email { background: linear-gradient(160deg, rgb(255 243 201 / .9), rgb(255 228 143 / .45)); }
.s-whatsapp { background: linear-gradient(160deg, rgb(221 246 233 / .9), rgb(174 234 203 / .5)); }
.convo { padding: 22px; display: grid; gap: 12px; font-size: 15px; }
.msg { display: grid; gap: 3px; max-width: 88%; }
.msg small { font: 500 10.5px var(--tc-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.msg div { padding: 11px 15px; border-radius: 18px; line-height: 1.4; }
.msg.you div { background: rgb(255 255 255 / .9); border-top-left-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.msg.ai { justify-self: end; text-align: left; }
.msg.ai small { text-align: right; }
.msg.ai div { background: var(--tc-ink); color: #fff; border-top-right-radius: 6px; }
.did { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.did span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .75); color: var(--text-2); }
.did span::before { content: "✓ "; color: #2FB574; font-weight: 700; }
.illus { font-size: 12.5px; color: var(--text-3); margin-top: 18px; text-align: center; }

/* One brain */
.brain-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.shared { padding: 28px; }
.shared .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.shared .hd b { font-size: 16px; font-weight: 600; }
.minimark { width: 26px; height: 26px; }
.shared .row { display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 14.5px; align-items: center; }
.shared .row:first-of-type { border-top: 0; }
.shared .row b { font-weight: 600; }
.shared .row span { color: var(--text-2); }
.shared .row em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--text-3); }

/* Step in from anywhere */
.anywhere { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; margin-top: 72px; align-items: stretch; }
.spot { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.spot h3 { font-size: 26px; }
.spot p { color: var(--text-2); font-size: 15px; }
.spot .vis { margin-; padding-top: 22px; }
.phone { background: #1d1f25; border-radius: 34px; padding: 18px 14px 22px; color: #fff; position: relative; overflow: hidden; }
.phone::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 20% 0%, rgb(188 215 255 / .25), transparent 70%), radial-gradient(70% 60% at 100% 100%, rgb(255 201 168 / .2), transparent 70%); }
.phone > * { position: relative; }
.phone .date { text-align: center; font-size: 13px; color: rgb(255 255 255 / .7); }
.phone .time { text-align: center; font-family: var(--tc-font-display); font-weight: 500; font-size: 60px; line-height: 1; letter-spacing: -.04em; margin: 2px 0 18px; }
.activity { background: rgb(40 42 50 / .85); border-radius: 22px; padding: 14px; display: grid; gap: 10px; }
.activity .r { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.activity .r svg { width: 28px; height: 28px; }
.activity .r small { display: block; color: rgb(255 255 255 / .55); font-size: 12px; }
.activity .b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.activity .b span { height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: rgb(255 255 255 / .1); }
.activity .b span.t { background: #fff; color: var(--tc-ink); }
.slack { background: #fff; border-radius: 18px; padding: 14px 16px; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.slack .ch { font-weight: 600; color: var(--text-3); font-size: 12.5px; }
.slack .m { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.slack .m svg { width: 30px; height: 30px; }
.slack .m b { font-size: 13.5px; }
.queue { background: #fff; border-radius: 18px; padding: 6px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.queue .q { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; }
.queue .q:first-child { background: var(--tc-paper); }
.queue .q svg { width: 24px; height: 24px; }
.queue .q span { color: var(--text-3); font-size: 12.5px; display: block; }
.queue .q em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #F2EEE6; color: var(--text-2); }

/* Pricing */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.cmp { border-radius: 30px; padding: 30px 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cmp.them { background: rgb(255 255 255 / .45); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.cmp.us { background: var(--tc-ink); color: #fff; }
.cmp .big { font-family: var(--tc-font-display); font-weight: 600; font-size: 60px; line-height: 1; letter-spacing: -.03em; }
.cmp.them .big { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .5; }
.cmp.us .big { color: var(--tc-signal); }
.cmp small { display: block; font-size: 14px; margin-top: 6px; }
.cmp.us .tbd { color: var(--tc-signal); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.tier { padding: 30px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.tier.pop { background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1.5px var(--tc-ink), var(--shadow); }
.tier.pop::after { content: "Most teams"; position: absolute; top: -12px; left: 26px; background: var(--tc-ink); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px; }
.tier h3 { font-size: 26px; }
.tier .p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tier .p b { font-family: var(--tc-font-display); font-weight: 600; font-size: 50px; letter-spacing: -.03em; line-height: 1; color: var(--text-3); }
.tier .p span { color: var(--text-2); font-size: 14px; }
.tier ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.tier li { display: flex; gap: 10px; }
.tier li::before { content: "✓"; color: #2FB574; font-weight: 700; }
.tier .btn { margin-; }
.fine { margin-top: 20px; font-size: 13px; color: var(--text-3); text-align: center; }

/* FAQ, numbered */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.faq .head h2 { font-size: clamp(38px, 4vw, 58px); }
.qa details { border-top: 1px solid var(--line); padding: 24px 0; }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 24px; gap: 8px; align-items: baseline; font-size: 19px; font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .n { font: 500 12px var(--tc-font-mono); color: var(--text-3); }
.qa summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--text-3); transition: transform .25s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--text-2); margin: 12px 0 0 52px; max-width: 40em; }

/* Final */
.final { padding: 120px 0 140px; text-align: center; }
.final .mk { width: 120px; margin: 0 auto 36px; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: rotate(8deg) scale(1.04); } }
.final h2 { font-size: clamp(46px, 7vw, 108px); }
.final .lede { margin: 22px auto 0; }
.final .cta-row { justify-content: center; }

/* Ending: one ink card that rises out of the paper page, holding the last call to action and the footer.
   A giant wordmark is cropped by the card's bottom edge. */
.foot { padding: 96px 12px 12px; }
.fcard { --ns-h: clamp(220px, 17vw, 280px); position: relative; overflow: hidden; background: var(--tc-ink); color: #fff; border-radius: 40px; padding: 48px max(32px, calc((100% - 1200px) / 2)) calc(var(--ns-h) + 8px); }
.fcard::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 0% 0%, rgb(188 215 255 / .14), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgb(255 201 168 / .12), transparent 70%); }
.fcard > * { position: relative; z-index: 1; }
.fcta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.fcta h2 { font-size: clamp(34px, 3.6vw, 56px); margin-top: 14px; }
.fe { color: rgb(255 255 255 / .55); }
.fcta-side p { color: rgb(255 255 255 / .66); font-size: 18px; max-width: 26em; line-height: 1.55; }
.fcta-side .cta-row { margin-top: 26px; }
.btn-line { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.btn-line:hover { background: rgb(255 255 255 / .08); }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr; gap: 40px; padding-top: 32px; }
.flogo { height: 26px; width: auto; display: block; margin-bottom: 14px; }
.foot .tag { max-width: 22em; line-height: 1.6; color: rgb(255 255 255 / .66); }
.contact { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 9px; font-size: 15px; }
.contact li { display: flex; align-items: center; gap: 12px; color: rgb(255 255 255 / .75); }
.foot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: background .2s, color .2s; }
.foot .social a:hover { background: #fff; color: var(--tc-ink); }
.foot h4 { font: 500 11.5px var(--tc-font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .45); margin-bottom: 18px; }
.foot ul:not(.contact) { list-style: none; padding: 0; display: grid; gap: 9px; font-size: 15.5px; }
.foot a { color: rgb(255 255 255 / .82); transition: color .2s; }
.foot a:hover { color: #fff; }
.news p { color: rgb(255 255 255 / .66); line-height: 1.55; max-width: 22em; }
.sub { display: flex; margin-top: 18px; border-radius: 999px; padding: 5px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.sub input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 14px; color: #fff; font: inherit; font-size: 15px; outline: none; }
.sub input::placeholder { color: rgb(255 255 255 / .45); }
.sub button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--tc-ink); display: grid; place-items: center; cursor: pointer; }
.sub:focus-within { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); }
.flegal { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; font-size: 13.5px; color: rgb(255 255 255 / .45); }
.flegal nav { display: flex; gap: 22px; }
.flegal nav a { color: rgb(255 255 255 / .45); }
/* Night scene: halftone dots, the mark as a moon over pastel hills (drawn by main.js). */
.night-scene { position: absolute !important; z-index: 0 !important; left: 0; right: 0; bottom: 0; top: 50%; pointer-events: none; }
.night-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 960px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fbrand, .news { grid-column: 1 / -1; }
  .fcta { grid-template-columns: 1fr; gap: 28px; }
  .fcard { border-radius: 28px; padding-top: 64px; }
}
@media (max-width: 620px) {
  .flegal { flex-direction: column; gap: 12px; align-items: flex-start; }
  .flegal nav a:first-child { padding-left: 0; }
    .fcard { padding-left: 24px; padding-right: 24px; }
}

/* Reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Static hero (narrow screens and reduced motion) ---------- */
.static .story { height: auto; }
.static .stage { position: static; height: auto; overflow: visible; padding: 120px 0 24px; }
.static .layer { position: static; display: block; opacity: 1 !important; transform: none !important; visibility: visible !important; }
.static .night, .static .flow, .static .hub, .static .hubcap { display: none; }
.static .day { display: grid !important; gap: 28px; width: min(560px, 100% - 32px); margin: 72px auto 0; }
.static .day > * { position: static !important; transform: none !important; width: auto !important; text-align: left; }
.static .counters { grid-template-columns: 1fr 1fr; gap: 20px; }
.static .counters.right { text-align: left; }
.static .ctr b { font-size: 36px; }
.static .bigclock { font-size: 52px; }
.static .footnote { white-space: normal; }
.static .scrollcue { display: none; }
.static .mark { position: relative; transform: none !important; width: min(560px, 100% - 32px) !important; height: auto !important; aspect-ratio: 1; margin: 48px auto 0; }
.static .pet { transform: none !important; }
.static .feed > :nth-child(n+4) { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the scroll story and conversations (they are the demo); stop purely decorative loops. */
  .scrollcue::after, .final .mk, .hub svg, .livedot, .chip-live::before { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 960px) {
  .nav .links { display: none; }
  .nav .bar { justify-content: space-between; }
  .scene, .scene:nth-child(even), .brain-grid, .faq, .anywhere { grid-template-columns: 1fr; }
  .scene:nth-child(even) .copy { order: 0; }
  .scene { padding: 28px; gap: 28px; }
  .tiers, .compare { grid-template-columns: 1fr; }
  section { padding: 96px 0; }
}
@media (max-width: 620px) {
  .hero-note { gap: 4px 14px; }
  .hero-note span:nth-child(even) { display: none; }
  .nav .signin { display: none; }
  .shared .row { grid-template-columns: 1fr auto; }
  .shared .row span { grid-column: 1 / -1; grid-row: 2; }
  .cmp { flex-direction: column; align-items: flex-start; }
  .cmp .big { font-size: 52px; }
  .qa p { margin-left: 0; }
}