@font-face { font-family: "Kefir"; src: url("fonts/Kefir-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --bg: #FFFFFF; --panel: #F7F6F4; --panel2: #F2F0EC; --ink: #23211D; --soft: #6F6B64; --mute: #9B968D; --line: #E9E6E1;
  --clay: #A5532F;
  --apricot: #F4B98A; --peach: #F6CDB2; --rose: #EBB7C0; --lilac: #CBB8EA; --sky: #A8C7F0; --sage: #C3D6BB;
  --display: "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Kefir", "Iowan Old Style", Georgia, serif;
  --text: "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r: 28px;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-padding-top: 90px; }
body { background: var(--bg); color: var(--ink); font: 400 15.5px/1.45 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* announcement */

.announce a:hover span { color: var(--ink); }
/* header */
.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 28px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 500 17px/1 var(--display); letter-spacing: -.02em; }
.logo .mark { width: 27px; height: 19px; fill: var(--ink); }
.pillnav { display: flex; gap: 2px; padding: 4px; background: var(--panel); border-radius: 999px; }
.pillnav a { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--soft); transition: background .2s, color .2s; }
.pillnav a:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.top-end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.soon { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--soft); }
.soon svg { width: 14px; height: 14px; fill: var(--ink); margin-top: -2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; font: 500 13.5px/1 var(--text); white-space: nowrap; transition: transform .15s, opacity .2s; }
.btn.dark { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08); }
.btn.dark:hover { opacity: .9; }
.btn:active { transform: scale(.98); }
.btn.sm { height: 32px; font-size: 12.5px; }

/* aura — one warm hue, breathing and drifting */
.aura { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.aura i { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform, opacity; }
.aura .b1 { width: 58%; aspect-ratio: 1; top: -26%; right: -14%; background: radial-gradient(circle, #F2B282 0%, rgba(242,178,130,0) 68%); animation: breathe1 11s ease-in-out infinite, drift1 23s ease-in-out infinite alternate; }
.aura .b2 { width: 52%; aspect-ratio: 1; bottom: -30%; left: -12%; background: radial-gradient(circle, #F2CDB4 0%, rgba(242,205,180,0) 68%); animation: breathe2 13s ease-in-out infinite, drift2 27s ease-in-out infinite alternate; }
@keyframes breathe1 { 0%, 100% { opacity: .38; scale: 1; } 50% { opacity: .6; scale: 1.16; } }
@keyframes breathe2 { 0%, 100% { opacity: .35; scale: 1.08; } 50% { opacity: .55; scale: .94; } }
@keyframes drift1 { 0% { translate: 0 0; } 50% { translate: -10% 12%; } 100% { translate: 8% 4%; } }
@keyframes drift2 { 0% { translate: 0 0; } 50% { translate: 14% -10%; } 100% { translate: 4% 8%; } }

/* hero */
main { padding: 0 24px; }
.hero { position: relative; isolation: isolate; max-width: 1400px; margin: 8px auto 0; min-height: min(760px, calc(100svh - 120px)); display: grid; place-items: center; padding: 96px 24px; background: #F8F4EF; border-radius: var(--r); overflow: hidden; }
.hero-inner { position: relative; z-index: 1; max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); font-size: 12.5px; color: var(--soft); }
h1 { margin-top: 22px; font: 300 clamp(50px, 6.6vw, 92px)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.lede { margin-top: 22px; max-width: 520px; font-size: 16px; line-height: 1.45; color: var(--soft); text-wrap: pretty; }
.notify { margin-top: 30px; display: flex; gap: 8px; width: 100%; max-width: 440px; }
.notify input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; font: 400 15px/1 var(--text); color: var(--ink); background: rgba(255,255,255,.85); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); outline: none; transition: box-shadow .2s; }
.notify input::placeholder { color: var(--mute); }
.notify input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.notify input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 0 100px #fff !important; }
.notify .btn { height: 44px; padding: 0 16px; font-size: 14px; }
.note { margin-top: 12px; font-size: 12.5px; color: var(--mute); }
.note.err { color: var(--clay); }
.done { margin-top: 30px; padding: 14px 18px; border-radius: 12px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.done strong { display: block; font: 500 16px/1.3 var(--display); }
.done span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--soft); }

/* showcase */
.showcase { max-width: 1200px; margin: 0 auto; padding: 120px 0 40px; }
.sec-head { text-align: center; margin-bottom: 48px; }
h2 { font: 300 clamp(36px, 3.8vw, 52px)/1.05 var(--serif); letter-spacing: -.025em; }
.sec-head p { margin-top: 12px; color: var(--soft); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 16px; }
.tile { grid-column: span 5; }
.tile.full { grid-column: 1 / -1; }
.stage { position: relative; isolation: isolate; display: grid; place-items: center; height: 420px; padding: 32px; border-radius: var(--r); background: var(--panel); overflow: hidden; }
.stage.soft-a { background: linear-gradient(135deg, #FAF4EE 0%, #FBF1E8 55%, #FCEDE2 100%); }
figcaption { display: flex; align-items: baseline; gap: 8px; padding: 14px 6px 0; font-size: 13px; color: var(--mute); }
figcaption strong { font-weight: 500; color: var(--ink); }

.card { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03), 0 18px 40px -12px rgba(30,25,20,.14); }
/* question card */
.qcard { width: min(440px, 100%); padding: 22px 22px 18px; }
.qmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.qmeta span:first-child { color: var(--clay); font-weight: 500; }
.q { margin-top: 12px; font: 300 25px/1.2 var(--serif); letter-spacing: -.015em; }
.answer { display: block; width: 100%; margin-top: 16px; min-height: 84px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--panel); font: 300 18px/1.4 var(--serif); color: var(--ink); resize: none; outline: none; transition: box-shadow .2s; }
.answer::placeholder { color: var(--mute); }
.answer:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.qfoot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--mute); }
.kept { padding: 7px 14px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 12.5px/1 var(--text); }
.kept:disabled { opacity: .4; cursor: default; }
.qfoot .ok { color: var(--clay); }
.qcard.fade .q, .qcard.fade #qtheme { opacity: 0; }
.q, #qtheme { transition: opacity .25s; }
/* picker */
.picker { width: min(320px, 100%); padding: 20px; }
.picker-t { font: 300 23px/1.2 var(--serif); letter-spacing: -.015em; }
.chips { margin: 14px 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.chips button.on { background: var(--ink); color: #fff; box-shadow: none; }
.chips button:not(.on):hover { color: var(--ink); box-shadow: inset 0 0 0 1px #CFC9C0; }
/* mirror */

/* rail */
.rail { width: min(340px, 100%); padding: 20px; }
.rail-top { display: flex; justify-content: space-between; align-items: center; font: 300 23px/1.2 var(--serif); letter-spacing: -.015em; }
.pill { padding: 5px 10px; border-radius: 999px; font: 500 11.5px/1 var(--text); letter-spacing: 0; color: var(--soft); background: var(--panel); }
.dots { margin: 20px 0 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px 0; justify-items: center; }
.dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D8D3CB; }
.dots i.f { background: var(--clay); box-shadow: none; }
.dots i.now { box-shadow: inset 0 0 0 1.5px var(--clay), 0 0 0 4px #F8ECE5; }
.rail-note { font-size: 13px; color: var(--soft); }
/* widget */

/* faq */
.faq { max-width: 720px; margin: 0 auto; padding: 120px 0 40px; }
.faq h2 { text-align: center; margin-bottom: 36px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 20px 4px; font: 400 18px/1.3 var(--display); letter-spacing: -.025em; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 300 22px/1 var(--display); color: var(--mute); transition: transform .36s cubic-bezier(.4,0,.2,1); }
.qa details[open]:not(.qa-shut) summary::after { transform: rotate(45deg); }
.qa p { padding: 0 4px 22px; max-width: 58ch; color: var(--soft); }

/* closing */
.closing { position: relative; isolation: isolate; max-width: 1400px; margin: 100px auto 24px; padding: 110px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--panel); border-radius: var(--r); overflow: hidden; }
.closing h2 { font-size: clamp(40px, 5vw, 64px); position: relative; }
.closing .notify, .closing .note, .closing .done { position: relative; }

footer { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 28px 32px; font-size: 13px; color: var(--mute); }
footer nav { display: flex; gap: 22px; }
footer a:hover { color: var(--ink); }
.logo.sm { font-size: 14px; color: var(--ink); }
.logo.sm .mark { width: 22px; height: 16px; }

@media (max-width: 960px) {
  .pillnav { display: none; }
  .top { grid-template-columns: 1fr auto; }
  .tile { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .top { padding: 0 16px; height: 58px; }
  .soon { display: none; }
  main { padding: 0 10px; }
  .hero { margin-top: 4px; padding: 72px 18px 64px; min-height: auto; border-radius: 22px; }
  h1 { font-size: clamp(36px, 10.6vw, 50px); letter-spacing: -.025em; }
  .lede { font-size: 15px; }
  .notify { flex-direction: column; }
  .notify input { flex: none; width: 100%; height: 48px; }
  .notify .btn { height: 48px; }
  .aura i { filter: blur(48px); }
  .aura .b1 { width: 95%; top: -18%; right: -30%; }
  .aura .b2 { width: 90%; bottom: -16%; left: -30%; }
      .showcase { padding-top: 88px; }
  .sec-head { padding: 0 8px; margin-bottom: 32px; }
  .stage { height: 360px; padding: 18px; border-radius: 22px; }
  .q { font-size: 22px; }
  .faq { padding: 88px 8px 24px; }
  .closing { margin-top: 72px; padding: 80px 18px; border-radius: 22px; }
  footer { padding: 16px 16px 28px; flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aura i { animation: none; }
}

/* path map + step labels */

.stepno { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--panel); font: 500 12px/1 var(--text); color: var(--ink); align-self: center; }
figcaption { align-items: center; }
@media (max-width: 600px) {
        figcaption { flex-wrap: wrap; row-gap: 2px; }
}

/* step title above its picture */
.tile { display: flex; flex-direction: column; }
.tile figcaption { order: 0; padding: 16px 4px 0; font-size: 14px; }
.tile figcaption strong { font-size: 16px; }
.stepno { height: 24px; min-width: 30px; }

.nw { white-space: nowrap; }

/* explanation under each step */
.desc { margin-top: 8px; padding: 0 4px; max-width: 56ch; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
/* inside cards: titles in Kefir, what a person writes in Satoshi */
.answer { font: 400 15.5px/1.45 var(--text) !important; }

/* hero: calmer, readable */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 52% at 50% 52%, rgba(250,247,243,.92) 0%, rgba(250,247,243,.6) 55%, rgba(250,247,243,0) 100%); }
.hero .aura { z-index: 0; }
.hero-inner { z-index: 1; }
.hero .lede { color: #4F4A43; }
.hero .note { color: #857E73; }
.hero .eyebrow { background: #fff; color: #5F5950; }
.hero .notify input { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

/* no hole after the widget was removed: 2 tiles, then two full-width */
#step-3 { grid-column: 1 / -1; }
#step-3 .stage { height: 340px; background: linear-gradient(180deg, #F7F4F0 0%, #F4EEE7 100%); }
@media (max-width: 600px) { #step-3 .stage { height: 320px; } }

.disclaimer { flex-basis: 100%; font-size: 12px; color: var(--mute); }

.qcard.pulse { animation: pulse 1.2s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(165,83,47,.35), 0 18px 40px -12px rgba(30,25,20,.14); } 100% { box-shadow: 0 0 0 14px rgba(165,83,47,0), 0 18px 40px -12px rgba(30,25,20,.14); } }
@media (prefers-reduced-motion: reduce) { .qcard.pulse { animation: none; } }

/* header as a floating glass bar (Brightlight-style) */
.top { position: sticky; top: 10px; z-index: 30; display: flex; align-items: center; gap: 40px; width: min(1400px, calc(100% - 20px)); height: 60px; margin: 10px auto 0; padding: 0 10px 0 22px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(246,243,239,.62), rgba(238,234,229,.5));
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.8), 0 8px 30px -14px rgba(40,30,20,.18); }
.pillnav { padding: 0; background: none; gap: 30px; }
.pillnav a { padding: 6px 0; border-radius: 0; font-size: 15px; color: #6A645B; }
.pillnav a:hover { background: none; box-shadow: none; color: var(--ink); }
.top-end { margin-left: auto; gap: 22px; }
.soon { height: auto; padding: 0; box-shadow: none; font-size: 15px; color: #6A645B; }
.top .btn.dark { height: 42px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; }
.hero { margin-top: 14px; }
@media (max-width: 960px) { .top { gap: 20px; } }
@media (max-width: 600px) {
  .top { top: 8px; width: calc(100% - 16px); margin-top: 8px; height: 56px; padding: 0 8px 0 16px; border-radius: 14px; }
  .top .btn.dark { height: 40px; padding: 0 14px; font-size: 14px; }
  .hero { margin-top: 10px; }
}
.tile.full .desc, #step-3 .desc { max-width: 110ch; }

/* descriptions: comfortable line length everywhere */
.desc, .tile.full .desc, #step-3 .desc { max-width: 64ch; }

/* header glass: wider, clear — tint comes from what's beneath */
.top { width: min(1480px, calc(100% - 16px)); height: 62px; margin-top: 8px; top: 8px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.7), 0 6px 24px -14px rgba(40,30,20,.16); }

/* no announcement bar: equal air above and below the nav */
.top { top: 16px; margin-top: 16px; }
.hero { margin-top: 16px; }
@media (max-width: 600px) { .top { top: 10px; margin-top: 10px; } .hero { margin-top: 10px; } }

/* headline: exactly two lines */
.hero-inner { max-width: 1040px; }
.hero h1 { max-width: none; font-size: clamp(30px, 6.4vw, 88px); }
@media (max-width: 600px) { .hero h1 { font-size: 8.4vw; letter-spacing: -.02em; } }

/* header over dark content */
.top { transition: background .35s ease, box-shadow .35s ease; }
/* colour transitions only after first paint — otherwise iOS Safari sometimes animates from the default blue link colour on load */
.top.ready .logo, .top.ready .pillnav a, .top.ready .soon, .top.ready .btn.dark, .top.ready .logo .mark { transition: color .35s ease, background .35s ease, fill .35s ease; }
.top.on-dark { background: rgba(26,24,21,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.14), 0 8px 28px -12px rgba(0,0,0,.35); }
.top.on-dark .logo { color: #fff; }
.top.on-dark .logo .mark { fill: #fff; }
.top.on-dark .pillnav a, .top.on-dark .soon { color: rgba(255,255,255,.78); }
.top.on-dark .pillnav a:hover { color: #fff; }
.top.on-dark .soon svg { fill: #fff; }
.top.on-dark .btn.dark { background: #fff; color: var(--ink); box-shadow: none; }

/* back to the warm tinted glass (edges visible on white) */
.top:not(.on-dark) { background: linear-gradient(180deg, rgba(246,243,239,.66), rgba(238,234,229,.54));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.8), 0 8px 30px -14px rgba(40,30,20,.18); }

/* steps 1–3: shorter lines; the Mirror keeps 64ch */
#step-1 .desc, #step-2 .desc, #step-3 .desc { max-width: 46ch; }

/* captions: two measures, written to fit (art director) */
.desc { text-wrap: pretty; }
#step-1 .desc, #step-2 .desc { max-width: 44ch; }
#step-3 .desc { max-width: 64ch; }
.note:empty { margin: 0; }
#step-3 .desc { max-width: 61ch; }

/* privacy page */
.doc { position: relative; max-width: 720px; margin: 0 auto; padding: 96px 8px 120px; }
.doc .eyebrow { background: var(--panel); }
.doc h1 { margin-top: 18px; font: 300 clamp(44px, 6vw, 72px)/1.02 var(--serif); letter-spacing: -.025em; }
.doc-lede { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.doc section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc h2 { font: 300 28px/1.15 var(--serif); letter-spacing: -.015em; }
.doc section p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.doc a:hover { text-decoration-color: var(--ink); }
@media (max-width: 600px) { .doc { padding: 64px 10px 88px; } .doc section { margin-top: 32px; padding-top: 22px; } }

/* hero gradient: less of it, slower — same mood */
.hero .aura .b1 { width: 52%; top: -30%; right: -16%; animation: breathe-soft 18s ease-in-out infinite, drift1 34s ease-in-out infinite alternate; }
.hero .aura .b2 { width: 48%; bottom: -34%; left: -14%; animation: breathe-soft 22s ease-in-out infinite reverse, drift2 38s ease-in-out infinite alternate; }
@keyframes breathe-soft { 0%, 100% { opacity: .32; scale: 1; } 50% { opacity: .5; scale: 1.08; } }
.closing h2 { max-width: none; }
@media (max-width: 600px) {
  .hero .aura .b1 { width: 90%; top: -24%; right: -40%; }
  .hero .aura .b2 { width: 86%; bottom: -24%; left: -40%; }
}
.closing h2 { white-space: nowrap; }
@media (max-width: 600px) { .closing h2 { font-size: 9vw; } }

/* closing block: same calm gradient as the hero */
.closing { background: #F8F4EF; }
.closing .aura .b1 { width: 52%; top: -30%; right: -16%; animation: breathe-soft 18s ease-in-out infinite, drift1 34s ease-in-out infinite alternate; }
.closing .aura .b2 { width: 48%; bottom: -34%; left: -14%; animation: breathe-soft 22s ease-in-out infinite reverse, drift2 38s ease-in-out infinite alternate; }
.closing::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 52% at 50% 52%, rgba(250,247,243,.92) 0%, rgba(250,247,243,.6) 55%, rgba(250,247,243,0) 100%); }
.closing > *:not(.aura) { position: relative; z-index: 1; }
.closing .notify input { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
@media (max-width: 600px) {
  .closing .aura .b1 { width: 90%; top: -24%; right: -40%; }
  .closing .aura .b2 { width: 86%; bottom: -24%; left: -40%; }
}

/* reveal on load / on scroll (Arc-style) */
.nw { display: inline-block; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(8px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d, 0ms); }
  [data-reveal].in { opacity: 1; transform: none; filter: none; }
  header.top[data-reveal] { transform: translateY(-10px); filter: none; }
  header.top[data-reveal].in { transform: none; }
  /* tiles: no blur on big surfaces; the card arrives a beat later */
  .tile[data-reveal] { filter: none; transform: translateY(28px); transition-duration: 1s; }
  .tile[data-reveal] .stage { transform: scale(.975); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
  .tile[data-reveal] .ui { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0ms) + 220ms); }
  .tile[data-reveal] figcaption, .tile[data-reveal] .desc { opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s ease; transition-delay: calc(var(--d, 0ms) + 360ms); }
  .tile.in .stage, .tile.in .ui, .tile.in figcaption, .tile.in .desc { opacity: 1; transform: none; }
}

/* 05 · private by design */
#private .desc, #private .desc { max-width: 64ch; }
.stage.vault { height: 400px; background: linear-gradient(180deg, #F7F4F0 0%, #F1ECE6 100%); }
.entry { position: relative; z-index: 1; width: min(560px, 100%); padding: 22px 24px 26px; }
.entry-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mute); }
.lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .6s ease, transform .6s ease; }
.lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.entry.sealed .lock { opacity: 1; transform: none; }
.entry-body { position: relative; margin-top: 14px; }
.cipher { font: 400 17px/1.55 var(--text); color: var(--ink); transition: filter 1.6s ease, color 1.6s ease; letter-spacing: .005em; }
.entry.sealed .cipher { filter: blur(5px); color: #8E877C; }
#particles { position: absolute; inset: -12px -10px; width: calc(100% + 20px); height: calc(100% + 24px); pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.entry.sealed #particles { opacity: 1; }
@media (max-width: 600px) { .stage.vault { height: 380px; } .entry { padding: 18px 18px 22px; } .entry-top { flex-direction: column; align-items: flex-start; } .cipher { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .cipher, .lock, #particles { transition: none; } }

/* three small steps in a row, then two big blocks (Mirror, Privacy) */

#step-1 .desc, #step-2 .desc, #step-3 .desc { max-width: 40ch; }
#step-3 .stage { height: 420px; background: linear-gradient(180deg, #F7F4F0 0%, #F4EEE7 100%); }
@media (max-width: 960px) { #step-3 .stage { height: 340px; } }
#step-3 { grid-column: span 4; }
@media (max-width: 960px) { #step-3 { grid-column: 1 / -1; } }
.tile.third .desc, #step-1 .desc, #step-2 .desc, #step-3 .desc { max-width: none; }
@media (min-width: 601px) { .hero .eyebrow { height: 36px; padding: 0 16px; font-size: 15px; } }

.ast { margin-left: 1px; font-size: .75em; color: var(--clay); vertical-align: super; line-height: 0; }
.footnote a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.doc section { scroll-margin-top: 100px; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .tile.in .footnote { opacity: 1; }
}

a.ast { text-decoration: none; padding: 0 1px; }
a.ast:hover { color: var(--ink); }

/* two per row: 5/7, then 5/7; Privacy full width below */
.tile.n5, #step-1, #step-3 { grid-column: span 5; }
.tile.n7, #step-2, #mirror { grid-column: span 7; }
#step-3 .stage { height: 440px; }
.tile.n5 .stage, .tile.n7 .stage { padding: 32px; }
.tile.n5 .desc, .tile.n7 .desc, #step-1 .desc, #step-2 .desc, #step-3 .desc { max-width: 44ch; }
@media (max-width: 960px) {
  .tile.n5, .tile.n7, #step-1, #step-2, #step-3, #mirror { grid-column: 1 / -1; }
}
@media (max-width: 600px) { #step-3 .stage { height: 320px; } .tile.n5 .stage, .tile.n7 .stage { padding: 18px; } }
@media (min-width: 601px) { .hero .lede { max-width: 640px; text-wrap: balance; } }

/* ===== The Mirror — spotlight section ===== */
#step-3 { grid-column: 1 / -1 !important; }
#step-3 .stage { height: 340px; }
#step-3 .desc { max-width: 64ch !important; }
.mirror-spot { position: relative; isolation: isolate; overflow: hidden; margin: 40px 0; padding: 110px 64px 96px; border-radius: var(--r); background: #1D1B17; color: #F3EDE3; text-align: center; }
.mirror-spot .aura .b1 { width: 60%; aspect-ratio: 1; top: -40%; right: -20%; background: radial-gradient(circle, rgba(196,110,62,.55), rgba(196,110,62,0) 68%); animation: breathe-soft 20s ease-in-out infinite, drift1 36s ease-in-out infinite alternate; }
.mirror-spot .aura .b2 { width: 55%; aspect-ratio: 1; bottom: -45%; left: -18%; background: radial-gradient(circle, rgba(165,83,47,.5), rgba(165,83,47,0) 68%); animation: breathe-soft 24s ease-in-out infinite reverse, drift2 40s ease-in-out infinite alternate; }
.ms-head { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.ms-eyebrow { display: inline-flex; height: 32px; align-items: center; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 13.5px; color: rgba(243,237,227,.8); }
.mirror-spot h2 { margin-top: 20px; font: 300 clamp(64px, 9vw, 136px)/.95 var(--serif); letter-spacing: -.03em; color: #F7F1E8; }
.ms-lede { margin: 22px auto 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: rgba(243,237,227,.72); text-wrap: balance; }
.ms-stage { position: relative; z-index: 1; height: 420px; max-width: 980px; margin: 64px auto 0; }
.ms-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ms-thread path { fill: none; stroke: #D9895A; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(217,137,90,.6)); }
.ms-entry { position: absolute; width: min(360px, 44%); padding: 18px 20px 20px; text-align: left; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -20px rgba(0,0,0,.5); }
.ms-entry span { font-size: 12.5px; color: rgba(243,237,227,.55); }
.ms-entry p { margin-top: 8px; font: 400 16px/1.5 var(--text); color: #EDE6DC; }
.ms-entry b { font-weight: 500; padding: 1px 4px; margin: 0 -4px; border-radius: 6px; transition: background .6s ease, color .6s ease; }
.ms-entry.e1 { left: 2%; top: 0; }
.ms-entry.e2 { right: 2%; top: 30%; }
.ms-entry.e3 { left: 20%; bottom: 0; }
.ms-result { position: relative; z-index: 1; margin-top: 64px; }
.ms-word { font: 300 clamp(30px, 3.4vw, 44px)/1.15 var(--serif); letter-spacing: -.015em; color: #F7F1E8; }
.ms-word em { font-style: normal; color: #E39A6C; }
.ms-note { margin: 14px auto 0; max-width: 46ch; font-size: 14.5px; color: rgba(243,237,227,.6); text-wrap: balance; }
/* choreography */
.mirror-spot .ms-entry, .mirror-spot .ms-result { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.mirror-spot.play .ms-entry { opacity: 1; transform: none; }
.mirror-spot.play .e2 { transition-delay: .25s; }
.mirror-spot.play .e3 { transition-delay: .5s; }
.mirror-spot.lit .ms-entry b { background: rgba(217,137,90,.28); color: #FFD9BE; }
.mirror-spot.ms-done .ms-result { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .mirror-spot { margin: 24px 0; padding: 72px 18px 64px; border-radius: 22px; }
  .ms-stage { height: auto; margin-top: 44px; display: flex; flex-direction: column; gap: 40px; }
  .ms-entry { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 86%; }
  .ms-entry.e2 { align-self: flex-end; }
  .ms-entry.e3 { align-self: center; }
  .ms-result { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .mirror-spot .ms-entry, .mirror-spot .ms-result { opacity: 1; transform: none; transition: none; }
}

/* fix: tiles return to place after reveal */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tile[data-reveal].in { transform: none; } }

/* air around the nav; hero fills the first screen exactly */
:root { --gap-top: 20px; --nav-h: 62px; }
.top { top: var(--gap-top); margin-top: var(--gap-top); height: var(--nav-h); }
.hero { margin-top: 20px; min-height: calc(100svh - var(--gap-top) - var(--nav-h) - 20px - 20px); }
@media (max-width: 600px) {
  :root { --gap-top: 12px; --nav-h: 56px; }
  .top { top: var(--gap-top); margin-top: var(--gap-top); height: var(--nav-h); }
  .hero { margin-top: 12px; min-height: calc(100svh - var(--gap-top) - var(--nav-h) - 12px - 12px); padding-bottom: 96px; display: flex; flex-direction: column; justify-content: center; }
}

/* scroll cue */

/* "Join the waitlist" when the form is already on screen: glow the field */
.notify.glow input { animation: glow 1.6s ease-out; }
@keyframes glow { 0% { box-shadow: inset 0 0 0 1.5px var(--clay), 0 0 0 0 rgba(165,83,47,.45); } 60% { box-shadow: inset 0 0 0 1.5px var(--clay), 0 0 0 10px rgba(165,83,47,0); } 100% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 0 rgba(165,83,47,0); } }
.entry-top { justify-content: flex-start; }

/* ===== living orb (scroll cue) ===== */


/* ===== The Mirror: compact on desktop + made special ===== */
@media (min-width: 761px) {
  .mirror-spot { padding: 80px 56px 72px; }
  .mirror-spot h2 { font-size: clamp(60px, 7.2vw, 112px); }
  .ms-lede { margin-top: 18px; }
  .ms-stage { height: 340px; margin-top: 44px; max-width: 920px; }
  .ms-entry { width: min(330px, 40%); padding: 16px 18px 18px; }
  .ms-entry p { font-size: 15.5px; }
  .ms-result { margin-top: 44px; }
}
.ms-eyebrow.own { background: rgba(217,137,90,.16); color: #F2C4A3; box-shadow: inset 0 0 0 1px rgba(217,137,90,.35); }
/* a real reflection under the title */

/* ===== soft "living light" cue (Siri-like, not literal) ===== */

/* Mirror: back to calm — no reflection, glint or travelling edge (keep compact size + "Our own algorithm") */
.mirror-spot h2 { -webkit-box-reflect: none; }

/* Mirror head: one pill, no separate jumping tags; caption below like other steps */
.ms-head .ms-eyebrow { display: inline-flex; }
.mirror-spot { margin-bottom: 0; }
.ms-caption { margin: 16px 0 40px; padding: 0 4px; }
.ms-caption .cap { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); }
.ms-caption .cap strong { font-weight: 500; font-size: 16px; color: var(--ink); }
.ms-caption .desc { margin-top: 8px; padding: 0; max-width: 64ch; }
@media (max-width: 760px) { .ms-caption { margin: 14px 0 28px; } }

/* headline lines: room for descenders (g, p) so Safari doesn't clip them during the blur-in */
.nw { padding: .06em 0 .2em; margin-bottom: -.2em; }

/* question card: showcase on phones, playful "Done" on desktop */
.qcard.is-demo .answer { pointer-events: none; caret-color: transparent; }
.qcard.is-demo .qfoot { display: none; }
#qhint { max-width: 32ch; line-height: 1.45; }
#qhint.ok { max-width: 40ch; }
.hint-cta { display: inline-block; margin-top: 2px; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(165,83,47,.4); }
.hint-cta:hover { text-decoration-color: var(--clay); }
.qfoot { align-items: flex-end; gap: 12px; }

/* answer dissolves before the next one / before you write */
.answer { transition: box-shadow .2s, opacity .55s ease, filter .55s ease, letter-spacing .55s ease; }
.answer.dissolving { opacity: 0; filter: blur(6px); letter-spacing: .06em; }

/* Mirror choreography, faster */
.mirror-spot .ms-entry, .mirror-spot .ms-result { transition-duration: .6s; }
.mirror-spot.play .e2 { transition-delay: .15s; }
.mirror-spot.play .e3 { transition-delay: .3s; }
.ms-entry b { transition-duration: .35s; }

.answer-box { position: relative; }
.answer-ghost { position: absolute; inset: 16px 0 0 0; padding: 12px 14px; pointer-events: none; font: 400 15.5px/1.45 var(--text); color: var(--ink); white-space: pre-wrap; transition: opacity .6s ease, filter .6s ease, letter-spacing .6s ease, transform .6s ease; }
.answer-ghost.go { opacity: 0; filter: blur(6px); letter-spacing: .06em; transform: translateY(-4px); }

/* Mirror: between the old and the fast pace */
.mirror-spot .ms-entry, .mirror-spot .ms-result { transition-duration: .75s; }
.mirror-spot.play .e2 { transition-delay: .2s; }
.mirror-spot.play .e3 { transition-delay: .4s; }
/* softer orange in hero and closing */
@keyframes breathe-soft { 0%, 100% { opacity: .2; scale: 1; } 50% { opacity: .34; scale: 1.08; } }
.closing-sub { position: relative; z-index: 1; margin-top: 14px; max-width: 44ch; font-size: 15px; line-height: 1.5; color: #7A7369; text-wrap: balance; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notify button:disabled { opacity: .6; cursor: default; }

/* performance: freeze decorative motion while it's off screen */
.paused .aura i { animation-play-state: paused; }

/* gentler reveals: headings only fade/unblur; others move half as far */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { transform: translateY(9px); }
  .sec-head [data-reveal], .faq h2[data-reveal], .closing h2[data-reveal], .closing-sub[data-reveal] { transform: none; }
  [data-reveal].in { transform: none; }
}
.ms-entry { background: rgba(42,38,33,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* footer, aligned */
footer.foot { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 28px 28px 36px; font-size: 13.5px; color: var(--mute); }
footer.foot nav { display: flex; gap: 28px; justify-self: center; }
footer.foot .copy { justify-self: end; }
footer.foot a:hover { color: var(--ink); }
footer.foot .logo.sm { justify-self: start; font-size: 15px; color: var(--ink); }
@media (max-width: 600px) {
  footer.foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 28px 16px 36px; }
  footer.foot nav { gap: 22px; }
  footer.foot .copy, footer.foot .logo.sm { justify-self: center; }
}
.disclaimer { display: none; }

/* scroll cue: quieter, paler, slower */

/* phones: same soft peach as desktop (no bigger, sharper, overlapping blobs) */
@media (max-width: 600px) {
  .hero .aura i, .closing .aura i { filter: blur(64px); }
  .hero .aura, .closing .aura { opacity: .7; }
  .hero .aura .b1, .closing .aura .b1 { width: 80%; top: -30%; right: -42%; }
  .hero .aura .b2, .closing .aura .b2 { width: 76%; bottom: -30%; left: -42%; }
}

/* phones: footer in one line too */
@media (max-width: 600px) {
  footer.foot { grid-template-columns: auto 1fr auto; justify-items: stretch; text-align: left; gap: 10px; padding: 22px 16px 30px; font-size: 12.5px; }
  footer.foot nav { gap: 16px; justify-self: center; }
  footer.foot .logo.sm { justify-self: start; }
  footer.foot .copy { justify-self: end; }
  footer.foot .fw { display: none; }
}

/* hero: sized to its content, not stretched to the screen */
.hero { min-height: min(calc(100svh - var(--gap-top) - var(--nav-h) - 40px), 680px); padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 600px) {
  .hero { min-height: 0; padding: 64px 18px 72px; justify-content: flex-start; }
}

/* why — path vs journal: three tabs (always visible), one side-by-side comparison at a time, autoplay with progress */
.why { max-width: 1200px; margin: 0 auto; padding: 120px 0 0; }
.why-tabs { display: none; }
.why-panels { display: grid; gap: 40px; }
.why-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-claim { grid-column: 1 / -1; font: 300 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; text-align: center; }
.side-stage { position: relative; display: grid; place-items: center; height: 260px; padding: 24px; border-radius: var(--r); background: var(--panel); overflow: hidden; }
.side.o .side-stage { background: linear-gradient(135deg, #FAF4EE 0%, #FBF1E8 55%, #FCEDE2 100%); }
.side .vs-tag { display: inline-flex; margin: 16px 4px 0; padding: 5px 10px; border-radius: 999px; background: var(--panel); font: 500 12px/1 var(--text); color: var(--soft); }
.side.o .vs-tag { background: #F8ECE5; color: var(--clay); }
.side-say { margin: 10px 4px 0; max-width: 42ch; font-size: 15.5px; line-height: 1.45; color: var(--soft); text-wrap: pretty; }
.side.o .side-say { color: var(--ink); }

.mini { width: min(330px, 100%); }
.blank { position: relative; height: 170px; padding: 18px 20px; }
.blank-date { font-size: 12px; color: var(--mute); }
.blank .ln { display: block; height: 1px; margin-top: 32px; background: var(--line); }
.blank .caret { position: absolute; left: 20px; top: 46px; width: 2px; height: 22px; background: var(--ink); animation: caret 1.05s steps(2, jump-none) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ask { padding: 18px 18px 20px; }
.ask .q { margin-top: 10px; min-height: 2.4em; font-size: 22px; }
.endless { height: 170px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.roll { animation: roll 9s linear infinite; }
.roll span { display: block; padding: 8px 0; text-align: center; font: 300 25px/1.1 var(--serif); letter-spacing: -.02em; color: var(--soft); }
@keyframes roll { to { transform: translateY(-50%); } }
.finish { padding: 18px 20px 16px; }
.finish .dots { margin: 0 0 14px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 11px 0; justify-items: center; }
.finish .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--clay); box-shadow: none; transition: background .3s, box-shadow .3s; transition-delay: calc(.5s + var(--i, 0) * 40ms); }
.finish .dots i:last-child { background: #fff; box-shadow: inset 0 0 0 2px var(--clay), 0 0 0 4px rgba(165,83,47,.14); }
.finish-note { font-size: 12.5px; color: var(--soft); }
.finish-note em { font: 300 16px/1 var(--serif); font-style: normal; color: var(--ink); }
.chat { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.bub { max-width: 86%; padding: 7px 11px; border-radius: 13px; font-size: 12.5px; line-height: 1.3; }
.bub.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.bub.ai { align-self: flex-start; background: var(--panel2); color: var(--ink); border-bottom-left-radius: 5px; }
.own { padding: 28px 22px; text-align: center; }
.own p { font: 300 24px/1.15 var(--serif); letter-spacing: -.02em; }
.own span { display: block; margin-top: 12px; font-size: 12px; color: var(--mute); }

/* tab mode (JS) */
.why-js .why-claim { display: none; }
.why-js .why-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 760px; margin: 0 auto 28px; }
.why-tabs button { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 4px 16px; font: 500 15px/1.2 var(--text); color: var(--mute); text-align: left; transition: color .25s; }
.why-tabs button .stepno { background: var(--panel); color: var(--mute); transition: background .25s, color .25s; }
.why-tabs button:hover { color: var(--soft); }
.why-tabs button.on { color: var(--ink); }
.why-tabs button.on .stepno { background: var(--ink); color: #fff; }
.why-tabs .bar { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.why-tabs .bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.why-tabs button.on .bar::after { transform: scaleX(1); }
.why-tabs.auto button.on .bar::after { animation: whybar var(--why-t, 6.5s) linear both; }
@keyframes whybar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.why-js .why-panels { display: grid; gap: 0; }
.why-js .why-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.why-js .why-panel.on { opacity: 1; visibility: visible; }
/* inside the active panel: journal plays first, then Odos answers */
.why-js .side.o .mini { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.why-js .why-panel.on .side.o .mini { opacity: 1; transform: none; transition-delay: .7s; }
.why-js .finish .dots i { background: transparent; box-shadow: inset 0 0 0 1.5px #DCD7CF; transition-delay: 0s; }
.why-js .why-panel.on .finish .dots i { background: var(--clay); box-shadow: none; transition-delay: calc(1s + var(--i, 0) * 40ms); }
.why-js .why-panel.on .finish .dots i:last-child { background: #fff; box-shadow: inset 0 0 0 2px var(--clay), 0 0 0 4px rgba(165,83,47,.14); transition-delay: 1.9s; }
.why-js .chat .bub { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.why-js .why-panel.on .chat .bub { opacity: 1; transform: none; }
.why-js .why-panel.on .chat .bub:nth-child(2) { transition-delay: .3s; }
.why-js .why-panel.on .chat .bub:nth-child(3) { transition-delay: .6s; }
.why-js .why-panel.on .chat .bub:nth-child(4) { transition-delay: .9s; }
.why-js .why-panel.on .side.o .own { transition-delay: 1.4s; }

@media (max-width: 760px) {
  .why { padding-top: 90px; }
  .why-panel { grid-template-columns: 1fr; gap: 10px; }
  .side-stage { height: 180px; padding: 14px; }
  .mini { scale: .86; }
  .side-say { margin-top: 8px; font-size: 14.5px; }
  .why-js .why-tabs { gap: 4px; margin-bottom: 18px; }
  .why-tabs button { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; padding: 8px 2px 12px; }
}
.why-tabs .stepno { align-self: auto; }
@media (max-width: 760px) { .why-tabs button { align-items: center; text-align: center; } }

/* why tabs as a pill switch (no numbers — the steps below are numbered) */
.why-js .why-tabs { display: flex; justify-content: center; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto 28px; padding: 4px; background: var(--panel); border-radius: 999px; }
.why-tabs button { flex: 0 1 auto; justify-content: center; gap: 0; padding: 10px 18px 12px; border-radius: 999px; font: 500 14px/1 var(--text); color: var(--soft); text-align: center; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.why-tabs button:hover { color: var(--ink); }
.why-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.why-tabs .bar { left: 18px; right: 18px; bottom: 5px; height: 2px; background: transparent; }
.why-tabs .bar::after { background: var(--clay); opacity: .55; }
.why-tabs button:not(.on) .bar::after { transform: scaleX(0); }
@media (max-width: 760px) {
  .why-js .why-tabs { width: 100%; margin-bottom: 18px; }
  .why-tabs button { flex: 1 1 0; flex-direction: row; padding: 10px 6px 12px; font-size: 12.5px; }
  .why-tabs .bar { left: 12px; right: 12px; }
}

/* why tabs — lighter: plain text labels, lots of air, a thin progress line under the active one only */
.why-js .why-tabs { display: flex; justify-content: center; gap: 44px; width: auto; max-width: none; margin: 0 auto 32px; padding: 0; background: none; border-radius: 0; }
.why-tabs button { flex: 0 0 auto; padding: 6px 0 12px; border-radius: 0; background: none; box-shadow: none; font: 400 15.5px/1 var(--text); color: var(--mute); }
.why-tabs button:hover { color: var(--soft); }
.why-tabs button.on { background: none; box-shadow: none; color: var(--ink); }
.why-tabs .bar { left: 0; right: 0; bottom: 0; height: 1.5px; background: transparent; }
.why-tabs button.on .bar { background: var(--line); }
.why-tabs .bar::after { background: var(--ink); opacity: 1; }
@media (max-width: 760px) {
  .why-js .why-tabs { width: auto; gap: 22px; margin-bottom: 20px; }
  .why-tabs button { flex: 0 0 auto; padding: 6px 0 10px; font-size: 13.5px; }
  .why-tabs .bar { left: 0; right: 0; }
}

/* why — no lag on the Odos card */
.why-js .why-panel.on .side.o .mini { transition-delay: .12s; }
.why-js .why-panel.on .side.o .own { transition-delay: .12s; }
.why-js .why-panel.on .finish .dots i { transition-delay: calc(.35s + var(--i, 0) * 35ms); }
.why-js .why-panel.on .finish .dots i:last-child { transition-delay: 1.1s; }

/* why — bigger stages and app cards, so the comparison is the main thing you see */
.why .side-stage { height: 360px; padding: 32px; }
.why .mini { width: min(420px, 100%); }
.why .blank { height: 230px; padding: 24px 26px; }
.why .blank-date { font-size: 13px; }
.why .blank .ln { margin-top: 44px; }
.why .blank .caret { left: 26px; top: 58px; height: 30px; }
.why .ask { padding: 24px 24px 28px; }
.why .ask .qmeta { font-size: 13px; }
.why .ask .q { margin-top: 14px; font-size: 29px; }
.why .endless { height: 230px; }
.why .roll span { padding: 11px 0; font-size: 33px; }
.why .finish { padding: 24px 26px 22px; }
.why .finish .dots { margin-bottom: 20px; gap: 16px 0; }
.why .finish .dots i { width: 17px; height: 17px; }
.why .finish-note { font-size: 14px; }
.why .finish-note em { font-size: 20px; }
.why .chat { padding: 20px; gap: 9px; }
.why .bub { padding: 10px 14px; border-radius: 16px; font-size: 15px; }
.why .own { padding: 40px 30px; }
.why .own p { font-size: 32px; }
.why .own span { margin-top: 16px; font-size: 13px; }
@media (max-width: 760px) {
  .why .side-stage { height: 250px; padding: 18px; }
  .why .mini { scale: 1; width: 100%; }
  .why .blank, .why .endless { height: 190px; }
  .why .ask .q { font-size: 24px; }
  .why .roll span { font-size: 28px; }
  .why .finish .dots i { width: 15px; height: 15px; }
  .why .chat { padding: 14px; gap: 6px; }
  .why .bub { font-size: 13.5px; padding: 8px 12px; }
  .why .own { padding: 30px 20px; }
  .why .own p { font-size: 27px; }
}

/* why — third comparison. Left: impersonal grey chat. Right: two of your own entries joined by a thread */
.why .chat .bub.me, .why .chat .bub.ai { background: var(--panel2); color: var(--soft); }
.why .chat .bub.me { background: #E6E2DB; color: #5F5A52; }
.mm { background: #1F1D19; color: #EDE6DA; padding: 22px 24px 20px; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 18px 40px -12px rgba(30,25,20,.35); }
.mm-top { display: flex; justify-content: space-between; font-size: 12px; color: #9C9486; }
.mm-top span:first-child { color: #E3A27C; }
.mm-l { margin-top: 12px; font: 300 20px/1.25 var(--serif); letter-spacing: -.01em; color: #CFC7BA; }
.mm-l span { display: block; margin-bottom: 3px; font: 400 11.5px/1 var(--text); letter-spacing: 0; color: #8E8778; }
.mm b, .mm-end b { font-weight: 300; color: #F3B48E; }
.mm-end { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: #BDB6A8; }
.mm-end b { font: 300 17px/1 var(--serif); }
.why-js .mm-l, .why-js .mm-end { opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .5s cubic-bezier(.2,.7,.2,1); }
.why-js .mm b { color: #CFC7BA; transition: color .5s; }
.why-js .why-panel.on .mm-l, .why-js .why-panel.on .mm-end { opacity: 1; transform: none; }
.why-js .why-panel.on .mm-l:nth-of-type(2) { transition-delay: .35s; }
.why-js .why-panel.on .mm-l:nth-of-type(3) { transition-delay: .7s; }
.why-js .why-panel.on .mm-l:nth-of-type(4) { transition-delay: 1.05s; }
.why-js .why-panel.on .mm b { color: #F3B48E; transition-delay: 1.6s; }
.why-js .why-panel.on .mm-end { transition-delay: 1.9s; }
.why .why-panel:has(.mm) .side-stage { height: 390px; }
@media (max-width: 760px) {
  .mm { padding: 18px 18px 16px; }
  .mm-l { font-size: 17px; margin-top: 10px; }
  .why .why-panel:has(.mm) .side-stage { height: auto; min-height: 250px; padding: 22px 14px; }
}
.why .chat .bub.me { background: var(--ink); color: #fff; }

/* no blue tap flash on mobile links/buttons */
html { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; }

/* why tabs — same pill chips as the theme picker ("What's on your mind?"); autoplay progress fills the active chip */
.why-js .why-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: auto; max-width: none; margin: 4px auto 30px; padding: 0; background: none; }
.why-tabs button { position: relative; overflow: hidden; flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; font: 400 14.5px/1 var(--text); letter-spacing: 0; color: var(--soft); background: none; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.why-tabs button:not(.on):hover { color: var(--ink); box-shadow: inset 0 0 0 1px #CFC9C0; }
.why-tabs button.on { background: var(--ink); color: #fff; box-shadow: none; }
.why-tabs .bar { position: absolute; inset: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: inherit; background: none; pointer-events: none; }
.why-tabs button.on .bar { background: none; }
.why-tabs .bar::after { background: rgba(255,255,255,.16); opacity: 1; }
.why-tabs button:not(.on) .bar::after { transform: scaleX(0); }
@media (max-width: 760px) {
  .why-js .why-tabs { display: flex; width: auto; gap: 6px; margin-bottom: 20px; }
  .why-tabs button { flex: 0 0 auto; padding: 9px 13px; font-size: 13px; white-space: nowrap; }
}
.why-tabs:not(.auto) .bar::after { transform: scaleX(0); }   /* picked by hand: plain black chip, like the theme picker */
.why-tabs .bar::after { background: rgba(255,255,255,.12); }