/* ═══════════════════════════════════════════════════════════════
   OC Study /v4 — the composed site
   Meridian base (parchment, Spectral, antique gold, latitude rules)
   under Ink discipline (hairlines, whitespace, restrained buttons).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --bg: #f5f1e6;
    --surface: #fbf8ef;
    --surface2: #ece6d3;
    --ink: #1c2a24;
    --muted: #4f6156;
    --dim: #93a094;
    --accent: #17624a;
    --accent-2: #1f7d5e;
    --gold: #ab8434;
    --gold-light: #c7a04e;
    --gold-deep: #8a6820;
    --border: #ded4b8;
    --border-soft: #e8e0ca;
    --serif: 'Spectral', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;

    /* demo band (Meridian dark emerald) */
    --font-display: var(--serif);
    --display-weight: 500;
    --display-tracking: -0.015em;
    --display-accent-style: italic;
    --display-transform: none;
    --demo-band-bg: linear-gradient(180deg, #12332a 0%, #174236 55%, #12332a 100%);
    --demo-band-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(199, 160, 78, 0.1), transparent 70%);
    --demo-label-color: #c7a04e;
    --demo-h2-color: #ffffff;
    --demo-h2-accent: #c7a04e;
    --demo-sub-color: rgba(255,255,255,0.6);
    --demo-card-bg: #143229;
    --demo-card-border: rgba(199, 160, 78, 0.2);
    --demo-card-radius: 14px;
    --chat-bg: #ffffff;
    --chat-border: rgba(255,255,255,0.16);
    --chat-radius: 14px;
    --chat-shadow: 0 40px 90px rgba(0,0,0,0.4);
    --chat-ink: #1c2a24;
    --chat-dim: #93a094;
    --chat-line: #ded4b8;
    --chat-bubble: #ece6d3;
    --chat-accent: #17624a;
    --chat-accent-hover: #1f7d5e;
    --chat-accent-rgb: 23, 98, 74;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(171, 132, 52, 0.25); }

.skip-link {
    position: absolute; top: -100%; left: 16px;
    background: var(--accent); color: #fff;
    padding: 8px 16px; border-radius: 0 0 6px 6px;
    font-size: 0.85rem; font-weight: 600; z-index: 9999;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── shared vocabulary ──────────────────────────────────────── */
.eyebrow4 {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 22px;
}
.eyebrow4.center { text-align: center; }
.eyebrow4.gold { color: var(--gold-light); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); }

/* latitude rule under section heads (Meridian signature) */
.ll { position: relative; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.ll::after {
    content: '';
    position: absolute; bottom: -1px; left: 0;
    width: 72px; height: 1px;
    background: var(--gold);
}

/* Ink-restrained buttons */
.btn4 {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 36px;
    border-radius: 3px;
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}
.btn4.gold {
    background: linear-gradient(135deg, #ab8434, #c7a04e);
    color: #fff;
    box-shadow: 0 8px 24px rgba(171, 132, 52, 0.28);
}
.btn4.gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(171, 132, 52, 0.4); }
.btn4.gold.sm { padding: 11px 22px; font-size: 0.72rem; box-shadow: none; }
.btn4.line { border: 1px solid var(--ink); color: var(--ink); }
.btn4.line:hover { background: rgba(28, 42, 36, 0.05); transform: translateY(-2px); }
.btn4.line.dim { border-color: var(--border); margin-top: 12px; }
.btn4.line.dim:hover { border-color: var(--ink); }

/* reveals */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.rv.on { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 0.08s; }
.rv.d2 { transition-delay: 0.16s; }
.rv.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ── 1 · nav ────────────────────────────────────────────────── */
.nav4 {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease;
}
.nav4.scrolled {
    background: rgba(245, 241, 230, 0.88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom-color: var(--border);
}
.nav4-in {
    max-width: 1280px; margin: 0 auto;
    height: 74px; padding: 0 32px;
    display: flex; align-items: center; gap: 40px;
}
.nav4-logo img { width: 140px; height: auto; display: block; }
.foot4 img { width: 128px; height: auto; }
.lang4 {
    appearance: none; -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.78rem; font-weight: 600;
    padding: 8px 26px 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%2393a094'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.lang4:hover { border-color: var(--border-hover); color: var(--ink); }
@media (max-width: 1023px) { .nav4-in { gap: 14px; } .lang4 { margin-left: auto; } }
.nav4-links { display: flex; gap: 30px; margin-left: auto; }
.nav4-links a {
    font-size: 0.85rem; font-weight: 500;
    color: var(--muted);
    transition: color 0.2s;
}
.nav4-links a:hover { color: var(--ink); }

/* ── 2 · hero ───────────────────────────────────────────────── */
.hero4 {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center;
    padding: 100px 32px 60px;
    overflow: hidden;
}
.hero4-art {
    position: absolute; inset: -6% -3%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.hero4-art img,
.hero4-art video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: right center;
}
.hero4-art video {
    /* Color-grade raw stock footage toward the site's warm editorial
       palette instead of leaving it a flat, generic stock-video look */
    filter: saturate(1.08) contrast(1.04) brightness(1.02) sepia(0.05);
    /* Slow, continuous drift — the classic cinematic-hero cue. Runs on the
       video itself, never on #heroArt (the scroll-parallax JS sets that
       element's `transform` directly, which would just overwrite an
       animation living on the same element). */
    animation: heroKenBurns 24s ease-in-out infinite alternate;
    transform-origin: 62% 50%;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}
/* video paints over the poster img (DOM order); reduced motion hides it,
   leaving the static poster frame as the background instead */
@media (prefers-reduced-motion: reduce) {
    .hero4-art video { display: none; }
}
.hero4::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    /* Tuned for a full photographic video, not the faint decorative map this
       replaced — that version stayed at 0.42 opacity all the way to the right
       edge, washing the whole video into a barely-visible sepia ghost. This
       keeps the same solid wash under the headline for legibility, but clears
       to fully transparent well before the right edge so the video reads as
       actual footage, not a tinted still.
       A second, top-only scrim (~nav height) is layered on top of that: the
       nav (.nav4) has no background of its own until scrolled, so at page
       load its "EN" language pill and links sat directly on raw video with
       no fallback — fine over the old flat-toned map, not over real footage
       with dark furniture/frames passing behind it.
       A third layer adds a soft ink-tinted vignette (not plain black — stays
       in the brand palette) so the frame edges recede and the subject/laptop
       area stays the visual focus, instead of the video reading as an
       untouched stock clip pasted behind the copy. */
    background:
        radial-gradient(ellipse 85% 75% at 64% 52%, transparent 55%, rgba(28,42,36,0.16) 100%),
        linear-gradient(to bottom, rgba(245,241,230,0.6) 0, rgba(245,241,230,0) 110px),
        linear-gradient(100deg, var(--bg) 26%, rgba(245,241,230,0.78) 40%, rgba(245,241,230,0.18) 60%, rgba(245,241,230,0) 78%);
}
.hero4-in { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; }
.hero4 h1 {
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    line-height: 1.06;
    max-width: 940px;
    text-wrap: balance;
}
/* two-line headline: keep the gold payoff line whole on wider screens */
.hero4 h1 > em { font-size: 0.886em; }
@media (min-width: 640px) { .hero4 h1 > em { white-space: nowrap; } }
.h4-l2 {
    display: block;
    font-size: 0.443em;
    line-height: 1.3;
    margin-top: 26px;
    color: var(--muted);
    letter-spacing: -0.01em;
}
.h4-l2 em { color: var(--accent); }
.hero4-sub {
    margin-top: 26px;
    max-width: 540px;
    font-size: 1.1rem;
    color: var(--muted);
    line-height: 1.8;
}
.hero4-m { display: none; }
.hero4-ctas { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
.hero4-stats {
    display: flex; gap: 54px;
    margin-top: 66px;
    padding-top: 34px;
    border-top: 1px solid var(--border);
    width: max-content; max-width: 100%;
    flex-wrap: wrap;
}
.h4-stat b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 2rem;
    color: var(--accent);
    line-height: 1.1;
}
.h4-stat span {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--dim);
}

/* ── 3 · manifesto strip ────────────────────────────────────── */
.mani4 { text-align: center; padding: 120px 32px; }
.mani4-rule { width: 64px; height: 1px; background: var(--gold); margin: 0 auto 36px; }
.mani4 p {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    line-height: 1.6;
    max-width: 880px;
    margin: 0 auto;
}

/* ── 4 · acts (Splitline halves) ────────────────────────────── */
.acts4 { display: grid; grid-template-columns: 45% 55%; }
.acts4-left {
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    background: #10241c;
}
.a4 {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    padding: 0 46px 70px;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.a4.on { opacity: 1; }
.a4 img,
.a4 video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.75;
    transform: scale(1.05);
    transition: transform 6s ease;
}
.a4.on img { transform: scale(1); }
/* the looping video holds still: no zoom-in/out drift behind the animation */
.a4 video,
.a4-vid img,
.a4-vid.on img { transform: none; transition: none; }
.a4::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16,36,28,0.16) 0%, rgba(16,36,28,0.74) 100%);
}
.a4 h2 {
    position: relative; z-index: 2;
    font-size: clamp(2rem, 3.4vw, 3.3rem);
    line-height: 1.06;
    color: #f6f2e7;
}
.a4 h2 em { color: var(--gold-light); }
.acts4-dots {
    position: absolute; bottom: 30px; left: 46px; z-index: 5;
    display: flex; gap: 8px;
}
.acts4-dots span { width: 24px; height: 2px; background: rgba(255,255,255,0.3); transition: background 0.3s; }
.acts4-dots span.on { background: var(--gold-light); }
.acts4-right { padding: 0 clamp(28px, 5vw, 88px); }
.a4s {
    min-height: 64vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--border-soft);
}
.a4s:last-child { border-bottom: none; }
.a4s h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.14; margin-bottom: 20px; max-width: 480px; }
.a4s p { font-size: 1.02rem; line-height: 1.85; color: var(--muted); max-width: 470px; margin-bottom: 14px; }
.a4s p b, .a4s p i { color: var(--ink); }

/* chat bubbles adopt neutral grays (owner reference): bot #f0f0f0, input white */
.chat-msg.bot, .chat-typing.bot { background: #f0f0f0; border-color: #e3e3e3; }
.chat-fake-input-field { background: #ffffff; }

/* speaker names in the chat read clearly */
.chat-msg .msg-label { opacity: 1; font-size: 0.68rem; font-weight: 800; }
.chat-msg.bot .msg-label { color: var(--chat-accent); }
.chat-msg.user .msg-label { color: rgba(255, 255, 255, 0.95); }

/* join notice matches the gray bubbles, with readable text */
.chat-join-notice { color: #525d55; font-weight: 600; }
.chat-join-notice .join-inner { background: #f0f0f0; border-color: #e3e3e3; }

/* demo header fine print */
.live-demo-header .demo-fine {
    margin-top: 14px;
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
    letter-spacing: 0.02em;
}

/* ── Act IV mini dashboard peek ─────────────────────────────── */
.peek4 {
    margin-top: 28px;
    max-width: 640px;
    background: #fffdf6;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow: 0 12px 28px rgba(28, 42, 36, 0.07);
}
.peek4-tag {
    font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.peek4-row {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 30px;
}
.peek4-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 27px);
    gap: 4px;
    margin-bottom: 6px;
}
.peek4-weekdays span {
    text-align: center;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--dim);
    text-transform: uppercase;
}
.peek4-grid {
    display: grid;
    grid-template-columns: repeat(7, 27px);
    gap: 4px;
    margin-bottom: 10px;
}
.peek4-grid i {
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 6px;
    background: var(--surface2);
    font-style: normal; font-size: 0.62rem; font-weight: 700;
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}
.peek4-grid i.l1 { background: rgba(23, 98, 74, 0.28); color: var(--accent); }
.peek4-grid i.l2 { background: rgba(23, 98, 74, 0.58); color: #fffdf6; }
.peek4-grid i.l3 { background: var(--accent); color: #fffdf6; }
.peek4-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.peek4-days-label,
.peek4-heat .pk-less, .peek4-heat .pk-more { font-size: 0.7rem; color: var(--dim); font-weight: 600; letter-spacing: 0.04em; }
.peek4-scale { display: flex; align-items: center; gap: 5px; }
.peek4-scale i { width: 11px; height: 11px; border-radius: 3px; background: var(--surface2); }
.peek4-scale i.l1 { background: rgba(23, 98, 74, 0.28); }
.peek4-scale i.l2 { background: rgba(23, 98, 74, 0.58); }
.peek4-scale i.l3 { background: var(--accent); }
.peek4-chips {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 0 18px 30px;
    border-left: 1px solid var(--border-soft);
    height: 100%;
    justify-content: center;
}
.pk-streak {
    font-size: 1.15rem; font-weight: 700; color: var(--accent);
    display: flex; align-items: center; gap: 8px;
}
.pk-streak::before { content: '🔥'; font-size: 0.95em; }
.peek4-substat { font-size: 0.82rem; color: var(--dim); }
@media (max-width: 480px) {
    .peek4-row { grid-template-columns: 1fr; }
    .peek4-chips { border-left: none; border-top: 1px solid var(--border-soft); padding: 16px 0 0; }
}

/* ── 6 · deck (Ascent cards) ────────────────────────────────── */
.deck4 { padding: 140px 24px 120px; }
.deck4-head { max-width: 760px; margin: 0 auto 80px; text-align: center; }
.deck4-head .ll { display: inline-block; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.deck4-head .ll::after { left: 50%; transform: translateX(-50%); }
.deck4-stack { max-width: 820px; margin: 0 auto; display: grid; gap: 26px; }
.deck4-card {
    position: sticky;
    top: calc(104px + var(--i) * 30px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 48px 54px 52px;
    box-shadow: 0 -12px 40px rgba(28, 42, 36, 0.07);
    min-height: 280px;
}
.d4-tag {
    display: inline-block;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-deep);
    border: 1px solid var(--border);
    padding: 7px 15px;
    border-radius: 100px;
    margin-bottom: 20px;
}
.deck4-card h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 13px; }
.deck4-card p { font-size: 0.98rem; color: var(--muted); line-height: 1.8; max-width: 600px; }

/* ── 6b · the quiet advantage ───────────────────────────────── */
.adv4 { padding: 110px 26px; border-top: 1px solid var(--border-soft); }
.adv4-in { max-width: 760px; margin: 0 auto; }
.adv4 .ll { display: inline-block; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.16; margin-bottom: 26px; }
.adv4 p { font-size: 1.04rem; color: var(--muted); line-height: 1.85; }

/* ── 7 · comparison ─────────────────────────────────────────── */
.cmp4 { padding: 130px 26px; background: var(--surface2); }
.cmp4-in { max-width: 1060px; margin: 0 auto; }
.cmp4-head { max-width: 720px; margin-bottom: 60px; }
.cmp4-head .ll { display: inline-block; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.cmp4-head p { margin-top: 24px; font-size: 1.04rem; color: var(--muted); line-height: 1.8; }
.cmp4-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.cmp4-legend span { font-size: 0.76rem; font-weight: 700; padding: 8px 18px; border-radius: 100px; }
.lg-a { background: #e0dac6; color: #57544a; }
.lg-b { background: rgba(23, 98, 74, 0.1); color: var(--accent); }
.cmp4-rows { display: flex; flex-direction: column; gap: 13px; }
.cmp4-row {
    display: grid;
    grid-template-columns: 96px 1fr 1.15fr;
    gap: 13px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.cmp4-row.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cmp4-row { opacity: 1; transform: none; transition: none; } }
.c4-wk {
    display: flex; align-items: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--gold);
}
.c4-a, .c4-b { border-radius: 10px; padding: 19px 22px; font-size: 0.93rem; line-height: 1.65; }
.c4-a { background: #efe9d8; color: #57544a; border: 1px solid #e2dabf; }
.c4-b {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid rgba(23, 98, 74, 0.22);
    border-left: 3px solid var(--accent);
}
.cmp4-chart { margin: 70px 0 20px; text-align: center; }
.cmp4-chart svg { width: 100%; max-width: 780px; height: auto; }
.c4-axis { stroke: var(--border); stroke-width: 2; }
.c4-grid { stroke: #ddd3b6; stroke-width: 1; stroke-dasharray: 3 6; }
.c4-y, .c4-x { fill: #6e6a58; font-size: 13px; font-family: var(--sans); font-weight: 600; }
.c4-dot-s { fill: var(--gold); }
.c4-dot-a { fill: #8b866f; }
.c4-dot-b { fill: var(--accent); }
.cmp4-chart-note {
    max-width: 560px;
    margin: 16px auto 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.6;
}
.c4-line-a { stroke: #8b866f; stroke-width: 3; }
.c4-line-b { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.cmp4-chart.on .c4-line-a { stroke-dashoffset: 0 !important; transition: stroke-dashoffset 2s ease; }
.cmp4-chart.on .c4-line-b { stroke-dashoffset: 0 !important; transition: stroke-dashoffset 2.4s ease 0.3s; }
.c4-lbl-a { fill: #66614e; font-size: 15px; font-weight: 700; font-family: var(--sans); }
.c4-lbl-b { fill: var(--accent); font-size: 16px; font-weight: 800; font-family: var(--sans); }
.cmp4-coda {
    max-width: 720px;
    margin: 30px auto 0;
    border-top: 1px solid var(--gold);
    padding-top: 28px;
}
.cmp4-coda p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.85; color: var(--muted); }
.cmp4-coda b { color: var(--ink); font-weight: 600; }
.cmp4-coda em { color: var(--accent); }

/* ── 8 · letter ─────────────────────────────────────────────── */
.ltr4 { padding: 140px 26px 110px; }
.ltr4-in { max-width: 700px; margin: 0 auto; }
.ltr4-rule { height: 1px; background: var(--gold); width: 64px; margin: 0 auto 34px; }
.ltr4 .eyebrow4 { text-align: center; margin-bottom: 46px; }
.ltr4-p {
    font-family: var(--serif);
    font-size: 1.14rem;
    line-height: 1.95;
    margin-bottom: 28px;
}
.ltr4-drop {
    font-size: 3.6em;
    float: left;
    line-height: 0.82;
    padding: 5px 12px 0 0;
    color: var(--gold);
}
.ltr4-know { margin: 34px 0 38px; }
.lk-row {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.95rem;
}
.lk-row span { font-weight: 600; }
.lk-row i { border-bottom: 2px dotted var(--border); transform: translateY(-4px); }
.lk-row b { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 500; }
.ltr4-close { font-family: var(--serif); font-style: italic; color: var(--muted); margin-bottom: 12px; }
.ltr4-sig svg { width: 250px; height: auto; display: block; margin-bottom: 4px; }
.ltr4-sig.on .sig-stroke { stroke-dashoffset: 0 !important; }
.ltr4-sig.on .sig-p1 { transition: stroke-dashoffset 0.4s ease-out 0.2s; }
.ltr4-sig.on .sig-p2 { transition: stroke-dashoffset 1.9s cubic-bezier(0.45, 0, 0.4, 1) 0.68s; }
.ltr4-sig span {
    display: block;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--dim);
}

/* ── 9 · educators strip ────────────────────────────────────── */
.edu4 { padding: 110px 26px; background: var(--surface2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.edu4-in { max-width: 760px; margin: 0 auto; }
.edu4 .ll { display: inline-block; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.16; margin-bottom: 26px; }
.edu4 p { font-size: 1.04rem; color: var(--muted); line-height: 1.85; }

/* ── 9 · inside the product (redacted samples) ──────────────── */
.smp4 { padding: 130px 26px; background: var(--surface2); }
.smp4-in { max-width: 1120px; margin: 0 auto; }
.smp4-head { max-width: 680px; margin-bottom: 60px; }
.smp4-head .ll { display: inline-block; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.smp4-head p { margin-top: 22px; font-size: 1.02rem; color: var(--muted); line-height: 1.8; }
.smp4-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}
.smp4-note { grid-row: 1 / 3; }
.smp4-card {
    background: #fffdf6;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 14px 34px rgba(28, 42, 36, 0.07);
}
.smp4-tag {
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 12px;
    margin-bottom: 18px;
}
/* redaction pills — frosted glass over blurred word-shapes.
   The spans are empty; the "text" is a blurred gradient, so there is
   nothing to reveal in the inspector. */
.rdx {
    display: inline-block;
    position: relative;
    width: var(--w, 90px);
    height: 1.05em;
    border-radius: 7px;
    overflow: hidden;
    vertical-align: middle;
    top: -1px;
    background: rgba(28, 42, 36, 0.05);
    box-shadow:
        inset 0 0 0 1px rgba(28, 42, 36, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* the "text" is the literal word `redacted`, blurred — real letterforms,
   nothing sensitive for the inspector to find */
.rdx::before {
    content: 'redacted redacted redacted';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 7px;
    font-family: var(--sans);
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(28, 42, 36, 0.62);
    white-space: nowrap;
    filter: blur(2.6px);
    transform: translateZ(0);
}
/* when the demo is switched to Chinese, redactions blur hanzi instead */
body.zh-redact .rdx::before {
    content: '已隐去 已隐去 已隐去';
    font-weight: 500;
    letter-spacing: 1.5px;
    filter: blur(2.9px);
}
/* specimen A: the email */
.smp4-mailhead { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.smp4-mailhead > div { display: flex; gap: 12px; align-items: center; font-size: 0.86rem; }
.smp4-mailhead span {
    width: 44px;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--dim);
}
.smp4-subject {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.2rem;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 13px 0;
    margin-bottom: 16px;
}
.smp4-body p { font-size: 0.94rem; line-height: 1.75; color: var(--muted); margin-bottom: 13px; }
.smp4-body b { color: var(--ink); }
.smp4-sig { font-style: italic; color: var(--gold) !important; }
/* specimen B: mastery map excerpt */
.smp4-owner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 0.86rem; }
.smp4-owner > span:first-child {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--dim);
}
.smp4-meta { margin-left: auto; font-size: 0.76rem; color: var(--dim); }
.smp4-skill {
    display: grid;
    grid-template-columns: 150px 1fr max-content;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.86rem;
}
.smp4-skill span { font-weight: 600; }
.smp4-bar { height: 9px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.smp4-bar i {
    display: block; height: 100%;
    width: var(--w);
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 6px;
}
.smp4-skill.weak .smp4-bar i { background: linear-gradient(90deg, #b1841f, var(--gold-light)); }
.smp4-skill b { font-size: 0.76rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.smp4-skill.weak b { color: var(--gold); }
/* specimen C: session log */
.smp4-log { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.smp4-log:last-of-type { border-bottom: none; }
.smp4-t {
    font-style: normal;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold);
    white-space: nowrap;
    padding-top: 3px;
    min-width: 92px;
}
.smp4-log p { font-size: 0.88rem; line-height: 1.65; color: var(--muted); }
.smp4-log b { color: var(--ink); }
.smp4-ok { color: var(--accent) !important; font-weight: 700; }
.smp4-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 0.78rem; color: var(--dim); line-height: 1.6; }
.smp4-note-fine { margin-top: 26px; text-align: center; font-size: 0.78rem; color: var(--dim); }

/* FAQ inline link */
.fq-link {
    color: var(--accent);
    border-bottom: 1px solid rgba(23, 98, 74, 0.35);
    transition: border-color 0.2s, color 0.2s;
}
.fq-link:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* back to top */
.toTop {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 400;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(251, 248, 239, 0.92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--accent);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(28, 42, 36, 0.16);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.toTop.show { opacity: 1; transform: none; pointer-events: auto; }
.toTop:hover { background: var(--accent); color: #fff; }

/* ── 10 · journal teasers ───────────────────────────────────── */
.jrn4 { padding: 140px 26px; }
.jrn4-in { max-width: 1120px; margin: 0 auto; }
.jrn4-head { max-width: 640px; margin-bottom: 66px; }
.jrn4-head .ll { display: inline-block; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.jrn4-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.jrn4-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jrn4-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(28, 42, 36, 0.12); }
.j4-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.j4-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: sepia(0.14) saturate(0.9);
    transition: transform 0.6s ease;
}
.jrn4-card:hover .j4-cover img { transform: scale(1.04); }
.j4-issue {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--serif); font-style: italic;
    font-size: 0.8rem;
    background: rgba(245, 241, 230, 0.92);
    padding: 5px 12px;
    border-radius: 2px;
}
.j4-meta { padding: 24px 26px 26px; }
.j4-meta h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 10px; }
.j4-meta p { font-size: 0.88rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.j4-soon {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 100px;
}

/* ── 11 · FAQ ───────────────────────────────────────────────── */
.faq4 { padding: 130px 26px; background: var(--surface2); }
.faq4-in { max-width: 1120px; margin: 0 auto; }
.faq4-head { max-width: 640px; margin-bottom: 66px; }
.faq4-head .ll { display: inline-block; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.faq4-body { display: grid; grid-template-columns: 300px 1fr; gap: 66px; align-items: start; }
.faq4-index {
    position: sticky; top: 108px;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--border);
}
.faq4-index a {
    font-size: 0.87rem; font-weight: 500;
    color: var(--dim);
    padding: 11px 0 11px 20px;
    border-left: 2px solid transparent;
    margin-left: -1.5px;
    line-height: 1.45;
    transition: color 0.25s, border-color 0.25s;
}
.faq4-index a:hover { color: var(--ink); }
.faq4-index a.on { color: var(--ink); font-weight: 700; border-left-color: var(--gold); }
.faq4-answers { max-width: 640px; }
.fq { padding: 26px 0 66px; border-bottom: 1px solid var(--border); }
.fq:last-child { border-bottom: none; }
.fq h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; margin-bottom: 20px; }
.fq p { font-size: 1.02rem; line-height: 1.85; color: var(--muted); }
.fq-fact {
    margin-top: 18px;
    font-size: 0.86rem; font-weight: 600;
    color: var(--gold);
    border-left: 3px solid var(--gold-light);
    padding: 10px 0 10px 16px;
    background: rgba(171, 132, 52, 0.06);
}

/* ── 12 · CTA ───────────────────────────────────────────────── */
.cta4 {
    position: relative;
    padding: 150px 26px;
    text-align: center;
    background: linear-gradient(160deg, #17624a 0%, #0f4433 85%);
    color: #f6f2e7;
    overflow: hidden;
}
.cta4::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 65% at 50% 115%, rgba(199, 160, 78, 0.22), transparent 70%);
    pointer-events: none;
}
.cta4-in { position: relative; max-width: 760px; margin: 0 auto; }
.cta4 h2 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.08; color: #f6f2e7; }
.cta4 h2 em { color: var(--gold-light); }
.cta4 p { margin: 22px auto 36px; max-width: 560px; font-size: 1.05rem; color: rgba(246, 242, 231, 0.75); line-height: 1.8; }
.cta4-fine { margin-top: 26px; font-size: 0.76rem; letter-spacing: 0.1em; color: rgba(246, 242, 231, 0.5); }

/* ── 13 · footer ────────────────────────────────────────────── */
.foot4 {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    max-width: 1280px; margin: 0 auto;
    padding: 44px 32px;
    border-top: 1px solid var(--border);
    font-size: 0.84rem; color: var(--dim);
}
.foot4 .f4-copy { margin-left: auto; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .nav4-links { display: none; }
    .acts4 { grid-template-columns: minmax(0, 1fr); }
    .a4s .btn4 { white-space: normal; text-align: center; }
    .acts4-left { position: relative; height: 52vh; }
    .a4s { min-height: 0; padding: 60px 0; }
    .faq4-body { grid-template-columns: 1fr; gap: 18px; }
    .faq4-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: none; margin-bottom: 16px; }
    .faq4-index a { border-left: none; border: 1px solid var(--border); border-radius: 100px; padding: 8px 14px; font-size: 0.76rem; }
    .faq4-index a.on { border-color: var(--gold); background: rgba(171, 132, 52, 0.08); }
    .jrn4-grid { grid-template-columns: 1fr; max-width: 480px; }
    .smp4-grid { grid-template-columns: 1fr; }
    .smp4-note { grid-row: auto; }
}
@media (max-width: 768px) {
    .hero4 { padding: 120px 20px 56px; min-height: 0; }
    .hero4-art { display: none; }
    .hero4-ctas .btn4 { width: 100%; text-align: center; }
    /* Mobile stacks the text full-width instead of splitting the hero left/
       right, so the desktop diagonal gradient (tuned for a side-by-side
       layout) leaves body text sitting almost directly on raw video — the
       plant/mug/desk behind "...tutor they already have" was unreadable.
       Solid wash behind the whole text+button block, fading to reveal the
       video only below it. */
    .hero4::before {
        background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 62%, rgba(245,241,230,0.25) 80%, rgba(245,241,230,0) 100%);
    }
    .hero4-stats { gap: 28px; }
    .mani4 { padding: 64px 20px 80px; }
    .mani4-br { display: none; }
    .deck4 { padding: 100px 18px 90px; }
    .deck4-card { padding: 32px 26px 38px; }
    .cmp4, .faq4 { padding: 96px 18px; }
    .cmp4-row { grid-template-columns: 1fr; gap: 8px; }
    .c4-wk { font-size: 0.85rem; }
    .ltr4 { padding: 100px 20px 80px; }
    .lk-row { grid-template-columns: 1fr; gap: 3px; }
    .lk-row i { display: none; }
    .hero4-stats { width: 100%; }
    .jrn4 { padding: 100px 18px; }
    .edu4 { padding: 80px 20px; }
    .cta4 { padding: 110px 20px; }
    .foot4 { flex-direction: column; text-align: center; }
    .foot4 .f4-copy { margin-left: 0; }
}
@media (max-width: 480px) {
    .hero4-ctas .btn4 { width: 100%; }
    .h4-stat b { font-size: 1.6rem; }
}

/* Language switchers name each language in its own script, so 简体中文 and
   繁體中文 sit in the dropdown on EVERY page — and the readers who most need
   to find them are the ones currently looking at the English or Spanish
   version. Deliberately NOT gated on html[lang]: at the inherited 0.78rem
   those two options were the smallest Chinese on the site. */
.lang4 option,
.lang-selector option { font-size: 0.95rem; }

/* ── 14 · CJK typography (zh-CN / zh-TW) ─────────────────────────
   i18n.js sets <html lang="zh-CN|zh-TW">, so everything below only
   applies once the page is switched to Chinese.

   Two problems this fixes:
   1. Han characters are dense square forms with no x-height. At the
      Latin label sizes used above (0.64–0.78rem) they collapse into
      grey mush, so every small class gets a floor of ~0.85rem.
   2. Latin editorial tracking (0.2–0.28em on uppercase eyebrows) reads
      as elegant in caps but scatters Han characters; conversely Han
      body copy set at Latin leading looks cramped. So: tracking comes
      down on the labels, and goes slightly up — with looser leading —
      on the running text.
   ───────────────────────────────────────────────────────────────── */

/* system CJK faces, so the Inter/Spectral fallback isn't a random
   pan-CJK face; SC and TC get their own regional forms */
html[lang="zh-Hans"], html[lang="zh-CN"] body, html[lang="zh-Hans"], html[lang="zh-CN"] button,
html[lang="zh-Hans"], html[lang="zh-CN"] select, html[lang="zh-Hans"], html[lang="zh-CN"] input {
    font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei',
                 'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
}
html[lang="zh-Hans"], html[lang="zh-CN"] h1, html[lang="zh-Hans"], html[lang="zh-CN"] h2, html[lang="zh-Hans"], html[lang="zh-CN"] h3,
html[lang="zh-Hans"], html[lang="zh-CN"] .ll, html[lang="zh-Hans"], html[lang="zh-CN"] .ltr4-close, html[lang="zh-Hans"], html[lang="zh-CN"] .lk-row b {
    font-family: 'Spectral', Georgia, 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
}
html[lang="zh-Hant"], html[lang="zh-TW"] body, html[lang="zh-Hant"], html[lang="zh-TW"] button,
html[lang="zh-Hant"], html[lang="zh-TW"] select, html[lang="zh-Hant"], html[lang="zh-TW"] input {
    font-family: 'Inter', -apple-system, 'PingFang TC', 'Microsoft JhengHei',
                 'Hiragino Sans TC', 'Noto Sans TC', 'Source Han Sans TC', sans-serif;
}
html[lang="zh-Hant"], html[lang="zh-TW"] h1, html[lang="zh-Hant"], html[lang="zh-TW"] h2, html[lang="zh-Hant"], html[lang="zh-TW"] h3,
html[lang="zh-Hant"], html[lang="zh-TW"] .ll, html[lang="zh-Hant"], html[lang="zh-TW"] .ltr4-close, html[lang="zh-Hant"], html[lang="zh-TW"] .lk-row b {
    font-family: 'Spectral', Georgia, 'Songti TC', 'Noto Serif TC', 'Source Han Serif TC', serif;
}

/* ① running text: looser leading + a hair of tracking so the
      characters stop touching */
html[lang^="zh"] body { line-height: 1.85; letter-spacing: 0.025em; }
html[lang^="zh"] p,
html[lang^="zh"] li,
html[lang^="zh"] .fq p,
html[lang^="zh"] .smp4-body p,
html[lang^="zh"] .smp4-log p,
html[lang^="zh"] .j4-meta p,
html[lang^="zh"] .cmp4-coda p,
html[lang^="zh"] .ltr4-p { line-height: 1.95; letter-spacing: 0.03em; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3,
html[lang^="zh"] .ll { line-height: 1.4; letter-spacing: 0.01em; }

/* ② tracked micro-labels: bigger, and tracking pulled back from
      Latin-caps values to something Han can carry */
html[lang^="zh"] .eyebrow4,
html[lang^="zh"] .peek4-tag,
html[lang^="zh"] .d4-tag,
html[lang^="zh"] .smp4-tag,
html[lang^="zh"] .j4-soon,
html[lang^="zh"] .ltr4-sig span,
html[lang^="zh"] .h4-stat span,
html[lang^="zh"] .smp4-mailhead span,
html[lang^="zh"] .smp4-owner > span:first-child {
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    line-height: 1.7;
}
html[lang^="zh"] .eyebrow4 { margin-bottom: 24px; }

/* ③ small body / fine print: floor of ~0.9rem */
html[lang^="zh"] .cmp4-chart-note,
html[lang^="zh"] .smp4-foot,
html[lang^="zh"] .smp4-note-fine,
html[lang^="zh"] .smp4-meta,
html[lang^="zh"] .cta4-fine,
html[lang^="zh"] .foot4,
html[lang^="zh"] .peek4-foot span,
html[lang^="zh"] .peek4-substat,
html[lang^="zh"] .cmp4-legend span,
html[lang^="zh"] .fq-fact,
html[lang^="zh"] .nav4-links a,
html[lang^="zh"] .faq4-index a,
html[lang^="zh"] .j4-issue,
html[lang^="zh"] .skip-link {
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
}
html[lang^="zh"] .cta4-fine { letter-spacing: 0.08em; }

/* ④ buttons: uppercase does nothing for Han, so trade tracking for size */
html[lang^="zh"] .btn4 { font-size: 0.88rem; letter-spacing: 0.1em; }
html[lang^="zh"] .btn4.gold.sm { font-size: 0.82rem; }
html[lang^="zh"] .lang4 { font-size: 0.84rem; }

/* ⑤ specimen cards — the tightest type on the page */
/* "发送时间" is four characters; the 44px Latin label column cut it in
   half, so widen the column and stop it wrapping */
html[lang^="zh"] .smp4-mailhead span { width: 72px; white-space: nowrap; }
html[lang^="zh"] .smp4-mailhead > div { font-size: 0.95rem; gap: 14px; }
html[lang^="zh"] .smp4-subject { line-height: 1.5; }
html[lang^="zh"] .smp4-owner { font-size: 0.95rem; gap: 14px; }
html[lang^="zh"] .smp4-skill { font-size: 0.95rem; padding: 11px 0; }
html[lang^="zh"] .smp4-skill b { font-size: 0.85rem; letter-spacing: 0.02em; }
html[lang^="zh"] .smp4-log { gap: 16px; }
html[lang^="zh"] .smp4-log p { font-size: 0.95rem; }
/* the timestamps stay Latin — keep them small, just give the column room */
html[lang^="zh"] .smp4-t { font-size: 0.72rem; letter-spacing: 0.08em; min-width: 96px; }

/* ⑥ the split acts section
      Han characters carry far more meaning per glyph but take more width
      than Latin at the same point size, so the Latin measures here
      (480/470px) leave one or two characters stranded on a line of their
      own — 「先彼此熟悉。」 breaking to 「悉。」 and so on. Widen the
      measure, ease the display size down, and let the browser balance the
      lines instead of filling greedily.
      text-wrap: balance evens out a heading's lines; pretty just prevents
      a runt last line. Both degrade to normal wrapping where unsupported. */
html[lang^="zh"] .a4s h3 {
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    max-width: 580px;
    text-wrap: balance;
}
html[lang^="zh"] .a4s p {
    max-width: 560px;
    text-wrap: pretty;
}
html[lang^="zh"] .a4 h2 {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    text-wrap: balance;
}
/* the same runt-line problem shows up in every other narrow display block */
html[lang^="zh"] .hero4 h1,
html[lang^="zh"] .cmp4-head h2,
html[lang^="zh"] .smp4-head h2,
html[lang^="zh"] .deck4-head h2,
html[lang^="zh"] .jrn4-head h2,
html[lang^="zh"] .faq4-head h2,
html[lang^="zh"] .adv4 h2,
html[lang^="zh"] .cta4 h2,
html[lang^="zh"] .fq h3,
html[lang^="zh"] .deck4-card h3 { text-wrap: balance; }
html[lang^="zh"] .hero4-sub,
html[lang^="zh"] .mani4 p,
html[lang^="zh"] .ltr4-p,
html[lang^="zh"] .cmp4-coda p,
html[lang^="zh"] .fq p { text-wrap: pretty; }

/* ⑦ letter to parents */
html[lang^="zh"] .lk-row { font-size: 1rem; padding: 14px 0; }
html[lang^="zh"] .ltr4-drop { line-height: 1; }

/* ⑧ demo band (dark)
      demo-core.css carries a block labelled "CJK font-size boost" that is
      really the opposite: it SHRINKS several labels for Chinese so long
      strings keep fitting the fixed chat/chart panels — .panel-label drops
      to 0.67rem (10.7px), .msg-label to 0.7rem, .chapter-entry to 0.73rem.
      At those sizes Han characters are a grey smudge.

      Everything below out-specifies that block (attribute selector + class
      beats its two classes). The floor is ~0.85rem; sizes were raised only
      as far as the panels can take without clipping — verified by
      re-measuring every CJK node and checking each panel's scrollHeight.
      Now that each language is server-rendered, html[lang] is a reliable
      signal for the whole document, so none of this depends on demo.js
      remembering to toggle .lang-zh. */
html[lang^="zh"] .live-demo-header .section-label {
    font-size: 0.86rem;
    letter-spacing: 0.14em;   /* 0.22em of Latin tracking scatters 演示 */
}
html[lang^="zh"] .live-demo-header .demo-fine { font-size: 0.88rem !important; line-height: 1.75; }
html[lang^="zh"] .chat-msg .msg-label { font-size: 0.85rem; letter-spacing: 0.04em; }
html[lang^="zh"] .chat-preview-info h4 { font-size: 0.98rem; }
html[lang^="zh"] .chat-preview-info span { font-size: 0.85rem; }
html[lang^="zh"] .chat-pause-btn { font-size: 0.85rem; height: auto; padding: 6px 11px; }
html[lang^="zh"] .chat-scroll-btn { font-size: 0.86rem; }
html[lang^="zh"] .spider-analysis-panel,
html[lang^="zh"] .spider-strategy-panel { font-size: 0.9rem; line-height: 1.8; }
html[lang^="zh"] .spider-analysis-panel .panel-label,
html[lang^="zh"] .spider-strategy-panel .panel-label { font-size: 0.85rem; letter-spacing: 0.06em; }
html[lang^="zh"] .spider-demo-note { font-size: 0.9rem; line-height: 1.8; }
html[lang^="zh"] .chapter-panel-title { font-size: 0.86rem; letter-spacing: 0.06em; }
html[lang^="zh"] .chapter-entry { font-size: 0.85rem; line-height: 1.6; }
html[lang^="zh"] .spider-chart-container .spider-title { font-size: 0.98rem; }
/* the closed control, once it is showing a Chinese label */
html[lang^="zh"] .lang-selector,
html[lang^="zh"] .lang4 { font-size: 0.9rem; }
/* SVG axis labels on the eight-week chart ("考前 8 周") */
html[lang^="zh"] .c4-x,
html[lang^="zh"] .c4-y { font-size: 14.5px; }
/* the nav's small gold CTA — 免费开始 was riding the Latin .sm size */
html[lang^="zh"] .btn4.gold.sm { font-size: 0.88rem; }

/* .rdx is sized in em (width var + height 1.05em) and body.zh-redact already
   swaps its blurred filler to hanzi — it tracks the new sizes on its own. */

@media (max-width: 768px) {
    html[lang^="zh"] .smp4-mailhead > div,
    html[lang^="zh"] .smp4-skill,
    html[lang^="zh"] .smp4-log p,
    html[lang^="zh"] .smp4-owner { font-size: 0.92rem; }
    html[lang^="zh"] .eyebrow4,
    html[lang^="zh"] .smp4-tag { letter-spacing: 0.1em; }
}

/* phones: the 800-unit chart scales to ~0.45, so bump its type in chart units */
@media (max-width: 640px) {
    .cmp4-chart { padding-left: 26px; }
    .cmp4-chart svg { overflow: visible; }
    .cmp4-chart .c4-y, .cmp4-chart .c4-x { font-size: 19px; }
    .cmp4-chart .c4-lbl-a, .cmp4-chart .c4-lbl-b { font-size: 20px; }
}

@media (max-width: 480px) { .hero4 h1 > em { font-size: 0.72em; white-space: nowrap; } }

/* phones: a still of the student, framed on her, below the buttons (the full-bleed video cropped to a mug) */
@media (max-width: 768px) {
    .hero4-m { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 58% 30%; border-radius: 18px; margin-top: 36px; box-shadow: 0 14px 34px rgba(28,42,36,0.16); }
}

/* keep each half of a two-part heading whole; the browser may only break between the halves */
.nb { white-space: nowrap; }

/* ── hero: short phone paragraph + diagnostic microcopy ───────── */
.hero4-sub-short { display: none; }
.hero4-fine { margin-top: 16px; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); }
.a4 h2.a4-sub { font-size: 0.56em; margin-top: 22px; opacity: 0.92; }

/* ── footer links ─────────────────────────────────────────────── */
.foot4-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot4-links a { color: var(--muted); text-decoration: none; font-size: 0.84rem; }
.foot4-links a:hover { color: var(--accent); text-decoration: underline; }

/* ── sticky start button (phones only) ────────────────────────── */
.stickycta { display: none; }

/* ── pricing (live plans) ─────────────────────────────────────── */
.prc4 { padding: 130px 26px 110px; border-top: 1px solid var(--border-soft); }
.prc4-in { max-width: 1120px; margin: 0 auto; }
.prc4-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.prc4-head .ll { display: inline-block; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
.prc4-head .ll::after { left: 50%; transform: translateX(-50%); }
.prc4-sub { margin-top: 28px; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.prc4-trial { margin-top: 14px; font-size: 0.86rem; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; }
.prc4-promo {
    max-width: 640px; margin: 0 auto 34px; text-align: center;
    padding: 13px 22px; border-radius: 100px;
    background: rgba(171, 132, 52, 0.1); border: 1px solid rgba(171, 132, 52, 0.38);
    color: var(--gold-deep); font-weight: 700; font-size: 0.9rem;
}
.prc4-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.prc4-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
    padding: 38px 32px 30px; box-shadow: 0 10px 30px rgba(28, 42, 36, 0.05);
}
.prc4-card.pop { border-color: var(--gold); box-shadow: 0 22px 54px rgba(171, 132, 52, 0.2); }
.prc4-tag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: #fff; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; white-space: nowrap;
}
.prc4-card h3 { font-size: 1.7rem; margin-bottom: 4px; }
.prc4-dur { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }
.prc4-pm { display: flex; align-items: baseline; gap: 8px; }
.prc4-amt { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--ink); font-weight: 500; letter-spacing: -0.02em; }
.prc4-per { color: var(--muted); font-size: 0.95rem; }
.prc4-total { margin: 14px 0 24px; font-size: 0.95rem; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-height: 28px; }
.prc4-total s { color: var(--dim); }
.prc4-total b { font-weight: 700; }
.prc4-badge { background: rgba(23, 98, 74, 0.1); color: var(--accent); font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 100px; letter-spacing: 0.04em; }
.prc4-card .btn4 { width: 100%; text-align: center; margin-top: auto; }
.prc4-fine { margin-top: 12px; font-size: 0.78rem; line-height: 1.5; color: var(--muted); text-align: center; }
.prc4-incl { margin: 56px auto 0; max-width: 860px; padding: 34px 38px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 20px; }
.prc4-incl h3 { font-size: 1.3rem; margin-bottom: 18px; }
.prc4-incl ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; padding: 0; margin: 0; }
.prc4-incl li { position: relative; padding-left: 26px; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.prc4-incl li::before { content: ''; position: absolute; left: 2px; top: 0.45em; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.prc4-foot { margin: 22px auto 0; text-align: center; max-width: 640px; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 1023px) {
    .prc4-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 26px; }
    .prc4-card.pop { order: -1; }
    .prc4-incl ul { grid-template-columns: 1fr; }
}

/* ── phones ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero4-sub-long { display: none; }
    .hero4-sub-short { display: block; font-size: 1.04rem; line-height: 1.65; }
    .hero4-fine { text-align: center; margin-top: 14px; }
    .deck4 { padding: 76px 18px 64px; }
    .deck4-head { margin-bottom: 40px; }
    .deck4-stack { gap: 14px; }
    .deck4-card { padding: 22px 20px 24px; min-height: 0; border-radius: 16px; top: calc(78px + var(--i) * 14px); }
    .d4-tag { margin-bottom: 12px; padding: 5px 12px; }
    .deck4-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
    .deck4-card p { font-size: 0.94rem; line-height: 1.65; }
    .adv4 { padding: 70px 22px; }
    .prc4 { padding: 80px 18px 70px; }
    .prc4-head { margin-bottom: 32px; }
    .prc4-incl { padding: 26px 22px; }
    .stickycta {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 390;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(245, 241, 230, 0.96);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
        transform: translateY(115%); transition: transform 0.3s ease;
    }
    .stickycta.show { transform: none; }
    .stickycta .btn4 { display: block; width: 100%; text-align: center; padding: 15px 18px; }
    body.has-sticky .toTop { bottom: 84px; }
    .foot4 { padding-bottom: 96px; }
}
html[lang^="zh"] .hero4-fine { letter-spacing: 0.02em; }

.jrn4-foot { margin-top: 34px; text-align: center; font-size: 0.9rem; color: var(--muted); }
.jrn4-foot a { color: var(--accent); font-weight: 600; margin-right: 12px; }
.jrn4-card { text-decoration: none; color: inherit; display: block; }

/* pricing cards show the plan total (like /pricing), not a monthly figure */
.prc4-pm { flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; }
.prc4-was { color: var(--dim); font-size: 1.15rem; font-weight: 700; }
.prc4-total { min-height: 34px; margin: 12px 0 22px; }
.prc4-was { flex-basis: 100%; font-size: 1rem; margin-bottom: -4px; }
.prc4-amt { font-size: 2.7rem; }
.prc4-per { white-space: nowrap; }
/* original price: big, dark, with a bold contrasting strike so the saving is obvious */
.prc4-was {
    font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.1;
    color: var(--muted);
    text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: #b5452f;
    margin-bottom: 0;
}

/* ── pricing: premium finish ──────────────────────────────────── */
.prc4-promo {
    background: transparent; border: 0; border-top: 1px solid rgba(171,132,52,0.45); border-bottom: 1px solid rgba(171,132,52,0.45);
    border-radius: 0; max-width: 560px; padding: 14px 10px; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.74rem; font-weight: 700; color: var(--gold-deep);
}
.prc4-grid { gap: 26px; align-items: stretch; }
.prc4-card {
    padding: 46px 38px 34px; border-radius: 6px; background: var(--surface);
    border: 1px solid var(--border); box-shadow: none; overflow: hidden;
}
.prc4-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); opacity: 0.75; }
.prc4-card h3 {
    font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold-deep); margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft);
}
.prc4-was { font-size: 1.35rem; font-weight: 500; color: var(--dim); text-decoration-color: #b5452f; text-decoration-thickness: 2px; margin-bottom: 4px; }
.prc4-amt { font-size: 3rem; font-weight: 500; letter-spacing: -0.025em; }
.prc4-per { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.prc4-badge { background: transparent; border: 1px solid var(--gold); color: var(--gold-deep); border-radius: 100px; padding: 4px 12px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.prc4-card .btn4.line { border-color: var(--ink); }
.prc4-fine { font-size: 0.76rem; }

/* the featured plan: deep emerald with gold, like the demo band */
.prc4-card.pop {
    background: linear-gradient(180deg, #153b30 0%, #12332a 100%); border-color: rgba(199,160,78,0.55);
    box-shadow: 0 30px 70px rgba(18, 51, 42, 0.32); transform: translateY(-10px);
}
.prc4-card.pop::before { opacity: 1; background: linear-gradient(90deg, transparent, #e0bd6a, transparent); }
.prc4-card.pop h3 { color: #e0bd6a; border-bottom-color: rgba(246,242,231,0.16); }
.prc4-card.pop .prc4-amt { color: #f6f2e7; }
.prc4-card.pop .prc4-per { color: rgba(246,242,231,0.7); }
.prc4-card.pop .prc4-was { color: rgba(246,242,231,0.62); text-decoration-color: #e8896c; }
.prc4-card.pop .prc4-badge { border-color: #e0bd6a; color: #e0bd6a; }
.prc4-card.pop .prc4-fine { color: rgba(246,242,231,0.68); }
.prc4-card.pop .btn4.gold { background: linear-gradient(135deg, #e0bd6a, #c7a04e); color: #12332a; }
.prc4-tag { background: #e0bd6a; color: #12332a; border-radius: 100px; top: -14px; letter-spacing: 0.2em; }
.prc4-incl { border-radius: 6px; background: transparent; border: 1px solid var(--border); }
@media (max-width: 1023px) { .prc4-card.pop { transform: none; } .prc4-card { padding: 40px 28px 30px; } }
.prc4-card { overflow: visible; }
.prc4-amt { font-size: 2.65rem; }
.prc4-per { font-size: 0.72rem; letter-spacing: 0.1em; }
.prc4-pm { flex-wrap: nowrap; }
.prc4-was { flex-basis: auto; }
.prc4-pm { display: flex; flex-wrap: wrap; }
.prc4-pm .prc4-was { flex-basis: 100%; }
/* keep the crossed-out original price easy to read in the premium styling */
.prc4-was { color: var(--muted); font-weight: 600; font-size: 1.45rem; text-decoration-thickness: 3px; }
.prc4-card.pop .prc4-was { color: rgba(246,242,231,0.82); }

/* "20% off" sits right of the crossed-out original price */
.prc4-wasrow { flex-basis: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.prc4-wasrow .prc4-was { flex-basis: auto; margin: 0; }
.prc4-pm { margin-bottom: 26px; }

.hero4-try { display: inline-block; margin-top: 14px; font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(23,98,74,0.35); padding-bottom: 2px; }
.hero4-try:hover { border-bottom-color: var(--accent); }
@media (max-width: 768px) { .hero4-try { display: block; text-align: center; margin-top: 12px; border-bottom: 0; text-decoration: underline; } }

/* nav: anchors clear the fixed bar, current section is marked, phones get a menu */
html { scroll-padding-top: 74px; }
.nav4-links a { position: relative; padding: 4px 0; white-space: nowrap; }
.nav4-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold, #c7a04e); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav4-links a.on { color: var(--ink); }
.nav4-links a.on::after { transform: scaleX(1); }
.nav4-burger { display: none; width: 42px; height: 42px; margin-left: 2px; border: 1px solid var(--border); border-radius: 3px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.nav4-burger span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.2s ease; }
.nav4.open .nav4-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav4.open .nav4-burger span:nth-child(2) { opacity: 0; }
.nav4.open .nav4-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1320px) { .nav4-links { gap: 22px; } .nav4-in { gap: 26px; padding: 0 24px; } }
@media (max-width: 1199px) {
    .lang4 { margin-left: auto; }
    .nav4-burger { display: inline-flex; }
    .nav4-links { display: none; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 22px 18px; background: rgba(245, 241, 230, 0.98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); box-shadow: 0 18px 40px rgba(18, 51, 42, 0.12); max-height: calc(100vh - 74px); overflow-y: auto; }
    .nav4.open .nav4-links { display: flex; }
    .nav4.open { background: rgba(245, 241, 230, 0.98); border-bottom-color: var(--border); }
    .nav4-links a { font-size: 1.02rem; padding: 15px 4px; border-bottom: 1px solid var(--border-soft, rgba(18, 51, 42, 0.08)); }
    .nav4-links a:last-child { border-bottom: 0; }
    .nav4-links a::after { display: none; }
    .nav4-links a.on { color: var(--ink); font-weight: 700; }
}
@media (max-width: 520px) { .nav4-in { padding: 0 14px; gap: 8px; } .nav4-logo img { width: 112px; } .nav4 .btn4.sm { padding-left: 14px; padding-right: 14px; } }
/* the menu button never gets squeezed by the other bar items */
.nav4-burger { flex: 0 0 42px; min-width: 42px; }
.nav4-logo { flex: 0 1 auto; min-width: 0; }
@media (max-width: 520px) {
    .nav4-logo img { width: 100px; }
    .lang4 { font-size: 0.72rem; padding: 8px 20px 8px 9px; background-position: right 7px center; min-width: 0; }
    .nav4 .btn4.sm { font-size: 0.68rem; letter-spacing: 0.08em; padding: 11px 12px; white-space: nowrap; }
}
@media (max-width: 360px) { .nav4-in { padding: 0 10px; gap: 6px; } .nav4-logo img { width: 86px; } .nav4 .btn4.sm { padding: 11px 9px; } }
.nav4-logo { flex: 0 0 auto; }
@media (max-width: 360px) { .lang4 { max-width: 58px; padding-right: 17px; } .nav4 .btn4.sm { font-size: 0.62rem; padding: 11px 8px; letter-spacing: 0.04em; } }