/* Noss: coral, ink, paper. SF set tight, like the app. Accent values match Theme.swift. */
:root {
  --coral: #EF6A77;
  --coral-lo: #DB5466;
  --ink: #1D1315;
  --ink-2: #4A3236;
  --ink-soft: rgba(29, 19, 21, .58);
  --paper: #FFF7F3;
  --paper-2: #FBEEE8;
  --cream: #FFFCFA;
  --line: rgba(29, 19, 21, .09);
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Geist Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--coral); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
kbd, .cap {
  font-family: var(--sans); font-weight: 600; font-size: .8em;
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.6em; padding: 0 .4em;
  border-radius: .36em; background: rgba(29,19,21,.08); vertical-align: .06em; line-height: 1;
}

.display { font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.hl { color: var(--cream); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 500; border-radius: 999px; white-space: nowrap; transition: transform .3s var(--ease), background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-sm { font-size: 14px; height: 36px; padding: 0 16px; }
.btn-lg { font-size: 16px; height: 52px; padding: 0 26px; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 12px 28px -14px rgba(60,10,20,.6); }
.btn-ghost { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(29,19,21,.14); }
.btn-ghost:hover { background: rgba(255,255,255,.32); }
.apple { width: 17px; height: 17px; margin-top: -2px; }

/* Mark */
.mark { width: 22px; height: 22px; color: var(--ink); --dot: var(--cream); }
.mark.huge { width: 80px; height: 80px; display: block; margin: 0 auto 28px; }

/* Nav */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(1100px, calc(100% - 24px)); height: 54px; padding: 0 9px 0 18px; display: flex; align-items: center; gap: 24px; border-radius: 999px; transition: background .3s, box-shadow .3s; }
.nav.solid { background: rgba(255,247,243,.8); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 0 0 1px rgba(29,19,21,.06), 0 8px 24px -14px rgba(60,10,20,.3); }
.nav.solid .mark { --dot: var(--coral-lo); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.nav-links a { text-decoration: none; opacity: .7; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }

/* Hero */
.hero { padding: 150px 24px 100px; text-align: center; }
.hero h1 { font-size: clamp(54px, 9.4vw, 136px); margin-bottom: 28px; }
.lede { font-size: clamp(18px, 1.9vw, 21px); max-width: 600px; margin: 0 auto; color: var(--ink-2); }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.fine { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }

/* Handwritten accents */
.hand { font-family: "Kalam", cursive; font-weight: 400; letter-spacing: 0; font-size: 1em; line-height: .8; word-spacing: -.12em; display: inline-block; transform: rotate(-2.5deg); transform-origin: left bottom; }
.scribble { position: absolute; left: 1%; top: -78px; display: flex; align-items: flex-end; gap: 4px; color: var(--ink); z-index: 3; pointer-events: none; }
.scribble .hand { font-size: 26px; transform: rotate(-5deg); margin-bottom: 30px; }
.scribble svg { width: 92px; height: 70px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.1s .6s var(--ease); }
.stage-wrap.in .scribble svg { stroke-dashoffset: 0; }

/* Stage */
.stage-wrap { position: relative; max-width: 1040px; margin: 110px auto 0; }
.stage { position: relative; aspect-ratio: 16 / 9.4; border-radius: 24px; overflow: hidden; text-align: left;
  background: radial-gradient(80% 90% at 85% 0%, #6B3446, transparent 70%), linear-gradient(170deg, #3A2129, #24161B);
  box-shadow: 0 0 0 1px rgba(29,19,21,.2), 0 50px 90px -40px rgba(70,10,25,.7); }
.desk { position: absolute; inset: 0; container-type: inline-size; }
.win { position: absolute; background: var(--cream); border-radius: 1.2cqw; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 3cqw 6cqw -2cqw rgba(0,0,0,.6); }
.win-bar { height: 3.3cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.3cqw; background: #F2ECE9; border-bottom: 1px solid rgba(0,0,0,.06); position: relative; }
.win-bar i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; }
.win-bar i:nth-child(1) { background: #F46A5F; } .win-bar i:nth-child(2) { background: #F6BE4F; } .win-bar i:nth-child(3) { background: #5DC453; }
.win-name { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15cqw; font-weight: 600; color: #6b5a5c; pointer-events: none; }
.urlbar { margin: 0 auto; width: 40%; height: 2cqw; border-radius: .6cqw; background: #fff; font-size: 1.05cqw; color: #7a6a6c; display: grid; place-items: center; }
.win-chat { right: 4cqw; top: 4cqw; width: 46cqw; height: 46cqw; }
.chat-body { padding: 2.2cqw 2.6cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.chat-title { font-weight: 600; font-size: 1.35cqw; color: #4a3a3c; }
.ghost-lines { display: flex; flex-direction: column; gap: .7cqw; }
.ghost-lines span { height: .85cqw; border-radius: 1cqw; background: #ECE3DF; width: 90%; }
.ghost-lines .short { width: 55%; }
.bubble { align-self: flex-end; max-width: 80%; background: #F1E8E4; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; font-size: 1.2cqw; color: #2b1d1f;
  opacity: 0; transform: translateY(1.2cqw); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.bubble.in { opacity: 1; transform: none; }
.bubble pre { margin-top: .8cqw; padding: .9cqw 1cqw; background: #fff; border-radius: .7cqw; font-family: var(--mono); font-size: 1cqw; white-space: pre; overflow: hidden; color: #4a3a3c; }
.typing { display: flex; gap: .45cqw; opacity: 0; transition: opacity .4s; }
.typing.in { opacity: 1; }
.typing i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #D7A9A3; animation: dots 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { opacity: .35; } }

.win-code { left: 5cqw; top: 9cqw; width: 54cqw; height: 34cqw; z-index: 2; }
.code { padding: 1.8cqw 0; font-family: var(--mono); font-size: 1.3cqw; color: #4a3a3c; }
.ln { white-space: pre; height: 2.35cqw; line-height: 2.35cqw; position: relative; z-index: 0; }
.ln b { display: inline-block; width: 4cqw; text-align: right; padding-right: 1.4cqw; font-weight: 400; color: #c5b6b3; }
.ln.sel::before { content: ""; position: absolute; left: 4cqw; right: 1.5cqw; top: 0; bottom: 0; background: rgba(240,112,126,.2); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: -1; }
.ln.sel.on::before { transform: none; }
.c-k { color: #B03A5B; } .c-f { color: #2F6FB3; } .c-c { color: #9E8F8C; font-style: italic; } .c-n { color: #A8653A; }
.shutter { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.shutter.go { animation: shutter .6s ease-out; }
@keyframes shutter { 0% { opacity: .55; } 100% { opacity: 0; } }

/* HUD pill, after HUD.swift */
.hud { position: absolute; left: 0; right: 0; bottom: 3.4cqw; display: flex; justify-content: center; z-index: 5; }
.pill { position: relative; display: grid; height: 4.3cqw; border-radius: 2.15cqw; overflow: hidden;
  background: rgba(255,250,248,.82); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.35), 0 1.6cqw 3.2cqw -1.2cqw rgba(0,0,0,.55);
  font-size: 1.32cqw; font-weight: 500; color: var(--ink);
  opacity: 0; transform: translateY(1.2cqw) scale(.94); transform-origin: bottom center;
  transition: opacity .4s var(--ease), transform .55s var(--ease), width .5s var(--ease); }
.pill.show { opacity: 1; transform: none; }
.ph { grid-area: 1 / 1; display: flex; align-items: center; gap: 1.1cqw; white-space: nowrap; padding: 0 1.8cqw; height: 100%;
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.ph:not(.on) { position: absolute; left: 0; top: 0; }
.ph.on { opacity: 1; visibility: visible; transition: opacity .3s .15s; }
.ph[data-ph="live"] { padding-right: 1cqw; }
.bars { display: flex; align-items: center; gap: .25cqw; height: 1.6cqw; }
.bars i { width: .25cqw; height: 25%; border-radius: 1cqw; background: var(--coral-lo); }
.talking i { animation: talk 1.1s var(--ease) infinite; }
.talking i:nth-child(1) { animation-delay: .1s; } .talking i:nth-child(2) { animation-delay: .35s; } .talking i:nth-child(3) { animation-delay: 0s; } .talking i:nth-child(4) { animation-delay: .5s; } .talking i:nth-child(5) { animation-delay: .2s; }
@keyframes talk { 0%, 100% { height: 25%; } 40% { height: 100%; } 70% { height: 50%; } }
.tx { width: 27cqw; overflow: hidden; }
.tx.over { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5cqw); mask-image: linear-gradient(90deg, transparent, #000 2.5cqw); }
.tx > span { display: inline-block; white-space: nowrap; transition: transform .45s var(--ease); }
.wd { animation: wordin .35s var(--ease); }
.tx .idle { color: #8a7a7c; }
@keyframes wordin { from { opacity: 0; filter: blur(2px); } }
.thumbs { display: flex; }
.thumb { flex: none; width: 3.2cqw; height: 2.4cqw; margin-left: .4cqw; border-radius: .6cqw; overflow: hidden; display: grid; place-items: center; font-size: .85cqw; font-weight: 700;
  background: rgba(29,19,21,.09); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); animation: thumbin .45s var(--ease); }
.thumbs .thumb:first-child { margin-left: 0; }
.thumb.shot { background: linear-gradient(#F2ECE9 0 22%, #fff 22%); position: relative; }
.thumb.shot::after { content: ""; position: absolute; left: 18%; right: 25%; top: 40%; height: 9%; background: #E8B2B5; box-shadow: 0 .45cqw 0 #E8DEDA, 0 .9cqw 0 #E8DEDA; border-radius: 1px; }
.thumb.out { animation: thumbout .35s var(--ease) forwards; }
@keyframes thumbin { from { width: 0; margin-left: 0; opacity: 0; transform: scale(.6); } }
@keyframes thumbout { to { width: 0; margin-left: 0; opacity: 0; transform: scale(.6); } }
.chip { display: inline-flex; align-items: center; gap: .5cqw; height: 2.4cqw; padding: 0 .9cqw; margin-left: .2cqw; border-radius: 99px; background: rgba(29,19,21,.07); font-size: 1.12cqw; color: #6b5a5c; transition: background .4s, color .4s, box-shadow .4s; }
.chip b { color: #b0a2a3; font-weight: 600; transition: color .4s; }
.chip.lit { background: rgba(219,84,102,.14); box-shadow: inset 0 0 0 1px rgba(219,84,102,.5); color: var(--ink); }
.chip.lit b { color: var(--coral-lo); }
.pulse { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--coral-lo); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.check { width: 1.3cqw; height: 1.3cqw; color: var(--coral-lo); flex: none; }
.ph[data-ph="sent"].on .check use, .mini-pill .check use { stroke-dasharray: 20; animation: draw .5s .15s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

.keys { position: absolute; right: 3cqw; bottom: 3cqw; display: flex; gap: .5cqw; z-index: 6; }
.keys .cap { font-size: 1.8cqw; height: 4.2cqw; min-width: 4.2cqw; border-radius: .9cqw; background: rgba(255,250,248,.92); color: var(--ink); box-shadow: 0 .35cqw 0 rgba(0,0,0,.3); animation: keyin 1.3s var(--ease) forwards; }
@keyframes keyin { 0% { opacity: 0; transform: translateY(.8cqw); } 15% { opacity: 1; transform: none; } 28% { transform: translateY(.3cqw); box-shadow: 0 .05cqw 0 rgba(0,0,0,.3); } 42% { transform: none; box-shadow: 0 .35cqw 0 rgba(0,0,0,.3); } 75% { opacity: 1; } 100% { opacity: 0; } }

.stage-steps { list-style: none; display: flex; justify-content: center; gap: 28px; margin-top: 24px; flex-wrap: wrap; font-size: 14.5px; font-weight: 550; }
.stage-steps li { opacity: .45; transition: opacity .4s; position: relative; padding-bottom: 6px; }
.stage-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transition: transform .5s var(--ease); }
.stage-steps li.on { opacity: 1; }
.stage-steps li.on::after { transform: none; }

/* Bands */
.band { padding: 120px 0; }
.paper { background: var(--paper); }
.coral { background: var(--coral); }
.h2 { font-size: clamp(40px, 5.6vw, 76px); margin-bottom: 56px; }
.muted { color: var(--ink-soft); }
.paper .muted { color: var(--coral-lo); }

/* Versus */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { border-radius: 26px; padding: 30px 32px; }
.card-head { font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: 14px; }
.card ol { list-style: none; counter-reset: s; }
.card li { counter-increment: s; display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.card li:last-child { border-bottom: 0; }
.old { background: var(--paper-2); }
.old li::before { content: counter(s); font-size: 12px; font-weight: 600; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(29,19,21,.07); color: var(--ink-soft); }
.old li span { position: relative; transition: color .5s; }
.old li span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: var(--coral-lo); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.old li.x span { color: rgba(29,19,21,.38); }
.old li.x span::after { transform: none; }
.new { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; }
.new .card-head { color: rgba(255,247,243,.55); }
.new li { font-size: 24px; font-weight: 500; letter-spacing: -.02em; padding: 18px 0; border-color: rgba(255,247,243,.1); gap: 18px; }
.k { font-size: 20px; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--paper); box-shadow: inset 0 -2px 0 rgba(0,0,0,.4); }
.stay { margin-top: auto; padding-top: 24px; color: rgba(255,247,243,.65); font-size: 16px; }

/* Steps */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--paper); border-radius: 26px; padding: 16px 16px 28px; }
.step-art { height: 200px; border-radius: 16px; background: var(--paper-2); display: grid; place-items: center; align-content: center; gap: 10px; margin-bottom: 22px; overflow: hidden; }
.step h3, .tile h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; padding: 0 10px; margin-bottom: 6px; }
.step p, .tile p { color: var(--ink-2); font-size: 16px; padding: 0 10px; }
.cap.big { font-size: 38px; width: 92px; height: 92px; border-radius: 22px; background: var(--cream); box-shadow: 0 6px 0 #E4CFC9, 0 18px 28px -14px rgba(90,20,30,.35); }
.press { animation: press 2.6s var(--ease) infinite; }
@keyframes press { 0%, 62%, 100% { transform: none; box-shadow: 0 6px 0 #E4CFC9, 0 18px 28px -14px rgba(90,20,30,.35); } 70% { transform: translateY(5px); box-shadow: 0 1px 0 #E4CFC9, 0 8px 14px -10px rgba(90,20,30,.35); } }
.cap-label { font-size: 13px; color: var(--ink-soft); font-weight: 550; margin-top: 6px; }
.mini-pill { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 16px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(29,19,21,.05), 0 12px 28px -16px rgba(90,20,30,.45); font-size: 14.5px; font-weight: 500; max-width: 92%; white-space: nowrap; overflow: hidden; }
.mini-pill .bars { height: 18px; gap: 3px; } .mini-pill .bars i { width: 3px; }
.mini-pill .check { width: 15px; height: 15px; }
.mini-pill .chip { height: 26px; font-size: 12.5px; padding: 0 10px; gap: 5px; margin: 0 -6px 0 0; }
.typer::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--coral-lo); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Details */
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tile { background: #fff; border-radius: 26px; padding: 16px 16px 28px; box-shadow: 0 0 0 1px var(--line); }
.tile-art { height: 190px; border-radius: 16px; background: var(--paper-2); position: relative; overflow: hidden; margin-bottom: 22px; }
.tile-art.center { display: grid; place-items: center; }
.copy-demo { position: absolute; inset: 24px 28px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.cd-line { padding: 4px 8px; border-radius: 6px; }
.cd-line.pick { background: linear-gradient(rgba(219,84,102,.18), rgba(219,84,102,.18)) no-repeat left / 0 100%; animation: hl 4.5s var(--ease) infinite; }
@keyframes hl { 0%, 8% { background-size: 0 100%; } 28%, 100% { background-size: 100% 100%; } }
.cd-keys { position: absolute; left: 8px; bottom: 4px; display: flex; gap: 6px; }
.cd-keys .cap { font-size: 15px; height: 36px; min-width: 36px; border-radius: 9px; background: var(--cream); box-shadow: 0 4px 0 #E4CFC9; animation: cpress 4.5s var(--ease) infinite; }
@keyframes cpress { 0%, 36% { transform: none; box-shadow: 0 4px 0 #E4CFC9; } 41% { transform: translateY(3px); box-shadow: 0 1px 0 #E4CFC9; } 47%, 100% { transform: none; box-shadow: 0 4px 0 #E4CFC9; } }
.cd-chip { position: absolute; right: 8px; bottom: 8px; font-family: var(--sans); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 18px -10px rgba(90,20,30,.4); animation: chip 4.5s var(--ease) infinite; }
@keyframes chip { 0%, 44% { opacity: 0; transform: translateY(8px); } 54%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.logos { grid-auto-flow: column; justify-content: center; gap: 28px; }
.logos img { width: 68px; height: 68px; filter: drop-shadow(0 10px 14px rgba(90,20,30,.18)); }
.ticks { list-style: none; display: grid; gap: 12px; font-size: 15px; font-weight: 500; }
.ticks li { display: flex; align-items: center; gap: 10px; }
.ticks .check { width: 15px; height: 15px; }

/* Get started */
.start3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.start3 li { background: var(--paper); border-radius: 22px; padding: 26px 26px 28px; }
.start3 .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.start3 h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.start3 p { color: var(--ink-2); font-size: 16px; }
#start .cta-row { margin-top: 44px; }
#start .fine { text-align: center; }

/* FAQ */
.faq { display: grid; gap: 8px; }
.faq details { background: #fff; border-radius: 18px; padding: 0 24px; box-shadow: 0 0 0 1px var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 17.5px; font-weight: 500; letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: .9; color: var(--coral-lo); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; }
.path { font-family: var(--mono); font-size: .88em; background: rgba(29,19,21,.06); padding: 1px 6px; border-radius: 6px; }

/* Final */
.final { text-align: center; padding: 140px 24px 110px; }
.final h2 { font-size: clamp(56px, 10vw, 140px); margin-bottom: 22px; }
.foot { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px 32px; color: var(--ink-soft); font-size: 14px; }
.foot .brand { color: var(--ink); font-size: 16px; }
.foot .mark { width: 20px; height: 20px; }
.foot > a:last-child { color: var(--ink); font-weight: 500; text-decoration: none; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 120; opacity: 0; pointer-events: none; max-width: calc(100% - 32px); background: var(--ink); color: var(--paper); border-radius: 16px; padding: 14px 20px; font-size: 15px; transition: opacity .3s, transform .4s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--coral); font-weight: 600; }

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

/* Responsive */
@media (max-width: 900px) {
  .versus, .steps3, .grid4, .start3 { grid-template-columns: 1fr; }
  .band { padding: 90px 0; }
  .h2 { margin-bottom: 40px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding: 120px 16px 70px; }
  .stage-wrap { margin-top: 52px; }
  .scribble { display: none; }
  .stage { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  .stage .win-chat { display: none; }
  .stage .win-code { left: 4cqw; right: 4cqw; width: auto; top: 6cqw; height: 58cqw; }
  .stage .code { font-size: 2.6cqw; }
  .stage .ln { height: 4.7cqw; line-height: 4.7cqw; }
  .stage .ln b { width: 6cqw; }
  .stage .ln.sel::before { left: 6cqw; }
  .stage .win-bar { height: 6cqw; } .stage .win-bar i { width: 2cqw; height: 2cqw; } .stage .win-name { font-size: 2.3cqw; }
  .stage .pill { height: 9cqw; border-radius: 4.5cqw; font-size: 2.9cqw; }
  .stage .ph { gap: 2cqw; padding: 0 3.4cqw; }
  .stage .ph[data-ph="live"] { padding-right: 2cqw; }
  .stage .tx { width: 36cqw; }
  .stage .tx.over { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5cqw); mask-image: linear-gradient(90deg, transparent, #000 5cqw); }
  .stage .bars { height: 3.4cqw; gap: .6cqw; } .stage .bars i { width: .6cqw; }
  .stage .thumb { width: 6.4cqw; height: 4.8cqw; font-size: 1.8cqw; border-radius: 1.2cqw; margin-left: .8cqw; }
  .stage .thumbs .thumb:first-child { margin-left: 0; }
  .stage .chip { height: 5cqw; font-size: 2.4cqw; padding: 0 1.8cqw; gap: 1cqw; }
  .stage .chip span { max-width: 16cqw; overflow: hidden; text-overflow: ellipsis; }
  .stage .check { width: 2.8cqw; height: 2.8cqw; }
  .stage .pulse { width: 1.5cqw; height: 1.5cqw; }
  .stage .hud { bottom: 5cqw; }
  .stage .keys { right: 4cqw; bottom: 17cqw; }
  .stage .keys .cap { font-size: 3.6cqw; height: 8cqw; min-width: 8cqw; border-radius: 1.8cqw; }
  .stage-steps { gap: 18px; font-size: 13.5px; }
  .card { padding: 24px 20px; }
  .new li { font-size: 20px; }
  .foot { padding: 22px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
}