/* The landing page. Dark-first, on the app icon's own palette: the Midnight
   ground (D9) and the clay lamp (D12). The persona pages keep style.css. */
:root {
  --bg: #0B1416;
  --bg-2: #0E191C;
  --card: #122024;
  --card-2: #172a2f;
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .14);
  --text: #F2F4F3;
  --muted: rgb(242 244 243 / .64);
  --faint: rgb(242 244 243 / .42);
  --clay: #DB8A6B;
  --clay-ink: #E9A186;
  --cream: #F3EFE8;
  --ok: #6FCF97;
  --wait: #F2B84B;
  --glow: rgb(219 138 107 / .16);
  --shadow: 0 40px 120px -24px rgb(0 0 0 / .65);
  --r: 20px;
  --max: 1160px;
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "New York", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F4F1; --bg-2: #EFEDE8; --card: #FFFFFF; --card-2: #F7F6F3;
    --line: rgb(16 27 30 / .09); --line-2: rgb(16 27 30 / .16);
    --text: #101B1E; --muted: rgb(16 27 30 / .66); --faint: rgb(16 27 30 / .46);
    --clay-ink: #A9532F; --glow: rgb(219 138 107 / .22);
    --shadow: 0 40px 100px -30px rgb(16 27 30 / .35);
    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Grain: keeps the gradients from looking synthetic. Behind everything
   (z-index -1 over the root's background), so it textures the page but never
   Maya's videos or the app screens. */
html::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--clay-ink); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; border: 0; cursor: pointer; font: 600 15px/1 var(--sans);
  background: var(--cream); color: #101B1E; transition: transform .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); background: #fff; }
.btn.sm { height: 36px; padding: 0 16px; font-size: 14px; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn { background: #101B1E; color: var(--cream); }
}
.arrow { transition: transform .15s ease; }
a:hover .arrow, button:hover .arrow { transform: translateX(2px); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 88px 0 56px; }
.hero::before {                                  /* the lamp's light */
  content: ""; position: absolute; inset: -120px 0 auto 0; height: 900px; pointer-events: none;
  background:
    radial-gradient(38% 42% at 72% 38%, var(--glow), transparent 70%),
    radial-gradient(30% 30% at 20% 10%, rgb(111 160 170 / .10), transparent 70%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
.hero h1 {
  margin: 22px 0 22px; font-weight: 600; font-size: clamp(2.8rem, 6.2vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.035em;
}
.hero h1 .serif { font-size: 1.08em; letter-spacing: -.02em; }
.lede { font-size: 19px; color: var(--muted); max-width: 30em; }
.lede b { color: var(--text); font-weight: 500; }
.signup { display: flex; gap: 8px; margin-top: 32px; max-width: 460px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 999px; }
.signup input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text);
  font: 400 16px var(--sans); padding: 0 14px; outline: none;
}
.signup input::placeholder { color: var(--faint); }
.signup:focus-within { border-color: var(--clay); }
.fine { margin-top: 14px; font-size: 13.5px; color: var(--faint); display: flex; gap: 8px; align-items: center; }
.fine .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); flex: none; }

.stage { position: relative; height: 640px; }
.phone {
  position: absolute; right: 12px; top: 0; width: 300px;
  border-radius: 54px; padding: 11px; background: #05090A;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 0 0 2px #05090A, var(--shadow);
}
/* The screen takes the screenshot's own proportions (an iPhone 18 Pro, 402×874
   points) and its corner (62pt of 402), so the capture is shown whole: a
   phone-shaped guess cropped its sides and put the bar buttons on the bezel. */
.screen {
  position: relative; aspect-ratio: 1206 / 2622; border-radius: 15.4% / 7.1%;
  overflow: hidden; background: #0E1A1D;
}
.screen img { display: block; width: 100%; height: 100%; }


.reel {
  position: absolute; left: 0; top: 96px; width: 232px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
  transform: rotate(-4deg); box-shadow: 0 0 0 1px rgb(255 255 255 / .12), var(--shadow); background: #111;
}
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel .tag {
  position: absolute; left: 10px; top: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 8px; border-radius: 8px; background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(8px);
}
.reel .pause {
  position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(0 0 0 / .45); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px);
}
/* The render Live Activity, as the app draws it on the Lock Screen: its card
   colours, the clay status, a count-up clock and one bar per take. */
.act {
  padding: 14px 16px 16px; border-radius: 24px; text-align: left;
  background: #1A2A2E; color: #F2F4F3; border: 1px solid rgb(255 255 255 / .08);
  font-size: 13px; line-height: 1.25;
}
.live { position: absolute; left: 0; bottom: 96px; width: 300px; box-shadow: 0 24px 60px -18px rgb(0 0 0 / .55); }
.step .act { margin-top: 20px; }
.la-top { display: flex; align-items: center; justify-content: space-between; }
.la-app { display: flex; align-items: center; gap: 6px; font-weight: 600; color: rgb(242 244 243 / .6); }
.la-app svg { width: 13px; height: 15px; color: #F2F4F3; }
.la-status { display: flex; align-items: center; gap: 5px; font-weight: 600; color: #DB8A6B; }
.la-status svg { width: 14px; height: 14px; }
.la-main { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; }
.la-words { flex: 1; min-width: 0; }
.la-words b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.la-who { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: rgb(242 244 243 / .6); font-size: 13px; }
.la-who img { width: 18px; height: 18px; border-radius: 50%; }
.la-clock { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.la-steps { display: flex; gap: 5px; margin-top: 12px; }
.la-steps i { flex: 1; height: 5px; border-radius: 3px; background: #24383D; }
.la-steps i.on { background: #DB8A6B; }

/* ---------- Platform strip ---------- */
.strip { border-block: 1px solid var(--line); padding: 22px 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.strip .track { display: flex; gap: 72px; width: max-content; animation: slide 36s linear infinite; }
.strip span { font: 500 15px var(--sans); color: var(--faint); letter-spacing: -.01em; display: flex; gap: 10px; align-items: center; }
.strip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section.block { padding: 120px 0 40px; }
.head { max-width: 920px; margin-bottom: 48px; }
.head > p { max-width: 36em; }
.head h2 { margin-top: 16px; font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; }
.head p { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 36em; }

/* ---------- Bento ---------- */
.mac-shot {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -30px rgb(0 0 0 / .6);
}
.mac-shot img { display: block; width: 100%; height: auto; }
.mac-shot.library { margin-top: 56px; }
.proof .cap { margin-top: 16px; font-size: 15px; color: var(--muted); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 16px; }
.cell {
  --x: 50%; --y: 0%;
  position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card); padding: 26px 26px 0; min-height: 340px; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.cell::before {                                        /* cursor spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(420px circle at var(--x) var(--y), rgb(219 138 107 / .10), transparent 60%);
}
.cell:hover { border-color: var(--line-2); }
.cell:hover::before { opacity: 1; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: 1 / -1; }
.cell h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.cell p { margin-top: 8px; color: var(--muted); font-size: 15.5px; max-width: 34em; }
.art { margin-top: auto; padding-top: 26px; position: relative; }

/* Real app screens rising from the bottom of a cell, like a phone held up. */
.peek.wide img { max-width: 1100px; border-radius: 14px 14px 0 0; }
.peek { display: flex; justify-content: center; gap: 14px; }
.peek picture { flex: 1; max-width: 330px; min-width: 0; }
.peek img {
  display: block; width: 100%; height: auto; border-radius: 26px 26px 0 0;
  border: 1px solid var(--line-2); border-bottom: 0; box-shadow: 0 -10px 40px rgb(0 0 0 / .18);
}

/* mini UI pieces inside cells (light-on-dark app chrome in both themes) */
.ui { background: #14252A; color: #F2F4F3; border: 1px solid rgb(255 255 255 / .08); border-radius: 18px 18px 0 0; border-bottom: 0; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .07); margin: 0 18px 18px; }
.seg span { flex: 1; text-align: center; padding: 9px 0; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(242 244 243 / .6); }
.seg .on { background: var(--ok); color: #06240f; }



.voice { padding: 14px 16px 18px; }
.take { display: flex; align-items: center; gap: 12px; }
.take-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .07); color: rgb(242 244 243 / .7); }
.take-icon svg { width: 16px; height: 16px; }
.take b { display: block; font-size: 15px; }
.take span { font-size: 12.5px; color: rgb(242 244 243 / .6); }
.take em { font-style: normal; color: var(--ok); }
.take .dur { margin-left: auto; font: 500 12px var(--mono); color: rgb(242 244 243 / .6); }
.voice .wave { margin-top: 14px; }
.voice .seg { margin: 14px 0 0; }
.wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.wave i { flex: 1; border-radius: 2px; background: rgb(242 244 243 / .35); }
.wave i.p { background: var(--clay); }

.pulse { padding: 14px; display: grid; gap: 8px; }
.pulse div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .05); font-size: 13px; }
.pulse .pick { background: rgb(219 138 107 / .14); }
.pulse .pick em { color: var(--clay); }
.pulse em { font-style: normal; font: 500 11px var(--mono); color: rgb(242 244 243 / .55); white-space: nowrap; }


.lock { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 26px; }
.lock .siri { border-radius: 22px; padding: 14px 16px; background: #14252A; color: #F2F4F3; border: 1px solid rgb(255 255 255 / .08); }
.lock .siri b { font-size: 14px; }
.lock .siri span { display: block; font-size: 12.5px; color: rgb(242 244 243 / .65); margin-top: 6px; }
.lock .siri .orb { width: 26px; height: 26px; border-radius: 50%; margin-bottom: 8px; background: conic-gradient(from 90deg, #DB8A6B, #7FB3BD, #F3EFE8, #DB8A6B); }

/* The post screen's "goes out" lines, one per platform. */
.posting { padding: 12px; display: grid; gap: 8px; }
.posting div { padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .05); }
.posting b { display: block; font-size: 14px; }
.posting span { font-size: 12.5px; color: rgb(242 244 243 / .6); }

.dm { padding: 16px; display: grid; gap: 10px; font-size: 13px; }
.dm .c { display: flex; gap: 8px; align-items: flex-start; }
.dm .av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #7FB3BD, #2c4a51); }
.dm .c img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.dm .c p { margin: 0; color: #F2F4F3; font-size: 13px; }
.dm .c p b { font-weight: 600; margin-right: 6px; }
.dm .bubble { justify-self: end; max-width: 80%; padding: 10px 13px; border-radius: 18px 18px 4px 18px; background: var(--clay); color: #1c0f09; font-weight: 500; }
.dm .note { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: rgb(242 244 243 / .45); text-align: center; }


/* ---------- Utilities ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.more { margin-top: 28px; font-weight: 500; }
.more a { color: var(--clay-ink); }
.center { justify-content: center; text-align: center; }

/* ---------- Waitlist steps ---------- */
.wl { margin-top: 32px; max-width: 480px; }
.wl .signup { margin-top: 0; }
.wl-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 22px; text-align: left; }
.wl-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.wl-card > p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 8px 13px; border-radius: 999px; font-size: 14px; border: 1px solid var(--line-2); color: var(--muted); transition: all .15s ease; }
.chips input:checked + span { background: var(--clay); border-color: var(--clay); color: #1c0f09; }
.chips input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }
.wl-card .field { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 400 15px var(--sans); }
.wl-card .field:focus { outline: none; border-color: var(--clay); }
.wl-card .check { color: var(--muted); font-size: 14px; display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.wl-card .check input { accent-color: var(--clay); width: 16px; height: 16px; }
.wl-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.linkish { background: none; border: 0; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; }
.linkish:hover { color: var(--text); }
.wl-error { color: #F08C7A; font-size: 14px; margin-top: 10px; min-height: 1em; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ---------- Proof ---------- */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reels figure { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--card); aspect-ratio: 9 / 16; }
.reels figure { position: relative; }
.reels video, .reels img { width: 100%; height: 100%; object-fit: cover; }
.reels .tag {
  position: absolute; left: 12px; top: 12px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 8px; border-radius: 8px; background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(8px);
}
.reels figure:nth-child(2) { transform: translateY(32px); }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.steps-side { position: sticky; top: 120px; }
.steps-side h2 { margin-top: 16px; font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; }
.steps-nav { list-style: none; padding: 0; margin-top: 36px; display: grid; gap: 4px; counter-reset: s; }
.steps-nav li { counter-increment: s; display: flex; gap: 14px; align-items: center; padding: 8px 0; color: var(--faint); font-weight: 500; transition: color .2s ease; }
.steps-nav li::before { content: "0" counter(s); font: 500 12px var(--mono); width: 28px; }
.steps-nav li::after { content: ""; flex: 1; height: 1px; background: var(--line); transition: background .2s ease; }
.steps-nav li.on { color: var(--text); }
.steps-nav li.on::after { background: var(--clay); }
.steps-list { list-style: none; padding: 0; display: grid; gap: 20px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.step .n { font: 500 12px var(--mono); color: var(--clay-ink); }
.step h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }
.step > p { color: var(--muted); margin-top: 8px; }
.step .ui { margin-top: 20px; border-radius: 16px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.step .seg { margin: 12px; }
/* The script screen's on-screen hook card and first scene card. */
.script { padding: 12px; display: grid; gap: 8px; }
.script .lbl { display: flex; justify-content: space-between; font-size: 12px; color: rgb(242 244 243 / .55); }
.hook-card, .scene-card { padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .05); }
.hook-card b { display: block; margin-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.scene-card p { font-family: var(--serif); font-size: 17px; line-height: 1.35; margin-top: 6px; }

/* ---------- A day ---------- */
.day { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.day li { padding: 22px 18px 0 0; position: relative; }
.day li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.day li.you::before { background: var(--clay); box-shadow: 0 0 0 6px var(--glow); }
.day time { font: 500 13px var(--mono); color: var(--faint); }
.day b { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; }
.day span { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.day li.you b { color: var(--clay-ink); }

/* ---------- Why ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why > div, .fit > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.why h3, .fit h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.why p { color: var(--muted); margin-top: 8px; font-size: 16px; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.fit > div { background: transparent; }
.fit ul { margin-top: 12px; padding-left: 1.1em; color: var(--muted); display: grid; gap: 6px; }

/* ---------- Build ---------- */
/* Works with Claude: the pitch beside an example exchange (our drawing, not a
   screenshot of any client). */
.mcp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mcp h2 { margin-top: 16px; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.03em; line-height: 1.05; }
.mcp > div > p { color: var(--muted); margin-top: 16px; font-size: 18px; max-width: 32em; }
.points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 22px; color: var(--muted); font-size: 16px; }
.points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.points b { color: var(--text); font-weight: 600; }
.chat {
  background: #14252A; color: #F2F4F3; border: 1px solid rgb(255 255 255 / .08); border-radius: 22px;
  padding: 22px; box-shadow: var(--shadow); font-size: 15px;
}
.chat-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.chat-head small { font-weight: 500; color: rgb(242 244 243 / .5); margin-left: auto; font-size: 12px; }
.chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.chat .ask { margin: 18px 0 0 auto; width: fit-content; max-width: 85%; background: var(--clay); color: #1c0f09; font-weight: 500; padding: 10px 14px; border-radius: 16px 16px 4px 16px; }
.chat .tools { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat .tools code { font: 500 11.5px var(--mono); padding: 4px 8px; border-radius: 7px; background: rgb(255 255 255 / .06); color: rgb(242 244 243 / .7); border: 1px solid rgb(255 255 255 / .08); }
.chat .answer { margin-top: 10px; display: grid; gap: 6px; color: rgb(242 244 243 / .85); line-height: 1.45; }
.chat .answer b { color: #fff; font-weight: 600; }

.build { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 48px; overflow: hidden; position: relative; }
.build h2 { margin-top: 16px; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.03em; line-height: 1.05; }
.build p { color: var(--muted); margin-top: 14px; max-width: 32em; }
.build img { width: 100%; max-width: 280px; justify-self: end; border-radius: 18px; transform: rotate(3deg); box-shadow: var(--shadow); aspect-ratio: 9/16; object-fit: cover; }

/* ---------- Join ---------- */
.join { text-align: center; padding: 72px 24px; border-radius: 28px; border: 1px solid var(--line); position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, var(--glow), transparent 70%), var(--bg-2); }
.join h2 { margin-top: 16px; font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -.035em; line-height: 1.02; }
.join > p { color: var(--muted); margin: 16px auto 0; max-width: 30em; }
.join .wl { margin: 32px auto 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.qs { border-top: 1px solid var(--line); }
.qs details { border-bottom: 1px solid var(--line); }
.qs summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-size: 18px; font-weight: 500; position: relative; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 24px; font-weight: 300; color: var(--faint); transition: transform .2s ease; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs details p { color: var(--muted); padding: 0 36px 22px 0; }
.qs a { color: var(--clay-ink); }

/* ---------- Footer ---------- */
footer.foot { margin-top: 120px; border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--faint); font-size: 14px; }
footer.foot .wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
footer.foot a:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .mcp { grid-template-columns: 1fr; gap: 36px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { height: 600px; max-width: 520px; width: 100%; margin: 0 auto; }
  .bento { grid-template-columns: 1fr 1fr; }
  .s2, .s3 { grid-column: span 1; } .s4 { grid-column: span 2; }
  .steps, .faq { grid-template-columns: 1fr; gap: 32px; }
  .steps-side { position: static; }
  .steps-nav { display: none; }
  .day { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); padding-left: 22px; gap: 22px; }
  .day li { padding: 0; }
  .day li::before { top: 6px; left: -27px; }
  .why { grid-template-columns: 1fr; }
  .build { grid-template-columns: 1fr; padding: 32px; }
  .build img { justify-self: center; max-width: 220px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: 48px; }
  .signup { flex-direction: column; border-radius: 22px; }
  .signup input { height: 44px; }
  /* Keep the desktop composition and shrink it whole, rather than squeezing the phone. */
  .stage { width: 520px; max-width: none; height: 640px; zoom: .66; margin: 0 auto; }
  .bento { grid-template-columns: 1fr; }
  .s2, .s3, .s4 { grid-column: span 1; }
  .lock { grid-template-columns: 1fr; }
  section.block { padding-top: 88px; }
  .reels { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; }
  .reels figure { scroll-snap-align: center; }
  .reels figure:nth-child(2) { transform: none; }
  .fit { grid-template-columns: 1fr; }
  .join { padding: 48px 18px; }
  .step { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip .track { animation: none; }
  .reels figure:nth-child(2) { transform: none; }
  .cell, .btn, .arrow { transition: none; }
}

/* ---------- /join ---------- */
.joinpage { min-height: calc(100vh - 64px - 120px); }
.joinside { display: grid; gap: 12px; }
.joinside .step { padding: 22px 24px; }
.joinside .step h3 { font-size: 18px; margin-top: 6px; }
.joinside .step p { font-size: 15px; margin-top: 4px; }
.fine + .fine { margin-top: 6px; }
.fine a { color: var(--clay-ink); }