/* ==========================================================================
   Kwikiz website theme. Same language as the app: white canvas, bold ink type,
   blue tickets, orange and yellow stickers, arcade buttons with hard shadows.
   ========================================================================== */

@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(../fonts/dm-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 900; font-display: swap; src: url(../fonts/dm-sans-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }

:root {
  --blue: #0665ff; --blue-deep: #0343b3; --blue-soft: #e8f0ff;
  --yellow: #ffbf16; --yellow-soft: #fff4cf;
  --orange: #fa542c; --orange-soft: #ffece5;
  --green: #2c8a52; --green-soft: #e9f7ec;
  --ink: #11110f; --ink-2: #2a2a26; --muted: #5f625a; --faint: #8a8d83; --line: #e6e6df; --paper: #ffffff; --cream: #fafaf6;
  /* Ghost's Design settings can swap fonts; DM Sans is the Kwikiz default. */
  --sans: var(--gh-font-body, 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --heading: var(--gh-font-heading, 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius: 18px; --shadow: 0 5px 0 var(--ink);
  --ticket: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  --gutter: clamp(16px, 4vw, 40px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ghost-accent-color: var(--blue);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--heading); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
p { margin: 0; }
ul[role="list"] { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; }
.skip-link:focus { top: 12px; }

.i { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; }
.dot { color: var(--orange); }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 150px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); }
.section-head h2, .plus-copy h2, .science-title { font-size: clamp(40px, 6.4vw, 78px); }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; }
.lede { max-width: 560px; margin-top: 18px; color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; }

/* ---------- Small pieces ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow .i { color: var(--blue); font-size: 17px; }
.eyebrow-yellow, .eyebrow-yellow .i { color: var(--yellow); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.chip-ink { background: var(--ink); color: #fff; }
.chip-ink .i { color: var(--yellow); }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tag-ink { background: var(--ink); color: #fff; } .tag-ink .i { color: var(--yellow); }
.tag-orange { background: var(--orange); color: #fff; }
.tag-yellow { background: var(--yellow); color: var(--ink); }
.tag-blue { background: var(--blue); color: #fff; }
.tag-soft { background: var(--blue-soft); color: var(--blue); }
.tag-soft[data-tag="study-guides"] { background: var(--yellow-soft); color: #7a5600; }
.tag-soft[data-tag="inside-kwikiz"] { background: var(--orange-soft); color: #b23a17; }
.tag-soft[data-tag="languages"] { background: var(--green-soft); color: var(--green); }
.sticker { position: absolute; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-family: var(--cond); font-size: 20px; font-weight: 800; line-height: .9; text-align: center; box-shadow: 0 4px 0 rgba(17, 17, 15, .25); }
.sticker-yellow { background: var(--yellow); color: var(--ink); }
.sticker-orange { background: var(--orange); color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }
.text-link-light { color: #fff; }

/* Arcade buttons: an ink edge and a hard shadow that presses down. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 16px;
  font-size: 17px; font-weight: 900; letter-spacing: -.01em; box-shadow: 0 5px 0 var(--ink); transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn .i { font-size: 18px; transition: transform .2s var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
.btn-sm { min-height: 44px; padding: 0 16px; border-radius: 13px; font-size: 15px; box-shadow: 0 4px 0 var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 5px 0 var(--orange); border-color: var(--ink); }
.btn-ink:hover { box-shadow: 0 7px 0 var(--orange); }
.btn-outline { background: #fff; color: var(--ink); }
.btn-outline-light { border-color: #fff; color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }

/* Store buttons. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 20px 0 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--ink); color: #fff;
  box-shadow: 0 5px 0 var(--orange); text-align: left; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.store:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--orange); }
.store:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange); }
.store .i { font-size: 28px; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .75; line-height: 1.1; }
.store strong { display: block; font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.store.is-soon { background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--ink); }

/* ---------- Announcement + navigation ---------- */
.announce { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; text-align: center; }
.announce .i { color: var(--yellow); }
.nav { position: sticky; top: 0; z-index: 50; transition: transform .35s var(--ease-out), background-color .25s, box-shadow .25s; }
.nav.is-scrolled { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1200px; height: 76px; margin: 0 auto; padding: 0 var(--gutter); }
.nav-logo img { width: auto; height: 34px; }
.nav-list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nav-list a { display: block; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: background-color .2s; }
.nav-list a:hover, .nav-list .is-current a { background: var(--cream); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-web { font-size: 15px; font-weight: 700; color: var(--muted); }
.nav-web:hover { color: var(--ink); }
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 13px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-out), top .3s var(--ease-out); }
.nav-toggle span:first-child { top: 15px; } .nav-toggle span:last-child { top: 23px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; padding: 100px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--paper); }
.mobile-menu[hidden] { display: none; }
[hidden] { display: none !important; }
.mobile-menu .nav-list { flex-direction: column; gap: 0; }
.mobile-menu .nav-list a { padding: 10px 0; border-radius: 0; font-size: clamp(38px, 11vw, 56px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.mobile-menu .nav-list a:hover { background: none; color: var(--blue); }
.mobile-menu-foot { display: grid; gap: 18px; }
@media (max-width: 960px) {
  .nav-links, .nav-web { display: none; }
  .nav-toggle { display: block; }
  .nav-actions .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(24px, 5vw, 60px) 0 clamp(70px, 9vw, 110px); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, #e7e7e0 1.3px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000, transparent 75%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(30px, 5vw, 70px); }
.hero-title { margin: 22px 0 22px; font-size: clamp(58px, 7.4vw, 112px); line-height: .9; letter-spacing: -.055em; }
/* Clip only the bottom edge so words can rise into place without cutting their sides. */
.hero-title .line { display: block; padding: .02em 0 .1em; margin-bottom: -.1em; clip-path: inset(-.3em -100vw 0 -100vw); }
.hero-title .word { display: inline-block; }
.hero-lede { max-width: 520px; color: var(--muted); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; }
.hero-actions { margin: 30px 0 16px; }
.hero-web { color: var(--ink); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px !important; color: var(--muted); font-size: 14px; font-weight: 700; }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .i { color: var(--green); }
.hero-stage { position: relative; display: grid; place-items: center; min-height: 640px; perspective: 1400px; }
.hero-stage > [data-depth] { position: absolute; z-index: 3; }
.hero-blob { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #dfe9ff, #eef3ff 45%, transparent 70%); }
.hero-s1 { top: 8%; left: 2%; rotate: -12deg; }
.hero-s2 { top: 30%; right: -2%; rotate: 6deg; padding: 9px 14px; font-size: 12px; box-shadow: 0 4px 0 var(--ink); }
.hero-s3 { bottom: 20%; left: -4%; rotate: -5deg; padding: 9px 14px; font-size: 13px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.hero-s4 { bottom: 5%; right: 2%; }
.hero-s5 { top: 17%; right: 2%; }
.mini-ticket { position: absolute; display: grid; gap: 2px; padding: 12px 16px; background: var(--blue); color: #fff; clip-path: var(--ticket); rotate: 4deg; }
.mini-ticket small { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; opacity: .85; }
.mini-ticket strong { font-family: var(--cond); font-size: 30px; font-weight: 800; line-height: 1; }
.xp-pop { position: absolute; padding: 7px 12px; border-radius: 999px; background: var(--yellow); font-size: 14px; font-weight: 900; box-shadow: 0 3px 0 var(--ink); rotate: -6deg; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid var(--ink); border-radius: 14px; }
.scroll-cue span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: left; }
  .hero-stage { min-height: 600px; }
  .scroll-cue { display: none; }
}
@media (max-width: 520px) {
  .hero-stage { min-height: 560px; margin: 0 -8px; }
  .hero-s1 { width: 70px; height: 70px; font-size: 17px; left: 0; }
  .hero-s3 { left: 0; bottom: 30%; } .hero-s2 { right: 0; top: 36%; }
  .hero-s1 { top: 0; left: -4px; } .hero-s4 { bottom: -10px; right: -4px; } .hero-s5 { top: 6%; right: -4px; }
  .phone { width: min(300px, 80vw); }
}

/* ---------- The phone (a live mini Kwikiz) ---------- */
.phone { position: relative; z-index: 2; width: min(318px, 84vw); aspect-ratio: 9 / 19.2; padding: 11px; border-radius: 52px; background: linear-gradient(145deg, #2c2c28, #0c0c0b);
  box-shadow: 0 0 0 2px #3a3a35 inset, 0 40px 80px -20px rgba(17, 17, 15, .45), 0 18px 30px -12px rgba(6, 101, 255, .25); rotate: -3deg; transform-style: preserve-3d; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; background: #fff; font-size: 12px; }
.phone-status { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 4px 26px 0; font-size: 12px; font-weight: 700; }
.phone-island { position: absolute; top: 10px; left: 50%; width: 88px; height: 26px; margin-left: -44px; border-radius: 20px; background: #0b0b0a; }
.phone-bars { display: flex; align-items: flex-end; gap: 2px; } .phone-bars i { width: 3px; border-radius: 1px; background: var(--ink); }
.phone-bars i:nth-child(1) { height: 5px; } .phone-bars i:nth-child(2) { height: 8px; } .phone-bars i:nth-child(3) { height: 11px; }
.phone-home { position: absolute; left: 50%; bottom: 7px; width: 110px; height: 4px; margin-left: -55px; border-radius: 3px; background: var(--ink); z-index: 6; }
.pd-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 6px; font-size: 10.5px; font-weight: 900; }
.pd-header .i { font-size: 15px; }
.pd-body { padding: 4px 16px 0; }
.pd-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.pd-count { display: inline-flex; align-items: baseline; gap: 4px; }
.pd-count small { font-size: 7px; font-weight: 900; letter-spacing: .12em; color: var(--muted); }
.pd-count b { font-family: var(--cond); font-size: 22px; font-weight: 800; line-height: 1; }
.pd-count em { font-family: var(--cond); font-size: 12px; font-style: normal; color: var(--faint); font-weight: 700; }
.pd-xp { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: var(--yellow-soft); color: #7a5600; font-size: 9.5px; font-weight: 900; }
.pd-xp .i { color: #d99a00; }
.pd-segments { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; margin-bottom: 12px; }
.pd-segments i { height: 5px; border-radius: 2px; background: #ebebe4; transition: background-color .3s; }
.pd-segments i.ok { background: var(--yellow); } .pd-segments i.miss { background: var(--orange); } .pd-segments i.now { background: var(--blue); }
.pd-meta { display: flex; gap: 5px; margin-bottom: 7px; }
.pd-lane, .pd-concept { padding: 3px 7px; border-radius: 999px; font-size: 7.5px; font-weight: 900; letter-spacing: .06em; }
.pd-lane { background: var(--orange); color: #fff; }
.pd-lane.strong { background: var(--yellow); color: var(--ink); } .pd-lane.new { background: var(--blue); color: #fff; }
.pd-concept { background: var(--blue-soft); color: var(--blue); }
.pd-question { font-size: 15.5px; font-weight: 900; letter-spacing: -.02em; line-height: 1.18; min-height: 92px; }
.pd-options { display: grid; gap: 7px; margin-top: 12px; }
.pd-option { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 7px 10px; border: 1.5px solid #dcdcd4; border-radius: 12px; background: #fff; box-shadow: 0 2px 0 #dcdcd4;
  font-size: 11.5px; font-weight: 700; transition: border-color .2s, background-color .2s, box-shadow .2s, color .2s, opacity .25s, transform .2s; }
.pd-option b { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid #d4d5cc; border-radius: 7px; background: #fafaf6; font-size: 10px; font-weight: 900; transition: all .2s; }
.pd-option.selected { border-color: var(--blue); background: #eef3ff; color: #0a3fa8; box-shadow: 0 3px 0 var(--blue); transform: translateY(-1px); }
.pd-option.selected b { background: var(--blue); border-color: var(--blue); color: #fff; }
.pd-option.correct { border-color: var(--green); background: var(--green-soft); color: #1d6a3c; box-shadow: 0 3px 0 var(--green); }
.pd-option.correct b { background: var(--green); border-color: var(--green); color: #fff; }
.pd-option.dim { opacity: .45; box-shadow: none; }
.pd-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px 22px; background: #fff; border-top: 1px solid #efefe8; }
.pd-lock { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border-radius: 12px; background: #e6e8e1; color: #8d9186; font-size: 13px; font-weight: 900; transition: all .25s; }
.pd-lock.ready { background: var(--blue); color: #fff; box-shadow: 0 3px 0 var(--ink); }
.pd-verdict { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 14px 16px 24px; border-top: 2px solid var(--green); border-radius: 18px 18px 0 0;
  background: var(--green-soft); color: #1d6a3c; transform: translateY(105%); }
.pd-verdict-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 2px 0 #1d6a3c; }
.pd-verdict-copy { flex: 1; }
.pd-verdict-copy strong { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.02em; }
.pd-verdict-copy small { font-size: 10px; font-weight: 700; }
.pd-next { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 10px; background: var(--green); color: #fff; font-size: 11px; font-weight: 900; }
.pd-burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pd-burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; }

/* ---------- Topic marquee ---------- */
.marquee-band { position: relative; padding: 50px 0 70px; overflow: hidden; }
.band { display: flex; overflow: hidden; padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.band-blue { position: relative; z-index: 2; background: var(--blue); transform: rotate(-2.2deg) scale(1.06); }
.band-yellow { margin-top: -26px; background: var(--yellow); transform: rotate(1.6deg) scale(1.06); }
.band-track { display: flex; flex-shrink: 0; align-items: center; gap: 12px; padding-right: 12px; animation: marquee 38s linear infinite; }
.band-track.reverse { animation-direction: reverse; animation-duration: 44s; }
.marquee-band:hover .band-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.band-item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 17px; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.band-item .i { font-size: 20px; color: var(--blue); }
.band-yellow .band-item { background: transparent; border: 0; box-shadow: none; padding: 6px 4px; font-family: var(--cond); font-size: 28px; text-transform: uppercase; }
.band-sep { font-size: 20px; }

/* ---------- How it works ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); }
.steps-path { position: absolute; top: -40px; left: 5%; width: 90%; height: 120px; overflow: visible; pointer-events: none; }
.steps-path path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 10; }
.ticket { position: relative; padding: 30px 26px 28px; clip-path: var(--ticket); }
.ticket-yellow { background: var(--yellow); }
.ticket-blue { background: var(--blue); color: #fff; }
.ticket-white { background: #fff; outline: 2px solid var(--ink); outline-offset: -2px; }
.step { display: flex; flex-direction: column; gap: 12px; min-height: 420px; }
.step:nth-child(2) { rotate: -1.2deg; } .step:nth-child(3) { rotate: 1.4deg; margin-top: 40px; } .step:nth-child(4) { rotate: -.8deg; }
.step-num { font-family: var(--cond); font-size: 64px; font-weight: 800; line-height: .85; opacity: .9; }
.step h3 { font-size: clamp(28px, 2.6vw, 36px); }
.step p { font-size: 16px; line-height: 1.5; opacity: .88; }
.step-sticker { top: 16px; right: 16px; width: 74px; height: 74px; font-size: 16px; transform: rotate(12deg); }
.demo-input { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 10px 10px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); font-size: 16px; font-weight: 700; }
.demo-input > .i { color: var(--blue); font-size: 20px; }
.demo-typed { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.caret { width: 2px; height: 20px; background: var(--blue); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: #fff; }
.demo-tiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: auto; }
.demo-tiles i { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: background-color .35s, box-shadow .35s, transform .35s var(--ease-out); }
.demo-tiles i.ok { background: var(--yellow); box-shadow: none; transform: scale(1.08); }
.demo-tiles i.miss { background: var(--orange); box-shadow: none; transform: scale(1.08); }
.demo-caption { font-family: var(--mono); font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; }
.demo-decks { position: relative; height: 170px; margin-top: auto; }
.deck { position: absolute; left: 50%; bottom: 0; display: grid; justify-items: start; gap: 2px; width: 118px; height: 150px; margin-left: -59px; padding: 14px; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); transform-origin: bottom center; transition: transform .7s var(--ease-out); }
.deck .i { font-size: 22px; } .deck b { margin-top: auto; font-family: var(--cond); font-size: 44px; font-weight: 800; line-height: 1; } .deck small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.deck-orange { background: var(--orange); color: #fff; } .deck-yellow { background: var(--yellow); } .deck-blue { background: var(--blue); color: #fff; }
.demo-decks.is-dealt .deck-orange { transform: translateX(-78px) rotate(-12deg); }
.demo-decks.is-dealt .deck-blue { transform: translateX(78px) rotate(12deg); }
.demo-decks.is-dealt .deck-yellow { transform: translateY(-14px); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps-path { display: none; }
  .step { min-height: 0; } .step:nth-child(3) { margin-top: 0; }
  .demo-input, .demo-tiles, .demo-decks { margin-top: 18px; }
}

/* ---------- Why it works (ink section) ---------- */
.section-ink { background: var(--ink); color: #fff; }
.science-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.science-title { font-size: clamp(38px, 5.2vw, 68px); }
.strike { position: relative; color: #b9bab3; }
.strike::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: .12em; border-radius: 4px; background: var(--orange); transform: scaleX(var(--strike, 0)); transform-origin: left; transition: transform .7s var(--ease-out) .2s; }
.strike.is-on { --strike: 1; }
mark { position: relative; padding: 0 .08em; background: none; color: var(--ink); }
mark::before { content: ''; position: absolute; inset: .08em -.06em -.02em; z-index: -1; border-radius: 6px; background: var(--yellow); transform: scaleX(var(--mark, 0)); transform-origin: left; transition: transform .6s var(--ease-out) .55s; }
.science-title { position: relative; z-index: 0; }
mark.is-on { --mark: 1; }
.principles { display: grid; gap: 16px; }
.principle { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 24px; border: 1.5px solid #34342f; border-radius: 20px; background: #1a1a17; transition: border-color .25s, translate .25s var(--ease-out); }
.principle:hover { border-color: var(--yellow); translate: 6px 0; }
.principle-icon { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); color: var(--ink); font-size: 24px; }
.principle h3 { font-size: 22px; letter-spacing: -.02em; }
.principle p { color: #c9cac2; font-size: 16px; }
@media (max-width: 900px) { .science-grid { grid-template-columns: 1fr; } }

/* ---------- Features bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.bento-card { position: relative; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 26px; border: 2px solid var(--ink); border-radius: 26px; background: #fff; box-shadow: var(--shadow);
  transform-style: preserve-3d; transition: box-shadow .25s; will-change: transform; }
.bento-card:hover { box-shadow: 0 9px 0 var(--ink); }
.bento-card h3 { font-size: clamp(24px, 2.3vw, 32px); }
.bento-card p { color: var(--muted); font-size: 16px; }
.bento-why { grid-column: span 4; flex-direction: row; gap: 24px; background: var(--cream); }
.bento-why .bento-copy { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.bento-report { grid-column: span 2; grid-row: span 2; background: var(--yellow-soft); }
.bento-lanes, .bento-streak { grid-column: span 2; }
.bento-offline, .bento-thumb { grid-column: span 2; }
.bento-lanes { grid-column: span 4; }
.bento-streak { background: var(--ink); color: #fff; } .bento-streak p { color: #c9cac2; }
.bento-offline { background: var(--blue); color: #fff; } .bento-offline p { color: rgba(255,255,255,.82); }
.why-demo { flex: 1; display: grid; align-content: center; gap: 14px; }
.why-answer { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 10px 16px; border-radius: 12px; background: var(--green-soft); color: #1d6a3c; font-weight: 900; }
.flow { width: 100%; max-width: 360px; overflow: visible; }
.flow rect { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.flow text { font-family: var(--sans); font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.flow .flow-label { font-size: 11px; fill: var(--muted); font-weight: 500; }
.flow-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.flow-dot { fill: var(--orange); }
.ring { position: relative; display: grid; place-items: center; width: 190px; margin: 14px auto 6px; }
.ring svg { width: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: #fff; stroke-width: 12; }
.ring-value { fill: none; stroke: var(--yellow); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-out); filter: drop-shadow(0 2px 0 var(--ink)); }
.ring b { position: absolute; font-family: var(--cond); font-size: 60px; font-weight: 800; line-height: 1; }
.ring b small { font-size: 26px; }
.gap-bars { display: grid; gap: 12px; margin-top: auto !important; }
.gap-bars li { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.gap-bars i { display: block; height: 10px; border-radius: 999px; background: #fff; position: relative; overflow: hidden; }
.gap-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--ink); transform: scaleX(var(--grow, 0)); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.bento-report.is-on .gap-bars i { --grow: 1; }
.lane-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.lane { padding: 9px 14px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 900; letter-spacing: .06em; box-shadow: 0 3px 0 var(--ink); }
.lane-fix { background: var(--orange); color: #fff; transform: rotate(-3deg); } .lane-strong { background: var(--yellow); } .lane-new { background: var(--blue); color: #fff; transform: rotate(3deg); }
.streak-demo { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; }
.flame { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); font-size: 32px; color: #fff; animation: flicker 1.6s ease-in-out infinite; }
@keyframes flicker { 50% { transform: scale(1.08) rotate(-4deg); } }
.streak-demo b { font-family: var(--cond); font-size: 72px; font-weight: 800; line-height: .85; }
.streak-demo small { padding-bottom: 8px; font-weight: 700; color: #c9cac2; }
.wifi { position: absolute; right: 22px; bottom: 18px; width: 120px; opacity: .9; }
.wifi path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; animation: arc 1.8s ease-in-out infinite; }
.wifi path:nth-child(2) { animation-delay: .25s; } .wifi path:nth-child(1) { animation-delay: .5s; }
.wifi circle { fill: var(--yellow); }
@keyframes arc { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.bento-offline p { max-width: 62%; }
.thumb-demo { position: relative; display: flex; gap: 8px; margin-top: auto; height: 60px; align-items: center; }
.thumb-demo i { flex: 1; height: 40px; border: 2px solid var(--line); border-radius: 12px; }
.thumb-bubble { position: absolute; left: -10px; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 3px 0 var(--ink); z-index: 1; animation: swipe 2.6s var(--ease-out) infinite; }
@keyframes swipe { 0% { transform: translateX(-10px) scale(.6); opacity: 0; } 30% { opacity: 1; } 60%, 100% { transform: translateX(110px) scale(1); opacity: 0; } }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-why, .bento-lanes, .bento-offline, .bento-thumb { grid-column: span 2; }
  .bento-report, .bento-streak { grid-column: span 1; grid-row: auto; }
  .bento-why { flex-direction: column; }
}
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento-card { grid-column: auto !important; } .bento-offline p { max-width: 100%; padding-right: 110px; } }

/* ---------- Plus ---------- */
.plus { background: linear-gradient(180deg, #fff, var(--cream)); }
.plus-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.plus-stage { position: relative; display: grid; place-items: center; min-height: 420px; perspective: 1200px; }
.plus-pass { position: relative; display: grid; width: min(460px, 100%); aspect-ratio: 1.6; padding: 30px 34px; overflow: hidden; border-radius: 26px; background: var(--ink); color: #fff; box-shadow: 0 30px 60px -20px rgba(17,17,15,.5); rotate: -4deg; transform-style: preserve-3d; }
.plus-foil { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(6,101,255,.55) 45%, rgba(255,191,22,.45) 55%, transparent 70%); background-size: 250% 100%; background-position: var(--foil, 50%) 0; mix-blend-mode: screen; opacity: .85; }
.plus-kicker { position: relative; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; opacity: .75; }
.plus-name { position: relative; align-self: center; font-size: clamp(64px, 8vw, 100px); font-weight: 900; letter-spacing: -.05em; line-height: .9; }
.plus-name b { color: var(--yellow); }
.plus-tag { position: relative; align-self: end; font-size: 18px; font-weight: 700; }
.plus-perf { position: absolute; top: 18px; bottom: 18px; right: 90px; border-left: 2px dashed rgba(255,255,255,.3); }
.plus-sticker { top: 6%; right: 4%; width: 100px; height: 100px; font-size: 24px; transform: rotate(14deg); z-index: 2; }
.plus-list { display: grid; gap: 14px; margin: 28px 0 34px !important; }
.plus-list li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 700; }
.plus-list li span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; background: var(--ink); color: var(--yellow); font-size: 18px; }
@media (max-width: 900px) { .plus-grid { grid-template-columns: 1fr; } .plus-stage { min-height: 320px; } }

/* ---------- Posts ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.post-card { min-width: 0; }
.post-card-link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 2px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: var(--shadow); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.post-card-link:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 10px 0 var(--ink); }
.post-card-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--ink); }
.post-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.post-card-link:hover .post-card-art img { transform: scale(1.04); }
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.post-card-title { font-size: 24px; letter-spacing: -.02em; line-height: 1.12; }
.post-card-excerpt { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.post-card-meta { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--faint); font-size: 13px; font-weight: 700; }
.post-card.is-lead { grid-column: 1 / -1; }
.post-card.is-lead .post-card-link { flex-direction: row; }
.post-card.is-lead .post-card-art { flex: 1.25; aspect-ratio: auto; min-height: 380px; border-bottom: 0; border-right: 2px solid var(--ink); }
.post-card.is-lead .post-card-body { flex: 1; justify-content: center; padding: 40px; }
.post-card.is-lead .post-card-title { font-size: clamp(32px, 3.6vw, 48px); }
.post-card.is-lead .post-card-excerpt { font-size: 18px; }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card.is-lead .post-card-link { flex-direction: column; }
  .post-card.is-lead .post-card-art { min-height: 240px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .post-card.is-lead .post-card-body { padding: 24px; }
}

/* Generated post art: a ticket in the tag's colour. */
.post-art { position: relative; display: grid; height: 100%; min-height: 220px; padding: 22px; overflow: hidden; background: var(--blue); color: #fff; }
.post-art[data-tag="study-guides"] { background: var(--yellow); color: var(--ink); }
.post-art[data-tag="inside-kwikiz"] { background: var(--orange); }
.post-art[data-tag="languages"] { background: var(--green); }
.post-art-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.post-art-icon { position: absolute; right: -14px; bottom: -22px; font-size: 190px; opacity: .22; transform: rotate(-12deg); }
.post-art-icon .i { width: 1em; height: 1em; }
.post-art-tiles { align-self: end; display: grid; grid-template-columns: repeat(5, 16px); gap: 5px; }
.post-art-tiles i { height: 16px; border-radius: 4px; background: rgba(255,255,255,.25); }
.post-art[data-tag="study-guides"] .post-art-tiles i { background: rgba(17,17,15,.15); }
.post-art-tiles i:nth-child(3), .post-art-tiles i:nth-child(7) { background: #fff; } .post-art-tiles i:nth-child(5) { background: var(--ink); }
.post-art-sticker { top: 18px; right: 18px; width: 70px; height: 70px; font-size: 17px; background: #fff; color: var(--ink); transform: rotate(10deg); }
.is-lead .post-art-sticker { width: 90px; height: 90px; font-size: 22px; }
.is-lead .post-art-icon { font-size: 320px; }

/* ---------- Blog pages ---------- */
.blog-hero { padding: clamp(40px, 7vw, 90px) 0 clamp(30px, 4vw, 50px); }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.blog-title { font-size: clamp(58px, 9vw, 124px); line-height: .9; letter-spacing: -.05em; }
.tag-rail { display: flex; gap: 10px; margin-top: 40px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.tag-rail::-webkit-scrollbar { display: none; }
.tag-pill { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px; font-weight: 900; font-size: 15px; transition: border-color .2s, background-color .2s; }
.tag-pill:hover { border-color: var(--ink); }
.tag-pill.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.tag-pill i { padding: 1px 7px; border-radius: 999px; background: var(--cream); color: var(--muted); font-size: 12px; font-style: normal; }
.blog-list { padding-bottom: clamp(80px, 10vw, 120px); }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 50px; }
.pagination a:last-child { justify-self: end; }
.pagination-count { color: var(--muted); font-weight: 700; font-size: 14px; }
.back-link { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 22px; color: var(--muted); font-weight: 700; font-size: 15px; }
.back-link:hover { color: var(--ink); }
.empty { color: var(--muted); }
.author-avatar { width: 96px; height: 96px; margin-bottom: 20px; border: 2px solid var(--ink); border-radius: 50%; object-fit: cover; }
@media (max-width: 860px) { .blog-hero-grid { grid-template-columns: 1fr; } }

/* Subscribe form (Ghost members). */
.subscribe { display: grid; gap: 10px; padding: 20px; border: 2px solid var(--ink); border-radius: 22px; background: var(--cream); box-shadow: var(--shadow); }
.subscribe-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 2px solid var(--ink); border-radius: 15px; background: #fff; }
.subscribe-row > .i { color: var(--blue); font-size: 20px; }
.subscribe input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; outline: none; }
.sub-note { color: var(--muted); font-size: 13px; }
.sub-loading, .sub-success, .sub-error:empty { display: none; }
.subscribe.loading .sub-label { display: none; } .subscribe.loading .sub-loading { display: inline; }
.subscribe.success .subscribe-row, .subscribe.success .sub-note { display: none; }
.subscribe.success .sub-success { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 900; }
.sub-error { color: #b53516; font-size: 14px; font-weight: 700; }

/* ---------- Article ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 5px; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--yellow) 60%, var(--orange)); transform: scaleX(0); transform-origin: left; }
.article-head { padding-top: clamp(30px, 6vw, 70px); }
.article-head .tag-chip { margin-bottom: 20px; }
.article-title { font-size: clamp(40px, 6.2vw, 72px); line-height: .98; letter-spacing: -.045em; }
.article-lede { margin-top: 22px; color: var(--muted); font-size: clamp(19px, 2vw, 23px); line-height: 1.5; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; color: var(--muted); font-size: 15px; font-weight: 700; }
.author-chip { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.author-chip img, .author-initial { width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; object-fit: cover; }
.author-initial { display: grid; place-items: center; overflow: hidden; background: var(--blue); color: #fff; font-weight: 900; font-size: 16px; }
.article-art { margin-top: clamp(30px, 5vw, 56px); margin-bottom: clamp(36px, 6vw, 64px); }
.article-art img, .article-art .post-art { width: 100%; border: 2px solid var(--ink); border-radius: 28px; box-shadow: 0 8px 0 var(--ink); }
.article-art .post-art { min-height: clamp(260px, 38vw, 460px); clip-path: none; }
.article-art .post-art-icon { font-size: clamp(260px, 36vw, 440px); }
.article-art figcaption { margin-top: 14px; color: var(--muted); font-size: 14px; text-align: center; }

.gh-content { font-size: 19px; line-height: 1.75; color: #22221f; }
.gh-content > * + * { margin-top: 1.25em; }
.gh-content h2 { margin-top: 2em; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.gh-content h3 { margin-top: 1.8em; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.gh-content h2 + *, .gh-content h3 + * { margin-top: .7em; }
.gh-content a { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gh-content strong { font-weight: 900; color: var(--ink); }
.gh-content ul, .gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: .5em; }
.gh-content li::marker { color: var(--blue); font-weight: 900; }
.gh-content blockquote { margin-left: 0; margin-right: 0; padding: 22px 26px; border: 2px solid var(--ink); border-radius: 20px; background: var(--yellow-soft); box-shadow: 0 5px 0 var(--ink); font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.gh-content blockquote p { margin: 0; }
.gh-content hr { height: 0; margin: 2.4em auto; border: 0; border-top: 2px dashed var(--line); }
.gh-content code { padding: .1em .35em; border-radius: 6px; background: var(--blue-soft); color: #0a3fa8; font-family: var(--mono); font-size: .86em; }
.gh-content pre { overflow-x: auto; padding: 20px; border-radius: 16px; background: var(--ink); color: #f1f1ea; font-size: 15px; line-height: 1.6; }
.gh-content pre code { padding: 0; background: none; color: inherit; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content img { border-radius: 18px; }
.gh-content figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; text-align: center; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.gh-content th, .gh-content td { padding: 10px 12px; border-bottom: 1.5px solid var(--line); text-align: left; }
.kg-width-wide { position: relative; width: min(1040px, 94vw); left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }

.article-foot { display: grid; gap: 40px; padding-top: 50px; padding-bottom: 20px; }
.share { display: flex; align-items: center; gap: 10px; padding-bottom: 30px; border-bottom: 2px dashed var(--line); color: var(--muted); font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.share-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 13px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 18px; transition: transform .15s; }
.share-btn:hover { transform: translateY(-2px); }
.post-cta { position: relative; display: grid; gap: 20px; padding: 34px 32px 32px; border-radius: 26px; background: var(--blue); color: #fff; }
.post-cta .kicker, .download .kicker, .lost .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; opacity: .85; margin-bottom: 10px; }
.post-cta h3 { font-size: clamp(28px, 3vw, 38px); max-width: 480px; }
.post-cta p { margin-top: 10px; max-width: 460px; opacity: .88; }
.post-cta .store { box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.post-cta .store.is-soon { background: #fff; }
.post-cta-sticker { top: -20px; right: 22px; width: 76px; height: 76px; transform: rotate(12deg); }
.notch { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--paper); }
.notch-l { left: -15px; } .notch-r { right: -15px; }
.article-subscribe h3 { margin-bottom: 16px; font-size: 28px; }
.related { background: var(--cream); }
.related .section-head h2 { font-size: clamp(34px, 4vw, 52px); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 80px); align-items: start; }
.faq-list { display: grid; gap: 14px; }
.faq-item { border: 2px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s, background-color .25s; }
.faq-item[open] { background: var(--yellow-soft); }
.js .faq-item[open]:not(.is-open) { background: #fff; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-size: 19px; font-weight: 900; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease-out), background-color .25s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px; border-radius: 2px; background: #fff; }
.faq-icon::after { transform: rotate(90deg); transition: transform .35s var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(180deg); background: var(--orange); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-body p { padding: 0 24px 24px; color: var(--ink-2); font-size: 17px; }
/* With JS the answer grows from 0 to its height (grid rows animate); without JS <details> works natively. */
.js .faq-body { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows .34s var(--ease-out), opacity .25s ease; }
.js .faq-body > p { min-height: 0; overflow: hidden; }
.js .faq-item.is-open .faq-body { grid-template-rows: 1fr; opacity: 1; }
.js .faq-item[open]:not(.is-open) .faq-icon { transform: none; background: var(--ink); }
.js .faq-item[open]:not(.is-open) .faq-icon::after { transform: rotate(90deg); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Download ticket ---------- */
.download { padding-top: 40px; }
.download-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 30px; align-items: center; padding: clamp(36px, 6vw, 70px); border-radius: 34px; background: var(--blue); color: #fff; }
.download-ticket h2 { max-width: 640px; font-size: clamp(40px, 6vw, 80px); line-height: .95; letter-spacing: -.045em; }
.download-copy > p:not(.kicker) { max-width: 460px; margin: 20px 0 30px; font-size: 19px; opacity: .9; }
.download-copy .stores { margin-bottom: 20px; }
.download .store { box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.download-art { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(90px, 10vw, 140px); }
.art-cube { color: #fff; animation: bob 5s ease-in-out infinite; } .art-arrow { font-size: .55em; } .art-smile { color: var(--yellow); animation: wobble 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-7deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-7deg); } }
.download-sticker { top: -24px; right: 40px; width: 104px; height: 104px; font-size: 22px; transform: rotate(-12deg); }
.download .notch { width: 44px; height: 44px; margin-top: -22px; } .download .notch-l { left: -22px; } .download .notch-r { right: -22px; }
@media (max-width: 860px) { .download-ticket { grid-template-columns: 1fr; } .download-art { font-size: 70px; justify-content: flex-start; } .download-sticker { right: 20px; width: 84px; height: 84px; font-size: 18px; } }

/* ---------- 404 ---------- */
.lost { display: grid; place-items: center; min-height: 70vh; padding-top: 40px; padding-bottom: 80px; }
.lost-ticket { position: relative; max-width: 720px; padding: clamp(34px, 6vw, 60px); background: var(--blue); color: #fff; clip-path: var(--ticket); }
.lost-ticket h1 { font-size: clamp(40px, 6vw, 70px); line-height: .98; letter-spacing: -.045em; }
.lost-ticket > p:not(.kicker) { margin: 18px 0 28px; font-size: 19px; opacity: .9; }
.lost-tiles { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; margin-top: 26px; }
.lost-tiles i { height: 22px; border-radius: 5px; background: var(--yellow); } .lost-tiles i.miss { background: var(--orange); }
.lost-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.lost-sticker { top: 20px; right: 20px; transform: rotate(12deg); }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; padding-top: 80px; border-top: 2px solid var(--ink); background: #fff; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 50px; }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand img { height: 36px; width: auto; }
.footer-tagline { font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.footer-link { padding: 0; border: 0; background: none; font-weight: 700; text-align: left; transition: color .2s; }
.footer-link:hover { color: var(--blue); }
.footer-cols h4 { margin-bottom: 14px; color: var(--faint); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.footer-cols ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-cols a { font-weight: 700; transition: color .2s; }
.footer-cols a:hover { color: var(--blue); }
.footer-cols .nav-list { flex-direction: column; gap: 10px; }
.footer-cols .nav-list a { padding: 0; font-size: 17px; } .footer-cols .nav-list a:hover { background: none; }
.footer-giant { margin-top: 60px; line-height: .75; user-select: none; }
.footer-giant span { display: block; font-family: var(--cond); font-size: clamp(110px, 27vw, 380px); font-weight: 800; letter-spacing: -.02em; text-align: center; color: var(--blue); transform: translateY(12%); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); color: var(--muted); font-size: 14px; font-weight: 700; position: relative; background: #fff; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 16px 36px rgba(17,17,15,.3); translate: -50% 0; }

/* ---------- Motion setup ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js .hero-title .word { transform: translateY(105%); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js [data-reveal], .js .hero-title .word { opacity: 1; transform: none; }
  .band-track { animation: none !important; }
}

/* ==========================================================================
   Install page (/install/): add the Kwikiz web app to the home screen
   ========================================================================== */
.install-hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.install-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, #e7e7e0 1.3px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.install-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(30px, 5vw, 70px); }
.install-title { margin: 22px 0 20px; font-size: clamp(46px, 6.2vw, 92px); line-height: .94; letter-spacing: -.052em; }
.install-mark { background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); padding: 0 .04em; }
.install-lede { max-width: 540px; color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; }
.install-web { margin-top: 8px; color: var(--ink); }

/* The smart card */
.install-card { position: relative; max-width: 500px; margin: 30px 0 18px; }
.install-card[data-state="loading"] .ic-state, .ic-state[hidden] { display: none !important; }
.install-card.is-pulse { animation: install-pulse .7s var(--ease-out); }
@keyframes install-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 100% { transform: scale(1); } }
.install-cta { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 12px; border: 2px solid var(--ink); border-radius: 22px;
  background: var(--blue); color: #fff; text-align: left; box-shadow: 0 6px 0 var(--ink); cursor: pointer; overflow: hidden; font: inherit;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.install-cta::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 26%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); animation: install-shine 4.5s 1.2s infinite; pointer-events: none; }
@keyframes install-shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.install-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.install-cta:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.install-cta-icon { flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px rgba(17, 17, 15, .08); }
.install-cta-icon img { width: 52px; height: 52px; border-radius: 12px; }
.install-cta-copy { flex: 1; min-width: 0; }
.install-cta-copy small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .85; }
.install-cta-copy strong { display: block; margin-top: 2px; font-size: clamp(18px, 2vw, 21px); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; }
.install-cta-arrow { flex-shrink: 0; width: 44px !important; height: 44px !important; padding: 11px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); transition: transform .2s var(--ease-out); }
.install-cta:hover .install-cta-arrow { transform: translateX(3px); }
.ic-note { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; color: var(--muted); font-size: 14px; font-weight: 600; }
.ic-note .i { color: var(--green); font-size: 16px; }
.ic-message { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); }
.ic-message strong { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.ic-message p { margin-top: 4px !important; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ic-message b { color: var(--ink); }
.ic-badge { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; border: 2px solid var(--ink); }
.ic-badge-yellow { background: var(--yellow); color: var(--ink); } .ic-badge-orange { background: var(--orange); color: #fff; }
.ic-badge-blue { background: var(--blue); color: #fff; } .ic-badge-green { background: var(--green); color: #fff; }
.ic-done { background: var(--green-soft); }
.install-copy-link, [data-for="installed"] .btn { margin-top: 16px; }
.install-copy-link.is-done { background: var(--green); box-shadow: 0 5px 0 var(--ink); }
.ic-desktop { display: flex; align-items: center; gap: 24px; }
.ic-qr-ticket { flex-shrink: 0; display: grid; justify-items: center; gap: 8px; padding: 14px 14px 10px; border: 2px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--ink); rotate: -2deg; }
.ic-qr { position: relative; width: 168px; aspect-ratio: 1; }
.ic-qr svg { width: 100%; height: 100%; }
.ic-qr img { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid #fff; border-radius: 10px; background: #fff; }
.ic-qr-ticket small { font-family: var(--cond); font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.ic-desktop-copy strong { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.ic-desktop-copy p { margin: 6px 0 14px !important; color: var(--muted); font-size: 15px; }

/* Phone stage: the Kwikiz icon lands on a home screen, gets tapped and opens. */
.install-stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.install-glow { position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff1c7, #e8f0ff 50%, transparent 70%); }
.install-phone { width: min(300px, 76vw); }
.install-home { background: linear-gradient(165deg, #d9e6ff 0%, #f6f3ff 45%, #fff0cf 78%, #ffe0d4 100%); }
.install-status { position: relative; z-index: 3; }
.ih-grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 22px; padding: 22px 18px 0; justify-items: center; }
.ih-app { position: relative; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: 0 3px 8px rgba(17, 17, 15, .12); }
.ih-app::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -12px; height: 5px; border-radius: 3px; background: rgba(17, 17, 15, .14); }
.ih-empty { visibility: hidden; }
.ih-kwikiz { background: #fff; display: grid; place-items: center; animation: ih-land 7s var(--ease-out) infinite; z-index: 2; }
.ih-kwikiz::after { display: none; }
.ih-kwikiz img { width: 50px; height: 50px; border-radius: 14px; }
.ih-kwikiz small { position: absolute; bottom: -17px; left: 50%; translate: -50% 0; font-size: 9.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
@keyframes ih-land {
  0%, 6% { transform: translateY(-160px) scale(.3); opacity: 0; }
  14% { transform: translateY(6px) scale(1.12); opacity: 1; }
  19% { transform: translateY(0) scale(.96); }
  23%, 100% { transform: none; opacity: 1; }
}
.ih-dock { position: absolute; left: 12px; right: 12px; bottom: 18px; display: flex; justify-content: space-around; padding: 10px 6px; border-radius: 26px; background: rgba(255, 255, 255, .45); backdrop-filter: blur(8px); }
.ih-dock span { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); }
.ih-tap { position: absolute; z-index: 4; top: 214px; left: 61.5%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(17, 17, 15, .22); border: 3px solid #fff; opacity: 0; animation: ih-tap 7s infinite; }
@keyframes ih-tap { 0%, 30% { opacity: 0; transform: scale(1.4); } 34% { opacity: 1; transform: scale(1); } 37% { transform: scale(.82); } 41%, 100% { opacity: 0; transform: scale(.82); } }
/* Tapped: the launch screen grows out of the icon, then the real Kwikiz home screen appears under the status bar. */
.install-home::before, .install-home::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.install-home::before { z-index: 5; background: #fff url(/app/assets/kwikiz/logo.png) center 46% / 46% auto no-repeat;
  transform-origin: 61.5% 30%; animation: ih-open 7s var(--ease-out) infinite; }
.install-home::after { z-index: 6; background: #fff url(/app/screenshots/home.png) center 34px / 100% auto no-repeat; opacity: 0; animation: ih-app 7s ease infinite; }
@keyframes ih-open { 0%, 37% { transform: scale(.14); opacity: 0; border-radius: 40px; } 45% { transform: scale(1); opacity: 1; } 86% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(.14); opacity: 0; } }
@keyframes ih-app { 0%, 50% { opacity: 0; } 55%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
.install-home .install-status { z-index: 7; }
.install-stage > .sticker, .install-stage > .tag-chip { position: absolute; z-index: 3; animation: install-float 6s ease-in-out infinite; }
.install-s1 { top: 12%; left: 4%; rotate: -12deg; }
.install-s2 { top: 30%; right: 0; rotate: 6deg; animation-delay: -2s !important; }
.install-s3 { bottom: 16%; left: 2%; rotate: -5deg; animation-delay: -4s !important; }
/* Phones: keep the stickers on the frame's edges, clear of the Kwikiz icon. */
@media (max-width: 699px) { .install-s1 { top: 4%; left: -1%; } .install-s2 { top: auto; bottom: 30%; right: -2%; } .install-s3 { bottom: 9%; } }
@keyframes install-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* How it works + perks */
.install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0; list-style: none; }
.install-step { position: relative; padding: 30px 26px 28px; border: 2px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.install-step-yellow { background: var(--yellow); } .install-step-blue { background: var(--blue); color: #fff; }
.install-step-blue p { color: rgba(255, 255, 255, .85) !important; }
.install-step-num { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink);
  font-family: var(--cond); font-size: 28px; font-weight: 800; box-shadow: 0 4px 0 var(--ink); }
.install-step strong { display: block; font-size: 23px; font-weight: 900; letter-spacing: -.03em; line-height: 1.15; }
.install-step p { margin-top: 10px !important; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.install-perks-section { padding-top: 0; }
.install-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.install-perk { padding: 24px; border: 2px solid var(--line); border-radius: 22px; background: #fff; transition: border-color .2s, transform .2s var(--ease-out); }
.install-perk:hover { border-color: var(--ink); transform: translateY(-3px); }
.install-perk-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: var(--tone); color: #fff; font-size: 24px; }
.install-perk-icon[style*="yellow"] { color: var(--ink); }
.install-perk strong { display: block; font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.install-perk p { margin-top: 6px !important; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Final band */
.install-final { padding: 0 0 clamp(80px, 10vw, 130px); }
.install-final-ticket { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(32px, 5vw, 60px) clamp(28px, 5vw, 70px);
  border-radius: 34px; background: var(--blue); color: #fff; }
.install-final-ticket h2 { max-width: 620px; font-size: clamp(34px, 4.6vw, 62px); line-height: .98; letter-spacing: -.045em; }
.install-final-ticket .dot { color: var(--yellow); }
.install-final-ticket .notch { width: 44px; height: 44px; margin-top: -22px; } .install-final-ticket .notch-l { left: -22px; } .install-final-ticket .notch-r { right: -22px; }
.install-final-cta { min-height: 62px; padding: 0 28px; font-size: 18px; }
.install-stores { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: 34px; color: var(--muted); font-size: 15px; font-weight: 700; }

/* iPhone walkthrough */
.ios-guide { position: fixed; inset: 0; z-index: 200; display: grid; align-items: end; justify-items: center; }
.ios-guide[hidden], .ios-pointer[hidden] { display: none; }
.ios-guide-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 15, .5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.ios-guide-sheet { position: relative; width: min(460px, 100%); max-height: 92dvh; overflow-y: auto; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #fff;
  transform: translateY(100%); transition: transform .38s var(--ease-out); }
.ios-guide.is-open .ios-guide-backdrop { opacity: 1; }
.ios-guide.is-open .ios-guide-sheet { transform: none; }
@media (min-width: 700px) { .ios-guide { align-items: center; } .ios-guide-sheet { border-radius: 28px; transform: translateY(40px) scale(.96); opacity: 0; transition: transform .38s var(--ease-out), opacity .3s; } .ios-guide.is-open .ios-guide-sheet { opacity: 1; } }
html.ios-guide-open, html.ios-guide-open body { overflow: hidden; }
.ios-guide-handle { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #d6d8cf; }
.ios-guide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ios-guide-head h2 { font-size: 24px; letter-spacing: -.03em; }
.ios-guide-x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1f1ec; color: var(--ink); font-size: 18px; cursor: pointer; }
.ios-guide-stage { position: relative; height: 280px; overflow: hidden; border: 2px solid var(--ink); border-radius: 24px; background: #f2f2f7; box-shadow: 0 5px 0 var(--ink); }
.ig-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .45s var(--ease-out); pointer-events: none; }
.ios-guide-stage[data-step="1"] [data-scene="1"], .ios-guide-stage[data-step="2"] [data-scene="2"], .ios-guide-stage[data-step="3"] [data-scene="3"] { opacity: 1; transform: none; }
.ig-target { position: relative; }
.ig-target::before { content: ''; position: absolute; inset: -6px; border: 3px solid var(--blue); border-radius: 14px; animation: ig-ring 1.4s ease-out infinite; }
@keyframes ig-ring { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.ig-finger { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(17, 17, 15, .25); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); animation: ig-finger 2.8s ease-in-out infinite; }
@keyframes ig-finger { 0% { opacity: 0; transform: translate(40px, 40px) scale(1.2); } 35% { opacity: 1; transform: none; } 45% { transform: scale(.8); } 55% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
/* Scene 1: Safari */
.ig-safari { background: #fff; }
.ig-page { padding: 22px 20px; display: grid; gap: 10px; }
.ig-line { display: block; height: 10px; border-radius: 5px; background: #ececea; } .w70 { width: 70%; } .w90 { width: 90%; } .w50 { width: 50%; }
.ig-card { display: block; height: 70px; margin-top: 6px; border-radius: 14px; background: var(--blue-soft); }
.ig-toolbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 14px; background: rgba(249, 249, 249, .96); border-top: 1px solid #e3e3e8; }
.ig-url { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 12px; background: #e9e9ee; color: #3c3c43; font-size: 14px; font-weight: 600; }
.ig-tools { display: flex; justify-content: space-around; align-items: center; margin-top: 10px; color: #0a84ff; font-size: 20px; }
.ig-tool { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 10px; }
.ig-more { font-weight: 900; letter-spacing: 1px; font-size: 14px; }
.ig-share-svg { width: 24px; height: 24px; }
.ig-safari .ig-finger { left: calc(37.5% - 20px); bottom: 12px; }
/* Scene 2: share sheet */
.ig-sheet { padding: 16px; background: #f2f2f7; }
.ig-sheet-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.ig-sheet-head img { width: 40px; height: 40px; border-radius: 10px; }
.ig-sheet-head span { display: grid; font-size: 15px; } .ig-sheet-head small { color: #8e8e93; font-size: 12px; }
.ig-actions { display: grid; margin-top: 12px !important; border-radius: 14px; background: #fff; overflow: visible; }
.ig-actions li { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 15px; border-bottom: 1px solid #ececf0; }
.ig-actions li:last-child { border-bottom: 0; }
.ig-actions i { font-style: normal; color: #3c3c43; font-size: 17px; }
.ig-actions .ig-target { background: var(--blue-soft); border-radius: 0 0 14px 14px; font-weight: 700; }
.ig-plus { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #3c3c43; border-radius: 6px; font-weight: 700; line-height: 1; }
.ig-sheet .ig-finger { right: 30px; bottom: 26px; }
/* Scene 3: confirm */
.ig-confirm { background: #f2f2f7; }
.ig-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #f9f9f9; border-bottom: 1px solid #e3e3e8; font-size: 15px; color: #0a84ff; }
.ig-nav b { color: var(--ink); font-size: 15px; }
.ig-add { font-weight: 800; padding: 2px 6px; }
.ig-confirm-row { display: flex; align-items: center; gap: 14px; margin: 16px; padding: 12px; border-radius: 14px; background: #fff; }
.ig-confirm-row img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px #e3e3e8; }
.ig-confirm-row span { display: grid; font-size: 16px; } .ig-confirm-row small { color: #8e8e93; font-size: 12px; }
.ig-confirm-note { margin: 0 20px !important; color: #8e8e93; font-size: 12.5px; line-height: 1.4; }
.ig-confirm .ig-finger { right: 10px; top: 8px; }
.ios-guide-steps { display: grid; gap: 8px; margin: 18px 0 16px !important; padding: 0 !important; list-style: none; }
.ios-guide-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background-color .25s; }
.ios-guide-steps li.is-active { background: var(--blue-soft); }
.ios-guide-steps li > span { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 900; font-size: 14px; }
.ios-guide-steps li.is-active > span { background: var(--blue); }
.ios-guide-steps p { padding-top: 4px; font-size: 15px; line-height: 1.4; } .ios-guide-steps small { display: block; color: var(--muted); font-size: 13px; }
.ios-guide-steps .ig-inline { display: inline-block; width: 17px; height: 17px; margin: 0 1px -3px; }
.ig-inline { width: 17px; height: 17px; vertical-align: -3px; color: #0a84ff; }
.ios-guide-go { width: 100%; }
.ios-pointer { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 150; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; translate: -50% 0; opacity: 0; transition: opacity .3s; box-shadow: 0 4px 0 var(--blue); }
.ios-pointer .i { rotate: 90deg; animation: ios-bounce 1s ease-in-out infinite; }
.ios-pointer.is-on { opacity: 1; }
@keyframes ios-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
.install-confetti { position: fixed; z-index: 300; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; animation: install-confetti 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes install-confetti { to { transform: translate(var(--x), calc(var(--y) + 420px)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 900px) {
  .install-grid { grid-template-columns: 1fr; }
  .install-stage { min-height: 520px; order: 2; }
  .install-steps, .install-perks { grid-template-columns: 1fr; }
  .ic-desktop { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 640px) and (max-width: 900px) { .install-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .ih-kwikiz, .ih-tap, .install-home::before, .install-home::after, .install-stage > .sticker, .install-stage > .tag-chip, .install-cta::after, .ig-finger, .ig-target::before { animation: none !important; }
  .install-home::before, .install-home::after { display: none; }
}
.store-web { background: var(--blue); border-color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.store-web:hover { box-shadow: 0 7px 0 var(--ink); }

/* ==========================================================================
   Legal pages (/terms/, /privacy/…): published documents, read from the API.
   ========================================================================== */
.legal { padding: clamp(36px, 7vw, 80px) 0 clamp(48px, 8vw, 96px); }
.legal-head { max-width: 1200px; }
.legal-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow-soft);
  font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.legal-eyebrow .i { color: var(--blue); }
.legal-title { font-size: clamp(44px, 8vw, 92px); text-transform: none; }
.legal-title .dot { color: var(--orange); }
.legal-meta { margin-top: 14px; color: var(--muted); font-size: 15px; font-weight: 700; }
.legal-lede { max-width: 720px; margin-top: 8px; color: var(--ink-2); font-size: clamp(18px, 2.2vw, 21px); }
.legal-notice { max-width: 760px; margin-top: 20px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--blue-soft); font-size: 15px; }
.legal-notice.is-old { background: var(--orange-soft); }
.legal-notice a { color: var(--blue); font-weight: 800; text-decoration: underline; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 760px); gap: clamp(28px, 5vw, 64px); margin-top: clamp(28px, 5vw, 52px); align-items: start; }
.legal-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; }
.legal-toc p { margin-bottom: 10px; color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.legal-toc a { display: block; padding: 5px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.35; transition: background .2s, color .2s; }
.legal-toc a:hover { background: var(--cream); color: var(--ink); }
.legal-body { grid-column: 2; font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.legal-toc[hidden] + .legal-body { grid-column: 1 / -1; max-width: 760px; }
.legal-body h2 { margin: 44px 0 12px; font-family: var(--cond); font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; scroll-margin-top: 96px; }
.legal-body h3 { margin: 26px 0 8px; font-size: 19px; }
.legal-body p, .legal-body li { margin: 0 0 14px; color: var(--ink-2); }
.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 22px; }
.legal-body a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); font-weight: 900; }
.legal-body hr { margin: 34px 0; border: 0; border-top: 2px dashed var(--line); }
.legal-body .legal-callout { margin: 0 0 30px; padding: 20px 24px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--yellow-soft); box-shadow: var(--shadow); font-size: 18px; }
.legal-body .legal-callout p { margin: 0; color: var(--ink); }
.legal-body .legal-table { margin: 0 0 22px; overflow-x: auto; border: 2px solid var(--ink); border-radius: 16px; }
.legal-body table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal-body th, .legal-body td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-body th { background: var(--cream); font-weight: 900; }
.legal-body th, .legal-body td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.legal-body td:first-child { min-width: 128px; font-weight: 800; color: var(--ink); }
.legal-body tr:last-child td { border-bottom: 0; }
.legal-error { padding: 18px 20px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--orange-soft); }
.legal-foot { display: grid; gap: 22px; max-width: 1200px; margin-top: 52px; padding-top: 28px; border-top: 2px dashed var(--line); }
.legal-foot .btn { justify-self: start; }
.legal-versions p { margin-bottom: 8px; color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.legal-versions ul { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.legal-versions a { color: var(--blue); font-weight: 700; }
.legal-others { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-others a { padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 800; transition: border-color .2s, background .2s; }
.legal-others a:hover, .legal-others a[aria-current] { border-color: var(--ink); background: var(--yellow-soft); }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; max-height: none; padding: 16px 18px; border: 2px solid var(--line); border-radius: var(--radius); }
  .legal-body { grid-column: 1; }
}
@media print {
  .announce, .site-nav, .nav, header.site-header, .footer, .consent-banner, .legal-toc, .legal-foot, .skip-link { display: none !important; }
  .legal { padding: 0; } .legal-layout { display: block; margin-top: 18px; } .legal-body { font-size: 12pt; }
  .legal-body .legal-callout { box-shadow: none; } .legal-body a { color: inherit; }
}

/* Cookies: the notice and "Manage cookies" (assets/js/consent.js), shared with the web app. */
.consent-banner { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 12px; max-width: 520px; padding: 16px 18px; border: 2px solid var(--ink);
  border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); font-size: 15px; line-height: 1.5; animation: consent-in .5s var(--ease-out) .6s both; }
.consent-banner a { color: var(--blue); font-weight: 800; text-decoration: underline; }
.consent-banner > div { display: flex; gap: 10px; }
.consent-banner .btn { flex: 1; }
@keyframes consent-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .consent-banner { animation: none; } }
.consent-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 2px solid var(--ink); border-radius: 22px; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.consent-dialog::backdrop { background: rgba(17, 17, 15, .5); backdrop-filter: blur(4px); }
.consent-dialog form { display: grid; gap: 14px; padding: 24px; }
.consent-dialog h2 { font-size: 34px; } .consent-dialog h2 .dot { color: var(--orange); }
.consent-dialog p { color: var(--muted); font-size: 15px; }
.consent-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; }
.consent-row strong { display: block; font-size: 16px; } .consent-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.consent-row > span { flex: 1; }
.consent-row em { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-style: normal; font-weight: 800; }
.consent-row input { position: absolute; opacity: 0; pointer-events: none; }
.consent-row i { position: relative; flex-shrink: 0; width: 48px; height: 28px; border-radius: 999px; background: #d9dbd2; transition: background .2s; }
.consent-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s var(--ease-out); }
.consent-row input:checked + i { background: var(--blue); }
.consent-row input:checked + i::after { transform: translateX(20px); }
.consent-row input:focus-visible + i { outline: 3px solid var(--yellow); outline-offset: 2px; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }