/* PolyDrop landing page — shares the app's brand tokens (colors, radius, font) but is a
   deliberately different layout: wide sections, a feature grid, a phone-mockup hero, and a
   pricing table. Self-contained: no dependency on web/app/style.css. Dark-only, matching the
   app (no prefers-color-scheme handling — this mirrors the product, not a generic web page). */

:root {
    /* Brand tokens, matching web/app/style.css so the two feel like the same product. */
    --bg-menu: #2A164B;
    --surface-card: #3E2469;
    --surface-card-2: #4a2c7a;
    --text-main: #ffffff;
    --text-muted: #A895C9;
    --primary: #FF70A6;
    --primary-2: #ff8fb8;
    --primary-d: #c24e7c;
    --glow: #3a1f63;
    /* the colour scheme the dashboard chose overrides these on <html> (/theme.js, scripts/brand.mjs) */
    --success: #38E4B7;
    --danger: #FF6B6B;
    --border: rgba(255, 255, 255, 0.1);
    --radius: 24px;
    --radius-lg: 32px;
    --radius-sm: 14px;

    /* Landing-only extensions. */
    --container: 1120px;
    --container-narrow: 760px;
    --shadow-card: 0 10px 30px rgba(12, 4, 30, 0.35);
    --shadow-pop: 0 20px 60px rgba(12, 4, 30, 0.45);
    --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --header-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    background: radial-gradient(circle at 15% -10%, var(--glow) 0%, var(--bg-menu) 45%) fixed, var(--bg-menu);
    color: var(--text-main);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* CJK locales: don't force Nunito's Latin metrics onto Han/Hangul glyphs — fall back straight
   to the platform's own UI font, which already renders those scripts correctly. Nunito is kept
   first so any Latin characters mixed into the copy (numbers, "PolyDrop", CTA labels that stay
   in English) still pick up the brand font. */
html[lang="ja"] body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
html[lang="ko"] body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/assets/fonts/nunito-var.woff2') format('woff2');
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--primary); color: #1a0a30; font-weight: 900;
    padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 200;
    height: var(--header-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--bg-menu) 75%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.site-header .main-nav { justify-self: center; }
.site-header .header-actions { justify-self: end; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.brand svg { width: 28px; height: 28px; flex: none; color: var(--primary); }   /* the simplified logo: the open book in outline, in the brand colour */
html.is-dev .brand svg { color: #F5B416; }   /* the dev site's own colour, the amber of its DEV icon (/theme.js sets is-dev) */

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav .nav-links { display: flex; align-items: center; gap: 24px; }
.main-nav .nav-links a {
    color: var(--text-muted); font-weight: 800; font-size: 15px;
    padding: 8px 2px; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.main-nav .nav-links a:hover, .main-nav .nav-links a[aria-current="page"] { color: var(--text-main); }
.main-nav .nav-links a[aria-current="page"] { border-bottom-color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-switch { position: relative; }
.lang-switch-btn {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text-main);
    font-weight: 800; font-size: 14px; padding: 9px 12px; border-radius: 999px;
}
.lang-switch-btn svg { width: 16px; height: 16px; }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop); padding: 6px; display: none; flex-direction: column; gap: 2px;
    max-height: 60vh; overflow-y: auto;
}
.lang-switch.open .lang-menu { display: flex; }
.lang-menu a { padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.lang-menu a:hover { background: rgba(255, 255, 255, 0.08); }
.lang-menu a[aria-current="true"] { color: var(--success); }
.lang-menu a svg { width: 16px; height: 16px; flex: none; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 900; font-size: 15px; border: none; border-radius: 999px; padding: 12px 22px;
    transition: transform 0.15s var(--ease-pop), box-shadow 0.15s;
}
.btn:active { transform: scale(0.95); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #1a0a30; box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn-primary:hover { box-shadow: 0 8px 26px color-mix(in srgb, var(--primary) 50%, transparent); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--text-main); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-lg { padding: 16px 30px; font-size: 17px; }
.btn svg { width: 18px; height: 18px; }

.nav-toggle { display: none; background: none; border: none; color: var(--text-main); padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }
.nav-login-mobile { display: none; }

/* ---------- Showcase strip (screenshots, sits right under the hero) ---------- */
.showcase { padding-top: 0; padding-bottom: 40px; }
.showcase-grid .feature-media { padding: 0; overflow: hidden; }
.showcase-grid .feature-media img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--success);
    background: rgba(56, 228, 183, 0.12); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 20px; }
.hero .sub { font-size: 18px; color: var(--text-muted); font-weight: 700; line-height: 1.6; margin-bottom: 28px; max-width: 54ch; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 16px; }
.hero .note { font-size: 13px; color: var(--text-muted); font-weight: 700; }

.phone-frame {
    position: relative; margin: 0 auto; width: min(100%, 320px);
    border-radius: 44px; padding: 14px; background: linear-gradient(160deg, #1c0d38, #150826);
    box-shadow: var(--shadow-pop), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.phone-frame::before {
    content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 22px; background: #0d0518; border-radius: 0 0 16px 16px; z-index: 2;
}
.phone-frame img { border-radius: 30px; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; background: var(--bg-menu); }
.phone-glow {
    position: absolute; width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 25%, transparent), transparent 65%);
    top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; filter: blur(10px);
}

/* ---------- Section shell ---------- */
section { padding: 88px 0; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin: 0 0 40px; text-align: left; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; letter-spacing: -0.01em; margin-bottom: 14px; }
.section-head .sub { color: var(--text-muted); font-size: 16px; font-weight: 700; line-height: 1.6; }

/* ---------- Premise / stats ---------- */
.premise-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.premise-grid p { color: var(--text-muted); font-size: 16px; font-weight: 700; line-height: 1.7; margin-bottom: 18px; }
.premise-grid p strong { color: var(--text-main); }
.stat-stack { display: flex; flex-direction: column; gap: 16px; }
.stat-pill {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 20px 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.stat-pill .stat-value { font-size: 30px; font-weight: 900; color: var(--success); }
.stat-pill .stat-label { color: var(--text-muted); font-weight: 800; font-size: 14px; text-align: right; }

/* ---------- Minigame grid ---------- */
.mg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mg-card {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 22px; transition: transform 0.2s var(--ease-pop), border-color 0.2s;
}
.mg-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.mg-card .mg-num {
    width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; margin-bottom: 14px;
}
.mg-card h3 { font-size: 17px; font-weight: 900; margin-bottom: 8px; }
.mg-card p { color: var(--text-muted); font-size: 14px; font-weight: 700; line-height: 1.55; }
.section-cta { text-align: center; margin-top: 36px; }

/* ---------- Feature block (extension / community / conversation) ---------- */
.feature-block { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.feature-block.reverse .feature-media { order: 2; }
.feature-block.reverse .feature-copy { order: 1; }
.feature-copy .badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.badge-dev { background: rgba(161, 149, 201, 0.18); color: var(--text-muted); }
.badge-live { background: rgba(56, 228, 183, 0.15); color: var(--success); }
.feature-copy h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 900; margin-bottom: 14px; letter-spacing: -0.01em; }
.feature-copy p.lede { color: var(--text-muted); font-size: 16px; font-weight: 700; line-height: 1.7; margin-bottom: 20px; }
.feature-list { display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-muted); font-weight: 700; font-size: 15px; line-height: 1.5; }
.feature-list li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--success); }
.feature-media {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 18px; box-shadow: var(--shadow-card);
}
.feature-media img { border-radius: var(--radius-sm); width: 100%; }
.feature-media.placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; }
.feature-media.placeholder svg { width: 30%; height: 30%; color: var(--text-muted); opacity: 0.5; }

/* ---------- Free tier band ---------- */
.free-band {
    background: linear-gradient(135deg, var(--surface-card), var(--surface-card-2));
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 48px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center;
}
.free-band .eyebrow { background: rgba(255, 255, 255, 0.08); color: var(--text-main); }
.free-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 900; margin-bottom: 14px; }
.free-band p { color: var(--text-muted); font-weight: 700; line-height: 1.7; margin-bottom: 22px; }
.free-band .feature-list { margin-bottom: 0; }
.free-band .feature-list li { color: var(--text-main); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: var(--container-narrow); margin: 0 auto; }
.faq-item {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden;
}
.faq-item summary {
    list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 900; font-size: 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { width: 20px; height: 20px; flex: none; color: var(--text-muted); transition: transform 0.2s; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-a { padding: 0 22px 20px; color: var(--text-muted); font-weight: 700; line-height: 1.6; font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--border); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-brand .brand { margin-bottom: 10px; }
.footer-brand p { color: var(--text-muted); font-weight: 700; font-size: 14px; max-width: 32ch; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-main); font-weight: 700; font-size: 14px; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.footer-lang-label { display: flex; align-items: center; gap: 8px; }

/* ---------- Auth modal ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(10, 4, 22, 0.72); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.auth-modal {
    width: 100%; max-width: 400px; background: var(--surface-card); border-radius: var(--radius-lg);
    border: 1px solid var(--border); padding: 32px; text-align: center; position: relative;
    transform: scale(0.95); transition: transform 0.2s var(--ease-pop); box-shadow: var(--shadow-pop);
}
.modal-overlay.active .auth-modal { transform: scale(1); }
.auth-modal .modal-close {
    position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.08); border: none;
    color: var(--text-main); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.auth-modal .modal-close svg { width: 16px; height: 16px; }
.auth-modal h2 { font-size: 22px; font-weight: 900; margin-bottom: 10px; }
.auth-modal p { color: var(--text-muted); font-weight: 700; font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.auth-modal .btn { width: 100%; margin-bottom: 12px; }
/* "Continue with Google": a white button with Google's mark, then a divider to the email form */
.auth-modal .btn-google { background: #fff; color: #1f1f1f; border: 1px solid var(--border); gap: 10px; padding: 14px 16px; font-size: 15px; }
.auth-modal .btn-google:hover { background: #f4f1fb; }
.auth-modal .btn-google .gmark { flex: 0 0 auto; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.auth-or::before, .auth-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
#auth-form { display: flex; flex-direction: column; }
.auth-modal input {
    width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 14px 16px; margin-bottom: 12px; color: var(--text-main); font-weight: 700; font-size: 15px; font-family: inherit;
}
.auth-modal input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.auth-error { color: var(--danger); font-weight: 700; font-size: 13px; min-height: 18px; margin: -4px 0 4px; text-align: left; }
.auth-modal .modal-switch { font-size: 14px; color: var(--text-muted); font-weight: 700; }
.auth-modal .modal-switch button { background: none; border: none; color: var(--primary); font-weight: 900; font-size: 14px; }
.auth-modal[data-mode="login"] .switch-to-login { display: none; }
.auth-modal[data-mode="signup"] .switch-to-signup { display: none; }

/* ---------- Pricing page ---------- */
.pricing-hero { padding: 64px 0 20px; text-align: center; }
.pricing-hero h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 16px; }
.pricing-hero .sub { color: var(--text-muted); font-weight: 700; font-size: 16px; max-width: 56ch; margin: 0 auto; }

.tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; max-width: 780px; margin: 0 auto; }
.tier-card {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 32px; display: flex; flex-direction: column;
}
.tier-card.highlight {
    background: linear-gradient(160deg, var(--surface-card-2), var(--surface-card));
    border-color: color-mix(in srgb, var(--primary) 50%, transparent); box-shadow: var(--shadow-pop); position: relative; transform: scale(1.03);
}
.tier-card .tier-tag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: #1a0a30; font-size: 12px; font-weight: 900;
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.tier-card h3 { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.tier-card .price { font-size: 38px; font-weight: 900; margin: 10px 0 4px; }
.tier-card .price .period { font-size: 15px; color: var(--text-muted); font-weight: 800; }
.tier-card .yearly { color: var(--success); font-weight: 800; font-size: 13px; margin: 2px 0 6px; }
.tier-card .tagline { color: var(--text-muted); font-weight: 700; font-size: 14px; margin-bottom: 24px; min-height: 40px; }
.tier-card .btn { width: 100%; margin-bottom: 24px; }
.tier-card .feature-list { flex: 1; }
.tier-card .feature-list li { font-size: 14px; color: var(--text-main); }
.tier-card .feature-list li svg { color: var(--success); }

.matrix-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
table.matrix { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface-card); }
table.matrix th, table.matrix td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
table.matrix th { font-weight: 900; }
table.matrix td:first-child, table.matrix th:first-child { text-align: left; color: var(--text-muted); position: sticky; left: 0; background: var(--surface-card); }
table.matrix tr:last-child td { border-bottom: none; }
table.matrix .yes { color: var(--success); }
table.matrix .no { color: var(--text-muted); opacity: 0.4; }
table.matrix svg { width: 18px; height: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero .container, .premise-grid, .feature-block, .feature-block.reverse, .free-band, .tier-grid { grid-template-columns: 1fr; }
    .feature-block.reverse .feature-media, .feature-block .feature-media { order: -1; }
    .hero { text-align: left; padding-top: 48px; }
    .phone-frame { width: min(100%, 280px); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .tier-card.highlight { transform: none; }
}

@media (max-width: 720px) {
    .main-nav .nav-links { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--bg-menu);
        flex-direction: column; align-items: stretch; gap: 0; padding: 12px; transform: translateY(-8px); opacity: 0;
        pointer-events: none; transition: opacity 0.2s, transform 0.2s; overflow-y: auto; }
    body.nav-open .main-nav .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .main-nav .nav-links a { padding: 16px 8px; border-bottom: 1px solid var(--border); font-size: 17px; }
    .header-actions .btn-ghost.nav-login-desktop { display: none; }
    .nav-login-mobile { display: block; }
    .nav-toggle { display: flex; }
    .mg-grid { grid-template-columns: 1fr 1fr; }
    .showcase-grid { grid-template-columns: 1fr 1fr; }
    section { padding: 60px 0; }
    .free-band { padding: 32px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .mg-grid, .showcase-grid { grid-template-columns: 1fr; }
    .hero .cta-row { flex-direction: column; align-items: stretch; }
    .hero .cta-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ---------- Legal pages (Terms, Privacy, Legal Notice) ---------- */
/* Deliberately English-only, single canonical page per document — see render.mjs's
   renderLegalPage for why these don't go through the per-locale generator machinery. */
.legal-page { padding: 56px 0 80px; }
.legal-page h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; margin-bottom: 8px; }
.legal-page .legal-updated { color: var(--text-muted); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.legal-page .legal-notice-banner {
    background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: var(--radius-sm);
    padding: 16px 20px; font-size: 14px; font-weight: 700; color: var(--text-main); margin: 20px 0 32px; line-height: 1.6;
}
.legal-page h2 { font-size: 22px; font-weight: 900; margin: 36px 0 12px; }
.legal-page h3 { font-size: 17px; font-weight: 900; margin: 20px 0 8px; color: var(--text-main); }
.legal-page p { color: var(--text-muted); font-weight: 600; font-size: 15px; line-height: 1.75; margin-bottom: 14px; }
.legal-page ul, .legal-page ol { color: var(--text-muted); font-weight: 600; font-size: 15px; line-height: 1.75; margin: 0 0 14px 20px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--primary); font-weight: 700; }
.legal-page strong { color: var(--text-main); }
.legal-page .legal-placeholder { color: var(--danger); }

/* ==========================================================================
   PLAN.md Phase 12 (overhaul) — batch 1
   ========================================================================== */

/* ---------- Header: nothing in it may overflow ----------
   The bug this fixes, measured rather than eyeballed: at a 375px viewport
   `.site-header .container` had clientWidth 375 and scrollWidth 480. The mobile
   breakpoint hid the desktop login button but kept the brand (137px), the
   "Language" pill (135px), the Start-free button (82px) and the burger (42px)
   all on one row — 504px of content once gaps and padding are counted.
   The language switcher moves into the drawer (where the footer already has a
   second copy anyway), the primary CTA gets compact metrics, and every flex
   child is allowed to shrink so no future addition can silently overflow. */
.site-header .container { min-width: 0; }
.brand { min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { flex: 0 0 auto; min-width: 0; }

/* Language picker inside the mobile drawer, replacing the header pill below 720px. */
.nav-lang-mobile { display: none; padding: 18px 8px 8px; }
.nav-lang-label {
    display: block; color: var(--text-muted); font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.nav-lang-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-lang-list a {
    padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 800;
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border);
}
.nav-lang-list a[aria-current="true"] { background: var(--primary); color: #1a0a30; border-color: transparent; }

/* ---------- Signed-in state ----------
   The sales page stays fully reachable when logged in (it no longer redirects to
   /app/ — see landing.js). The header just swaps its auth buttons for a direct
   link into the app, and every "start free" CTA becomes an "open app" CTA.
   Auth buttons are only hidden in the header itself; every other CTA on the page
   (hero, pricing tiers, free-tier band) keeps its place and is relabelled to
   "open app" by landing.js instead, so no call to action ever just disappears. */
.nav-open-app { display: none; }
body.is-authed .nav-open-app { display: inline-flex; }
body.is-authed .site-header [data-open-auth] { display: none !important; }
/* The drawer carries its own copy of the link for mobile; above the drawer breakpoint that copy
   would otherwise sit inline in the desktop nav next to the header button. */
body.is-authed .nav-links .nav-open-app { display: none; }
.nav-links .nav-open-app { justify-content: flex-start; }

@media (max-width: 720px) {
    .header-actions .lang-switch { display: none; }
    .header-actions .btn { padding: 9px 14px; font-size: 14px; }
    .nav-lang-mobile { display: block; }
    body.is-authed .nav-links .nav-open-app { display: block; }
    .header-actions { gap: 8px; }
    .site-header .container { gap: 10px; padding: 0 16px; }
}

/* Only below ~340px does the wordmark actually stop fitting: brand text (137) + CTA (94)
   + burger (42) + gaps (20) + padding (32) = 325px. 375px devices keep the full brand. */
@media (max-width: 340px) {
    .brand span { display: none; }
    .brand svg { width: 30px; height: 30px; }
}

/* ---------- Playable hero demos (Phase 12 batch 1) ----------
   Three real, if small, versions of the product's three sections, driven by /landing/demo.js.
   The hero is now a single centred column of copy with this band underneath it, replacing the
   static phone mockup — the demos are the hero visual. */
.hero .container { display: block; }
.hero { text-align: center; padding-bottom: 40px; }
.hero-copy { max-width: 720px; margin: 0 auto; }
.hero .cta-row { justify-content: center; }
.hero .eyebrow { justify-content: center; }

.try-band { margin-top: 52px; position: relative; z-index: 1; }
.try-head { max-width: 720px; margin: 0 auto 26px; }
.try-head h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: -0.01em; }
.try-head .sub { color: var(--text-muted); font-weight: 700; font-size: 15px; margin-top: 8px; }
.try-note { text-align: center; color: var(--text-muted); font-size: 13px; font-weight: 700; margin-top: 18px; }

.try-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }

.try-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 18px 18px 20px;
    text-align: left;
    display: flex; flex-direction: column; gap: 12px;
    min-height: 420px;
    overflow: hidden;
}
.try-card-head { display: flex; align-items: flex-start; gap: 12px; }
.try-card-title { flex: 1; min-width: 0; }
.try-card-title h3 { font-size: 18px; font-weight: 900; }
.try-card-title p { color: var(--text-muted); font-size: 13px; font-weight: 700; margin-top: 2px; }
.demo-restart {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border);
    color: var(--text-muted); display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.demo-restart:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.12); }
.demo-restart svg { width: 16px; height: 16px; }

.demo-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.demo-bar-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--success), #7af0d3); transition: width 0.35s var(--ease-pop); }

.demo-meta { display: flex; align-items: center; justify-content: space-between; min-height: 20px; font-size: 13px; font-weight: 800; color: var(--text-muted); }
.demo-hearts { display: flex; gap: 4px; font-size: 15px; color: var(--danger); }
.demo-heart.is-lost { color: rgba(255, 255, 255, 0.18); }
.demo-objective { font-size: 12px; }

.demo-stage { flex: 1; display: flex; flex-direction: column; gap: 12px; position: relative; }

.demo-prompt { font-size: 15px; font-weight: 800; line-height: 1.35; }
.demo-prompt-sm { font-size: 13px; color: var(--text-muted); text-align: center; }

.demo-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.demo-chip {
    background: var(--surface-card-2); border: 1px solid var(--border); color: var(--text-main);
    border-radius: var(--radius-sm); padding: 12px 10px; font-weight: 800; font-size: 15px;
    transition: transform 0.12s var(--ease-pop), background 0.15s, border-color 0.15s, opacity 0.15s;
}
.demo-chip:hover:not(:disabled) { transform: translateY(-2px); background: #573492; }
.demo-chip:disabled { cursor: default; }
.demo-chip.is-right { background: var(--success); border-color: transparent; color: #06281f; }
.demo-chip.is-wrong { background: rgba(255, 107, 107, 0.22); border-color: var(--danger); color: #ffd4d4; }
.demo-chip.is-used { opacity: 0.25; pointer-events: none; }
.demo-chip-sm { padding: 9px 13px; font-size: 14px; border-radius: 999px; }

.demo-sentence { font-size: 20px; font-weight: 900; text-align: center; padding: 10px 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.demo-blank { display: inline-block; min-width: 34px; border-bottom: 3px solid var(--primary); }

.demo-slots { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 8px; border-radius: var(--radius-sm); border: 2px dashed var(--border); align-content: flex-start; }
.demo-slots.is-right { border-color: var(--success); border-style: solid; }
.demo-slots.is-wrong { border-color: var(--danger); border-style: solid; }
.demo-slot { min-width: 46px; min-height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; font-weight: 800; font-size: 14px; }
.demo-slot.is-filled { background: var(--primary); color: #1a0a30; cursor: pointer; }
.demo-bank { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }

.demo-word-head { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 2px; }
.demo-word { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.demo-word-pron { font-size: 12px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.04em; }
.demo-word-target { font-size: 34px; font-weight: 900; }
.demo-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); font-size: 17px; line-height: 1; }
.demo-play:hover { background: rgba(255, 255, 255, 0.13); }

.demo-mastery { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.demo-mastery-fill { height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width 0.4s var(--ease-pop); }

/* Cio thread */
.demo-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 208px; padding-right: 2px; }
.demo-msg { display: flex; }
.demo-msg-them { justify-content: flex-start; }
.demo-msg-you { justify-content: flex-end; }
.demo-bubble {
    max-width: 88%; text-align: left; border: none; border-radius: 16px;
    padding: 9px 13px; font-weight: 700; font-size: 14px; line-height: 1.35;
    display: flex; flex-direction: column; gap: 0;
    animation: demo-pop 0.22s var(--ease-pop);
}
.demo-msg-them .demo-bubble { background: var(--surface-card-2); color: var(--text-main); border-bottom-left-radius: 5px; }
.demo-msg-you .demo-bubble { background: var(--success); color: #06281f; border-bottom-right-radius: 5px; }
.demo-bubble-tr {
    font-size: 12px; font-weight: 700; opacity: 0; max-height: 0; overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.22s ease, margin-top 0.22s ease;
}
.demo-msg-them .demo-bubble-tr { color: var(--text-muted); }
.demo-msg-you .demo-bubble-tr { color: rgba(6, 40, 31, 0.7); }
.demo-msg.is-translated .demo-bubble-tr { opacity: 1; max-height: 60px; margin-top: 4px; }
.demo-composer { display: flex; flex-direction: column; gap: 8px; }
.demo-compose-line { min-height: 40px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 8px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); border: 1px solid var(--border); }
.demo-compose-hint { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.demo-typing { color: var(--text-muted); font-size: 20px; letter-spacing: 3px; animation: demo-blink 1s infinite; }

/* Finish panel */
.demo-finish { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; position: relative; }
.demo-finish-icon { font-size: 40px; animation: demo-pop 0.35s var(--ease-pop); }
.demo-finish h4 { font-size: 19px; font-weight: 900; }
.demo-finish p { color: var(--text-muted); font-size: 13px; font-weight: 700; max-width: 250px; }
.demo-cta { margin-top: 6px; }

/* Effects */
.demo-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.demo-particle {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--success); animation: demo-burst 0.7s ease-out forwards;
}
.demo-particle:nth-child(even) { background: var(--primary); }
.demo-particle:nth-child(3n) { background: #ffd166; }

@keyframes demo-burst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
@keyframes demo-pop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes demo-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes demo-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.demo-shake { animation: demo-shake 0.32s ease; }

@media (max-width: 980px) {
    .try-grid { grid-template-columns: 1fr; }
    .try-card { min-height: 0; }
}

/* ---------- Extension install band (Phase 12 batch 1) ---------- */
.ext-band { padding: 0 0 20px; }
.ext-band-inner {
    display: flex; align-items: center; gap: 22px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 16%, transparent), rgba(56, 228, 183, 0.12));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    box-shadow: var(--shadow-card);
}
.ext-band-icon {
    flex: none; width: 56px; height: 56px; border-radius: 18px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; color: var(--primary);
}
.ext-band-icon svg { width: 28px; height: 28px; }
.ext-band-copy { flex: 1; min-width: 0; }
.ext-band-copy h2 { font-size: clamp(19px, 2.4vw, 25px); font-weight: 900; letter-spacing: -0.01em; }
.ext-band-copy p { color: var(--text-muted); font-weight: 700; font-size: 15px; margin-top: 6px; line-height: 1.55; }
.ext-band-action { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ext-install-btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ext-install-btn svg { width: 20px; height: 20px; }
.ext-band-note { color: var(--text-muted); font-size: 12px; font-weight: 800; }

.ext-soon { color: var(--text-muted); font-size: 13px; font-weight: 700; margin-top: 14px; text-align: center; }
.ext-manual { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); }
.ext-manual summary { cursor: pointer; padding: 13px 18px; font-weight: 800; font-size: 14px; list-style: none; }
.ext-manual summary::-webkit-details-marker { display: none; }
.ext-manual summary::before { content: '▸ '; color: var(--primary); }
.ext-manual[open] summary::before { content: '▾ '; }
.ext-manual ol { margin: 0; padding: 0 22px 18px 42px; color: var(--text-muted); font-size: 14px; font-weight: 600; line-height: 1.7; list-style: decimal; }
.ext-manual li { margin-bottom: 6px; }

@media (max-width: 820px) {
    .ext-band-inner { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; gap: 16px; }
    .ext-band-action { align-items: stretch; width: 100%; }
    .ext-install-btn { justify-content: center; width: 100%; }
    .ext-band-note { text-align: center; }
}

/* ---------- The first lesson, playable (2026-09-23, demo.js; docs/GROWTH.md) ---------- */
.try-card--lesson { max-width: 620px; margin: 0 auto; min-height: 460px; padding: 18px 20px 16px; }
.try-card--lesson .try-card-head { align-items: center; gap: 12px; }
.try-card--lesson .demo-bar { flex: 1; height: 12px; }
.demo-combo { min-width: 0; font-size: 13px; font-weight: 900; color: #ffd166; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.demo-combo.is-on { opacity: 1; }
.demo-combo.demo-pop { animation: demo-pop .3s var(--ease-pop); }
.try-card--lesson .demo-hearts { font-size: 17px; }
.demo-feedback { min-height: 22px; margin: 0; text-align: center; font-weight: 900; font-size: 15px; color: var(--text-muted); }
.demo-feedback.is-ok { color: var(--success); }
.demo-feedback.is-bad { color: var(--danger); }
.demo-center { text-align: center; }
.demo-hint { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.demo-kicker { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--text-muted); text-align: center; }
.demo-instr { margin: 0; text-align: center; font-size: 15px; font-weight: 800; color: var(--text-muted); }
.demo-big { font-size: clamp(30px, 6vw, 44px); font-weight: 900; text-align: center; line-height: 1.2; padding: 6px 0; }
.demo-big-sm { font-size: clamp(18px, 3vw, 22px); color: var(--text-main); }
.demo-reading { margin: -6px 0 0; text-align: center; color: var(--text-muted); font-weight: 700; font-size: 13px; }
.is-speakable { cursor: pointer; border-radius: 12px; }
.is-speakable:hover, .is-speakable:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.demo-stage.is-locked .demo-chip { pointer-events: none; }
.demo-stage { justify-content: flex-start; }
.try-card--lesson .demo-choices { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.demo-chip.is-on { background: var(--primary); color: #1a0a30; border-color: transparent; }

/* the language picker */
.demo-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0; }
.demo-lang {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px 18px;
    border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface-card-2); color: var(--text-main);
    cursor: pointer; font: inherit; transition: transform .15s var(--ease-pop), border-color .15s;
}
.demo-lang:hover, .demo-lang:focus-visible { transform: translateY(-3px); border-color: var(--primary); outline: none; }
.demo-lang-hello { font-size: clamp(20px, 3.4vw, 28px); font-weight: 900; line-height: 1.2; }
.demo-lang-name { font-size: 14px; font-weight: 800; color: var(--text-muted); }

/* listen */
.demo-speaker {
    align-self: center; padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 900;
    background: var(--primary); color: #1a0a30; box-shadow: 0 4px 0 var(--primary-d);
}
.demo-speaker:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-d); }

/* match */
.demo-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.demo-col { display: grid; gap: 8px; }
.demo-match .demo-chip.is-right { opacity: .45; }

/* build */
.demo-slots { min-height: 52px; align-items: center; justify-content: center; }
.demo-slot-hint { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.demo-slot { border: 0; font: inherit; color: inherit; }
.demo-blank.is-filled { border-bottom-color: var(--success); color: var(--success); padding: 0 4px; }

/* the end */
.demo-end { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; position: relative; padding-top: 4px; }
.demo-end-kicker { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.demo-end-title { font-size: clamp(22px, 3.4vw, 28px); font-weight: 900; margin: 0; position: relative; }
.demo-count { font-size: 1.5em; color: var(--success); margin-right: 4px; }
.demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; }
.demo-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); }
.demo-stat b { font-size: 22px; font-weight: 900; }
.demo-stat small { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.demo-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.demo-word-chip {
    display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05); color: var(--text-main); font: inherit; cursor: pointer; opacity: 0; transform: translateY(6px);
    transition: opacity .25s, transform .3s var(--ease-pop);
}
.demo-word-chip.is-in { opacity: 1; transform: none; }
.demo-word-chip b { font-size: 17px; }
.demo-word-chip small { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.demo-end-next { margin: 0; color: var(--text-muted); font-weight: 700; font-size: 14px; max-width: 420px; }
.demo-link { background: none; border: 0; color: var(--text-muted); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.try-card--lesson.is-done .demo-bar-fill { background: linear-gradient(90deg, var(--success), #ffd166); }

@media (max-width: 560px) {
    .try-card--lesson { padding: 14px 14px 12px; min-height: 440px; }
    .demo-langs { grid-template-columns: 1fr; }
    .demo-lang { flex-direction: row; justify-content: space-between; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-particle, .demo-shake, .demo-combo.demo-pop { animation: none; }
    .demo-word-chip { transition: none; }
}