/* overtoaster.dev (Penpot "Web"). System fonts like the app: SF on the Mac, Segoe on Windows. */
:root {
  --bg: #0a0e16; --card: #121826; --card2: #0f141e; --line: rgba(255, 255, 255, .08);
  --text: #fff; --sub: #a9b4c6; --dim: #6e7a8e; --blue: #3b7bf0; --sky: #8fd8ff;
  --toast: #d98e43; --green: #34c759; --discord: #5865f2;
  --radius: 24px; --wide: 1200px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(var(--wide), 100% - 48px); margin: 0 auto; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(10, 14, 22, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; height: 80px; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav nav { display: flex; gap: 40px; margin-left: auto; font-size: 15px; font-weight: 500; color: var(--sub); }
.nav nav a:hover { color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px;
  border-radius: 22px; background: var(--blue); color: #fff; font-weight: 600; font-size: 15px; border: 0; cursor: pointer;
  font-family: inherit; transition: filter .15s; }
.btn:hover { filter: brightness(1.12); }
.btn.big { height: 56px; padding: 0 32px; border-radius: 28px; font-size: 18px; }
.btn.ghost { background: rgba(255, 255, 255, .08); }
.btn.white { background: #fff; color: var(--blue); }
.btn.discord { background: var(--discord); }

/* hero */
.hero { position: relative; padding: 88px 0 40px; }
.hero::before { content: ""; position: absolute; left: 50%; top: -150px; width: 900px; height: 700px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 123, 240, .28), transparent); pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1fr 620px; gap: 40px; align-items: center; position: relative; }
.pill { display: inline-block; padding: 7px 18px; border-radius: 16px; background: rgba(59, 123, 240, .18);
  border: 1px solid rgba(59, 123, 240, .45); color: var(--sky); font-size: 13px; font-weight: 600; }
h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; font-weight: 800; letter-spacing: -1.5px; margin: 24px 0 30px; }
.lead { font-size: 20px; color: var(--sub); max-width: 540px; }
.hero .actions { display: flex; gap: 16px; margin-top: 36px; }
.fine { color: var(--dim); font-size: 14px; font-weight: 500; margin-top: 26px; }
.mac { position: relative; }
.mac .lid { background: #1d2230; border-radius: 22px 22px 6px 6px; padding: 14px; box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
.mac .lid img { border-radius: 10px; }
.mac .base { height: 14px; margin: 0 -40px; background: linear-gradient(#3a4150, #252a35); border-radius: 0 0 14px 14px; position: relative; }
.mac .base::after { content: ""; position: absolute; left: 50%; top: 0; width: 140px; height: 6px; margin-left: -70px;
  background: #1b1f29; border-radius: 0 0 6px 6px; }
.slogan { text-align: center; color: var(--toast); font-size: 34px; font-weight: 700; padding: 70px 0 30px; }

/* sections */
section.block { padding: 100px 0 0; }
.eyebrow { color: var(--sky); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.15; font-weight: 800; letter-spacing: -.8px; margin: 12px 0 0; }
.center { text-align: center; }
.center .intro { margin: 14px auto 0; }
.intro { color: var(--sub); font-size: 18px; max-width: 760px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card .art { aspect-ratio: 384 / 200; width: 100%; }
.card .body { padding: 32px 32px 36px; }
.card h3 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.card p { color: var(--sub); margin-top: 14px; }
.minis { margin-top: 40px; }
.minis div { border-top: 1px solid var(--line); padding-top: 20px; }
.minis h4 { font-size: 17px; }
.minis p { color: var(--sub); font-size: 15px; margin-top: 8px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.compare .card { background: var(--card2); padding: 24px 24px 32px; }
.compare .card.ours { background: var(--card); border-color: var(--blue); }
.tag { display: inline-block; padding: 5px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--dim);
  font-size: 13px; font-weight: 700; }
.ours .tag { background: rgba(59, 123, 240, .18); color: var(--sky); }
.compare img { margin-top: 16px; border-radius: 12px; }
.compare h3 { margin-top: 28px; }
.howto { display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: end; }
.art-wrap { position: relative; }
/* The app in the DMG window (Penpot: 46 px at 108, 84 of 384 × 200). */
.art-wrap .dmg { position: absolute; left: 28.1%; top: 42%; width: 12%; border-radius: 22%; }
.step .num { color: var(--sky); font-size: 13px; font-weight: 700; }
.step h3 { margin-top: 8px; }
.note { display: inline-flex; gap: 8px; margin-top: 18px; padding: 7px 12px; border-radius: 8px; background: rgba(242, 139, 130, .1);
  font-size: 12px; color: var(--sub); }
.note b { color: #f28b82; }
.req { margin-top: 44px; }
.req .card { padding: 28px 24px; }
.req .icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(143, 216, 255, .1); display: grid; place-items: center; }
.req .icon svg { width: 22px; height: 22px; stroke: var(--sky); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.req .k { color: var(--dim); font-size: 13px; font-weight: 700; margin-top: 18px; }
.req h3 { font-size: 18px; margin-top: 6px; }
.req p { font-size: 14px; margin-top: 10px; }
.notyet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 18px 28px; border-radius: 18px;
  background: rgba(217, 142, 67, .06); border: 1px solid rgba(217, 142, 67, .3); }
.notyet b { color: var(--toast); margin-right: 8px; }
.notyet span { padding: 6px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); color: var(--sub); font-size: 14px; font-weight: 500; }
.small { color: var(--dim); font-size: 14px; margin-top: 16px; }

/* pricing */
.pricing { display: grid; grid-template-columns: 1fr 540px; gap: 60px; align-items: start; position: relative; }
.pricing h2 { font-size: 56px; }
.checks { list-style: none; padding: 0; margin-top: 36px; display: grid; gap: 22px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.checks i { width: 22px; height: 22px; border-radius: 11px; background: rgba(143, 216, 255, .14); color: var(--sky);
  font-style: normal; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.checks b { display: block; } .checks span { color: var(--sub); font-size: 15px; }
.link { color: var(--sky); font-weight: 600; font-size: 15px; display: inline-block; margin-top: 30px; }
.price { position: relative; padding: 46px 40px 40px; border-radius: 28px; background: var(--card); border: 1px solid rgba(59, 123, 240, .5);
  box-shadow: 0 30px 80px rgba(59, 123, 240, .18); }
.price .sticker { position: absolute; right: -18px; top: -34px; width: 84px; transform: rotate(8deg); border-radius: 20px; }
.price .free { color: var(--toast); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 14px; background: rgba(217, 142, 67, .12); }
.price .amount { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; }
.price .amount b { font-size: 72px; font-weight: 800; line-height: 1; }
.price .amount span { color: var(--sub); font-size: 15px; font-weight: 500; }
.price ul { list-style: none; padding: 0; margin: 30px 0 34px; line-height: 2; }
.price .btn { width: 100%; }

/* faq */
.faq { display: grid; grid-template-columns: 360px 1fr; gap: 40px; }
.faq .contact b { display: block; margin-top: 18px; } .faq .contact a { color: var(--sky); font-weight: 500; }
details { border-bottom: 1px solid var(--line); padding: 22px 28px; }
details[open] { background: var(--card); border-radius: 16px; border: 1px solid var(--line); margin-bottom: 8px; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; font-size: 18px; font-weight: 700; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 600; color: var(--sub); }
details[open] summary::after { content: "–"; }
details p { color: var(--sub); margin-top: 14px; }

/* discord, final call */
.community { position: relative; display: flex; align-items: center; gap: 36px; padding: 64px; border-radius: 28px; overflow: hidden;
  background: var(--card); border: 1px solid var(--discord); }
.community::before { content: ""; position: absolute; right: -60px; top: -120px; width: 600px; height: 400px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(88, 101, 242, .3), transparent); }
.community .badge { width: 88px; height: 88px; border-radius: 22px; background: var(--discord); display: grid; place-items: center; flex: none; position: relative; }
.community .badge svg { width: 48px; height: 48px; fill: #fff; }
.community .text { flex: 1; position: relative; }
.community .eyebrow { color: #a5acff; }
.community h2 { font-size: 40px; margin-top: 8px; }
.community p { color: var(--sub); font-size: 17px; margin-top: 10px; max-width: 560px; }
.community .side { position: relative; text-align: center; }
.community .side small { display: block; color: var(--dim); font-size: 13px; margin-top: 12px; }
.final { position: relative; display: flex; align-items: center; gap: 60px; padding: 56px 72px; border-radius: 32px; overflow: hidden;
  background: linear-gradient(120deg, #3b7bf0, #5a9bff); margin-top: 60px; }
.final > img.waves { position: absolute; inset: auto 0 0 0; width: 100%; opacity: .45; pointer-events: none; }
.final .toast { width: 168px; border-radius: 36px; position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); transform: rotate(-6deg); }
.final .text { position: relative; flex: 1; }
.final h2 { font-size: 44px; }
.final p { font-size: 18px; margin-top: 10px; }
.join { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.join input { height: 56px; border-radius: 28px; border: 0; padding: 0 24px; font: inherit; font-size: 17px; }
.join input { width: 420px; background: rgba(255, 255, 255, .16); color: #fff; }
.join input::placeholder { color: rgba(255, 255, 255, .75); }
/* "I want it for": three pills (Penpot "Final CTA"). */
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 0; padding: 0; margin: 26px 0 0; }
.choices .what { font-size: 15px; font-weight: 600; opacity: .85; margin-right: 10px; }
.choices label { cursor: pointer; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label span { display: inline-block; height: 38px; line-height: 38px; padding: 0 20px; border-radius: 19px; font-size: 15px;
  font-weight: 600; background: rgba(255, 255, 255, .14); transition: background .15s; }
.choices label:hover span { background: rgba(255, 255, 255, .24); }
.choices input:checked + span { background: #fff; color: var(--blue); font-weight: 700; }
.choices input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.join .btn { height: 56px; }
.final small { display: block; font-size: 13px; font-weight: 500; margin-top: 14px; opacity: .9; }
.final .done { font-size: 18px; font-weight: 600; margin-top: 26px; }

/* footer */
footer { margin-top: 90px; border-top: 1px solid var(--line); padding: 48px 0 30px; }
footer .cols { display: grid; grid-template-columns: 1fr 200px 200px 200px; gap: 0; }
footer .slogan-s { color: var(--toast); font-size: 14px; font-weight: 500; margin-top: 12px; }
footer h5 { color: var(--dim); font-size: 13px; font-weight: 700; margin-bottom: 12px; }
footer .col a { display: block; color: var(--sub); font-size: 15px; font-weight: 500; line-height: 28px; }
footer .col a:hover { color: var(--text); }
footer .legal { border-top: 1px solid var(--line); margin-top: 60px; padding-top: 20px; color: var(--dim); font-size: 13px; }

/* phones (Penpot "overtoaster.dev — mobile (390)") */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .nav .wrap { justify-content: space-between; }
  .hero .wrap, .howto, .pricing, .faq, .compare { grid-template-columns: 1fr; }
  .grid3, .grid4 { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
  .hero .actions { flex-direction: column; }
  .slogan { font-size: 22px; padding-left: 24px; padding-right: 24px; }
  .mac .base { margin: 0 -12px; }
  .pricing h2 { font-size: 44px; }
  .price { padding: 40px 24px 28px; }
  .price .sticker { right: 8px; }
  .community, .final { flex-direction: column; align-items: flex-start; padding: 36px 24px; gap: 24px; }
  .final .toast { width: 110px; }
  .join input { width: 100%; }
  footer .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* The waiting list in the hero (on the dark page). */
.hero-form { margin-top: 34px; max-width: 600px; }
.hero-form .choices { margin-top: 0; }
.choices.dark .what { opacity: 1; color: var(--sub); }
.choices.dark label span { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); color: var(--sub); }
.choices.dark label:hover span { background: rgba(255, 255, 255, .12); color: var(--text); }
.choices.dark input:checked + span { background: rgba(59, 123, 240, .22); border-color: var(--blue); color: #fff; }
.hero-form .join input { width: 340px; background: var(--card); border: 1px solid rgba(255, 255, 255, .14); }
.hero-form .join input::placeholder { color: var(--dim); }
.hero-form .join input:focus { outline: none; border-color: var(--blue); }
.hero-form small { display: block; color: var(--dim); font-size: 13px; margin-top: 12px; }
.done { font-size: 17px; font-weight: 600; margin-top: 24px; }
.hero-form .done { color: var(--sky); }

/* The smaller features, as one row of tags. */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tags span { padding: 8px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--sub); font-size: 14px; font-weight: 500; }

/* Who makes it, and the plan after the beta. */
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.about > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; }
.maker { display: flex; gap: 26px; align-items: flex-start; }
.maker img { width: 72px; border-radius: 18px; flex: none; }
.about h3 { font-size: 24px; margin-top: 8px; }
.about p:not(.eyebrow) { color: var(--sub); margin-top: 10px; }
.about a { color: var(--sky); }
.plan .eyebrow { color: var(--toast); }

/* Discord, below the final form. */
.discord-strip { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 20px 28px; border-radius: 20px;
  background: var(--card); border: 1px solid rgba(88, 101, 242, .5); color: var(--sub); }
.discord-strip:hover { border-color: var(--discord); }
.discord-strip .badge { width: 48px; height: 48px; border-radius: 13px; background: var(--discord); display: grid; place-items: center; flex: none; }
.discord-strip .badge svg { width: 26px; height: 26px; fill: #fff; }
.discord-strip b { color: var(--text); margin-right: 8px; }
.discord-strip .go { margin-left: auto; color: #a5acff; font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .maker { flex-direction: column; }
  .hero-form .join input { width: 100%; }
  .discord-strip { flex-wrap: wrap; }
}

/* Review 2026-10-26: lighter steps, cleaner art edges, shorter labels on phones. */
.card .art.inset { transform: scale(1.07); }
.steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  border-top: 1px solid var(--line); padding-top: 36px; }
.steps .num { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--sky); }
.steps h3 { font-size: 22px; margin-top: 18px; }
.steps p { color: var(--sub); margin-top: 10px; }
.maker .avatar { width: 72px; height: 72px; border-radius: 36px; flex: none; display: grid; place-items: center; font-size: 24px; font-weight: 800;
  background: linear-gradient(135deg, #3b7bf0, #8fd8ff); color: #0a0e16; }
.nav .btn .short { display: none; }
@media (max-width: 900px) {
  .nav .btn .long { display: none; }
  .nav .btn .short { display: inline; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .choices .what { width: 100%; margin-bottom: 2px; }
  .join .btn { width: 100%; }
  .tags span { font-size: 13px; padding: 6px 12px; }
}

/* The toast, around the page (Penpot "Toast moods"). It doesn't take itself seriously. */
.buddy { position: absolute; z-index: 2; }
.hero-buddy { right: -26px; top: -70px; display: flex; align-items: flex-end; gap: 6px; }
.hero-buddy .hero-toast { width: 86px; height: auto; transform: rotate(9deg); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45)); overflow: visible; }
.hero-toast .pupils { transition: transform .12s ease-out; }
.bubble { background: #fff; color: #0a0e16; font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 16px 16px 4px 16px;
  white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); margin-bottom: 52px; }
.corner-toast { position: absolute; right: 10px; bottom: -22px; width: 64px; transform: rotate(-8deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.corner-toast.sleepy { left: 14px; right: auto; bottom: -16px; width: 58px; transform: rotate(-4deg); }
.mini-toast { width: 30px; margin-right: -4px; }
.has-buddy { position: relative; }
.peek { position: absolute; right: 26px; top: -46px; width: 64px; transform: rotate(10deg); }
.compare .card.has-buddy { overflow: visible; }
.maker-toast { width: 78px; flex: none; margin-top: -6px; transform: rotate(-6deg); }
.faq-toast { width: 110px; margin: 20px 0 10px; transform: rotate(-5deg); }
.poke { position: relative; background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
.poke .toast { width: 170px; border-radius: 0; box-shadow: none; transform: rotate(-6deg); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .3)); }
.poke .bubble { position: absolute; left: 120px; top: -6px; opacity: 0; transform: scale(.6); transition: .2s; margin: 0; }
.poke.kawaii .bubble { opacity: 1; transform: scale(1) rotate(-6deg); }
.poke.bounce .toast { animation: bounce .35s; }
@keyframes bounce { 40% { transform: rotate(-12deg) translateY(-14px) scale(1.05); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-buddy .hero-toast { animation: bob 3.2s ease-in-out infinite; }
}
@keyframes bob { 50% { transform: rotate(4deg) translateY(-6px); } }
@media (max-width: 900px) {
  .hero-buddy { right: 0; top: -60px; }
  .hero-buddy .hero-toast { width: 64px; }
  .bubble { font-size: 12px; }
  .faq-toast { width: 80px; }
  .poke .toast { width: 120px; }
}
.hero-buddy { cursor: pointer; user-select: none; }
.hero-buddy.bounce .hero-toast { animation: bounce .35s; }
.hero-buddy.kawaii .bubble { background: #ffd1e8; color: #b0306b; transform: rotate(-4deg); }

/* The app's screens, in a Mac window. */
.shots { padding-top: 60px; }
.tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tabs button { font: inherit; font-size: 15px; font-weight: 600; color: var(--sub); background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  height: 38px; padding: 0 18px; border-radius: 19px; cursor: pointer; }
.tabs button:hover { color: #fff; }
.tabs button[aria-selected="true"] { background: rgba(59, 123, 240, .22); border-color: var(--blue); color: #fff; }
.window { position: relative; margin: 26px auto 0; max-width: 1100px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6); background: #0a0e16; }
.window img { width: 100%; }
.window .lights { position: absolute; left: 16px; top: 14px; display: flex; gap: 8px; z-index: 1; }
.window .lights i { width: 12px; height: 12px; border-radius: 6px; background: #ff5f57; }
.window .lights i:nth-child(2) { background: #febc2e; } .window .lights i:nth-child(3) { background: #28c840; }
.shots .small { margin-top: 18px; }

/* The toast on the Mac, flying with the page (desktop). */
.hero-buddy { width: 86px; right: -26px; top: -70px; }
.hero-buddy .bubble { position: absolute; right: 100%; bottom: 62%; margin: 0 6px 0 0; }
.buddy-spot { position: absolute; right: -26px; top: -70px; width: 86px; height: 106px; }
.buddy.flying { position: fixed; left: 0; top: 0; right: auto; z-index: 30; will-change: transform; transition: opacity .3s; }
.buddy.flying.gone { opacity: 0; pointer-events: none; }
/* Flying, the bubble sits above it, toward the page. */
.buddy.flying .bubble { right: 30%; bottom: 100%; margin: 0 0 4px 0; border-radius: 16px 16px 4px 16px; max-width: 240px; white-space: normal; width: max-content; }
.hero-buddy .mood-img { width: 86px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45)); }
.bubble.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .hero-buddy .mood-img { animation: bob 3.2s ease-in-out infinite; } }
@media (max-width: 900px) { .hero-buddy, .hero-buddy .mood-img { width: 64px; } .hero-buddy { right: 0; top: -60px; } }

/* hidden means hidden (img { display: block } above would win otherwise). */
[hidden] { display: none !important; }

/* Review 2: readable small print, flat (not clickable-looking) tags, one card radius. */
.small, .hero-form small, .final small, .fine { color: var(--sub); font-size: 14px; }
.final small { color: #fff; opacity: .92; }
.tags { gap: 0 18px; }
.tags span { background: none; border: 0; padding: 0; color: var(--dim); font-size: 14px; }
.tags span + span::before { content: "·"; margin-right: 18px; color: var(--line); }
.notyet span { background: none; padding: 0 6px 0 0; }
.notyet span + span::before { content: "· "; color: var(--dim); }
.final, .community, .price, .discord-strip, .about > div { border-radius: var(--radius); }
.shots h2 { margin-bottom: 26px; }

/* The waiting list's answer, with a toast. */
.done { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 18px; font-weight: 700; }
.done img { width: 70px; flex: none; }
.crumb { position: fixed; z-index: 50; width: 8px; height: 8px; border-radius: 2px; pointer-events: none;
  animation: crumb 1s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes crumb { to { transform: translate(var(--x), var(--y)) rotate(360deg); opacity: 0; } }

/* Phones: a toast by each heading, a join button that stays, a shorter page. */
.say { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--sub); font-size: 14px; font-weight: 600; }
.say img { width: 34px; }
.sticky-join { display: none; }
@media (max-width: 900px) {
  .sticky-join { display: block; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 40; text-align: center;
    background: var(--blue); color: #fff; font-weight: 700; padding: 15px; border-radius: 26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    transform: translateY(120px); transition: transform .3s; }
  .sticky-join.on { transform: none; }
  .compare img, .step .art, .step .art-wrap, .req .icon, .req .intro, .tags { display: none; }
  .req .card { padding: 18px 20px; }
  .req .k { margin-top: 0; }
  .grid4.req { gap: 10px; }
  .compare .card { padding: 20px; }
  .compare h3 { margin-top: 14px; }
}

/* The big toast at the end talks from the start. */
.poke .bubble { opacity: 1; transform: rotate(-4deg); left: 110px; top: -18px; }

/* Subpages (privacy, help, press…). */
.doc { padding: 70px 0 20px; position: relative; max-width: 860px; }
.doc-h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; font-weight: 800; letter-spacing: -1px; margin: 12px 0 16px; }
.doc .lead { font-size: 18px; color: var(--sub); }
.doc h2 { font-size: 24px; margin: 44px 0 10px; display: flex; align-items: center; gap: 14px; }
.doc h3 { font-size: 18px; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--sub); }
.doc p + p { margin-top: 12px; }
.doc a { color: var(--sky); }
.doc ol, .doc ul { padding-left: 22px; display: grid; gap: 8px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--dim); font-size: 13px; font-weight: 700; }
.doc td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }
.doc code { font-size: 13px; background: var(--card); padding: 2px 6px; border-radius: 6px; }
.doc .note { background: var(--card); border: 1px solid rgba(143, 216, 255, .25); border-radius: 14px; padding: 14px 18px; margin-top: 14px; font-size: 15px; }
.doc .crumbs { font-size: 14px; color: var(--dim); }
.copy { font: inherit; font-size: 13px; font-weight: 600; color: var(--sky); background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 12px; cursor: pointer; }
.page-toast { position: absolute; right: -40px; top: 40px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.page-toast img { width: 96px; transform: rotate(8deg); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45)); }
.page-toast .bubble { order: -1; margin: 0; max-width: 220px; white-space: normal; }
.tiers { margin-top: 30px; }
.tier { padding: 26px; } .tier b { display: block; font-size: 40px; font-weight: 800; color: #fff; margin: 8px 0; }
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
.topic { padding: 24px; } .topic h3 { margin: 0; color: #fff; } .topic .k { color: var(--dim); font-size: 13px; margin-top: 4px; }
.topic ul { margin-top: 12px; font-size: 15px; }
.shots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 14px; }
.shot { display: block; color: var(--sub); font-size: 14px; font-weight: 600; text-decoration: none; }
.shot img { border-radius: 12px; border: 1px solid var(--line); margin-bottom: 8px; }
.shot.icon img { width: 120px; border: 0; border-radius: 26px; }
.release h2 { font-size: 28px; }
.changes { list-style: none; padding: 0; }
.changes li { display: flex; gap: 12px; align-items: baseline; }
.kind { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; }
.kind.new { background: rgba(143, 216, 255, .15); color: var(--sky); }
.kind.better { background: rgba(52, 199, 89, .15); color: var(--mint); }
.kind.fixed { background: rgba(217, 142, 67, .15); color: var(--toast); }
.empty { display: flex; gap: 20px; align-items: center; margin-top: 40px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.empty img { width: 90px; } .empty p { margin: 0; }
.center-page { text-align: center; padding: 30px 0 40px; }
.center-page .big-toast { width: 170px; margin: 0 auto 10px; }
.center-page p { margin-top: 14px; }
.center-page .btn { margin: 8px 4px 0; }
.link-text { color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .page-toast { display: none; }
  .topics, .shots-grid { grid-template-columns: 1fr; }
}

/* The final toast's bubble above its head, not over the heading. */
.poke .bubble { left: 50%; top: -34px; transform: translateX(-50%) rotate(-4deg); max-width: 180px; white-space: normal; text-align: center; }
.poke.kawaii .bubble { transform: translateX(-50%) rotate(-6deg); }

/* Hero, take 3: centred words, a big Mac below, game covers flying around it, the toast peeking. */
.hero { padding: 72px 0 0; overflow: hidden; }
.hero::before { left: 50%; top: -260px; width: 1300px; height: 900px; margin-left: -650px;
  background: radial-gradient(closest-side, rgba(59, 123, 240, .32), transparent 70%); }
.hero::after { content: ""; position: absolute; left: 50%; top: 520px; width: 1000px; height: 600px; margin-left: -500px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 142, 67, .18), transparent 70%); pointer-events: none; }
.hero .wrap.hero-center { display: block; text-align: center; position: relative; z-index: 2; }
.hero-center h1 { font-size: clamp(48px, 7.4vw, 96px); letter-spacing: -2.5px; margin: 26px 0 22px; }
.hero-center .glow { background: linear-gradient(90deg, #8fd8ff, #3b7bf0 55%, #f6d69a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-center .lead { margin: 0 auto; max-width: 620px; font-size: 19px; }
.hero-center .hero-form { margin: 30px auto 0; max-width: 620px; }
.hero-center .choices { justify-content: center; }
.hero-center .join { justify-content: center; }
.hero-center .hero-form small { text-align: center; }
.hero-center .fine { margin-top: 18px; }
.stage { position: relative; width: min(900px, 100% - 48px); margin: 70px auto 0; z-index: 1; }
.stage .mac .lid { border-radius: 26px 26px 6px 6px; }
.stage .mac .base { margin: 0 -60px; }
.covers { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 0; }
.cover { position: absolute; width: 118px; border-radius: 12px; box-shadow: 0 22px 40px rgba(0, 0, 0, .5);
  transform: translate(calc(var(--x) - 59px), calc(var(--y) + var(--s, 0px))) rotate(var(--r)); }
@media (prefers-reduced-motion: no-preference) {
  .cover { animation: float 6s ease-in-out infinite; animation-delay: calc(var(--d) * -2s); }
}
@keyframes float { 50% { translate: 0 -12px; } }
/* The toast peeks over the Mac's top edge, from behind it. */
.stage .hero-buddy, .stage .buddy-spot { right: 60px; top: -64px; }
.stage .hero-buddy:not(.flying) { z-index: -1; }
@media (max-width: 1100px) { .covers { display: none; } }
@media (max-width: 900px) {
  .hero { padding-top: 40px; }
  .stage { margin-top: 44px; }
  .stage .mac .base { margin: 0 -14px; }
  .stage .hero-buddy, .stage .buddy-spot { right: 10px; top: -54px; }
}
.stage .mac .lid img { width: 100%; }
.cover { max-width: none; }
.stage { width: min(780px, 100% - 48px); }
.stage .mac .lid { position: relative; z-index: 1; }
.stage .hero-buddy:not(.flying) { z-index: 0; }
.stage .hero-buddy, .stage .buddy-spot { top: -58px; }
@media (max-width: 900px) {
  .hero-buddy .bubble { right: 0; bottom: 100%; margin: 0 0 6px; white-space: normal; width: max-content; max-width: 200px; border-radius: 16px 16px 4px 16px; }
  .hero-center .fine { margin-bottom: 30px; }
}
@media (max-width: 900px) { .stage { margin-top: 140px; } }

/* Parallax decor around each part (desktop). */
section.block { position: relative; }
.decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
section.block > .wrap { position: relative; z-index: 1; }
.dec { position: absolute; transform: translateY(var(--py, 0px)) rotate(var(--r, 0deg)); will-change: transform; }
.cover-d { border-radius: 12px; box-shadow: 0 22px 44px rgba(0, 0, 0, .5); opacity: .9; max-width: none; }
.win { width: 150px; height: 96px; border-radius: 12px; background: linear-gradient(#1e2433, #121826); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5); padding: 9px 10px; display: flex; gap: 5px; opacity: .85; }
.win i { width: 8px; height: 8px; border-radius: 4px; background: #ff5f57; } .win i:nth-child(2) { background: #febc2e; } .win i:nth-child(3) { background: #28c840; }
.win.game { background: linear-gradient(160deg, #2b1b4a, #e0896b); }
.win.term { background: #0b0d12; } .win.term::after { content: ">_"; position: absolute; left: 12px; top: 34px; color: #7ee2a8; font: 700 14px ui-monospace, monospace; }
.win.steam { background: linear-gradient(#1b2838, #2a475e); }
.crumb-d { width: 14px; height: 14px; border-radius: 4px; opacity: .8; }
@media (prefers-reduced-motion: no-preference) { .dec { transition: transform .1s linear; } }
@media (max-width: 1100px) { .decor { display: none; } }
/* The cards' pictures slide inside their frames. */
.card .art, .compare img { transform: translateY(var(--py, 0px)) scale(1.1); transition: transform .1s linear; }
.compare .card img { border-radius: 12px; }
.compare .card { overflow: hidden; }

/* The flying toast: bigger, lands with a wobble, ends up as the big toast by the form. */
.buddy.flying .hero-toast, .buddy.flying .mood-img { width: 96px; }
.buddy.flying.land .hero-toast, .buddy.flying.land .mood-img { animation: land .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes land { 30% { transform: scale(1.15, .82); } 65% { transform: scale(.94, 1.08); } }
.buddy.flying.home .bubble { opacity: 0; }
.poke.waiting .toast { opacity: 0; }
.poke .toast { transition: opacity .15s; }
.crumb.trail { width: 6px; height: 6px; animation-duration: .9s; }

/* ——— Scenes (take 4): each part is a composition like the hero ——— */
.scene { position: relative; padding: 140px 0 0; }
.scene-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; align-items: center; }
.scene.flip .scene-grid { grid-template-columns: 1.25fr 1fr; }
.scene.flip .scene-text { order: 2; }
.scene-text h2 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -1.5px; margin: 14px 0 18px; }
.scene-text p:not(.eyebrow) { color: var(--sub); font-size: 19px; max-width: 440px; }
.scene-stage { position: relative; height: 460px; }
.layer { position: absolute; transform: translateY(var(--py, 0px)) rotate(var(--r, 0deg)); will-change: transform; }
img.layer { border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); max-width: none; }

/* Spotlight */
.spot { left: 8%; right: 4%; top: 22%; background: rgba(30, 36, 51, .86); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); overflow: hidden; }
.spot-bar { display: flex; align-items: center; gap: 14px; padding: 18px 22px; font-size: 28px; font-weight: 500; border-bottom: 1px solid var(--line); }
.spot-bar svg { width: 28px; height: 28px; fill: none; stroke: var(--sub); stroke-width: 2; stroke-linecap: round; }
.caret { width: 2px; height: 30px; background: var(--sky); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.spot-hit, .spot-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.spot-hit { margin: 8px; border-radius: 12px; background: var(--blue); }
.spot-hit img, .spot-row img { width: 40px; height: 54px; object-fit: cover; border-radius: 6px; }
.spot-hit div { flex: 1; } .spot-hit b { display: block; font-size: 17px; } .spot-hit small { opacity: .8; }
.spot-hit kbd { font: inherit; opacity: .8; }
.spot-row { color: var(--sub); padding-bottom: 16px; }
.dock { left: 14%; right: 14%; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px;
  background: rgba(255, 255, 255, .08); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; }
.dock img { width: 46px; height: 46px; object-fit: cover; border-radius: 11px; transition: transform .2s; }
.dock img:hover { transform: translateY(-10px) scale(1.15); }
.dock .sep { width: 1px; height: 40px; background: rgba(255, 255, 255, .2); }
.dock .trash { width: 40px; height: 46px; border-radius: 8px; background: linear-gradient(#d8dde6, #9aa3b2); }

/* Mac windows */
.mwin { background: #121826; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; overflow: hidden; box-shadow: 0 34px 80px rgba(0, 0, 0, .6); }
.mwin .bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #1e2433; font-size: 12px; color: var(--sub); }
.mwin .bar i { width: 11px; height: 11px; border-radius: 6px; background: #ff5f57; } .mwin .bar i:nth-child(2) { background: #febc2e; } .mwin .bar i:nth-child(3) { background: #28c840; }
.mwin .bar span { margin-left: 10px; font-weight: 600; }
.steamwin { width: 62%; background: linear-gradient(#1b2838, #16202d); }
.steamwin .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
.steamwin .grid img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.gamewin { width: 52%; } .gamewin img { width: 100%; height: 220px; object-fit: cover; object-position: 50% 60%; }
.termwin { width: 58%; background: #0b0d12; }
.termwin pre { margin: 0; padding: 14px 16px; font: 13px/1.6 ui-monospace, Menlo, monospace; color: #c9d4e3; white-space: pre-wrap; }
.termwin pre b { color: var(--mint); font-weight: 600; }

/* Wake */
.wake .moon { right: 6%; top: 0; width: 70px; height: 70px; border-radius: 50%; box-shadow: -16px 8px 0 0 #f6e7b8; transition: opacity .6s; }
.wake .z { font: 800 30px system-ui; color: var(--sky); transition: opacity .6s; }
.wake .z1 { left: 30%; top: 4%; } .wake .z2 { left: 37%; top: -4%; font-size: 20px; }
.tower { left: 6%; top: 18%; width: 150px; height: 290px; border-radius: 16px; background: linear-gradient(145deg, #2a3142, #161b26);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 34px 80px rgba(0, 0, 0, .6); padding: 30px 24px; display: flex; flex-direction: column; gap: 12px; }
.tower .led { width: 12px; height: 12px; border-radius: 6px; background: #3a4150; margin-bottom: 30px; transition: .4s; }
.tower .vent { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.laptop { right: 2%; top: 28%; width: 52%; }
.laptop .scr { position: relative; aspect-ratio: 16 / 10; border-radius: 14px 14px 4px 4px; border: 10px solid #1d2230; overflow: hidden; background: #0a0e16; }
.laptop .scr img { width: 100%; height: 100%; object-fit: cover; opacity: .25; transition: opacity .6s; }
.playbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: #0a0e16; font-weight: 700; padding: 10px 20px; border-radius: 20px; }
.laptop .kb { height: 12px; margin: 0 -24px; background: linear-gradient(#3a4150, #252a35); border-radius: 0 0 12px 12px; }
.beam { left: 22%; top: 30%; width: 34%; fill: none; stroke: var(--sky); stroke-width: 3; stroke-dasharray: 8 10; opacity: 0; transition: opacity .5s; }
#wake.awake .led { background: var(--green); box-shadow: 0 0 18px var(--green); }
#wake.awake .moon, #wake.awake .z { opacity: 0; }
#wake.awake .laptop .scr img { opacity: 1; }
#wake.awake .beam { opacity: .8; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -36; } }
#wake .tags { margin-top: 80px; }

/* Before / after */
.center-scene { text-align: center; }
.center-scene .intro { margin: 14px auto 0; }
.slider { position: relative; max-width: 980px; margin: 44px auto 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55); aspect-ratio: 540 / 300; }
.slider > img, .slider .before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider .before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.slider .lab { position: absolute; top: 16px; padding: 6px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; background: rgba(10, 14, 22, .7); }
.slider .lab.l { left: 16px; color: var(--sub); } .slider .lab.r { right: 16px; color: var(--sky); }
.slider input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.slider .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.slider .handle i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.slider .handle i::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: #0a0e16; font-weight: 800; }

/* The path of three steps */
.path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; padding-top: 40px; }
.path .line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 120px; fill: none; stroke: rgba(143, 216, 255, .35); stroke-width: 3; stroke-dasharray: 10 12; }
.stop { position: relative; padding-top: 220px; }
.stop:nth-child(3) { margin-top: 60px; } .stop:nth-child(4) { margin-top: -20px; }
.stop img.layer { left: 0; top: 0; width: 100%; max-width: 340px; }
.stop b { color: transparent; -webkit-text-stroke: 1.5px var(--sky); font-size: 54px; font-weight: 800; line-height: 1; }
.stop h3 { font-size: 22px; margin-top: 10px; } .stop p { color: var(--sub); margin-top: 8px; }

/* The recipe */
.recipe { position: relative; background: #f6ecd8; color: #2a1d10; border-radius: 6px; padding: 34px 38px 30px; transform: rotate(1.5deg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: ui-monospace, Menlo, monospace;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(90, 52, 24, .12) 31px 32px); }
.recipe::before, .recipe::after { content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background: radial-gradient(circle at 6px -2px, transparent 7px, #f6ecd8 7.5px) 0 0 / 12px 12px repeat-x; }
.recipe::before { top: -11px; transform: rotate(180deg); } .recipe::after { bottom: -11px; }
.rtitle { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: #8a4e22; margin-bottom: 18px; }
.recipe ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.recipe li { font-size: 16px; line-height: 1.45; } .recipe li b { color: #5a3418; }
.recipe small { display: block; color: #8a6a4a; font-size: 13px; }
.rnot { margin-top: 22px; padding-top: 16px; border-top: 2px dashed rgba(90, 52, 24, .3); font-size: 13px; color: #7a5a3a; }

@media (max-width: 1100px) {
  .scene { padding-top: 90px; }
  .scene-grid, .scene.flip .scene-grid { grid-template-columns: 1fr; gap: 30px; }
  .scene.flip .scene-text { order: 0; }
  .scene-stage { height: 400px; }
  .path { grid-template-columns: 1fr; } .path .line { display: none; } .stop:nth-child(n) { margin-top: 0; }
  .layer { transform: rotate(var(--r, 0deg)); }
}
@media (max-width: 600px) {
  .scene-stage { height: 330px; }
  .spot-bar { font-size: 20px; } .spot { left: 0; right: 0; }
  .dock img { width: 32px; height: 32px; } .dock { left: 0; right: 0; gap: 6px; }
  .tower { width: 100px; height: 200px; } .laptop { width: 62%; }
  .recipe { padding: 26px 22px; transform: none; }
  .slider { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .spot { top: 8%; }
  .dock { bottom: -10px; }
  .scene-stage { height: 380px; }
  .scene-stage > img.layer { width: 80px !important; }
}

.poke.popin .toast { animation: popin .6s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes popin { from { transform: translateY(-120px) rotate(-30deg) scale(.6); opacity: 0; } }
.poke.waiting .bubble { opacity: 0; }

/* On the Mac the bubble goes beside the toast, not over the words above. */
.buddy.flying.at-hero .bubble { left: 100%; right: auto; bottom: 34%; margin: 0 0 0 8px; border-radius: 16px 16px 16px 4px; max-width: 200px; }

/* ——— Subpages, take 2: a hero like the landing page, a toast guide beside the text ——— */
.sub-hero, .sub-scene { position: relative; overflow: hidden; text-align: center; }
.sub-hero { padding: 110px 0 90px; }
.sub-hero::before, .sub-scene::before { content: ""; position: absolute; left: 50%; top: -280px; width: 1200px; height: 800px; margin-left: -600px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 123, 240, .3), transparent 70%); pointer-events: none; }
.sub-hero .wrap, .sub-scene .wrap { position: relative; z-index: 1; }
.sub-hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1.05; font-weight: 800; letter-spacing: -2px; margin: 18px 0 18px; }
.sub-hero .glow { background: linear-gradient(90deg, #8fd8ff, #3b7bf0 55%, #f6d69a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub-hero .lead { color: var(--sub); font-size: 19px; max-width: 640px; margin: 0 auto; }
.sub-hero .lead a { color: var(--sky); }
.layers { position: absolute; inset: 0; pointer-events: none; }
.layers .layer { position: absolute; transform: translateY(var(--py, 0px)) rotate(var(--r, 0deg)); }
.layers img.layer { width: 96px; border-radius: 12px; box-shadow: 0 22px 44px rgba(0, 0, 0, .5); opacity: .85; }
.layers .crumb-d { width: 14px; height: 14px; border-radius: 4px; opacity: .8; }
.doc-wrap { display: grid; grid-template-columns: minmax(0, 760px) 230px; gap: 60px; justify-content: center; }
.doc-wrap .doc { padding: 10px 0 40px; max-width: none; }
.doc h2 { font-size: 30px; letter-spacing: -.5px; margin: 56px 0 12px; scroll-margin-top: 120px; }
.doc h2:first-child { margin-top: 0; }
.guide { position: sticky; top: 140px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.guide img { width: 130px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); transform: rotate(6deg); }
.guide .bubble { position: static; margin: 0; max-width: 220px; white-space: normal; text-align: center; border-radius: 16px 16px 16px 4px; }
.guide.hop img { animation: land .45s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: no-preference) { .guide img { animation: bob 3.2s ease-in-out infinite; } }
.quote { font-size: 20px; color: #fff !important; line-height: 1.5; border-left: 3px solid var(--blue); padding-left: 18px; }
.copy { margin-top: 12px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform .2s; }
.tier:hover { transform: translateY(-6px) rotate(-1deg); }
.tier.hot { border-color: var(--blue); box-shadow: 0 20px 60px rgba(59, 123, 240, .2); }
.tier b { display: block; font-size: 44px; font-weight: 800; color: #fff; margin: 6px 0; }
.topic { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 24px; transition: transform .2s, border-color .2s; }
.topic:hover { transform: translateY(-6px); border-color: rgba(143, 216, 255, .4); }
.topic img { position: absolute; right: 16px; top: -26px; width: 56px; transform: rotate(10deg); transition: transform .25s; }
.topic:hover img { transform: rotate(-6deg) translateY(-8px) scale(1.1); }
.topic h3 { margin: 0; color: #fff; padding-right: 60px; }
.sub-scene { padding: 120px 0 110px; min-height: 70vh; }
.sub-scene .center-page { padding: 0; }
.sub-scene .big-toast { width: 210px; cursor: pointer; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); }
.sub-scene .big-toast.hop { animation: land .45s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: no-preference) { .sub-scene .big-toast { animation: bob 3.2s ease-in-out infinite; } }
.sub-scene .doc-h1 { font-size: clamp(36px, 5.4vw, 64px); }
.sub-scene .lead { color: var(--sub); font-size: 19px; max-width: 560px; margin: 0 auto; }
.sub-scene p { margin-top: 18px; color: var(--sub); }
@media (max-width: 1000px) {
  .doc-wrap { grid-template-columns: 1fr; gap: 0; }
  .guide { position: fixed; top: auto; bottom: 12px; right: 12px; z-index: 30; flex-direction: row; align-items: flex-end; }
  .guide img { width: 58px; } .guide .bubble { font-size: 12px; max-width: 170px; }
  .tiers { grid-template-columns: 1fr; }
  .layers img.layer { width: 64px; }
}

/* The pictures have see-through parts: an opaque base under each half. */
.slider, .slider .before { background: #0f1a33; }
.slider .before img { background: #0f1a33; }

/* Help center */
.search { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px;
  padding: 0 22px; height: 64px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.search:focus-within { border-color: var(--blue); }
.search svg { width: 24px; height: 24px; fill: none; stroke: var(--sub); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { flex: 1; background: none; border: 0; color: #fff; font: inherit; font-size: 18px; outline: none; }
.results { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.results a, .most .mr { display: flex; justify-content: space-between; padding: 14px 20px; color: #fff; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--line); }
.results a:hover, .most .mr:hover { background: rgba(59, 123, 240, .15); }
.results a span, .most .mr span { color: var(--sky); }
.results .none { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin: 0; }
.results .none img { width: 40px; }
.topics { margin-top: 34px; }
.topic ul.links { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 6px; }
.topic ul.links a { color: var(--sky); text-decoration: none; font-weight: 500; }
.topic ul.links a:hover { text-decoration: underline; }
.most { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.most .mr:last-child { border-bottom: 0; }
.related { margin-top: 50px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 8px; }
.related a { color: var(--sky); font-weight: 600; text-decoration: none; }
.helpful { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--sub); }
.helpful a.copy { text-decoration: none; }
.doc kbd { font: 600 13px ui-monospace, Menlo, monospace; background: var(--card); border: 1px solid rgba(255, 255, 255, .18); border-bottom-width: 3px;
  border-radius: 7px; padding: 2px 8px; color: #fff; white-space: nowrap; }