/* Test Prepper website (testprepper.app). Dark, premium but fun, like the iPhone apps.
   Brand tokens come from docs/BRIEF.md. Everything here is self-hosted: no fonts, scripts or
   images load from other servers. Keep it that way, or update /privacy. */

/* TikTok Sans (SIL Open Font License, see /assets/fonts/OFL.txt?v=99e743f68f). Each weight is split in two:
   a Latin core every page uses, and an extended set (more Latin, Vietnamese, Cyrillic, Greek)
   that browsers only download when a page needs it. */
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/tiktok-sans-400-latin.woff2?v=03c7ef83e8") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/tiktok-sans-400-ext.woff2?v=4cda218d50") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-04FF, U+0E3F, U+1E00-1EFF, U+2070-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-27FF, U+FB01-FB02; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/tiktok-sans-500-latin.woff2?v=6c08ae1247") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/tiktok-sans-500-ext.woff2?v=1b0b1a42d6") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-04FF, U+0E3F, U+1E00-1EFF, U+2070-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-27FF, U+FB01-FB02; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/tiktok-sans-600-latin.woff2?v=e66d8dc919") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/tiktok-sans-600-ext.woff2?v=d449716c75") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-04FF, U+0E3F, U+1E00-1EFF, U+2070-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-27FF, U+FB01-FB02; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/tiktok-sans-700-latin.woff2?v=6b672d48dc") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/tiktok-sans-700-ext.woff2?v=dd937e4a9c") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-04FF, U+0E3F, U+1E00-1EFF, U+2070-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-27FF, U+FB01-FB02; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/tiktok-sans-800-latin.woff2?v=1395f5a8b4") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/tiktok-sans-800-ext.woff2?v=48e53a13d0") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-04FF, U+0E3F, U+1E00-1EFF, U+2070-20AB, U+20AD-2121, U+2123-2190, U+2192, U+2194-2211, U+2213-2214, U+2216-27FF, U+FB01-FB02; }

:root {
  color-scheme: dark;
  --bg: #0B0C0F;
  --surface: #131519;
  --surface-2: #181B20;
  --inset: #0E1013;
  --text: #F4F5F7;
  --text-2: rgba(244, 245, 247, 0.74);
  --text-3: rgba(244, 245, 247, 0.56);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --light: #F4F3EF;
  --ink: #0E1013;
  --success: #4FD69C;
  --sapphire: #B6C5FF;
  --sapphire-deep: #7C95FF;
  --emerald: #A2F0CD;
  --amber: #FFD99A;
  --holo-light: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 42%);
  --holo-prism: var(--holo-light), conic-gradient(from 200deg, #B6C5FF, #FFFFFF 8%, #A2F0CD 20%, #FFE58C 32%, #FFB443 42%, #FF9EB5 54%, #C3B1FF 66%, #FFFFFF 76%, #8CD8FF 88%, #B6C5FF 100%);
  --holo-sapphire: var(--holo-light), conic-gradient(from 210deg, #B6C5FF, #FFFFFF 10%, #7C95FF 24%, #3F5BD8 38%, #C3B1FF 52%, #FFFFFF 64%, #8CD8FF 78%, #B6C5FF 100%);
  --rainbow: linear-gradient(90deg, #B6C5FF 0%, #A2F0CD 28%, #FFE58C 52%, #FFB443 70%, #FF9EB5 86%, #C3B1FF 100%);
  --btn-sapphire: linear-gradient(180deg, #B3C3FF 0%, #7C95FF 100%);
  --font: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --header-h: 68px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
::selection { background: rgba(124, 149, 255, 0.45); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--light); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Type ---------- */
.eyebrow { display: block; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.eyebrow--sapphire { color: var(--sapphire); }
.display { font-weight: 800; font-size: clamp(46px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.04em; }
.display span { display: block; }
.title { font-weight: 800; font-size: clamp(36px, 4.8vw, 58px); line-height: 1.04; letter-spacing: -0.035em; }
.title .dim, .display .dim { color: rgba(244, 245, 247, 0.5); }
.title .dim { display: block; }
.grad { width: fit-content; padding-right: 0.08em; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 600px; text-wrap: pretty; }
.muted { color: var(--text-3); }
.fine { font-size: 14px; line-height: 1.5; color: var(--text-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--light { background: var(--text); color: var(--bg); }
.btn--light:hover { background: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--hair-2); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.04); }
.btn--sapphire { background: var(--btn-sapphire); color: var(--ink); box-shadow: 0 12px 32px -14px rgba(124, 149, 255, 0.9); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* App Store badge area. While the app isn't live it shows "Coming soon". When it is, swap the
   <span class="store-badge store-badge--soon"> for a link (see the comment in the HTML). */
.store-badge {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 22px 8px 9px;
  border-radius: 16px; background: #000000; border: 1px solid rgba(255, 255, 255, 0.24);
  color: #FFFFFF; text-decoration: none; line-height: 1.15;
}
a.store-badge:hover { border-color: rgba(255, 255, 255, 0.5); }
.store-badge img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.store-badge small { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.01em; }
.store-badge strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.store-badge--soon { cursor: default; }
.store-badge--soon .soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sapphire); box-shadow: 0 0 0 4px rgba(182, 197, 255, 0.18); margin-left: 6px; flex: none; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- Prep, the mascot ---------- */
.prep { position: relative; display: inline-block; flex: none; border-radius: 50%; background: var(--holo-prism); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.prep--sapphire { background: var(--holo-sapphire); }
.prep svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prep--36 { width: 36px; height: 36px; }
.prep--48 { width: 48px; height: 48px; }
.prep--64 { width: 64px; height: 64px; }
.prep--112 { width: 112px; height: 112px; }
.prep--glow { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 24px 70px -16px rgba(140, 160, 255, 0.65); }
.prep--hero { width: clamp(150px, 20vw, 220px); height: clamp(150px, 20vw, 220px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 30px 90px -20px rgba(150, 170, 255, 0.7); }
.prep .eo { animation: tp-eo 5.2s step-end infinite; }
.prep .ec { opacity: 0; animation: tp-ec 5.2s step-end infinite; }
.prep--late .eo, .prep--late .ec { animation-delay: 1.7s; }
.float { animation: tp-float 6s ease-in-out infinite; }
@keyframes tp-eo { 0% { opacity: 1; } 92% { opacity: 0; } 95.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes tp-ec { 0% { opacity: 0; } 92% { opacity: 1; } 95.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes tp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bubble {
  position: relative; display: inline-block; max-width: 250px; padding: 11px 15px;
  border-radius: 16px; background: var(--light); color: var(--ink);
  font-size: 15px; line-height: 1.35; font-weight: 500; text-wrap: pretty;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9);
}
.bubble::before { content: ""; position: absolute; width: 14px; height: 14px; background: var(--light); border-radius: 3px; transform: rotate(45deg); }
.bubble--left::before { left: -5px; bottom: 14px; }
.bubble--down::before { left: 26px; bottom: -5px; }

/* ---------- Phone frame ---------- */
.phone {
  --phone-w: 300px;
  position: relative; width: var(--phone-w); flex: none;
  padding: calc(var(--phone-w) * 0.032);
  border-radius: calc(var(--phone-w) * 0.165);
  background: linear-gradient(155deg, #3B404B 0%, #16181D 38%, #22262D 72%, #3A3F49 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 30px 120px -50px var(--glow, rgba(124, 149, 255, 0.75));
}
.phone img { width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; border-radius: calc(var(--phone-w) * 0.135); background: #0B0C0F; }
.phone::after { content: ""; position: absolute; top: calc(var(--phone-w) * 0.058); left: 50%; width: calc(var(--phone-w) * 0.28); height: calc(var(--phone-w) * 0.082); transform: translateX(-50%); border-radius: 999px; background: #000000; }
.phone--hero { --phone-w: clamp(250px, 26vw, 320px); }
.phone--feature { --phone-w: clamp(240px, 24vw, 290px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 12, 15, 0.82); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--hair); }
.header-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -0.035em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; color: rgba(244, 245, 247, 0.8); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.header-cta { margin-left: 8px; }
.menu { display: none; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-2); cursor: pointer; color: var(--text); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu .icon-close { display: none; }
.menu[open] .icon-open { display: none; }
.menu[open] .icon-close { display: block; }
.menu-panel { position: absolute; right: 0; top: calc(100% - 4px); z-index: 60; width: min(280px, calc(100vw - 2 * var(--gutter))); padding: 8px; border-radius: 22px; border: 1px solid var(--hair-2); background: var(--surface); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9); }
.menu-panel a:not(.btn) { display: flex; align-items: center; min-height: 50px; padding: 0 16px; border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.menu-panel a:not(.btn):hover { background: rgba(255, 255, 255, 0.06); }
.menu-panel .btn { width: 100%; margin-top: 6px; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 10vw, 128px) 0; overflow: hidden; }
.section--flush-top { padding-top: 0; }
.section--band { background: var(--inset); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.orbit { position: absolute; pointer-events: none; color: #FFFFFF; }
.orbit g { stroke: currentColor; stroke-opacity: 0.07; }
.orbit { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.page-hero .orbit { -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 66%); mask-image: linear-gradient(to bottom, #000 42%, transparent 66%); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px); }
.hero .orbit { right: -220px; top: -160px; width: 1000px; height: 1000px; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 40px; }
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.tag-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 14px 0 7px; border-radius: 17px; background: var(--light); color: var(--ink); transform: rotate(-2deg); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
.tag-pill::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: conic-gradient(from 200deg, #B6C5FF, #FFFFFF 8%, #A2F0CD 20%, #FFE58C 32%, #FFB443 42%, #FF9EB5 54%, #C3B1FF 66%, #FFFFFF 76%, #8CD8FF 88%, #B6C5FF 100%); box-shadow: inset 0 0 0 1px rgba(14, 16, 19, 0.15); }
.price-line { font-weight: 600; font-size: 17px; color: var(--text); }
.price-line span { color: var(--text-3); font-weight: 400; }
.hero-visual { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 620px; padding-right: 12px; }
.hero-visual .phone { transform: rotate(3deg); }
.hero-prep { position: absolute; left: -28px; top: 44%; display: grid; justify-items: start; gap: 14px; }
.hero-prep .bubble { order: -1; max-width: 184px; }
.hero-prep .bubble::before { left: 34px; bottom: -5px; }

/* Why strip */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 44px; padding-bottom: 44px; }
.why h2 { margin: 10px 0 6px; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.why p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Feature rows */
.features { display: grid; gap: clamp(64px, 9vw, 120px); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 8vw, 120px); }
.feature--flip .feature-media { order: -1; }
.feature-copy { display: grid; gap: 18px; max-width: 520px; }
.feature-copy h3 { font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.035em; }
.feature-copy p { color: var(--text-2); font-size: 18px; line-height: 1.6; }
.feature-media { position: relative; display: flex; justify-content: center; }
.feature-media::before { content: ""; position: absolute; inset: 10% -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 149, 255, 0.18), rgba(124, 149, 255, 0)); pointer-events: none; }
.checks { list-style: none; display: grid; gap: 12px; margin-top: 6px; }
.checks li { position: relative; padding-left: 32px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: rgba(182, 197, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6C5FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Languages */
.langs-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.langs-copy { display: grid; gap: 20px; }
.langs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.langs li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); font-size: 16px; line-height: 1.4; color: var(--text); }
.langs li:nth-child(5n + 1) { border-color: rgba(182, 197, 255, 0.3); }
.langs li:nth-child(7n + 3) { border-color: rgba(162, 240, 205, 0.28); }
.langs li:nth-child(6n + 4) { border-color: rgba(255, 217, 154, 0.3); }
.note-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.note-card a { color: var(--sapphire); text-underline-offset: 3px; }
.note-card svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--sapphire); }

/* Meet Prep */
.meet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.meet-stage { position: relative; display: grid; place-items: center; min-height: 420px; }
.meet-stage .orbit { inset: 50% auto auto 50%; width: 560px; height: 560px; transform: translate(-50%, -50%); }
.meet-stage .bubble { position: absolute; }
.meet-stage .b1 { left: 4%; top: 14%; }
.meet-stage .b2 { right: 0; bottom: 14%; max-width: 230px; }
.meet-copy { display: grid; gap: 20px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 940px; }
.plan { display: grid; align-content: start; gap: 20px; padding: clamp(26px, 3vw, 36px); border-radius: 28px; border: 1px solid var(--hair-2); background: var(--surface); }
.plan--pro { border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(135deg, #B6C5FF, #A2F0CD 30%, #FFE58C 55%, #FF9EB5 78%, #C3B1FF) border-box; box-shadow: 0 40px 90px -50px rgba(124, 149, 255, 0.8); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-badge { padding: 5px 10px; border-radius: 999px; background: rgba(182, 197, 255, 0.14); color: var(--sapphire); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price strong { font-weight: 800; font-size: clamp(48px, 5vw, 60px); line-height: 1; letter-spacing: -0.045em; }
.price span { color: var(--text-2); font-size: 17px; }
.plan-sub { color: var(--text-2); font-size: 16px; }
.plan .checks { border-top: 1px solid var(--hair); padding-top: 22px; }
.plans-note { margin-top: 22px; max-width: 760px; }

/* App family */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.app-card { display: grid; align-content: start; gap: 14px; padding: 28px; border-radius: 28px; border: 1px solid var(--hair-2); background: var(--surface); }
.app-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 24px -12px rgba(0, 0, 0, 0.9); }
.gem { padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.gem--sapphire { color: var(--sapphire); }
.gem--emerald { color: var(--emerald); }
.gem--amber { color: var(--amber); }
.app-card h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.app-card p { color: var(--text-2); font-size: 16px; line-height: 1.55; }
.status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-2); font-size: 13px; font-weight: 600; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.status--soon { background: rgba(182, 197, 255, 0.12); color: var(--sapphire); }
.status--soon::before { background: var(--sapphire); }

/* Closing call to action */
.cta-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 22px; padding: clamp(56px, 8vw, 88px) 24px; border-radius: 32px; border: 1px solid var(--hair); background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124, 149, 255, 0.16), rgba(124, 149, 255, 0)), var(--surface); text-align: center; }
.cta-card .orbit { inset: 50% auto auto 50%; width: 1100px; height: 1100px; transform: translate(-50%, -50%); }
.cta-card > *:not(.orbit) { position: relative; }
.cta-card .title { font-size: clamp(44px, 6vw, 76px); }
.cta-card .lead { margin: 0 auto; }
.cta-card .fine a { color: var(--text-2); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding: 56px 0 36px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand .brand { margin-right: 0; justify-self: start; }
.footer-tagline { font-weight: 700; font-size: 17px; color: var(--text-3); letter-spacing: -0.01em; }
.footer-col h2 { margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.footer-col ul { list-style: none; display: grid; gap: 2px; }
.footer-col a, .footer-col span { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: var(--text); }
.footer-col .soon { color: var(--text-3); }
.footer-col .soon em { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--text-3); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--text-3); }

/* ---------- Article pages (privacy, support, terms) ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 80px) 0 clamp(32px, 4vw, 48px); }
.page-hero .orbit { right: -320px; top: -300px; width: 900px; height: 900px; }
.page-hero-inner { position: relative; display: grid; gap: 22px; justify-items: start; max-width: 820px; }
.page-hero .title { font-size: clamp(42px, 6vw, 72px); }
.byline { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--text-3); }
.byline strong { display: block; color: var(--text); font-weight: 600; font-size: 15px; }
.article-grid { display: grid; grid-template-columns: 210px minmax(0, 700px); gap: clamp(40px, 6vw, 72px); padding-bottom: clamp(80px, 10vw, 120px); }
.toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.toc .eyebrow { margin-bottom: 12px; }
.toc ol { list-style: none; border-left: 1px solid var(--hair-2); }
.toc a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--text-3); text-decoration: none; font-size: 14px; line-height: 1.4; }
.toc a:hover { color: var(--text); border-left-color: var(--sapphire); }
.prose { min-width: 0; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 56px; font-size: clamp(26px, 2.6vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; }
.prose h3 { margin-top: 28px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.prose p, .prose li { color: var(--text-2); font-size: 17px; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--sapphire); text-decoration: underline; text-decoration-color: rgba(182, 197, 255, 0.45); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--sapphire); }
.prose .first { margin-top: 0; }
.prose h2.eyebrow { margin-top: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.12em; font-weight: 700; }
.prose .help-card { margin-top: 48px; }
.quick { padding: 24px 26px; border-radius: 24px; border: 1px solid rgba(182, 197, 255, 0.24); background: rgba(124, 149, 255, 0.07); }
.quick .eyebrow { color: var(--sapphire); margin-bottom: 12px; }
.quick ul { list-style: none; padding: 0; gap: 10px; }
.quick li { position: relative; padding-left: 30px; color: var(--text); font-size: 17px; line-height: 1.5; }
.quick li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(182, 197, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6C5FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.data-list { list-style: none; padding: 0 !important; gap: 12px !important; }
.data-list li { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--hair); background: var(--surface); }
.data-list li strong { display: block; margin-bottom: 2px; }
.callout { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--hair-2); background: var(--surface); }

/* Support */
.contact-card { display: grid; gap: 14px; padding: clamp(24px, 3vw, 32px); border-radius: 28px; border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(135deg, rgba(182, 197, 255, 0.7), rgba(162, 240, 205, 0.5) 40%, rgba(255, 158, 181, 0.5) 80%) border-box; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.prose .contact-email { font-weight: 800; font-size: clamp(22px, 3.2vw, 32px); letter-spacing: -0.03em; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.prose .contact-email:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(182, 197, 255, 0.6); text-underline-offset: 5px; }
.copy-btn.is-done { border-color: rgba(79, 214, 156, 0.6); color: var(--success); }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { position: relative; list-style: none; display: block; padding: 22px 48px 22px 0; cursor: pointer; font-weight: 600; font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 1px solid var(--hair-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F5F7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover::after { border-color: rgba(255, 255, 255, 0.34); }
.faq-body { display: grid; gap: 12px; padding: 0 0 26px; }
.faq-body p, .faq-body li { font-size: 17px; }
.faq-body h3 { margin-top: 6px; font-size: 17px; }
.help-card { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: 24px; border: 1px solid var(--hair-2); background: var(--surface); }
.help-card p { color: var(--text-2); }
.help-card a { color: var(--sapphire); }

/* 404 */
.notfound { position: relative; overflow: hidden; min-height: calc(100vh - var(--header-h) - 160px); display: grid; place-items: center; padding: 72px 0; text-align: center; }
.notfound .orbit { inset: 50% auto auto 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); }
.notfound-inner { position: relative; display: grid; justify-items: center; gap: 22px; }
.notfound .cta-row { justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-visual { min-height: 0; flex-direction: column; align-items: center; padding: 8px 0 0; }
  .hero-prep { position: relative; left: auto; top: auto; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: -44px; margin-left: -40px; }
  .hero-prep .bubble { order: 2; }
  .hero-prep .bubble::before { left: -5px; bottom: auto; top: calc(50% - 7px); }
}
@media (max-width: 1000px) {
    .langs-grid, .meet { grid-template-columns: 1fr; }
  .meet-stage { order: -1; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature--flip .feature-media { order: 0; }
  .feature-copy { max-width: none; }
  .why { grid-template-columns: 1fr; gap: 26px; }
  .plans, .apps { grid-template-columns: 1fr; }
  .apps { max-width: 560px; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .header-cta { display: none; }
  .brand { font-size: 20px; }
  .hero-visual .phone { transform: none; }
  .hero-prep { margin-left: 0; margin-top: -36px; }
  .hero-prep .prep--112 { width: 84px; height: 84px; }
  .hero-prep .bubble { max-width: 190px; font-size: 14px; }
    .meet-stage { min-height: 360px; }
  .meet-stage .b1 { left: 0; top: 4%; }
  .meet-stage .b2 { right: 0; bottom: 4%; max-width: 200px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col--contact { grid-column: 1 / -1; }
  .store-badge { width: 100%; justify-content: center; }
  .cta-row .btn { width: 100%; }
  .help-card { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .prep .ec { opacity: 0 !important; }
  .prep .eo { opacity: 1 !important; }
}