/* ==============================
   FILE: web/landing/landing.css
   PURPOSE: The design system and every section style of the MOON
            marketing site (/, /about, /korea). One file, no framework —
            it is ~30 KB, cached for a day, and shared by every static page.
   PRINCIPLES:
     * Neutral warm base, ONE accent (indigo) reserved for actions, progress
       and highlights. Each exam keeps its own hue only inside its own UI.
     * Motion is done with transform/opacity only (GPU-friendly) and is
       switched off wholesale under prefers-reduced-motion.
     * Mobile first: every layout below is single-column until 760px.
   ============================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg: #FAF9F6;            /* warm off-white page */
  --bg-2: #F1EFEA;          /* sunken surfaces */
  --ink: #14161A;           /* charcoal text */
  --ink-2: #4B4F5A;         /* secondary text */
  --muted: #7A7E8A;         /* captions */
  --line: rgba(20, 22, 26, .09);
  --navy: #0B1230;          /* moon-night sections */
  --navy-2: #131B3F;
  --accent: #5B54F0;        /* the one accent */
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(91, 84, 240, .10);
  --topik: #3B82F6;
  --eps: #F59E0B;
  --kiip: #10B981;
  --ok: #10B981;
  --no: #EF4444;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -24px rgba(11, 18, 48, .25), 0 2px 6px rgba(11, 18, 48, .06);
  --shadow-sm: 0 8px 24px -12px rgba(11, 18, 48, .18);
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ko: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --gutter: 20px;
  --max: 1200px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Karta va panel yuzalari. Qorong'i rejimda faqat shular o'zgaradi. */
  --surface: #FFFFFF;
  --nav-bg: rgba(250, 249, 246, .72);
  --tabbar-bg: rgba(255, 255, 255, .98);
  --scheme: light;
}

/* ── Qorong'i rejim ────────────────────────────────────────────────────
   IKKI MANBA, BITTA NATIJA. Sayt va Flutter ilovasi bitta domenda yashaydi,
   lekin ilovaning O'Z Appearance sozlamasi bor (System / Light / Dark).
   Shuning uchun rang ikki narsadan kelib chiqadi:

     1. data-theme="light" yoki "dark" — ilovada qilingan aniq tanlov.
        Uni ilova localStorage'ga yozadi (core/theme/bridge/theme_bridge.dart),
        landing.js esa <html> ga qo'yadi. Bu hamma narsadan ustun turadi.
     2. prefers-color-scheme — tanlov "system" bo'lganda yoki foydalanuvchi
        ilovaga hali kirmaganda ishlaydi.

   NEGA :not([data-theme="light"]): foydalanuvchi ilovada Light ni tanlagan,
   telefoni esa qorong'i rejimda bo'lishi mumkin. Bu shart o'sha holatda
   media so'rovni chetlab o'tadi — aks holda tanlov e'tiborga olinmasdi.

   NEGA FAQAT TOKENLAR: yuqoridagi barcha uslublar rangni o'zgaruvchidan
   oladi, shuning uchun bu yerda ikki qisqa blok yetadi. Navy bo'limlar
   (.section--dark) allaqachon qorong'i, ular ikkala rejimda bir xil.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F1A;            /* tungi fon, ilovaning scaffold rangiga yaqin */
    --bg-2: #121827;          /* cho'kkan yuzalar */
    --ink: #ECEEF4;           /* asosiy matn */
    --ink-2: #B3B9C7;         /* ikkilamchi matn */
    --muted: #848B9C;         /* izohlar */
    --line: rgba(255, 255, 255, .10);
    --accent: #7A74FF;        /* qorong'i fonda kontrast uchun bir oz och */
    --accent-soft: rgba(122, 116, 255, .16);
    --surface: #151C2C;
    --nav-bg: rgba(11, 15, 26, .78);
    --tabbar-bg: rgba(18, 24, 39, .98);
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, .6);
    --scheme: dark;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --bg: #0B0F1A;            /* tungi fon, ilovaning scaffold rangiga yaqin */
    --bg-2: #121827;          /* cho'kkan yuzalar */
    --ink: #ECEEF4;           /* asosiy matn */
    --ink-2: #B3B9C7;         /* ikkilamchi matn */
    --muted: #848B9C;         /* izohlar */
    --line: rgba(255, 255, 255, .10);
    --accent: #7A74FF;        /* qorong'i fonda kontrast uchun bir oz och */
    --accent-soft: rgba(122, 116, 255, .16);
    --surface: #151C2C;
    --nav-bg: rgba(11, 15, 26, .78);
    --tabbar-bg: rgba(18, 24, 39, .98);
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, .6);
    --scheme: dark;
    color-scheme: dark;
}

/* Rasmlar qorong'i fonda ko'zni qamashtirmasligi uchun biroz yumshatiladi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__img img,
  :root:not([data-theme="light"]) .ah__art img { filter: brightness(.92) contrast(1.02); }
}
:root[data-theme="dark"] .hero__img img,
:root[data-theme="dark"] .ah__art img { filter: brightness(.92) contrast(1.02); }

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; margin: 0; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); 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; }
.ko { font-family: var(--font-ko); }

/* ── Layout helpers ───────────────────────────────────────────────────── */
.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section--tight { padding: clamp(48px, 7vw, 96px) 0; }
.section--dark { background: var(--navy); color: #fff; }
.section--dark .eyebrow { color: rgba(255,255,255,.55); }
.section--dark .lede { color: rgba(255,255,255,.72); }
.section--sunken { background: var(--bg-2); }
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.eyebrow--accent { color: var(--accent); }
.h-display { font-size: clamp(40px, 6.6vw, 88px); font-weight: 800; letter-spacing: -.035em; }
.h1 { font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -.03em; }
.h2 { font-size: clamp(30px, 4.2vw, 56px); font-weight: 800; letter-spacing: -.03em; max-width: 18ch; }
.h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); max-width: 56ch; margin-top: 20px; line-height: 1.55; }
.head { margin-bottom: clamp(36px, 5vw, 64px); }
.head--center { text-align: center; }
.head--center .h2, .head--center .lede { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  transition: transform .35s var(--ease), background .25s, color .25s, box-shadow .35s;
  will-change: transform; white-space: nowrap;
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -12px rgba(91,84,240,.7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(91,84,240,.8); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(20,22,26,.25); }
.section--dark .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.section--dark .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.link { font-family: var(--font-display); font-weight: 700; color: var(--accent); display: inline-flex; gap: 8px; align-items: center; }
.link .arr { transition: transform .35s var(--ease); }
.link:hover .arr { transform: translateX(4px); }
/* ── "Start a Test" menu: one click shows all three centres ───────────── */
.tmenu { position: relative; }
.tmenu .chev { font-size: 12px; margin-left: 2px; transition: transform .25s var(--ease); }
.tmenu.is-open .chev { transform: rotate(180deg); }
/* A section with overflow:hidden (hero, final) would clip the list — the
   KIIP row was cut off on 2026-09-19 — so the section lifts the clip while
   a menu inside it is open (.has-menu, set by landing.js). */
.has-menu { overflow: visible !important; }
.tmenu__list {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 60; min-width: 280px;
  max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 24px 48px -16px rgba(20,22,26,.25);
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
}
.tmenu.is-open .tmenu__list { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav__cta .tmenu__list { inset-inline-start: auto; inset-inline-end: 0; }
.tmenu__list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 11px; color: var(--ink); text-decoration: none; }
.tmenu__list a:hover, .tmenu__list a:focus-visible { background: var(--bg-2); outline: none; }
.tmenu__list b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.tmenu__list span { font-size: 13px; color: var(--ink-2); }
/* Inside the phone drawer there is room: show the list inline, always open. */
/* `inherit`, not `auto`/`visible`: an explicit value here would override the
   CLOSED drawer's pointer-events:none / visibility:hidden, and the invisible
   TOPIK/EPS/KIIP links then swallowed taps on the phone tab bar underneath
   (Scholarships tab opened /kiip → login, 2026-09-20). */
.menu .tmenu__list { position: static; opacity: 1; transform: none; pointer-events: inherit; visibility: inherit; box-shadow: none; margin-top: 8px; transition: none; }
.menu .tmenu > .btn { display: none; }
@media (prefers-reduced-motion: reduce) { .tmenu__list, .tmenu .chev { transition: none; } }

/* ── Signed-in progress strip (hero) + nav pill ──────────────────────── */
.me { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding: 14px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(20,22,26,.25); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.me:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -24px rgba(91,84,240,.35); }
.me__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; flex: none; }
.me__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me__text b { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.me__text span { font-size: 13px; color: var(--muted); }
.me__stats { display: flex; gap: 20px; margin-inline-start: auto; }
.me__stat { display: flex; flex-direction: column; align-items: flex-start; }
.me__stat b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.me__stat span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.me .arr { font-size: 18px; color: var(--accent); }
.me[hidden] { display: none; }
.nav__auth--me { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.nav__auth--me .me__avatar { width: 26px; height: 26px; font-size: 11px; }
.nav__auth--me .fire { color: var(--ink-2); font-weight: 600; }
@media (max-width: 720px) { .me__stats { margin-inline-start: 0; width: 100%; justify-content: space-between; } }

/* ── Language pill (nav, every device) ───────────────────────────────────
   The app has 20 UI languages; the landing is English. The pill records
   the choice where the app reads it (Hive box "app_settings" in IndexedDB,
   key "locale"), so the app opens in that language. */
.lang__btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .04em; cursor: pointer; }
.lang__btn:hover { border-color: rgba(20,22,26,.25); }
.lang__list { min-width: 240px; max-height: min(70vh, 480px); overflow-y: auto; }
.lang__list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 10px; text-align: start; cursor: pointer; font: inherit; color: var(--ink); }
.lang__list button:hover, .lang__list button:focus-visible { background: var(--bg-2); outline: none; }
.lang__list button b { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .06em; width: 30px; color: var(--muted); }
.lang__list button span { font-size: 14px; }
.lang__list button.is-on { background: var(--bg-2); }
.lang__list button.is-on b { color: var(--accent); }
.nav__lang-m { display: flex; margin-inline-start: auto; margin-inline-end: 10px; }
.nav__lang-m .tmenu__list { inset-inline-start: auto; inset-inline-end: 0; }
@media (min-width: 900px) { .nav__lang-m { display: none; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(250, 249, 246, .88); }
.nav__in { display: flex; align-items: center; gap: 20px; min-width: 0; }
/* Long-word languages (Uzbek, Filipino, Spanish…) made the bar wider than
   the window on 2026-09-20: the link row may shrink and clip before the
   page grows a horizontal scrollbar, and the "Explore" button — repeated
   in the hero right below — steps out on narrower desktops. */
.nav__links { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nav__cta { flex: 0 0 auto; }
@media (max-width: 1279px) { .nav__cta [data-explore] { display: none; } }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; font-size: 15px; }
.brand__moon { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--accent) 19% 100%); box-shadow: 0 0 0 4px var(--accent-soft); }
.nav__links { display: none; gap: 4px; margin-left: 8px; }
.nav__links a { padding: 8px 10px; border-radius: 999px; font-weight: 500; font-size: 14px; white-space: nowrap; color: var(--ink-2); transition: background .25s, color .25s; }
.nav__links a:hover { background: var(--bg-2); color: var(--ink); }
.nav__cta { display: none; margin-inline-start: auto; gap: 8px; align-items: center; }
/* "Log in" is a text link, not a third button: the bar already carries two. */
.nav__auth { font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 0 10px; text-decoration: none; white-space: nowrap; }
.nav__auth:hover { color: var(--ink); }
.menu a.menu__link--sm { font-size: 20px; font-weight: 700; }
/* Compact burger: three 16px lines 4px apart inside a 36px pill that
   matches the language pill next to it (the old 44px grid spread the
   lines 14px apart and read as three loose dashes on a phone). */
.nav__burger { width: 36px; height: 36px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); }
.nav__burger span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--bg);
  padding: 20px var(--gutter) 40px; display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s, transform .35s var(--ease), visibility 0s .3s;
}
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.menu a.menu__link { font-family: var(--font-display); font-size: 28px; font-weight: 800; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu .cta-row { margin-top: 24px; }
@media (min-width: 900px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__burger, .menu { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero__grid { display: grid; gap: 44px; align-items: center; }
.hero__copy .h-display { max-width: 12ch; }
.hero__copy .lede { max-width: 44ch; }
.hero .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero .word > span { display: inline-block; transform: translateY(110%); animation: rise .9s var(--ease) forwards; }
@keyframes rise { to { transform: none; } }
/* Three facts, always on ONE row on every device (user request 2026-09-19). */
.hero__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 28px; margin-top: 36px; color: var(--muted); font-size: 14px; }
.hero__meta > div { min-width: 0; }
.hero__meta b { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 18px; display: block; letter-spacing: -.02em; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

/* Hero visual: a stage where product scenes morph into each other. */
.stage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; width: 100%; }
.stage__glow { position: absolute; inset: 10% 8%; border-radius: 40%; background: radial-gradient(closest-side, rgba(91,84,240,.18), transparent 70%); filter: blur(10px); }
.stage__orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgba(20,22,26,.12); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scene {
  position: absolute; left: 50%; top: 50%; width: min(86%, 420px);
  transform: translate(-50%, -50%) scale(.92); opacity: 0; will-change: transform, opacity;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; border: 1px solid var(--line);
}
.scene.is-on { opacity: 1; transform: translate(-50%, -50%); }
.scene__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scene__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.scene__tag.t-topik i { background: var(--topik); }
.scene__tag.t-eps i { background: var(--eps); }
.scene__tag.t-kiip i { background: var(--kiip); }
.scene__q { font-family: var(--font-ko); font-size: 18px; font-weight: 600; margin: 14px 0 12px; line-height: 1.45; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); font-family: var(--font-ko); font-size: 15px; transition: border-color .25s, background .25s, transform .25s; text-align: start; width: 100%; }
.opt b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; background: var(--bg-2); flex: none; }
.opt.is-pick { border-color: var(--accent); background: var(--accent-soft); }
.opt.is-ok { border-color: var(--ok); background: rgba(16,185,129,.10); }
.opt.is-ok b { background: var(--ok); color: #fff; }
.opt.is-no { border-color: var(--no); background: rgba(239,68,68,.08); }
.opt.is-no b { background: var(--no); color: #fff; }
.scene__ok { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--font-display); font-weight: 800; color: var(--ok); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.scene__ok.is-on { opacity: 1; transform: none; }
.bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1.1s var(--ease); }
.bar.b-topik > i { background: var(--topik); } .bar.b-eps > i { background: var(--eps); } .bar.b-kiip > i { background: var(--kiip); }
.scene__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); margin: 14px 0 8px; }
.scene__row b { color: var(--ink); font-family: var(--font-display); }
.scene__uni h4 { font-size: 22px; margin: 10px 0 4px; }
.scene__uni .sub { color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.chip--accent { background: var(--accent-soft); color: var(--accent); }
.scene__logo { display: grid; place-items: center; gap: 14px; padding: 40px 0; text-align: center; }
.scene__logo .brand__moon { width: 64px; height: 64px; box-shadow: 0 0 0 12px var(--accent-soft), 0 0 0 28px rgba(91,84,240,.05); }
.scene__logo .brand { font-size: 20px; }
.stage__note { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; }
.stage__dots { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: flex; gap: 6px; }
.stage__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,22,26,.15); transition: background .3s, transform .3s; }
.stage__dots i.is-on { background: var(--accent); transform: scale(1.3); }

/* ── Pillars ──────────────────────────────────────────────────────────── */
.pillars { display: grid; gap: 40px; }
.pillars__list { display: grid; gap: 8px; }
.pillar {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 26px 22px;
  border-radius: var(--radius); border: 1px solid transparent; transition: background .4s, border-color .4s, opacity .4s, transform .5s var(--ease);
  background: var(--surface); border-color: var(--line);
}
@media (min-width: 900px) {
  .pillar { opacity: .55; transform: scale(.985); background: transparent; border-color: transparent; }
  .pillar.is-active { opacity: 1; transform: none; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); }
}
.pillar__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-2); color: var(--accent); }
.pillar h3 { font-size: 26px; }
.pillar .sub { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.pillar p { color: var(--ink-2); }
.pillar .link { margin-top: 12px; }
/* Tests pillar: three centre links side by side, wrapping on narrow cards */
/* Always one row on every device (user request 2026-09-19). */
.pillar__links { display: flex; flex-wrap: nowrap; gap: 4px 18px; margin-top: 12px; }
.pillar__links .link { white-space: nowrap; }
.pillar__links .link { margin-top: 0; }
.pillars__visual { display: none; position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
.pv { position: relative; aspect-ratio: 4 / 4.4; }
.pv__card { position: absolute; inset: 0; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 28px; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .5s, transform .6s var(--ease); display: flex; flex-direction: column; }
.pv__card.is-on { opacity: 1; transform: none; }
.pv__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pv__body { flex: 1; display: grid; align-content: center; gap: 12px; }
.pv__num { font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pv__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pv__row span:last-child { font-family: var(--font-display); font-weight: 700; }
@media (min-width: 900px) {
  .pillars { grid-template-columns: 1fr .9fr; gap: 64px; }
  .pillars__visual { display: block; }
}

/* ── Experience (scroll story + live demo) ────────────────────────────── */
.exp { display: grid; gap: 40px; }
.steps { display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); opacity: .4; transition: opacity .4s; }
.step.is-active { opacity: 1; }
.step__n { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--accent); padding-top: 8px; white-space: nowrap; }
.step h3 { font-size: clamp(24px, 2.6vw, 34px); }
.step p { color: var(--ink-2); margin-top: 6px; font-size: 16px; }
.demo-wrap { order: -1; }
@media (min-width: 900px) { .demo-wrap { order: 0; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; } }
.demo { background: var(--surface); border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px; min-height: 420px; display: flex; flex-direction: column; }
.demo__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--muted); }
.demo__top .t { display: flex; align-items: center; gap: 8px; }
.demo__top .t i { width: 8px; height: 8px; border-radius: 50%; background: var(--topik); }
.demo__timer { font-variant-numeric: tabular-nums; }
.demo__topics { display: grid; gap: 8px; margin-top: 16px; }
.topic { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); font-family: var(--font-display); font-weight: 700; transition: border-color .25s, background .25s; }
.topic small { font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.topic.is-pick { border-color: var(--topik); background: rgba(59,130,246,.07); }
.demo__q { font-family: var(--font-ko); font-size: 18px; font-weight: 600; margin: 16px 0 14px; line-height: 1.5; }
.demo__q small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.demo__status { margin-top: 14px; min-height: 28px; font-family: var(--font-display); font-weight: 800; display: flex; align-items: center; gap: 10px; }
.demo__status.ok { color: var(--ok); }
.demo__status.no { color: var(--no); }
.xp { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.xp.is-on { opacity: 1; transform: none; }
.why { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); font-size: 15px; line-height: 1.5; display: none; }
.why.is-on { display: block; animation: fade .4s var(--ease); }
.why b { font-family: var(--font-display); display: block; margin-bottom: 4px; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
/* The +XP chip only exists once it is moved into the status line; as a
   direct child it is a parked template and must not take a line of height. */
.demo > .xp { display: none; }
.demo__progress { margin-top: auto; padding-top: 18px; }
.demo__progress .scene__row { margin-top: 0; }
.demo__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.demo__hint { font-size: 13px; color: var(--muted); margin-top: 10px; }
@media (min-width: 900px) { .exp { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* ── Tests ────────────────────────────────────────────────────────────── */
.tests { display: grid; gap: 16px; }
.test { border-radius: 28px; padding: 30px 26px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.test:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.test::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.test--topik { --c: var(--topik); } .test--eps { --c: var(--eps); } .test--kiip { --c: var(--kiip); }
/* Study tools (2026-09-25): same card, the two non-exam hues the app uses. */
.test--useful { --c: #EC4899; } .test--fc { --c: #7C3AED; }
.test__k { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .12em; color: var(--c); }
.test h3 { font-size: 30px; }
.test p { color: var(--ink-2); font-size: 15px; }
.test ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.test li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.test li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; margin-top: 3px; background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--c) 14%, #fff); border: 1.5px solid var(--c); }
.test .link { margin-top: auto; color: var(--c); }
.test__mini { margin-top: 6px; padding: 14px; border-radius: 16px; background: var(--bg-2); font-size: 13px; }
.test__mini .bar { margin-top: 8px; }
@media (min-width: 760px) { .tests { grid-template-columns: repeat(3, 1fr); } .tests--tools { grid-template-columns: repeat(2, 1fr); } }

/* ── Results ──────────────────────────────────────────────────────────── */
.result { display: grid; gap: 40px; align-items: center; }
.rcard { background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; padding: 28px; color: #fff; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.rcard__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rcard__big { display: flex; align-items: center; gap: 22px; margin: 20px 0 8px; }
.ring { width: 96px; height: 96px; position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: rgba(255,255,255,.12); }
.ring .val { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1.4s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.rcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.rcard__stats div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); }
.rcard__stats b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.rcard__stats span { font-size: 12px; color: rgba(255,255,255,.6); }
.rcard__bars { display: grid; gap: 12px; margin-top: 22px; }
.rcard__bars .scene__row { color: rgba(255,255,255,.65); margin: 0 0 6px; }
.rcard__bars .scene__row b { color: #fff; }
.rcard .bar { background: rgba(255,255,255,.1); }
.num { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .result { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* ── Universities (horizontal) ────────────────────────────────────────── */
.uni-section { overflow: hidden; }
.uni-track { display: flex; gap: 16px; padding: 4px var(--gutter) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.uni-track::-webkit-scrollbar { display: none; }
.uni { flex: 0 0 min(82vw, 340px); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform .5s var(--ease), box-shadow .5s; text-align: start; }
.uni:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.uni__rank { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--muted); display: flex; justify-content: space-between; }
.uni__rank b { color: var(--accent); }
.uni h3 { font-size: 22px; line-height: 1.15; }
.uni .ko { color: var(--muted); font-size: 14px; }
.uni__loc { font-size: 14px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.uni__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.uni__more > div { overflow: hidden; }
.uni.is-open .uni__more { grid-template-rows: 1fr; }
.uni__facts { display: grid; gap: 0; margin-top: 10px; border-top: 1px solid var(--line); }
.uni__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.uni__facts span:last-child { font-family: var(--font-display); font-weight: 700; text-align: right; }
.uni__toggle { margin-top: 8px; align-self: flex-start; padding: 0; }
.uni .link { margin-top: 6px; }
.uni-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
@media (min-width: 900px) {
  .uni-track { padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}

/* ── Scholarships ─────────────────────────────────────────────────────── */
.grants { display: grid; gap: 14px; }
.grant { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 10px; opacity: 0; transform: translateY(28px); transition: opacity .6s, transform .7s var(--ease), box-shadow .5s; }
.grant.is-in { opacity: 1; transform: none; }
.grant:hover { box-shadow: var(--shadow); }
.grant__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grant__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--bg-2); }
.grant h3 { font-size: 20px; line-height: 1.2; }
.grant p { color: var(--ink-2); font-size: 15px; }
.grant__meta { display: grid; gap: 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.grant__meta div { display: flex; justify-content: space-between; gap: 12px; }
.grant__meta span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
@media (min-width: 760px) { .grants { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grants { grid-template-columns: repeat(3, 1fr); } }

/* ── Korea editorial ──────────────────────────────────────────────────── */

/* ── Everything connects ──────────────────────────────────────────────── */
.chain { display: grid; gap: 40px; align-items: start; }
.chain__svg { display: none; }
.chain__list { display: grid; gap: 0; position: relative; }
.chain__list::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: rgba(255,255,255,.12); }
.chain__list .line { position: absolute; left: 21px; top: 24px; width: 2px; height: 0; background: var(--accent); box-shadow: 0 0 16px rgba(91,84,240,.8); }
.node { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: center; padding: 16px 0; opacity: .45; transition: opacity .4s; }
.node.is-on { opacity: 1; }
.node i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-2); border: 1.5px solid rgba(255,255,255,.14); font-family: var(--font-display); font-weight: 800; font-size: 12px; transition: background .4s, border-color .4s, transform .4s var(--ease); }
.node.is-on i { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.node b { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; display: block; }
.node span { color: rgba(255,255,255,.62); font-size: 15px; }
.chain__copy { position: sticky; top: calc(var(--nav-h) + 40px); }
@media (min-width: 900px) { .chain { grid-template-columns: .9fr 1.1fr; gap: 80px; } }

/* ── Journey ──────────────────────────────────────────────────────────── */
.journey { display: grid; gap: 10px; position: relative; }
.journey > * { min-width: 0; }
.jstage { padding: 22px 20px; overflow-wrap: anywhere; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; transition: transform .5s var(--ease), box-shadow .5s; }
.jstage:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.jstage b { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.jstage h3 { font-size: 24px; }
.jstage p { font-size: 14px; color: var(--ink-2); }
.jstage a, .jstage .link { font-size: 14px; justify-self: start; }
.journey__path { display: none; }
@media (min-width: 760px) { .journey { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
  .journey { grid-template-columns: repeat(5, 1fr); gap: 12px; padding-top: 44px; }
  .journey__path { display: block; position: absolute; left: 4%; right: 4%; top: 0; height: 40px; }
  .journey__path path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2000; stroke-dashoffset: 2000; }
  .journey.is-in .journey__path path { animation: draw 2.2s var(--ease) forwards; }
  .journey__path circle { fill: var(--accent); opacity: 0; }
  .journey.is-in .journey__path circle { animation: pop .5s var(--ease) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { to { opacity: 1; } }
}

/* ── Dashboard preview ────────────────────────────────────────────────── */
.dash { background: var(--surface); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; }
.dash__bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--muted); }
.dash__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-2); }
.dash__bar .pill { margin-inline-start: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.dash__grid { display: grid; gap: 14px; padding: 20px; }
.dcard { border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.dcard--hero { background: linear-gradient(135deg, #0B1230, #1E2A6E); color: #fff; border-color: transparent; }
.dcard--hero .bar { background: rgba(255,255,255,.14); }
.dcard__k { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dcard--hero .dcard__k { color: rgba(255,255,255,.65); }
.dcard__big { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.dcard__sub { font-size: 14px; color: var(--muted); }
.dcard--hero .dcard__sub { color: rgba(255,255,255,.7); }
.dcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.dcard li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dcard li span:last-child { font-family: var(--font-display); font-weight: 700; }
@media (min-width: 760px) { .dash__grid { grid-template-columns: repeat(3, 1fr); } .dcard--hero { grid-column: span 2; } }

/* ── Final CTA ────────────────────────────────────────────────────────── */
.final { text-align: center; padding: clamp(96px, 14vw, 180px) 0; position: relative; overflow: hidden; }
.final .h-display { max-width: 16ch; margin-inline: auto; font-size: clamp(38px, 6.4vw, 84px); }
.final .lede { margin-inline: auto; }
.final .cta-row { justify-content: center; }
.final__moon { position: absolute; left: 50%; top: 50%; width: min(120vw, 1100px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -30%); background: radial-gradient(closest-side, rgba(91,84,240,.14), transparent 68%); pointer-events: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 56px 0 32px; font-size: 14px; color: var(--ink-2); }
.footer__grid { display: grid; gap: 28px; }
.footer__grid > * { min-width: 0; overflow-wrap: anywhere; }
.footer h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a:hover { color: var(--accent); }
/* Centred on every device (user request 2026-09-19). */
.footer__bottom { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer select { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }

/* ── Article / hub pages ──────────────────────────────────────────────── */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); }
.page-hero .h-display { font-size: clamp(38px, 6.4vw, 84px); max-width: 14ch; }
.prose { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin: 48px 0 16px; letter-spacing: -.025em; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 22px; margin: 32px 0 10px; }
.prose p + p { margin-top: 16px; }
.prose ul { padding-left: 22px; margin: 12px 0; } .prose li + li { margin-top: 8px; }
.prose .note { margin: 28px 0; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 14px 14px 0; font-size: 16px; }
.prose a { color: var(--accent); font-weight: 600; }
.hub { display: grid; gap: 14px; }
@media (min-width: 760px) { .hub { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hub { grid-template-columns: repeat(3, 1fr); } }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; margin-bottom: 20px; }
.crumbs a:hover { color: var(--accent); }
.next { display: grid; gap: 12px; margin-top: 56px; }
@media (min-width: 760px) { .next { grid-template-columns: repeat(3, 1fr); } }
.next a { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-display); font-weight: 700; display: flex; justify-content: space-between; transition: transform .4s var(--ease), box-shadow .4s; }
.next a:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.values { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.value b { font-family: var(--font-display); font-size: 20px; display: block; margin-bottom: 8px; }
.value p { font-size: 15px; color: var(--ink-2); }

/* ── Reveal on scroll (generic) ───────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; } .rv-d3 { transition-delay: .3s; }

/* ── Reduced motion: everything settles to its final state ────────────── */
/* ── Phone scale (≤720px) ────────────────────────────────────────────────
   Desktop type ran at full size on a 390px screen and read as oversized
   (user feedback 2026-09-19). Everything steps down one notch: 15px body,
   30px display, tighter cards, shorter section rhythm. */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .section { padding: 48px 0; }
  .section--tight { padding: 36px 0; }
  .head { margin-bottom: 24px; }
  .eyebrow { font-size: 11px; margin-bottom: 12px; }
  .h-display { font-size: 30px; letter-spacing: -.03em; }
  .h1 { font-size: 27px; }
  .h2 { font-size: 24px; }
  .h3 { font-size: 18px; }
  .lede { font-size: 15px; margin-top: 12px; line-height: 1.5; }
  .btn { min-height: 42px; padding: 0 16px; font-size: 14px; gap: 8px; }
  .btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .cta-row { gap: 8px; margin-top: 20px; }
  .link { font-size: 14px; }
  .hero { padding: 24px 0 32px; }
  .hero__grid { gap: 24px; }
  .hero__copy .h-display { max-width: none; }
  .hero__meta { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; font-size: 11.5px; line-height: 1.25; }
  /* Hero stage on a phone: the scenes are TALLER than the 1:1 square that
     centres them on desktop, so the active card spilled over the stats
     above and the copy below. Here the active scene sits in normal flow
     and gives the stage its height; the others are simply not shown. */
  .stage { aspect-ratio: auto; max-width: none; padding: 8px 0 30px; }
  .stage__orbit { display: none; }
  .stage__glow { inset: 0; }
  .scene { display: none; }
  .scene.is-on { display: block; position: relative; left: auto; top: auto; transform: none; width: 100%; opacity: 1; padding: 16px; }
  .scene__q { font-size: 16px; margin: 10px 0 10px; }
  .scene__uni h4 { font-size: 19px; }
  .stage__dots { bottom: 6px; }
  .stage__note { display: none; }

  /* No scroll-reveal on phones (2026-09-19): a section that waits for an
     IntersectionObserver tick shows as a blank block while the reader is
     already looking at it, and on a slow phone the transitions cost frames.
     Everything is simply visible; the desktop keeps the choreography. */
  .rv, .grant, .step, .node { opacity: 1 !important; transform: none !important; transition: none !important; }
  .me .arr { display: none; }
  .me__text { flex: 1 1 100%; }

  .hero__meta b { font-size: 15px; }
  .me { margin-top: 18px; padding: 12px 14px; gap: 10px; border-radius: 16px; }
  .me__avatar { width: 32px; height: 32px; font-size: 13px; }
  .me__text b { font-size: 14px; }
  .me__text span { font-size: 12px; }
  .me__stat b { font-size: 15px; }
  .me__stat span { font-size: 11px; }
  .pillar { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 14px; border-radius: 18px; }
  .pillar__icon { width: 40px; height: 40px; border-radius: 12px; }
  .pillar__icon svg { width: 20px; height: 20px; }
  .pillar h3 { font-size: 19px; }
  .pillar .sub { font-size: 11px; }
  .pillar p { font-size: 14px; }
  .pillar .link { margin-top: 8px; }
  .pillar__links { gap: 4px 12px; }
  .pillar__links .link { font-size: 13px; }
  .pillar__links .link .arr { margin-left: 2px; }
  .pillars__list { gap: 10px; }
  .step { grid-template-columns: 58px 1fr; gap: 10px; padding: 14px 0; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 14px; margin-top: 3px; }
  .test { padding: 18px 16px; border-radius: 20px; gap: 10px; }
  .test h3 { font-size: 21px; }
  .test p, .test li { font-size: 14px; }
  .tests { gap: 12px; }
  .grant { padding: 16px; border-radius: 18px; gap: 8px; }
  .grant h3 { font-size: 17px; }
  .grant p { font-size: 13.5px; }
  .grants { gap: 12px; }
  .uni { padding: 18px; border-radius: 20px; }
  .uni h3 { font-size: 18px; }
  .node b { font-size: 17px; }
  .node p { font-size: 13.5px; }
  .jstage { padding: 16px; border-radius: 16px; gap: 6px; }
  .jstage h3 { font-size: 18px; }
  .jstage p, .jstage a, .jstage .link { font-size: 13.5px; }
  .dcard { padding: 14px; border-radius: 16px; gap: 8px; }
  .dcard ul { font-size: 13px; }

  /* Dashboard preview: the focus card and the streak card side by side
     (user request 2026-09-19); the rest stack below. */
  .dash__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; padding: 12px; }
  .dash__grid > .dcard { min-width: 0; padding: 12px; }
  .dcard__k { font-size: 11px; }
  .dcard--hero .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 10px; }
  .dash__grid > .dcard * { overflow-wrap: anywhere; }
  .dash__grid > .dcard:nth-child(n+3) { grid-column: 1 / -1; }
  .dcard--hero .dcard__big { font-size: 34px; }
  .dcard .dcard__big { font-size: 30px; }
  .dcard__sub { font-size: 12.5px; }
  .dcard--hero .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .pv__num { font-size: 40px; }
  .final { padding: 56px 0; }
  .final .h-display { font-size: 28px; }
  .page-hero { padding: 24px 0 16px; }
  .page-hero .h-display { font-size: 28px; }
  .prose { font-size: 15px; }
  .prose h2 { font-size: 21px; margin: 28px 0 10px; }
  /* Footer on a phone: no link columns (user request 2026-09-19) — the
     same links live in the ☰ menu. Only the © line and language stay. */
  .footer { padding: 24px 0 20px; }
  .footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
  .footer__grid { display: none; }
  .menu a.menu__link { font-size: 22px; padding: 10px 0; }

  /* Second pass (user feedback 2026-09-19): still too large on a phone —
     one more notch down for type and cards, and a compact live demo. */
  body { font-size: 14px; }
  .h-display { font-size: 27px; }
  .h2 { font-size: 22px; }
  .h3 { font-size: 17px; }
  .lede { font-size: 14px; }
  .section { padding: 40px 0; }
  .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .hero__grid { gap: 18px; }
  .pillar { padding: 14px 12px; gap: 10px; grid-template-columns: 36px 1fr; }
  .pillar__icon { width: 36px; height: 36px; }
  .pillar h3 { font-size: 17px; }
  .pillar p { font-size: 13px; }
  .test { padding: 16px 14px; }
  .test h3 { font-size: 19px; }
  .test p, .test li { font-size: 13px; }
  .grant { padding: 14px; }
  .grant h3 { font-size: 16px; }
  .grant p { font-size: 13px; }
  .uni { padding: 16px; flex-basis: min(78vw, 300px); }
  .uni h3 { font-size: 17px; }
  .jstage { padding: 14px; }
  .jstage h3 { font-size: 17px; }
  .step h3 { font-size: 17px; }
  .step p { font-size: 13px; }
  .node b { font-size: 16px; }
  .node p { font-size: 13px; }
  .dcard--hero .dcard__big { font-size: 30px; }
  .dcard .dcard__big { font-size: 26px; }
  .final .h-display { font-size: 25px; }
  /* Live demo card */
  .demo { padding: 16px 14px; min-height: 0; border-radius: 20px; }
  .demo__top { font-size: 11px; }
  .demo__topics { gap: 6px; margin-top: 10px; }
  .demo__q { font-size: 15px; margin: 10px 0 10px; line-height: 1.45; }
  .demo__q small { font-size: 12px; margin-bottom: 4px; }
  .opts { gap: 6px; }
  .opt { padding: 8px 10px; gap: 10px; font-size: 13.5px; border-radius: 10px; }
  .opt b { width: 22px; height: 22px; font-size: 11px; }
  .demo__status { margin-top: 10px; min-height: 22px; font-size: 14px; }
  .demo__progress { padding-top: 12px; }
  .demo__actions { margin-top: 10px; gap: 6px; }
  .demo__hint { font-size: 12px; margin-top: 8px; }
  /* Hero scene options too */
  .scene .opt { padding: 8px 10px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv, .grant, .hero .word > span { opacity: 1; transform: none; }
  .stage__orbit { animation: none; }
  .scene { opacity: 0; } .scene.is-static { opacity: 1; }
  .pillar { opacity: 1; transform: none; }
  .step { opacity: 1; }
  .node { opacity: 1; }
  .journey__path { display: none; }
}

/* ── RTL (Arabic, Urdu) ──────────────────────────────────────────────────
   The whole page uses logical properties above, so `dir=rtl` on <html>
   mirrors it for free. The few things that must NOT mirror are listed here:
   Latin brand names, code-style test names and the Korean demo sentences
   keep their own reading direction. */
[dir="rtl"] .brand, [dir="rtl"] .lang__code, [dir="rtl"] .opt, [dir="rtl"] .uni__rank, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .word { display: inline-block; }

/* ── Phone tab bar (the app's own bottom bar, on the landing) ──────────── */
.tabbar { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 48; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--tabbar-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px 3px; border-radius: 12px; font-size: 9.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; transition: color .2s; }
.tabbar__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__ic { display: grid; place-items: center; width: 22px; height: 22px; }
.tabbar__item.is-on { color: var(--accent); }
.tabbar__me { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 11px; display: grid; place-items: center; }

/* ── Third phone pass (2026-09-20): make it feel like the app ──────────
   The user's words: "programmaga o'xshab ko'rinsin". A phone landing that
   is a long marketing page — 13 000px of ledes, feature lists and sticky
   copy — reads as a website. The app it links to is a tab bar, a greeting,
   tiles and horizontal rails. So on ≤720px:
   · solid, shorter top bar and a fixed bottom tab bar;
   · every section is a compact "screen": eyebrow + title, no ledes;
   · pillars are app tiles (Tests full width, three square tiles under it);
   · steps, scholarships and universities are swipe rails;
   · Korea guides and the journey are 2-column tiles;
   · the "Everything connects" copy is no longer sticky (it was sliding
     over the list — the overlap the user saw). */
@media (max-width: 720px) {
  :root { --nav-h: 56px; --gutter: 16px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; }
  .nav, .nav.is-scrolled { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
  .brand { font-size: 13px; letter-spacing: .1em; gap: 8px; }
  .brand__moon { width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--accent-soft); }
  .nav__lang-m .lang__btn { min-height: 34px; }

  .section { padding: 26px 0; }
  .head { margin-bottom: 14px; }
  .head .lede { display: none; }
  .head--center { text-align: start; }
  .h2 { font-size: 20px; letter-spacing: -.02em; }
  .eyebrow { font-size: 10.5px; }

  /* Hero: a greeting screen, not a poster. */
  .hero { padding: 14px 0 6px; }
  .hero .eyebrow { display: none; }
  .h-display { font-size: 25px; }
  .hero .lede { font-size: 13.5px; margin-top: 8px; }
  /* Hero buttons (Explore / Start a Test) are hidden on phones (user
     request 2026-09-21): the tab bar and the tiles below are the doors. */
  .hero .cta-row { display: none; }
  .cta-row { margin-top: 14px; gap: 8px; }
  .cta-row > .btn, .cta-row > .tmenu { flex: 1 1 0; min-width: 0; }
  .cta-row > .btn, .cta-row .tmenu > .btn { width: 100%; justify-content: center; white-space: nowrap; padding: 0 10px; }
  .cta-row .tmenu__list { inset-inline-start: auto; inset-inline-end: 0; min-width: 240px; }
  .hero__meta { margin-top: 12px; gap: 8px; }
  .hero__meta > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; font-size: 11px; }
  .hero__meta b { display: block; font-size: 17px; margin-bottom: 1px; }
  .me { margin-top: 12px; }
  .stage { padding: 4px 0 24px; }
  .scene.is-on { padding: 14px; border-radius: 18px; }

  /* Pillars → app tiles. */
  .pillars__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pillar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; border-radius: 16px; cursor: pointer; }
  .pillar > div > p:not(.sub) { display: none; }
  .pillar h3 { font-size: 13.5px; letter-spacing: -.01em; line-height: 1.2; }
  .pillar .sub { display: none; }
  .pillar .link { display: none; }
  .pillar__icon { width: 34px; height: 34px; border-radius: 11px; }
  .pillar__icon svg { width: 18px; height: 18px; }
  /* The Tests tile is the main door: full width, icon beside the text,
     and the three direct links on one row (user request 2026-09-19). */
  .pillar:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; cursor: default; }
  .pillar:first-child > div:last-child { min-width: 0; flex: 1; }
  .pillar:first-child > .pillar__icon { flex: 0 0 34px; }
  .pillar:first-child h3 { font-size: 16px; }
  .pillar:first-child .sub { display: block; font-size: 10px; margin: 2px 0 6px; }
  .pillar:first-child .pillar__links { display: flex; gap: 2px 10px; }
  .pillar:first-child .pillar__links .link { display: inline-flex; font-size: 12.5px; margin-top: 0; }

  /* Steps → a swipe rail of six small cards. */
  .steps { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 68vw; max-width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 16px; background: var(--surface); opacity: 1; }
  .step__n { padding-top: 0; font-size: 10.5px; }
  .step h3 { font-size: 15px; }
  .step p { font-size: 12.5px; margin-top: 2px; }

  /* Tests: three compact cards, no feature lists. */
  .tests { gap: 10px; }
  .test { padding: 14px; gap: 8px; border-radius: 18px; }
  .test ul { display: none; }
  .test h3 { font-size: 16px; }
  .test p { font-size: 13px; }
  .test .link { font-size: 13px; }

  /* Results */
  #results .cta-row { margin-top: 14px; }

  /* Scholarships → a swipe rail. */
  .grants { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  .grants::-webkit-scrollbar { display: none; }
  .grant { flex: 0 0 74vw; max-width: 300px; scroll-snap-align: start; padding: 14px; border-radius: 16px; }
  #scholarships .cta-row, #scholarships .head + * + .cta-row { margin-top: 14px; }


  /* Everything connects: no sticky copy on a phone (it slid over the list). */
  .chain { gap: 14px; }
  .chain__copy { position: static; }
  .chain__copy .lede { display: none; }
  .chain__copy .cta-row { margin-top: 10px; }
  .chain__list::before, .chain__list .line { inset-inline-start: 15px; left: auto; }
  .node { grid-template-columns: 32px 1fr; gap: 10px; padding: 8px 0; }
  .node i { width: 32px; height: 32px; font-size: 10.5px; }
  .node b { font-size: 14.5px; }
  .node span { font-size: 12px; }

  /* Journey → 2-column tiles. */
  .journey { grid-template-columns: 1fr 1fr; gap: 8px; }
  .jstage { padding: 12px; border-radius: 16px; gap: 4px; }
  .jstage b { font-size: 10px; }
  .jstage h3 { font-size: 15px; }
  .jstage p { display: none; }
  .jstage .link { font-size: 12px; margin-top: 2px; }

  /* Dashboard preview, final CTA, footer. */
  .dash__grid { gap: 8px; padding: 10px; }
  .final { padding: 32px 0 24px; }
  .final .h-display { font-size: 22px; }
  .final .lede { font-size: 13px; }
  .final .cta-row { justify-content: center; }
  .final .cta-row > .btn { flex: 1 1 30%; }
  .footer { padding: 14px 0 10px; }
  .footer__bottom { font-size: 12px; gap: 6px; }
  /* Drawer sits above the tab bar. */
  .menu { z-index: 49; }
}

/* ── Phone drawer (☰) as an app menu (2026-09-20) ───────────────────────
   It was five 28px display links, a 28px signed-in pill and a dropdown
   list drawn as a floating card — a website menu at poster size. Now: a
   compact list of rows, the account row as a card, a labelled test list
   and one full-width button, all scrollable on a short screen. */
.menu { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 720px) {
  .menu { padding: 8px var(--gutter) calc(28px + env(safe-area-inset-bottom)); gap: 0; }
  .menu a.menu__link { font-size: 17px; font-weight: 700; padding: 14px 2px; border-bottom: 1px solid var(--line); letter-spacing: -.01em; }
  .menu a.menu__link--sm { font-size: 15px; font-weight: 600; color: var(--ink-2); }
  /* Signed in: the name + streak pill becomes a card row. */
  .menu .nav__auth--me { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-body); font-size: 15px; font-weight: 600; box-shadow: 0 10px 24px -20px rgba(20,22,26,.3); }
  .menu .nav__auth--me .me__avatar { width: 34px; height: 34px; font-size: 13px; }
  .menu .nav__auth--me .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .menu .nav__auth--me .fire { font-size: 14px; }
  /* Tests list: the hidden "Start a Test" button becomes the label. */
  /* The drawer's bottom block (test list, Explore, Share) is gone on
     phones (user request 2026-09-21): the tab bar and the hero already
     hold the same doors, so the drawer is just the five links. */
  .menu .cta-row { display: none; }
  .menu .cta-row > .btn { width: 100%; justify-content: center; order: 2; }
  .menu .cta-row > .tmenu { width: 100%; order: 1; }
  .menu .tmenu > .btn { display: block; pointer-events: none; min-height: 0; padding: 0 2px 6px; border: 0; background: none; box-shadow: none; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: start; }
  .menu .tmenu > .btn .chev { display: none; }
  .menu .tmenu__list { margin: 0; padding: 4px; min-width: 0; max-height: none; overflow: visible; border-radius: 16px; }
  .menu .tmenu__list a { padding: 10px 12px; border-radius: 12px; }
  .menu .tmenu__list a + a { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
  .menu .tmenu__list b { font-size: 14.5px; }
  .menu .tmenu__list span { font-size: 12.5px; }
}

/* ── Share row under the final CTA ─────────────────────────────────────── */
.share-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.share-row .btn svg { margin-inline-end: 6px; }
.share-row__msg { font-size: 13px; color: var(--accent); font-weight: 600; min-height: 1em; }
@media (max-width: 720px) { .share-row { margin-top: 12px; } .menu .cta-row > button.btn { order: 3; } }

/* ── App home (phones) ──────────────────────────────────────────────────
   The landing on a phone is the app's home screen, not a marketing page
   (user direction 2026-09-21: "app-first product", store-bound). Only
   .apphome and the tab bar render under 720px; the desktop keeps the
   full site untouched. */
.apphome { display: none; }
@media (max-width: 720px) {
  .apphome { display: block; padding: 18px 0 12px; overflow-x: clip; } /* guard: a long translation must never widen the page */
  /* Everything after the app home in <main>, plus the footer, is gone on
     a phone. Scoped to pages that HAVE an .apphome (the homepage) — /about/
     and /privacy/ share this stylesheet and must keep their content. */
  main > .apphome ~ *, body.is-home .footer { display: none !important; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .ah__head { margin-bottom: 14px; }
  .ah__hi { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .ah__sub { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
  /* The signed-in strip (#me) is moved in here by landing.js. */
  .ah__me:empty { display: none; }
  .ah__me .me { margin: 0 0 18px; }
  .ah__me .me__text { flex: 1 1 0; min-width: 0; }
  .ah__me .me__avatar { width: 40px; height: 40px; font-size: 15px; }
  .ah__label { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 8px; }
  /* minmax(0,1fr), not the implicit "auto" track: an auto track can never
     shrink below the widest row's min-content, and a row whose subtitle is
     white-space:nowrap has a min-content as wide as the whole sentence. The
     Flashcards row overflowed the phone viewport that way (2026-09-26), and
     Chrome then zoomed the whole page out to fit it — the page "became
     pinch-zoomable". With a 0 minimum the track is the container width and
     the subtitle ellipsises, exactly like the app's maxLines: 1. */
  .ah__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .ah__card { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 14px 14px 14px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 10px 24px -20px rgba(20,22,26,.35); transition: transform .15s; -webkit-tap-highlight-color: transparent; }
  .ah__card:active { transform: scale(.985); }
  .ah__ic { position: relative; overflow: hidden; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28); }
  .ah__ic svg { width: 25px; height: 25px; position: relative; }
  /* Faint highlight disc — the "app icon" sheen. */
  .ah__ic::before { content: ""; position: absolute; inset-inline-end: -10px; top: -10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); }
  .ah__head[hidden] { display: none; }
  .ah__card--topik .ah__ic { background: linear-gradient(135deg, #2F6BFF, #5B54F0); }
  .ah__card--eps .ah__ic { background: linear-gradient(135deg, #F59E0B, #F97316); }
  .ah__card--kiip .ah__ic { background: linear-gradient(135deg, #10B981, #0E7C6B); }
  .ah__card--useful .ah__ic { background: linear-gradient(135deg, #EC4899, #BE185D); }
  .ah__card--fc .ah__ic { background: linear-gradient(135deg, #7C3AED, #5B54F0); }
  .ah__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ah__txt b { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
  .ah__txt span { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ah__arr { color: var(--muted); font-size: 22px; line-height: 1; padding-inline-start: 4px; }
  .ah__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .ah__tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 10px 24px -20px rgba(20,22,26,.35); -webkit-tap-highlight-color: transparent; }
  .ah__tile:active { transform: scale(.985); }
  .ah__tic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
  .ah__tile b { font-family: var(--font-display); font-size: 15px; font-weight: 800; }
  .ah__tile span { font-size: 12px; color: var(--ink-2); }
  .ah__foot { display: block; text-align: center; font-size: 12.5px; color: var(--muted); padding: 8px 0 4px; text-decoration: none; }
  /* RTL: the arrow points the other way. */
  [dir="rtl"] .ah__arr { transform: scaleX(-1); }
}