/* Hallmark · shape: Feature Stack (the owner's section order, recomposed) · genre: modern-minimal · theme: Rim (deal 2/3, seed hands-on-classes-students-teachers-0e62·3ccb2345·2026-11-10·r0) · redesign: full
 * hero: Stage · nav: edge-aligned bar, wordmark, two menus and one action · footer: wordmark over links · imagery: the product (study app capture, screen recordings), class footage · signature: the study app answering a syllabus, set big beside the head
 * axes: dark/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · modes: light+dark (owner's switch; light re-derived from rim night) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the kept order runs problem, method, proof, programs; varied the surfaces instead (two paper-2 bands, hairline heads, centred statements beside left heads) rather than reorder the owner's flow */
/* Hallmark · dropped eyebrow "학생 · 교사 · 기업 대상 AI 실습 수업" · 54 and 63 name it; the audience moved into the lead */
/* Hallmark · dropped hero aura and cursor glow · 2a and 29 name the purple-to-blue wash */
/* Hallmark · dropped "↗" after button and link text · 63 names an arrow glued to text */
/* Hallmark · reworded "© 2026 Anchor. All rights reserved." to "© 2026 Anchor" · 19 names the stock line */
/* Hallmark · answered F4 · the pause control on footage is a scrim, not a second primary; the header action reuses .btn-primary */
/* Hallmark · dismissed 3 · the three columns hold looping class footage and a heading, not icon tiles */
/* Hallmark · open 46a · eighteen draft testimonials kept at the owner's request until real ones arrive; never ship them as real */
/* Hallmark · answered F-fonts · vi sets Be Vietnam Pro because Switzer has no Vietnamese; Hangul falls to Pretendard */
@import url("./tokens.css");
@import url("./base.css");

/* ── Base additions ── */
body { font-size: 1.0625rem; color: var(--color-ink-2); }
:lang(ko) { word-break: keep-all; }
html { scroll-padding-top: calc(var(--hdr-h) + var(--space-lg)); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
h1, h2, h3 { color: var(--color-ink); }
h2 { letter-spacing: -0.03em; }
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dd, figure, blockquote { margin: 0; }
p, dd, blockquote, li { text-wrap: pretty; }
.nw { white-space: nowrap; }
.measure { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-weight: 400; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-md); top: var(--space-xs); z-index: var(--z-toast); background: var(--color-paper); padding: var(--space-xs) var(--space-sm); }

/* ── Controls: the Rim pair, square, Switzer 500 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: none; color: var(--color-ink); font: 500 var(--text-md) / 1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.btn:active { background: var(--color-paper-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); border-color: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn-primary:active { background: color-mix(in oklab, var(--color-accent) 76%, var(--color-ink)); }

/* ── Header: edge-aligned bar on paper, a hairline under it ── */
.hdr { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); height: var(--hdr-h); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hdr-in { height: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.logo { position: relative; display: block; width: 92px; height: 28px; }
.logo img, .foot-logo { transition: opacity var(--dur-short) var(--ease-out); }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.logo-w, :root[data-theme="light"] .logo-w { opacity: 0; }
:root:not([data-theme="light"]) .logo-b { opacity: 0; }
:root:not([data-theme="light"]) .logo-w { opacity: 1; }
.hdr-menus { display: flex; align-items: center; gap: var(--space-2xs); }
.menu { position: relative; }
.menu summary { list-style: none; display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); cursor: pointer; user-select: none; transition: background-color var(--dur-short) var(--ease-out); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--color-paper-2); }
.menu summary:active { background: var(--color-paper-3); }
.menu-list { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); min-width: 160px; padding: var(--space-2xs); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.menu-list a, .menu-list button { display: block; width: 100%; min-height: 44px; padding: var(--space-sm); border: 0; background: none; color: var(--color-ink); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: var(--color-paper-3); }
.menu-list [aria-current="true"], .menu-list [aria-pressed="true"] { font-weight: 500; box-shadow: inset 2px 0 0 var(--color-accent); }
.hdr-cta { min-height: 44px; margin-left: var(--space-xs); padding: 0 var(--space-md); font-size: var(--text-sm); }

/* ── Hero: Stage. Head on the left, the study app set big on the right; fits 1280 x 800 ── */
main { padding-top: var(--hdr-h); }
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; align-items: center; gap: var(--space-2xl); min-height: min(calc(100svh - var(--hdr-h)), 960px); padding-block: var(--space-2xl); }
.hero h1 { font-size: clamp(2.25rem, 3.6vw + 0.5rem, 4rem); line-height: 1.04; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.trust { display: flex; flex-wrap: wrap; margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.trust li { padding-inline: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.trust li:first-child { padding-left: 0; border-left: 0; }
.hero-shot { position: relative; }
.cohorts { grid-column: 1 / -1; align-self: end; display: grid; gap: var(--space-2xl); }
.cohorts-h { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.cohorts h3 { font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.cohort-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(0.8) contrast(1.1); outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.badge { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); font-weight: 600; }
.badge-open { background: var(--color-accent); color: var(--color-accent-ink); }
/* Open for enrollment: one full-width card per open cohort, text left and photo right */
.enroll-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-xl); margin-top: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-top: 2px solid var(--color-accent); background: var(--color-paper-2); }
.enroll-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.enroll-text h3 { font-size: var(--text-xl); }
.enroll-text p { color: var(--color-ink-2); }
.enroll-text .enroll-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-weight: 500; color: var(--color-ink); }
.enroll-text .btn { gap: var(--space-xs); margin-top: var(--space-xs); }
/* Class history: one card per class; enrollment is closed, so photos sit back in grey and orange stays with the open card */
.class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); margin-top: var(--space-sm); padding: 0; list-style: none; }
.class-card { display: flex; flex-direction: column; gap: var(--space-2xs); }
.class-card .cohort-img { margin-bottom: var(--space-xs); filter: grayscale(1) contrast(1.05); opacity: 0.85; }
.class-card h3 { font-size: var(--text-md); }
.class-who { font-size: var(--text-sm); color: var(--color-muted); }
.runs { margin-top: var(--space-sm); padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.runs > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.run-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); min-height: 44px; padding-block: var(--space-xs); font-size: var(--text-sm); }
.run-n { font-weight: 600; color: var(--color-ink); }
.run-row time { color: var(--color-muted); }
.run-st { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-left: auto; font-weight: 500; color: var(--color-muted); }
.run-st.is-live { color: var(--color-ink); }
.run-st.is-live::before { content: ""; width: 6px; height: 6px; background: currentColor; }
summary.run-row { cursor: pointer; list-style: none; }
summary.run-row::-webkit-details-marker { display: none; }
.run-more { flex-basis: 100%; font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); }
summary.run-row:hover .run-more { text-decoration-color: currentColor; }
.run-body { display: grid; gap: var(--space-sm); padding-bottom: var(--space-sm); }
.run-body img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.run-body blockquote { font-size: var(--text-sm); color: var(--color-ink-2); }
.ticks::before, .ticks::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--color-muted); pointer-events: none; z-index: var(--z-raised); }
.ticks::before { top: calc(-1 * var(--space-xs)); left: calc(-1 * var(--space-xs)); border-width: 1px 0 0 1px; }
.ticks::after { right: calc(-1 * var(--space-xs)); bottom: calc(-1 * var(--space-xs)); border-width: 0 1px 1px 0; }

/* ── Sections: hairline above each left head; centred statements for the problem, the method and the close ── */
.sec { margin-top: var(--section-gap); }
.band { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--gap-columns); padding-top: var(--space-lg); margin-bottom: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.head p { max-width: 52ch; color: var(--color-muted); }
.head-center { display: block; padding-top: 0; border-top: 0; text-align: center; }
.head-center h2 { margin-inline: auto; }
.head-center p { margin: var(--space-md) auto 0; text-wrap: balance; }

/* Problem band: three pains as quotes, then the turn */
/* Compact band: tighter padding and shorter photos so this section reads as a quick aside */
.pains-band { padding-block: calc(var(--section-gap-s) * 0.7); }
.pains-band .head { margin-bottom: var(--space-xl); }
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); text-align: center; }
.pain-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--space-md); filter: saturate(0.8) contrast(1.1); outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.pains h3 { margin-inline: auto; margin-bottom: var(--space-sm); font-size: var(--text-title); letter-spacing: -0.02em; line-height: 1.35; }
.pains p { color: var(--color-muted); font-size: var(--text-sm); }

/* Method: footage above a hairline, then the principle, centred as the owner asked */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); text-align: center; }
.steps h3 { max-width: none; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.steps p { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }

/* Looping clips: square, a 1px ink ring, a pause control on a scrim (gate 18) */
.clip { position: relative; }
.clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-paper-2); outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.clip-btn { position: absolute; left: var(--space-xs); bottom: var(--space-xs); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: var(--color-scrim); color: var(--color-on-scrim); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.clip-btn:hover { background: var(--color-paper-3); }
.clip-btn:active { background: var(--color-paper); }
.clip-btn .ico { width: 16px; height: 16px; }
.clip-btn .i-play { fill: currentColor; }
.clip-btn .i-play, .clip.is-paused .i-pause { display: none; }
.clip.is-paused .i-play { display: block; }

/* Proof: the partner plates, then the figures parted by vertical hairlines */
.badges { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.badges img { width: 240px; max-width: calc(50% - var(--space-xs)); aspect-ratio: 542 / 332; object-fit: contain; background: var(--color-badge); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.stats li { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); }
.stats li:first-child { padding-left: 0; border-left: 0; }
.stats strong { font-variant-numeric: tabular-nums; font-size: clamp(2.25rem, 3vw + 0.5rem, 3rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); }
.stats strong.measure { font-weight: 400; }
.stats small { font-size: 0.5em; letter-spacing: 0; color: var(--color-muted); }
.stats span { font-size: var(--text-sm); color: var(--color-muted); }

/* Programs: rows, footage and text swapping sides */
.rows { display: grid; gap: var(--section-gap-s); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--space-2xl); }
.row:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.row:nth-child(even) .row-media { order: -1; }
.row h3 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
.row-text > p { margin-block: var(--space-md) var(--space-xl); color: var(--color-muted); }
.facts > div { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); }
.facts > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { color: var(--color-ink); }
.row-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-md); font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.row-link:hover { text-decoration-thickness: 2px; }
.row-link:active { color: var(--color-muted); }

/* Reviews: hairline rows, dates in mono, square initials */
/* Masonry: cards keep their natural height and stack in 3 columns, so reviews of different lengths fill the space */
.rev-grid { columns: 3; column-gap: var(--space-md); }
/* same card look as the home service cards (.svc) */
.rev-card { break-inside: avoid; margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); }
.rev-card .rev-who { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.rev-card blockquote { color: var(--color-ink-2); }
.rev-text p + p { margin-top: var(--space-sm); }
.rev-text strong, .rev-lead { font-weight: 600; color: var(--color-ink); }
.rev-title { font-size: var(--text-lg); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--color-ink); text-wrap: balance; }
.rev-who { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; font-size: var(--text-sm); line-height: 1.4; }
.rev-who strong { display: block; font-weight: 500; color: var(--color-ink); }
.rev-who strong + span { color: var(--color-muted); }
.rev-ava { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); font-weight: 500; color: var(--color-ink); }
.rev-more { margin-top: var(--space-xl); }
.revs { grid-column: 1 / -1; display: grid; gap: var(--space-xl); }
.rev-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: var(--space-lg) var(--gap-columns); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-accent); }
.rev-pull { font-size: clamp(1.5rem, 1.4vw + 0.9rem, 2.25rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--color-ink); text-wrap: balance; }
.rev-body { grid-column: 2; grid-row: 1 / span 2; color: var(--color-ink-2); }
.rev-body p + p { margin-top: var(--space-sm); }
.rev-feature .rev-who { align-self: end; margin-top: 0; }

/* FAQ: ruled rows */
.faq { max-width: 880px; border-top: var(--rule-hair) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); font-size: var(--text-lg); font-weight: 500; color: var(--color-ink); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: var(--text-xl); font-weight: 400; line-height: 1; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.faq summary:hover::after { color: var(--color-ink); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--color-accent); }
.faq details p { max-width: 65ch; padding-bottom: var(--space-lg); color: var(--color-muted); }

/* Close: the inquiry again, centred on the second band */
.contact { text-align: center; }
.contact h2 { margin-inline: auto; }
.contact-sub { max-width: 52ch; margin: var(--space-md) auto var(--space-xl); color: var(--color-muted); text-wrap: balance; }
.contact-mail { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.contact-mail a:hover { color: var(--color-ink); }

/* ── Footer: the wordmark over the links ── */
.foot { padding-block: var(--space-3xl) var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.foot-logo { height: 24px; width: auto; margin-bottom: var(--space-sm); }
:root[data-theme="light"] .foot-logo.logo-w, :root:not([data-theme="light"]) .foot-logo.logo-b { display: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-links a:hover { color: var(--color-ink); text-decoration: underline; }
.foot-copy { margin-top: var(--space-xs); }

/* ── Univ Class detail (/edu/univ/) ── */
.u-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.u-facts > div { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.u-facts > div:nth-child(odd) { padding-right: var(--space-md); }
.u-facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.u-facts dd { font-weight: 500; color: var(--color-ink); }
.u-facts s, .u-info s { font-weight: 400; color: var(--color-muted); }
.u-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.u-cols li { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.u-cols h3, .wk h3, .u-feedback h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.u-cols p { margin-top: var(--space-xs); color: var(--color-muted); }
.u-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--space-md); filter: saturate(0.8) contrast(1.1); outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.u-img-wide { aspect-ratio: 16 / 9; margin-bottom: var(--space-xs); }
.head .u-key { margin-bottom: var(--space-sm); font-weight: 500; color: var(--color-ink); }
/* Curriculum: four weeks in source order (2 x 2, then 1 column); what each week makes is the thing to find */
.weeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.wk { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.wk-n { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.wk > p:not(.wk-n) { color: var(--color-ink-2); }
.wk-make { margin-top: auto; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-left: 2px solid var(--color-accent); }
.wk-make-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.wk-make p:not(.wk-make-label) { margin-top: var(--space-2xs); font-weight: 600; color: var(--color-ink); }
.u-feedback { margin-top: var(--space-2xl); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); }
.u-feedback-line { margin-block: var(--space-xs) var(--space-sm); row-gap: var(--space-2xs); font-size: var(--text-md); font-weight: 500; color: var(--color-ink); }
.u-feedback p:last-child { max-width: 65ch; color: var(--color-muted); }
.u-info { max-width: 880px; border-top: var(--rule-hair) solid var(--color-rule); }
.u-info > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.u-info dt { color: var(--color-muted); }
.u-info dd { color: var(--color-ink); }
.u-info dd a { text-decoration: underline; text-decoration-color: var(--color-rule-2); }
.u-info dd a:hover { text-decoration-color: currentColor; }
.u-info .badge { margin-left: var(--space-xs); vertical-align: middle; }
.u-list { color: var(--color-muted); }
.px-toggle { margin-left: var(--space-xs); padding: var(--space-2xs) var(--space-xs); font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-2); background: none; border: var(--rule-hair) solid var(--color-rule-2); cursor: pointer; vertical-align: middle; }
.px-toggle:hover { color: var(--color-ink); border-color: currentColor; }
.u-value { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.u-value h3, .u-cmp caption { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
.u-incl { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.u-incl li { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.u-incl strong { font-weight: 600; color: var(--color-ink); }
.u-incl span { color: var(--color-muted); }
.u-per { margin-top: var(--space-md); font-weight: 500; color: var(--color-ink); }
.u-cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.u-cmp caption { padding-bottom: var(--space-md); text-align: left; }
.u-cmp th, .u-cmp td { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; color: var(--color-ink-2); }
.u-cmp td, .u-cmp thead th:last-child { text-align: right; }
.u-cmp thead th { border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.u-cmp tfoot th, .u-cmp tfoot td { font-weight: 600; color: var(--color-ink); }
.u-cmp .u-cmp-us th, .u-cmp .u-cmp-us td { padding-inline: var(--space-sm); background: var(--color-paper-2); border-bottom: 0; }
.u-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ── Phones: sticky inquiry, shown by edu.js once the hero actions scroll away ── */
.mcta { display: none; }
@media (max-width: 40rem) {
  .hdr-cta { display: none; }
  .mcta { display: flex; position: fixed; z-index: var(--z-sticky); left: var(--space-md); right: var(--space-md); bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); min-height: 52px; transform: translateY(calc(100% + var(--space-lg))); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
  .mcta.on { transform: none; }
  body { padding-bottom: var(--space-3xl); }
  html { scroll-padding-bottom: var(--space-3xl); }
}

/* ── Collapse to one column ── */
@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
  .head { grid-template-columns: minmax(0, 1fr); }
  .pains, .steps { grid-template-columns: minmax(0, 1fr); }
  .rev-grid { columns: 2; }
  .rev-feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rev-body { grid-column: auto; grid-row: auto; }
  .cohorts { margin-top: var(--space-lg); }
  .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-cols { grid-template-columns: minmax(0, 1fr); }
  .pains, .steps { gap: var(--space-2xl); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats li, .stats li:first-child { padding: var(--space-lg) 0 0; border-left: 0; }
  .stats li + li { margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
  .row, .row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .row-media, .row:nth-child(even) .row-media { order: -1; }
}

/* ── Home (/, /en/, /vi/): new classes only, the edu pages use none of them.
 * Hero band: text stack left, numbered steps panel right, a one-line strip under it. Then service cards and the inquiry form ── */
.logo-home { width: 102px; height: 24px; }
.hdr-links { display: flex; }
.hdr-links a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.hdr-links a:hover { background: var(--color-paper-2); }
.hdr-links a:active { background: var(--color-paper-3); }
.hdr-more { display: none; }
.logo-home ~ .hdr-menus .menu-cur { white-space: nowrap; }

/* color-focus is the accent's text-safe step in both themes */
.eyebrow { font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-focus); }
.hero-band { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.home-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; min-height: 0; padding-block: var(--space-3xl); }
.home-hero h1 { margin-top: var(--space-md); font-size: clamp(2rem, 2.75vw + 0.75rem, 4rem); line-height: 1.12; max-width: none; }
.hero-accent { color: var(--color-focus); }
.home-hero .ctas { align-items: center; gap: var(--space-lg); }
.home-hero .ctas .row-link { margin-top: 0; }
.steps-panel { background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) var(--space-lg) var(--space-2xs); }
.steps-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-md); }
.steps-head h2 { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-ink-2); }
.steps-head .measure { flex: none; white-space: nowrap; font-size: var(--text-sm); color: var(--color-focus); }
.steps-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.step-num { display: grid; place-items: center; width: 32px; height: 32px; border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-focus); }
.steps-list h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.steps-list p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.strip strong { font-weight: 500; color: var(--color-ink); }

.head .eyebrow { margin-bottom: var(--space-md); }
.svc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.svc { display: flex; flex-direction: column; padding: var(--space-xl) var(--space-lg) var(--space-lg); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); }
.svc-label { font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.svc h3 { margin-top: var(--space-xl); }
.svc p { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); }
/* margin-top: auto pins the three links to one baseline */
.svc-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); text-decoration: none; }
.svc-link .ico { color: var(--color-focus); }
.svc-link:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.svc-link:active { color: var(--color-muted); }

.cform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 720px; margin: 0 auto; text-align: left; }
.cform label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.cform .full { grid-column: 1 / -1; }
.cform input, .cform textarea { width: 100%; min-height: 48px; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; }
.cform textarea { resize: vertical; }
.cform input:hover, .cform textarea:hover { border-color: var(--color-muted); }
.cform ::placeholder { color: var(--color-muted); }
.cform-err { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-error); }
.cform-err:empty { display: none; }
:root[data-theme="light"] .cform-err { color: oklch(50% 0.17 27); }
.cform-done { max-width: 52ch; margin: 0 auto; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }

@media (max-width: 60rem) {
  .hdr-links { display: none; }
  .hdr-more { display: block; }
  .home-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-2xl); }
}
@media (max-width: 40rem) {
  .svc-list, .cform { grid-template-columns: minmax(0, 1fr); }
  .hdr-more .menu-cur { display: none; }
}

/* Home: about Anchor (sticky question on the left, three chapters on the right) */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.about-intro { position: sticky; top: calc(var(--hdr-h) + var(--space-xl)); align-self: start; }
.about-pain { margin-top: var(--space-lg); color: var(--color-muted); }
.about h2 { margin-top: var(--space-lg); font-size: clamp(1.75rem, 2vw + 0.75rem, 2.75rem); line-height: 1.2; text-wrap: balance; }
.about-start { margin-top: var(--space-lg); font-weight: 500; color: var(--color-focus); }
.about-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.about-list li:first-child { padding-top: 0; }
.about-num { font-size: var(--text-2xl); line-height: 1; color: var(--color-focus); }
.about-label { font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.about-list h3 { margin-top: var(--space-xs); font-size: var(--text-xl); letter-spacing: -0.02em; }
.about-list h3 + p { margin-top: var(--space-sm); color: var(--color-ink-2); }
/* hand-set line breaks need the wide desktop column; below it let text wrap naturally */
@media (max-width: 75rem) { .about br { display: none; } }
@media (max-width: 60rem) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-intro { position: static; }
}
@media (max-width: 40rem) {
  .about-list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-sm); }
  .about-num { font-size: var(--text-lg); }
}

/* ── Course status and Univ detail on phones: listed after the 60rem block so the single column wins ── */
@media (max-width: 40rem) {
  .class-grid, .enroll-card { grid-template-columns: minmax(0, 1fr); }
  .enroll-card { gap: var(--space-lg); padding: var(--space-md); }
  .weeks { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .u-value { grid-template-columns: minmax(0, 1fr); }
  .u-info > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .u-feedback { padding: var(--space-md); }
  .u-feedback-line { flex-direction: column; }
  .u-feedback-line li { padding-left: 0; border-left: 0; }
}

/* ── Reviews on phones: one column, 2 cards at a time, long text cut with a fade (edu.js adds .is-short and the button) ── */
@media (max-width: 40rem) {
  .rev-grid { columns: 1; }
  .rev-body { --clamp: 12lh; }
  .rev-text { --clamp: 7lh; }
  .is-short { max-height: var(--clamp); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 3lh), transparent); mask-image: linear-gradient(#000 calc(100% - 3lh), transparent); }
  .rev-expand { align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; cursor: pointer; }
  .rev-feature .rev-expand { justify-self: start; }
}