/* RESKILL v3 v3-2026-11-02. Built from src/css: 01-tokens.css, 02-base-header.css, 03-home-hero-goals-field-test.css, 04-sections-groups-trainer-faq-final-footer.css, 05-responsive.css, 06-motion-logo-bar.css, 07-pages.css, 08-courses.css, 08-forms.css. Do not edit here. */
/* ===== 01-tokens.css ===== */
/* RESKILL flagship v3. One palette from the logo. Three acts: light, one dark olive field, light, one olive brand field. */

/* ---------- palette: one system, taken from the logo (olive R, rust S, the two-colour bar) ---------- */
:root {
  --olive-9: #1A1F13; --olive-8: #262C1C; --olive: #3A4229; --olive-5: #5D6B3A; --olive-3: #C9D2B3; --olive-1: #E4E9D8;
  --rust-7: #7C4A1B; --rust: #935A23; --rust-4: #E3954F; --rust-1: #F6E7D6; --lime: #D7F25C;
  --bg: #F7F8F4; --bg2: #ECEFE6; --ink: #14170F; --ink2: #596150; --line: rgba(20,23,15,.10);
  --primary: var(--rust); --on-primary: #ffffff; --primary-lip: var(--rust-7);
  --hl: var(--rust-1); --good: #4A6A16; --bad: var(--rust);
  --card: #ffffff; --card-line: rgba(20,23,15,.08);
  --band: var(--olive-9); --band-ink: #F2F4EC; --band-ink2: #AEB79D; --band-line: rgba(242,244,236,.11); --band-card: #232A19; --band-card2: #2C3420;
  --band-accent: var(--lime); --on-band-accent: var(--olive-9); --band-lip: #9DB236;
  --final: var(--olive); --final-ink: #ffffff; --final-ink2: rgba(255,255,255,.78);
  --foot: #14170F;
  --hdr-bg: rgba(247,248,244,.84);
  --duo: var(--olive);
  --bar-a: var(--olive); --bar-b: var(--rust);
  color-scheme: light;
}
/* on dark grounds the logo bar and the feedback colours brighten */
.field, .hdr[data-tone="dark"] { --bar-a: var(--olive-3); --bar-b: var(--rust-4); --good: var(--lime); --bad: var(--rust-4); }
.ftr { --bar-a: var(--olive-5); --bar-b: var(--rust); }
.final { --bar-a: var(--olive-3); --bar-b: var(--rust-4); }

/* ---------- tokens ---------- */
:root {
  --f: "Geist", "Google Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --t-micro: 120ms; --t-ui: 250ms; --t-rev: 600ms; --t-hero: 900ms;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 40px);
  --sec: clamp(72px, 9vw, 120px);
  --sec-peak: clamp(96px, 11vw, 160px);
  --r: 32px;
  --shadow: 0 1px 1px rgba(0,0,0,.04), 0 8px 18px -6px rgba(10,12,30,.10), 0 32px 60px -24px rgba(10,12,30,.28);
  --shadow-s: 0 1px 1px rgba(0,0,0,.04), 0 6px 16px -8px rgba(10,12,30,.18);
  interpolate-size: allow-keywords;
}


/* ===== 02-base-header.css ===== */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--f); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
blockquote, figure { margin: 0; }
mark { background: none; color: inherit; }
.en { font-family: "Geist", system-ui, sans-serif; }
.num { font-family: "Geist", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 10px; }
.field :focus-visible, .ftr :focus-visible { outline-color: var(--band-accent); }
.final :focus-visible { outline-color: var(--final-ink); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: var(--sec) 0; }
.hide-s { }
@media (max-width: 640px) { .hide-s { display: none; } }

/* ---------- type scale ---------- */
.h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.035em; }
.h2s { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.025em; font-weight: 650; }
.h-final { font-size: clamp(42px, 6.2vw, 92px); line-height: .98; letter-spacing: -.045em; }
.lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--ink2); max-width: 34em; }
.kicker { font-size: 16px; font-weight: 600; color: var(--ink2); margin-bottom: 18px; }
.meta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink2); }
.meta svg { font-size: 17px; }
.tag-s { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-family: "Google Sans", var(--f); font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: middle; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink2); white-space: nowrap; }
.field .tag-s { background: rgba(255,255,255,.08); color: var(--band-ink2); }

/* ---------- buttons & links ---------- */
.btn {
  --lip: var(--primary-lip);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 16px; line-height: 1.25; text-decoration: none; text-align: center;
  cursor: pointer; white-space: normal;
  transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.btn-xl { min-height: 68px; padding: 10px 10px 10px 30px; font-size: 18px; gap: 20px; text-align: left; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 3px 0 var(--lip); }
.btn-primary:hover { box-shadow: 0 5px 0 var(--lip); transform: translateY(-2px); }
.btn-primary:active { box-shadow: 0 1px 0 var(--lip); transform: translateY(2px); transition-duration: 80ms; }
.field .btn-primary { --lip: var(--band-lip); background: var(--band-accent); color: var(--on-band-accent); }
.btn-stack { display: flex; flex-direction: column; line-height: 1.2; }
.btn-stack small { font-size: 14px; font-weight: 500; opacity: .72; margin-top: 2px; }
.btn-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 20px; transition: transform var(--t-ui) var(--ease); flex: none; }
.btn:hover .btn-ico { transform: translateY(3px); }
.btn-invert { --lip: var(--band-lip); background: var(--lime); color: var(--olive-9); box-shadow: 0 3px 0 var(--lip); }
.btn-invert:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--lip); }
.btn-invert:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip); transition-duration: 80ms; }
.btn-invert .btn-ico { background: var(--olive-9); color: var(--lime); }
.link-u {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; padding: 8px 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 4px) / 0% 1.5px;
  transition: background-size var(--t-ui) var(--ease);
}
.link-u:hover { background-size: 100% 1.5px; }
.link-arrow svg { font-size: 18px; transition: transform var(--t-micro) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-btn { background: none; border: 0; padding: 8px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; color: var(--band-ink2); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; padding: 14px 16px 0; pointer-events: none; }
.hdr-in {
  pointer-events: auto; margin: 0 auto; width: 100%; max-width: calc(var(--wrap) - 2 * var(--pad) + 36px);
  display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 9px 0 18px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  transition: max-width var(--t-rev) var(--ease), background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.hdr.is-float .hdr-in { max-width: min(1080px, 100%); background: var(--hdr-bg); border-color: var(--line); box-shadow: 0 10px 30px -14px rgba(0,0,0,.25); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Geist", sans-serif; font-weight: 800; letter-spacing: .02em; font-size: 17px; flex: none; }
.brand img { width: 36px; height: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; min-width: 0; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 13px; border-radius: 999px; color: var(--ink2); transition: color var(--t-micro), background-color var(--t-micro); white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--line); }
.hdr-end { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { font-family: "Geist", sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 10px; border-radius: 999px; color: var(--ink2); }
.lang:hover { color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t-ui) var(--ease), top var(--t-ui) var(--ease); }
.menu-btn span:first-child { top: 17px; } .menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
/* tone: the pill follows the section under it */
.hdr[data-tone="dark"].is-float .hdr-in { background: rgba(26,31,19,.86); border-color: rgba(255,255,255,.10); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
.hdr[data-tone="dark"] .brand, .hdr[data-tone="dark"] .nav a, .hdr[data-tone="dark"] .lang { color: #f4f5f0; }
.hdr[data-tone="dark"] .nav a { color: #C3C9B4; }
.hdr[data-tone="dark"] .nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.hdr[data-tone="dark"] .brand img { filter: brightness(0) invert(1); }
.hdr[data-tone="dark"] .hdr-cta { --lip: var(--band-lip); background: var(--band-accent); color: var(--on-band-accent); }
.hdr[data-tone="dark"] .menu-btn { background: rgba(255,255,255,.1); }
.hdr[data-tone="dark"] .menu-btn span { background: #f4f5f0; }
.hdr[data-tone="brand"].is-float .hdr-in { background: var(--bg); }
@media (max-width: 980px) {
  .nav, .hdr-end .lang, .hdr-end .btn { display: none; }
  .menu-btn { display: block; }
  .hdr-end { margin-left: auto; }
  .hdr { padding: 10px 12px 0; }
  .hdr-in { height: 56px; padding: 0 6px 0 16px; }
}
.sheet { position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: 96px var(--pad) 32px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet-nav { display: flex; flex-direction: column; }
.sheet-nav a { font-size: clamp(24px, 7vw, 34px); font-weight: 700; letter-spacing: -.02em; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sheet-foot { display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: 24px; }
.js .sheet.is-open a { animation: sheetIn var(--t-rev) var(--ease) both; }
.js .sheet.is-open .sheet-nav a:nth-child(2) { animation-delay: 40ms } .js .sheet.is-open .sheet-nav a:nth-child(3) { animation-delay: 80ms }
.js .sheet.is-open .sheet-nav a:nth-child(4) { animation-delay: 120ms } .js .sheet.is-open .sheet-nav a:nth-child(5) { animation-delay: 160ms }
.js .sheet.is-open .sheet-nav a:nth-child(6) { animation-delay: 200ms } .js .sheet.is-open .sheet-nav a:nth-child(7) { animation-delay: 240ms }
@keyframes sheetIn { from { opacity: 0; transform: translateY(18px); } }


/* ===== 03-home-hero-goals-field-test.css ===== */
/* ---------- HERO ---------- */
.hero { padding: clamp(116px, 12vw, 156px) 0 clamp(56px, 7vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { container-type: inline-size; min-width: 0; }
.h-hero { line-height: 1; letter-spacing: -.04em; }
.h-fixed { display: block; font-size: min(16.4cqi, 118px); line-height: .95; letter-spacing: -.05em; }
.rot { display: grid; color: var(--primary); font-size: min(8.4cqi, 60px); line-height: 1.12; margin-top: .14em; }
.rot-i { grid-area: 1 / 1; white-space: nowrap; transition: transform 650ms var(--ease), opacity 450ms var(--ease), filter 450ms var(--ease); }
.js .rot-i:not(.is-on) { opacity: 0; transform: translateY(.5em); filter: blur(6px); }
.js .rot-i.is-out { opacity: 0; transform: translateY(-.5em); filter: blur(6px); }
.hero-sub { margin-top: 28px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--ink2); max-width: 30em; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }

/* the stage: one quiet surface with a dot grid; the lesson card is the hero object */
.hero-stage {
  position: relative; border-radius: 36px; padding: clamp(28px, 4vw, 56px) clamp(18px, 3.4vw, 48px);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg2);
}
.lc {
  position: relative; background: var(--card); border: 1px solid var(--card-line); border-radius: 26px;
  box-shadow: var(--shadow); max-width: 560px; margin: 0 auto; overflow: hidden;
}
.lc-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--card-line); font-size: 14px; }
.dots { display: inline-flex; gap: 6px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.lc-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 50%, transparent); animation: live 2s var(--ease) infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lc-label { margin-left: auto; color: var(--ink2); font-size: 14px; }
.lc-body { padding: 22px 22px 6px; display: grid; gap: 18px; }
.msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.msg-main { min-width: 0; }
.who { display: block; font-size: 14px; font-weight: 600; color: var(--ink2); margin-bottom: 3px; }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: "Geist", sans-serif; font-weight: 700; font-size: 16px; color: #0b0b12; flex: none; object-fit: cover; }
.av-n { background: var(--olive-3); } .av-a { background: #EBC9A4; } .av-s { background: var(--lime); } .av-l { background: var(--olive-1); }
.av-sopo { object-position: 50% 18%; filter: grayscale(1) contrast(1.1); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--duo); }
.av-sopo-t { width: 26px; height: 26px; font-size: 12px; background: var(--duo); color: var(--bg); }

.say-line { font-size: clamp(19px, 1.75vw, 23px); line-height: 1.4; font-weight: 500; letter-spacing: -.015em; }
.err { position: relative; display: inline; white-space: nowrap; }
.err-t { position: relative; color: var(--ink2); padding: 0 2px; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 88% / 100% 40%; }
.err-t::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: var(--bad); border-radius: 2px; transform-origin: left; }
.fix { display: inline-block; margin-left: .3em; font-weight: 700; color: var(--olive-9); padding: 0 .14em; border-radius: 4px; background: linear-gradient(transparent 14%, var(--lime) 14% 90%, transparent 90%); }
.msg-tr .note { font-size: 15px; color: var(--ink2); }
.right { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--bg2); }
.right p { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.4; }
.say { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--card); color: var(--ink); cursor: pointer; font-size: 18px; transition: transform var(--t-micro) var(--ease), background-color var(--t-micro); flex: none; box-shadow: var(--shadow-s); }
.say:hover, .say.is-speaking { background: var(--primary); color: var(--on-primary); }
.say:active { transform: scale(.92); }
.say.is-speaking { animation: spk 900ms var(--ease-io) infinite alternate; }
@keyframes spk { to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent); } }

/* the correction plays in stages: m (marked), s (struck), f (fixed), n (teacher note) */
.js .lc .err-t { background-size: 0% 40%; transition: background-size 450ms var(--ease), color 250ms; }
.js .lc .err-t::after { transform: scaleX(0); transition: transform 260ms var(--ease); }
.js .lc .fix { opacity: 0; transform: translateY(-8px); max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: opacity 300ms var(--ease) 60ms, transform 300ms var(--ease) 60ms, max-width 320ms var(--ease), margin-left 320ms var(--ease); }
.js .lc .msg-tr { opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.js .lc.m .err-t { background-size: 100% 40%; }
.js .lc.s .err-t::after { transform: scaleX(1); }
.js .lc.s .err-t { color: color-mix(in srgb, var(--ink2) 70%, transparent); }
.js .lc.f .fix { opacity: 1; transform: none; max-width: 12em; margin-left: .3em; }
.js .lc.n .msg-tr { opacity: 1; transform: none; }
.js .lc.swap .msg-st, .js .lc.swap .msg-tr { opacity: 0; transition: opacity 180ms; }

.lc-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 18px 20px; }
.lc-chips button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink2); cursor: pointer; transition: color var(--t-ui) var(--ease); box-shadow: inset 0 0 0 1px var(--line); }
.lc-chips button:hover { color: var(--ink); }
.lc-chips button[aria-selected="true"] { color: #fff; box-shadow: none; }
.chip-ind { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--olive); transition: transform 380ms var(--ease), width 380ms var(--ease), height 380ms var(--ease); }
html:not(.js) .lc-chips button[aria-selected="true"] { background: var(--olive); }
.lc-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.lc-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); transform-origin: left; transform: scaleX(0); }
.lc-timer.run i { animation: tmr var(--dur, 5.5s) linear forwards; }
@keyframes tmr { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise var(--t-hero) var(--ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 90ms } .js .hero-copy > :nth-child(3) { animation-delay: 170ms }
  .js .hero-stage { animation: stageIn 1000ms var(--ease) 120ms both; }
  .js .lc { animation: riseT 900ms var(--ease) 260ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes riseT { from { opacity: 0; translate: 0 22px; } }
@keyframes stageIn { from { opacity: 0; transform: scale(.97); } }

/* ---------- GOALS: big doors ---------- */
.goals { padding-top: clamp(24px, 3vw, 40px); }
.goals .h2 { margin-bottom: clamp(28px, 4vw, 56px); max-width: 14em; }
.doors { position: relative; display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.4fr); column-gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.doors > button:nth-of-type(1) { grid-row: 1; } .doors > button:nth-of-type(2) { grid-row: 2; } .doors > button:nth-of-type(3) { grid-row: 3; }
.doors > button:nth-of-type(4) { grid-row: 4; } .doors > button:nth-of-type(5) { grid-row: 5; }
.door { grid-column: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 20px 8px 20px 24px; cursor: pointer; transition: background-color var(--t-micro); }
.door:first-of-type { border-top: 1px solid var(--line); }
.door-l { font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; line-height: 1.25; color: var(--ink2); transition: color var(--t-ui) var(--ease); }
.door-d { grid-column: 1; font-size: 15px; color: var(--ink2); margin-top: 3px; }
.door-x { grid-row: 1 / span 2; grid-column: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--ink2); transition: transform var(--t-ui) var(--ease), background-color var(--t-ui), color var(--t-ui); }
.door:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.door:hover .door-x { transform: translateX(3px); }
.door[aria-expanded="true"] .door-l { color: var(--ink); }
.door[aria-expanded="true"] .door-x { background: var(--primary); color: var(--on-primary); }
.door:active { transform: scale(.995); }
.door-line { position: absolute; left: 0; top: 0; width: 4px; height: 0; border-radius: 4px; background: linear-gradient(180deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); grid-column: 1; transition: transform 350ms var(--ease), height 350ms var(--ease); z-index: 1; }
.door-panel { grid-column: 2; grid-row: 1 / span 6; min-width: 0; }
.dp-in { background: var(--bg2); border-radius: 30px; padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 28px; }
.js .door-panel { opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s 300ms; }
.js .door-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease) 60ms, transform 300ms var(--ease) 60ms, visibility 0s; }
html:not(.js) .door-panel:not(.is-open) { display: none; }
.soon { grid-column: 1; grid-row: 6; padding: 18px 24px; font-size: 15px; color: var(--ink2); }
.dp-copy .h3 { margin-bottom: 18px; }
.pts { display: grid; gap: 10px; }
.pts li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; }
.pts li::before { content: ""; position: absolute; left: 0; top: .68em; width: 16px; height: 3px; border-radius: 1px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); }
.facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.facts dt { font-size: 14px; color: var(--ink2); }
.facts dd { font-size: 15px; color: var(--ink2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.facts dd b { font-size: 22px; color: var(--ink); font-weight: 700; }
.dp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 24px; }

/* artifacts: small product objects in place of stock photos */
.art { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow-s); font-size: 15px; line-height: 1.45; }
.art-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink2); margin-bottom: 12px; }
.art-h .tag-s, .art-h .chip-ok { margin-left: auto; }
.pr-ic { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--good); }
.chip-ok { font-size: 13px; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); padding: 3px 10px; border-radius: 999px; }
.pr-c { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--card-line); }
.pr-c .av, .trow .av { width: 30px; height: 30px; font-size: 13px; }
.pr-c b { display: block; font-size: 13px; color: var(--ink2); font-weight: 600; }
.band { display: grid; grid-template-columns: 84px 1fr 92px; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.band span { color: var(--ink2); }
.band i { position: relative; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.band i::before, .band i::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 8px; }
.band i::after { width: var(--to); background: var(--primary); opacity: .35; }
.band i::before { width: var(--from); background: var(--primary); z-index: 1; }
.band b { font-weight: 600; text-align: right; white-space: nowrap; }
.essay { font-size: 15px; line-height: 1.6; }
.essay mark { background: linear-gradient(transparent 52%, var(--hl) 52%); }
.margin-note, .ncom { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink2); }
.nrow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--card-line); font-size: 15px; }
.nrow span { color: var(--ink2); }
.trow { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
.lv-chip { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.tfoot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--card-line); font-size: 14px; color: var(--ink2); }

@media (max-width: 900px) {
  .doors { display: block; }
  .door { padding: 18px 4px 18px 0; }
  .door-line { display: none; }
  .door-x svg { transition: transform var(--t-ui) var(--ease); transform: rotate(90deg); }
  .door[aria-expanded="true"] .door-x svg { transform: rotate(-90deg); }
  .door:hover .door-x { transform: none; }
  .js .door-panel { display: grid; grid-template-rows: 0fr; opacity: 1; visibility: visible; transform: none; transition: grid-template-rows 320ms var(--ease); }
  .js .door-panel.is-open { grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease); }
  .door-panel > .dp-in { min-height: 0; overflow: hidden; }
  .door-panel.is-open > .dp-in { margin: 4px 0 14px; }
  .js .door-panel:not(.is-open) > .dp-in { padding-top: 0; padding-bottom: 0; }
  .dp-in { border-radius: 24px; gap: 20px; transition: padding 320ms var(--ease); }
  .soon { padding: 16px 0 0; }
}

/* ---------- ACT 2: the dark field ---------- */
.field {
  position: relative; background: var(--band); color: var(--band-ink);
  border-radius: var(--r) var(--r) 0 0; padding: var(--sec-peak) 0 calc(var(--sec) + var(--r));
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .field { animation: fieldIn linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes fieldIn { from { clip-path: inset(0 clamp(8px, 2vw, 24px) round var(--r) var(--r) 0 0); } to { clip-path: inset(0 0 round var(--r) var(--r) 0 0); } }
  }
}
.field .h2 { color: var(--band-ink); }
.field .lead, .field .meta { color: var(--band-ink2); }
.how .h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.story-left .h2 { font-size: clamp(32px, 3.6vw, 52px); margin-bottom: clamp(36px, 5vh, 64px); }
.how-h-m { display: none; }
.field { padding-top: clamp(56px, 6vw, 88px); }

/* desktop pinned story */
.story { position: relative; }
.story-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.story-trigs { margin-top: -100vh; }
.story-trigs i { display: block; height: 62vh; }
.story-trigs i:last-child { height: 100vh; }
.story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.story-text { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 28px; align-items: center; }
.rail { position: relative; display: grid; gap: 18px; justify-items: center; }
.rail::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; background: var(--band-line); }
.rail li { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--band); box-shadow: inset 0 0 0 2px var(--band-ink2); transition: background-color var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui) var(--spring); }
.rail li.is-done { background: var(--band-ink2); }
.rail li.is-on { background: var(--band-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--band-accent) 22%, transparent); transform: scale(1.15); }
.st-stack { display: grid; }
.st { grid-area: 1 / 1; }
.js .st { opacity: 0; transform: translateY(12px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); pointer-events: none; }
.js .st.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 80ms; }
.st-n { display: block; font-size: 15px; font-weight: 600; color: var(--band-accent); margin-bottom: 14px; }
.st h3, .dk h3 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.st p, .dk p { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--band-ink2); max-width: 24em; }

.win { background: var(--band-card); border: 1px solid var(--band-line); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--band-line); font-size: 14px; color: var(--band-ink2); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.win-bar span { margin-left: 10px; }
.win-body { position: relative; min-height: 400px; padding: 26px; }
.story .ws { position: absolute; inset: 26px; }
.js .story .ws { opacity: 0; transform: translateY(10px) scale(.99); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.js .story .ws.is-on { opacity: 1; transform: none; }

.ticket { background: var(--band-card2); border: 1px solid var(--band-line); border-radius: 18px; padding: 18px 20px; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.tk-id { color: var(--band-ink2); font-weight: 600; }
.tk-st { color: var(--on-band-accent); background: var(--band-accent); padding: 3px 11px; border-radius: 999px; font-weight: 600; font-size: 13px; }
.tk-title { font-size: 22px; font-weight: 600; margin: 12px 0 14px; letter-spacing: -.015em; }
.tk-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--band-ink2); }
.tk-meta .av { width: 28px; height: 28px; font-size: 12px; }
.cal { display: flex; gap: 16px; align-items: center; margin-top: 14px; padding: 14px 18px; border-radius: 16px; border: 1px dashed var(--band-line); }
.cal-t { font-size: 22px; font-weight: 700; color: var(--band-accent); }
.cal b { display: block; font-size: 16px; } .cal span { font-size: 14px; color: var(--band-ink2); }
.phr { display: grid; gap: 10px; }
.phr li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 13px 13px 18px; border-radius: 16px; background: var(--band-card2); border: 1px solid var(--band-line); font-size: 17px; }
.field .say { background: rgba(255,255,255,.08); color: var(--band-ink); box-shadow: none; }
.field .say:hover, .field .say.is-speaking { background: var(--band-accent); color: var(--on-band-accent); }
.chat { display: grid; gap: 12px; }
.cm { display: flex; align-items: flex-end; gap: 10px; }
.cm.me { justify-content: flex-end; }
.cm .av { width: 32px; height: 32px; font-size: 13px; }
.cm p { max-width: 78%; padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: var(--band-card2); font-size: 16px; line-height: 1.45; }
.cm.me p { border-radius: 18px 18px 6px 18px; background: var(--band-accent); color: var(--on-band-accent); }
.typing { display: inline-flex; gap: 4px; padding: 15px 16px !important; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: tp 1s var(--ease-io) infinite; }
.typing i:nth-child(2) { animation-delay: .15s } .typing i:nth-child(3) { animation-delay: .3s }
@keyframes tp { 50% { opacity: 1; transform: translateY(-3px); } }
.fbk { padding: 18px 20px; border-radius: 18px; background: var(--band-card2); border: 1px solid var(--band-line); }
.fbk-w { font-size: 17px; color: var(--band-ink2); }
.fbk-w s { text-decoration: none; background: linear-gradient(var(--bad), var(--bad)) no-repeat 0 56% / 100% 2px; }
.fbk-r { font-size: 22px; font-weight: 600; margin-top: 6px; }
.fbk-r mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--band-accent) 55%, transparent) 58%) no-repeat 0 0 / 100% 100%; padding: 0 2px; }
.todo { display: grid; gap: 10px; margin-top: 16px; }
.todo li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.chk { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--band-line); font-size: 16px; color: transparent; }
.chk svg { stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 0; }
.todo li.done .chk { background: var(--band-accent); box-shadow: none; color: var(--on-band-accent); }
.todo li.done { color: var(--band-ink2); }

/* step animations play when a state becomes live (.play) */
@media (prefers-reduced-motion: no-preference) {
  .ws.play .ticket { animation: pop 420ms var(--spring) both; }
  .ws.play .tk-st { animation: pop 380ms var(--spring) 260ms both; }
  .ws.play .cal { animation: slideIn 420ms var(--ease) 180ms both; }
  .ws.play .phr li { animation: rise 420ms var(--ease) both; }
  .ws.play .phr li:nth-child(2) { animation-delay: 80ms } .ws.play .phr li:nth-child(3) { animation-delay: 160ms } .ws.play .phr li:nth-child(4) { animation-delay: 240ms }
  .ws.play .cm { animation: bubble 380ms var(--spring) both; }
  .ws.play .cm:nth-child(2) { animation-delay: 650ms } .ws.play .cm:nth-child(3) { animation-delay: 1300ms } .ws.play .cm:nth-child(4) { animation-delay: 1950ms }
  .ws.play .fbk-w s { animation: strike 300ms var(--ease) 250ms both; }
  .ws.play .fbk-r { animation: rise 380ms var(--ease) 500ms both; }
  .ws.play .fbk-r mark { animation: sweep 450ms var(--ease) 800ms both; }
  .ws.play .todo li { animation: rise 380ms var(--ease) both; }
  .ws.play .todo li:nth-child(1) { animation-delay: 900ms } .ws.play .todo li:nth-child(2) { animation-delay: 980ms } .ws.play .todo li:nth-child(3) { animation-delay: 1060ms }
  .ws.play .todo li.done .chk svg { animation: tick 320ms var(--ease) 1350ms both; }
}
@keyframes pop { from { opacity: 0; transform: scale(.92); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(18px); } }
@keyframes bubble { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes strike { from { background-size: 0% 2px; } }
@keyframes sweep { from { background-size: 0% 100%; } }
@keyframes tick { from { stroke-dashoffset: 24; } }

/* mobile deck */
.deck-wrap { display: none; }
.deck { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 8px; scroll-padding: 0 var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
.deck::-webkit-scrollbar { display: none; }
.dk { scroll-snap-align: start; background: var(--band-card); border: 1px solid var(--band-line); border-radius: 24px; padding: 22px 18px 18px; display: flex; flex-direction: column; }
.dk h3 { font-size: 26px; }
.dk p { font-size: 16px; margin-top: 10px; }
.dk .win-sm { margin-top: 18px; background: var(--band); border-radius: 18px; box-shadow: none; flex: 1; }
.dk .win-body { min-height: 0; padding: 14px; }
.dk .tk-title { font-size: 18px; } .dk .phr li { font-size: 15px; padding: 9px 9px 9px 14px; } .dk .cm p { font-size: 14px; } .dk .fbk-r { font-size: 18px; }
.dk .phr li:nth-child(n+4) { display: none; }
.deck-prog { display: flex; gap: 6px; padding: 0 var(--pad); margin-bottom: 16px; }
.deck-prog i { flex: 1; height: 4px; border-radius: 4px; background: var(--band-line); transition: background-color var(--t-ui); }
.deck-prog i.is-on { background: var(--band-accent); }
@media (max-width: 980px) {
  .story { display: none; }
  .deck-wrap { display: block; }
  .how-h-m { display: block; }
}

/* ---------- LEVEL TEST (inside the dark field) ---------- */
.test-sec { padding-top: clamp(48px, 6vw, 96px); }
.test-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.test-head .lead { margin-top: 20px; }
.test-head .meta { margin-top: 18px; }
.test { position: relative; background: var(--band-card); border: 1px solid var(--band-line); border-radius: 30px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.ladder { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 22px; margin-bottom: 26px; }
.ladder::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 2px; background: var(--band-line); }
.ladder span { text-align: center; font-family: "Geist", sans-serif; font-size: 14px; font-weight: 700; color: var(--band-ink2); transition: color var(--t-ui); }
.ladder span.lit { color: var(--band-ink); }
.ladder-mk { position: absolute; top: 0; left: 12.5%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--band-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--band-accent) 20%, transparent); transform: translateX(var(--x, 0px)); transition: transform 420ms var(--spring); }
.t-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.t-count { font-size: 15px; color: var(--band-ink2); white-space: nowrap; }
.t-count b { color: var(--band-ink); }
.t-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--band-line); overflow: hidden; }
.t-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); transition: width 420ms var(--ease); }
.t-body { transition: opacity 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1); }
.t-body.is-leaving { opacity: 0; transform: translateX(-24px); }
.t-body.is-entering { opacity: 0; transform: translateX(24px); transition: none; }
.t-prompt { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.t-prompt .ctx { display: block; font-size: 14px; font-weight: 600; color: var(--band-accent); letter-spacing: 0; margin-bottom: 8px; }
.blank { display: inline-block; width: 3.2em; height: .9em; border-bottom: 3px solid var(--band-accent); vertical-align: baseline; margin: 0 .1em; }
.say-lg { width: auto; height: auto; display: inline-flex; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; margin-top: 16px; font-size: 15px; font-weight: 600; }
.say-lg svg { font-size: 20px; }
.say-lg[hidden] { display: none; }
.t-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px 10px 12px; border-radius: 16px; border: 1px solid var(--band-line); background: rgba(255,255,255,.03); text-align: left; font-size: 17px; cursor: pointer; transition: border-color var(--t-micro), background-color var(--t-micro), transform var(--t-micro) var(--ease), opacity var(--t-ui); }
.opt:hover { border-color: color-mix(in srgb, var(--band-accent) 60%, transparent); }
.opt:active { transform: scale(.98); }
.opt .k { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.07); font-family: "Geist", sans-serif; font-weight: 700; font-size: 14px; flex: none; transition: background-color var(--t-micro), color var(--t-micro); }
.opt.is-sel { background: var(--band-accent); color: var(--on-band-accent); border-color: var(--band-accent); }
.opt.is-sel .k { background: rgba(0,0,0,.12); }
.opt.is-right { background: color-mix(in srgb, var(--good) 22%, transparent); border-color: var(--good); color: var(--band-ink); }
.opt.is-right .k { background: var(--good); color: var(--on-band-accent); }
.opt.is-wrong { background: color-mix(in srgb, var(--bad) 18%, transparent); border-color: var(--bad); color: var(--band-ink); animation: shake 360ms var(--ease-io); }
.opt.is-wrong .k { background: var(--bad); color: var(--on-band-accent); }
.opt.is-dim { opacity: .4; }
.opt:disabled { cursor: default; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.t-fb { min-height: 28px; margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.t-fb svg { font-size: 20px; stroke-width: 2.4; }
.t-fb.good { color: var(--good); } .t-fb.bad { color: var(--bad); }
.t-fb .en { color: var(--band-ink); }
.t-res { text-align: left; }
.t-res-label { font-size: 15px; color: var(--band-ink2); }
.t-res-lvl { font-size: clamp(88px, 11vw, 140px); font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--band-accent); margin: 6px 0 12px; }
.t-res-txt { font-size: 18px; line-height: 1.5; max-width: 30em; }
.t-rec { margin-top: 24px; padding: 18px 20px; border-radius: 20px; background: var(--band-card2); border: 1px solid var(--band-line); }
.t-rec-label { font-size: 14px; color: var(--band-ink2); }
.t-rec-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.t-rec-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.t-rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--band-ink2); margin-top: 2px; }
.t-rec-meta b { color: var(--band-ink); }
.t-note { font-size: 15px; color: var(--band-ink2); margin-top: 16px; }
.t-res.is-in > * { animation: rise 500ms var(--ease) both; }
.t-res.is-in > :nth-child(2) { animation: lvlIn 600ms var(--spring) 80ms both; }
.t-res.is-in > :nth-child(3) { animation-delay: 160ms } .t-res.is-in > :nth-child(4) { animation-delay: 240ms } .t-res.is-in > :nth-child(5), .t-res.is-in > :nth-child(6) { animation-delay: 320ms }
@keyframes lvlIn { from { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .t-res.is-in > * { animation: none !important; } }


/* ===== 04-sections-groups-trainer-faq-final-footer.css ===== */
/* ---------- ACT 3 ---------- */
.act3 { position: relative; z-index: 1; background: var(--bg); border-radius: var(--r) var(--r) 0 0; margin-top: calc(-1 * var(--r)); padding-bottom: var(--r); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.sec-note { font-size: 15px; color: var(--ink2); max-width: 26em; }

/* groups */
.feat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3.5vw, 56px); align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: 30px; background: var(--bg2); text-decoration: none; transition: transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-s); }
.feat:active { transform: scale(.99); }
.feat-date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; max-width: 220px; }
.feat-date > .num:first-child { font-size: clamp(72px, 8vw, 112px); font-weight: 800; line-height: .9; letter-spacing: -.06em; }
.feat-m { font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--ink2); }
.feat-date .tag-s { flex-basis: 100%; width: max-content; flex: none; margin-top: 10px; }
.feat-name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 750; letter-spacing: -.02em; }
.feat-meta { font-size: 16px; color: var(--ink2); margin-top: 4px; }
.feat .seats { margin-top: 18px; max-width: 360px; }
.feat-left { font-size: 15px; color: var(--ink2); margin-top: 8px; }
.feat-left b { color: var(--ink); }
.feat-end { display: grid; justify-items: end; gap: 14px; text-align: right; }
.feat-price b { display: block; font-size: clamp(28px, 2.6vw, 36px); font-weight: 750; }
.feat-price span { font-size: 15px; color: var(--ink2); }
.seats { display: flex; gap: 5px; }
.seats i { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); transition: background-color 300ms var(--ease); }
.seats i.on { background: var(--primary); }
html:not(.js) .seats i:nth-child(-n+5) { background: var(--primary); }
.sched { margin-top: 12px; }
.sched a { display: grid; grid-template-columns: minmax(0, 1.25fr) 150px minmax(0, 1.5fr) 150px 150px 28px; gap: 20px; align-items: center; min-height: 78px; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; border-radius: 14px; transition: background-color var(--t-micro); }
.sched li:first-child a { border-top: 0; }
.sched a:hover { background: var(--bg2); }
.sched a:hover .sc-x { transform: translateX(4px); color: var(--ink); }
.sc-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.sc-date { display: flex; align-items: center; gap: 8px; } .sc-date b { font-size: 20px; }
.sc-meta, .sc-seats, .sc-price { font-size: 15px; color: var(--ink2); }
.sc-seats b, .sc-price b { color: var(--ink); }
.sc-x { font-size: 20px; color: var(--ink2); transition: transform var(--t-micro) var(--ease); }

/* trainer */
.trainer .kicker { margin-bottom: 20px; }
.tr-quote { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.15; font-weight: 500; letter-spacing: -.03em; max-width: 21em; text-wrap: balance; }
.tr-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4.5vw, 64px); align-items: start; }
.tr-photo { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--duo); }
.tr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.15) brightness(1.05); transition: filter 600ms var(--ease); }
.tr-photo::after { content: ""; position: absolute; inset: 0; background: var(--duo); mix-blend-mode: screen; opacity: .82; transition: opacity 600ms var(--ease); }
.tr-photo:hover img, .tr-photo.in img { filter: none; }
.tr-photo:hover::after, .tr-photo.in::after { opacity: 0; }
.tr-name { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.tr-role { font-size: 16px; color: var(--ink2); margin-top: 2px; }
.tr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tr-facts dt { font-size: clamp(34px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.tr-facts dd { font-size: 15px; color: var(--ink2); margin-top: 8px; line-height: 1.4; }
.tr-bio { font-size: 16px; line-height: 1.65; color: var(--ink2); max-width: 40em; }
.tr-main .link-u { margin-top: 14px; }

/* for whom */
.whom { background: var(--bg2); }
.whom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.wh { display: flex; flex-direction: column; padding: 0 clamp(20px, 3.5vw, 56px); }
.wh:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.wh:last-child { padding-right: 0; }
.wh-txt { font-size: 17px; line-height: 1.6; color: var(--ink2); margin-top: 14px; max-width: 32em; }
.wh .art { margin-top: 26px; max-width: 440px; }
.chips-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips-l li { font-size: 15px; padding: 7px 14px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.wh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: auto; padding-top: 28px; }
.wh-price { font-size: 15px; color: var(--ink2); } .wh-price b { font-size: 20px; color: var(--ink); }

/* faq */
.faq-in { max-width: 920px; }
.faq .h2 { margin-bottom: 28px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--bg2); transition: transform 200ms var(--ease), background-color var(--t-micro); }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: var(--ink); }
.acc summary i::after { transform: rotate(90deg); }
.acc summary:hover i { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.acc details[open] summary i { transform: rotate(45deg); }
.acc-b p { padding: 0 56px 22px 0; font-size: 17px; line-height: 1.6; color: var(--ink2); }
.acc details::details-content { block-size: 0; overflow: hidden; transition: block-size 280ms var(--ease), content-visibility 280ms allow-discrete; }
.acc details[open]::details-content { block-size: auto; }

/* ---------- FINAL: the one brand field ---------- */
.final { position: relative; z-index: 2; background: var(--final); color: var(--final-ink); border-radius: var(--r) var(--r) 0 0; margin-top: calc(-1 * var(--r)); padding: var(--sec-peak) 0 calc(var(--sec-peak) + var(--r)); overflow: hidden; }
.final-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; }
.final-txt { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--final-ink2); max-width: 30em; margin-top: 28px; }
.final-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 40px; }
.final-link { color: var(--final-ink); }
.final-card { background: var(--card); color: var(--ink); border-radius: 24px; padding: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); rotate: 3deg; display: grid; gap: 14px; }
.fc-row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; font-size: 17px; font-weight: 500; line-height: 1.4; }
.fc-row s { color: var(--ink2); text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.fc-row mark { color: var(--olive-9); font-weight: 700; padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, var(--lime) 14% 90%, transparent 90%); }
.fc-t p { padding: 10px 14px; border-radius: 14px; background: var(--bg2); font-size: 16px; }

/* ---------- footer ---------- */
.ftr { position: relative; z-index: 3; background: var(--foot); color: #e9eae5; border-radius: var(--r) var(--r) 0 0; margin-top: calc(-1 * var(--r)); padding: 72px 0 calc(28px + env(safe-area-inset-bottom)); }
.ftr .brand img { filter: brightness(0) invert(1); }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 32px; }
.ftr-tag { font-size: 15px; color: #A3AA94; margin-top: 12px; max-width: 18em; }
.ftr ul { display: grid; gap: 10px; align-content: start; }
.ftr ul a { font-size: 15px; color: #CDD2C2; text-decoration: none; }
.ftr ul a:hover { color: #fff; }
.ftr-bot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 22px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%) no-repeat 50% 0 / calc(100% - 2 * var(--pad)) 2px; font-size: 14px; color: #A3AA94; }


/* ---------- mobile sticky bar ---------- */
.mbar { display: none; }
@media (max-width: 980px) {
  .mbar { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 6px; border-radius: 999px; background: var(--hdr-bg); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); transform: translateY(140%); transition: transform 400ms var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar-test { flex: 1; min-height: 50px; gap: 8px; white-space: nowrap; padding: 10px 16px; }
  .mbar-t { font-size: 13px; font-weight: 500; opacity: .75; }
  @media (max-width: 520px) { .mbar-t { display: none; } }
  .mbar-reg { padding: 12px 16px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
}

/* ---------- reveal on scroll (content is visible without support) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rv linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    @keyframes rv { from { opacity: 0; transform: translateY(26px); } }
  }
}


/* ===== 05-responsive.css ===== */
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sched a { grid-template-columns: minmax(0, 1.3fr) 140px minmax(0, 1.4fr) 130px 28px; }
  .sc-seats { display: none; }
}
@media (max-width: 980px) {
  .hero-grid, .test-grid, .final-in { grid-template-columns: 1fr; }
  .hero { padding-top: 96px; }
  .final-card { display: none; }
  .whom-grid { grid-template-columns: 1fr; }
  .wh, .wh:first-child, .wh:last-child { padding: 0; border: 0; }
  .wh + .wh { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
  .tr-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .feat { grid-template-columns: auto minmax(0, 1fr); }
  .feat-end { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; }
  .feat-end .btn { justify-self: end; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --r: 26px; }
  .hero { padding-bottom: 40px; }
  .hero-sub { margin-top: 20px; }
  .hero-ctas { margin-top: 26px; flex-direction: column; align-items: stretch; gap: 6px; }
  .hero-ctas .link-u { align-self: center; }
  .btn-xl { min-height: 64px; padding-left: 24px; font-size: 17px; }
  .hero-stage { margin: 0 calc(-1 * var(--pad) + 10px); padding: 18px 10px; border-radius: 28px; }
  .lc { border-radius: 22px; }
  .lc-bar { padding: 12px 14px; }
  .lc-label { display: none; }
  .lc-body { padding: 18px 16px 4px; gap: 14px; }
  .msg { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .av { width: 34px; height: 34px; font-size: 14px; }
  .lc-chips { padding: 12px 14px 16px; gap: 5px; }
  .lc-chips button { padding: 7px 11px; font-size: 13px; }
  .err { white-space: normal; }
  .t-opts { grid-template-columns: 1fr; }
  .opt { min-height: 54px; }
  .test { border-radius: 24px; }
  .feat { grid-template-columns: 1fr; gap: 14px; border-radius: 24px; }
  .feat-date { max-width: none; }
  .feat-end { grid-template-columns: 1fr; }
  .feat-end .btn { justify-self: stretch; }
  .sched a { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "n d x" "m p x"; gap: 4px 12px; padding: 14px 4px; min-height: 0; }
  .sc-name { grid-area: n; font-size: 17px; } .sc-date { grid-area: d; justify-self: end; } .sc-date b { font-size: 17px; }
  .sc-meta { grid-area: m; font-size: 14px; } .sc-price { grid-area: p; justify-self: end; font-size: 14px; white-space: nowrap; } .sc-x { grid-area: x; }
  .sc-date .tag-s { display: none; }
  .tr-grid { grid-template-columns: 1fr; }
  .tr-photo { max-width: 240px; }
  .tr-facts { gap: 12px; }
  .tr-facts dt { font-size: 30px; }
  .tr-facts dd { font-size: 14px; }
  .acc-b p { padding-right: 0; }
  .ftr { padding-top: 56px; }
  .final-ctas { flex-direction: column; align-items: stretch; }
  .final-ctas .link-u { align-self: center; }
}
@media (max-width: 640px) {
  :root { --sec: 56px; --sec-peak: 64px; }
  .door-panel .pr-c.me, .door-panel .band:nth-of-type(n+3), .door-panel .margin-note, .door-panel .nrow:nth-of-type(n+3), .door-panel .trow:nth-of-type(n+3) { display: none; }
  .dp-in .h3 { font-size: 21px; }
  .pts li { font-size: 15.5px; }
  .facts { margin-top: 18px; padding-top: 16px; }
  .dp-ctas { margin-top: 18px; }
  .tr-grid { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
  .tr-photo { max-width: none; border-radius: 20px; }
  .tr-main { display: contents; }
  .tr-name, .tr-role { grid-column: 2; }
  .tr-name { align-self: end; font-size: 22px; } .tr-role { align-self: start; margin-top: -10px; font-size: 14px; }
  .tr-photo { grid-row: 1 / span 2; }
  .tr-facts, .tr-bio, .tr-main .link-u { grid-column: 1 / -1; }
  .tr-facts { margin: 6px 0 0; }
  .tr-bio { display: none; }
  .chips-l { display: none; }
  .wh .art { display: none; } /* the same artifacts sit in the goal doors on mobile */
  .wh-ctas { padding-top: 20px; }
  .wh + .wh { margin-top: 36px; padding-top: 36px; }
  .ftr-grid { gap: 28px 20px; }
  .ftr { padding-top: 44px; }
  .ftr-bot { margin-top: 32px; }
  .hero-stage { padding: 14px 8px; }
  .goals .h2 { margin-bottom: 20px; }
}
@media (max-width: 360px) { .ftr-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .tr-facts { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .tr-facts div { display: flex; align-items: baseline; gap: 12px; }
  .tr-facts dt { font-size: 26px; min-width: 96px; }
  .tr-facts dd { margin: 0; }
}
@media (max-width: 380px) {
  .sc-name { font-size: 15px; }
  .mbar-t { display: none; }
  .mbar-reg { padding: 12px 8px; font-size: 14px; }
  .mbar-test { font-size: 15px; padding: 10px 12px; min-width: 0; }
}
@media (max-width: 360px) {
  .opt { font-size: 16px; }
}


/* ===== 06-motion-logo-bar.css ===== */
/* =====================================================================
   v3: logo motif + motion layer. Pointer effects only on fine pointers,
   transform/opacity only, everything readable without JS.
   ===================================================================== */

/* the logo bar: olive segment + rust segment */
.ftr-mark { width: 64px; height: 6px; border-radius: 1px; background: linear-gradient(90deg, var(--olive-3) 0 52%, var(--rust-4) 52% 100%); }

/* header: active section gets the bar (scroll spy) */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease); }
.nav a.is-active { color: var(--ink); }
.hdr[data-tone="dark"] .nav a.is-active { color: #fff; }
.nav a.is-active::after { transform: scaleX(1); }

/* kinetic headings: words rise from a mask, the key word gets the logo bar */
.split .w { display: inline-block; position: relative; overflow: clip; vertical-align: top; padding: .1em 0 .2em; margin: -.1em 0 -.2em; }
.split .w > span { display: inline-block; }
.split .kw::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: max(3px, .075em); border-radius: 1px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); transform: scaleX(0); transform-origin: left; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .split .w > span { transform: translateY(108%); opacity: .2; }
  .js .split.in .w > span { transform: none; opacity: 1; transition: transform 640ms cubic-bezier(.16,1,.3,1) calc(var(--i) * 45ms), opacity 400ms var(--ease) calc(var(--i) * 45ms); }
  .js .split.in .kw::after { transform: scaleX(1); transition: transform 520ms cubic-bezier(.16,1,.3,1) calc(var(--n) * 45ms + 300ms); }
}
@media (prefers-reduced-motion: reduce) {
  .js .split .w > span { opacity: 0; }
  .js .split.in .w > span { opacity: 1; transition: opacity 200ms linear; }
  .split .kw::after { transform: scaleX(1); }
}

/* cursor spotlight (Linear-style): warm rust on light, lime on dark */
@media (hover: hover) and (pointer: fine) {
  .spot { position: relative; isolation: isolate; }
  .spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 180ms var(--ease);
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(147,90,35,.11), transparent 70%); }
  .field .spot::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(215,242,92,.10), transparent 70%); }
  .spot:hover::before { opacity: 1; }
}

/* depth tilt on the hero card and the trainer photo */
.lc, .tr-photo { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tilting { will-change: transform; }

/* lens over the learner's sentence: shows the corrected sentence under the cursor */
.say-wrap { position: relative; }
.lens-l { position: absolute; inset: -10px -12px; padding: 10px 12px; margin: 0; background: var(--card); pointer-events: none;
  transform-origin: var(--lx, 50%) var(--ly, 50%); transform: scale(1.45);
  clip-path: circle(calc(var(--lr, 0px) / 1.45) at var(--lx, 50%) var(--ly, 50%)); }
.lens-l .err-t { color: var(--rust); }
.lens-l b { font-weight: 700; color: var(--olive-9); padding: 0 .14em; border-radius: 4px; background: linear-gradient(transparent 14%, var(--lime) 14% 90%, transparent 90%); }
.lens-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; translate: var(--rxp, 0px) var(--ryp, 0px); opacity: 0; transition: opacity 200ms var(--ease); }
.lc.lensing .lens-ring { opacity: 1; }
.lens-ring::before { content: ""; position: absolute; left: calc(-1 * var(--lr, 0px)); top: calc(-1 * var(--lr, 0px)); width: calc(2 * var(--lr, 0px)); height: calc(2 * var(--lr, 0px)); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--rust), 0 8px 24px -8px rgba(26,31,19,.35); }


/* magnetic primary buttons (desktop) */
.mag { translate: var(--tx, 0px) var(--ty, 0px); transition: translate 260ms var(--ease), transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), background-color var(--t-ui) var(--ease); }
.mag.pulling { transition: translate 60ms linear, transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }

/* the dark field: static grain, a rust glow that drifts with scroll, the logo bar on the lesson rail */
.field { overflow: clip; background-color: var(--band);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.field > * { position: relative; z-index: 1; }
.field > .field-glow { position: absolute; z-index: 0; left: 50%; top: -12vh; width: min(1100px, 92vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(227,149,79,.20), rgba(227,149,79,.06) 55%, transparent 72%); }
.field > .field-glow.g2 { left: -28%; top: 52%; width: min(900px, 80vw); background: radial-gradient(closest-side, rgba(201,210,179,.10), transparent 70%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .field { view-timeline: --field block; animation-range: entry 0% entry 80%; }
    .field > .field-glow { animation: glowDrift linear both; animation-timeline: --field; animation-range: entry 0% exit 100%; }
    @keyframes glowDrift { from { translate: 0 0; } to { translate: -12vw 70vh; } }
    .field > .field-glow.g2 { animation-name: glowDrift2; }
    @keyframes glowDrift2 { from { translate: 0 0; } to { translate: 14vw -40vh; } }
  }
}
.rail::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; transform-origin: top; transform: scaleY(var(--rp, 0));
  background: linear-gradient(180deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); }
.rail li { z-index: 1; }
@supports (animation-timeline: view()) {
  .story { view-timeline: --story block; }
  .rail::after { animation: railFill linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
  @keyframes railFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* level test that answers back: lime sweep when right, rust when wrong */
.opt.is-right { background: linear-gradient(90deg, rgba(215,242,92,.24), rgba(215,242,92,.24)) no-repeat 0 0 / 100% 100%, rgba(255,255,255,.03); border-color: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .opt.is-right { animation: sweepIn 260ms var(--ease) both; }
  @keyframes sweepIn { from { background-size: 0% 100%, auto; } }
  .opt.is-sel { animation: press 180ms var(--spring); }
  @keyframes press { 50% { transform: scale(.97); } }
}
.opt.is-wrong { background: rgba(227,149,79,.12); border-color: var(--rust-4); box-shadow: inset 0 -3px 0 var(--rust-4); }
::view-transition-group(rs-test) { animation-duration: 450ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* final block: olive with a lime button */
.final .link-u { color: #fff; }
.final-card { --good: #4A6A16; --bad: var(--rust); }

@media not ((hover: hover) and (pointer: fine)) { .lens-l, .lens-ring { display: none; } }

/* ===== 07-pages.css ===== */
/* ---------- v3 inner pages (course, companies, register, thank-you, 404) ---------- */
/* Same tokens, same three acts as the homepage. New components: c-hero, c-facts, outs, roles, pre, pair, weeks rail,
   assessment bar, steps, rows, first-box, form fields. Shared components (feat, trainer, acc, final, ftr) come from 04. */

/* logo bar as a small standalone mark (prereqs, dividers) */
.lbar { display: block; width: 40px; height: 5px; border-radius: 1px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); }

/* footer: column heads and the coming-soon courses */
.ftr-col { display: grid; align-content: start; gap: 14px; }
.ftr-h { font-size: 13px; font-weight: 600; color: #8E9682; letter-spacing: .01em; }
.ftr-more { opacity: .8; }
.ftr-soon { font-size: 12px; color: #8E9682; margin-left: 4px; }

/* ---------- course hero ---------- */
.c-hero { padding: clamp(112px, 11vw, 148px) 0 0; }
.c-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.c-copy { min-width: 0; }
.c-back { font-size: 15px; color: var(--ink2); padding: 6px 0; margin-bottom: 18px; }
.c-back svg { font-size: 17px; transition: transform var(--t-micro) var(--ease); }
.c-back:hover { color: var(--ink); } .c-back:hover svg { transform: translateX(-3px); }
.c-status { margin-bottom: 14px; }
.h-course { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -.045em; max-width: 12em; overflow-wrap: anywhere; hyphens: auto; }
.c-lede { margin-top: 24px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--ink2); max-width: 32em; }
.c-copy .hero-ctas { margin-top: 32px; }
.c-copy .hero-ctas .link-u svg:first-child { font-size: 18px; }
.c-stage { padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 44px); }
.c-art { max-width: 460px; margin: 0 auto; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.c-art .art { box-shadow: var(--shadow); font-size: 16px; padding: 20px 22px; border-radius: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .js .c-hero .c-copy > *, .js .c-stage { animation: rise var(--t-hero) var(--ease) both; }
  .js .c-hero .c-copy > :nth-child(2) { animation-delay: 60ms } .js .c-hero .c-copy > :nth-child(3) { animation-delay: 120ms }
  .js .c-hero .c-copy > :nth-child(4) { animation-delay: 180ms } .js .c-hero .c-copy > :nth-child(5) { animation-delay: 240ms }
  .js .c-stage { animation-delay: 200ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
}

/* facts strip: big values, the logo bar on top of each */
.c-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.c-facts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.c-facts > div { position: relative; padding: 26px 22px 24px 0; min-width: 0; }
.c-facts > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.c-facts > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); }
.c-facts > div + div::before { left: 22px; }
.c-facts dt { font-size: 14px; color: var(--ink2); }
.c-facts dd { display: grid; gap: 4px; margin-top: 8px; }
.c-facts dd b { font-size: clamp(22px, 2.1vw, 30px); font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }
.c-facts dd span { font-size: 15px; color: var(--ink2); line-height: 1.4; }

/* ---------- outcomes: sticky heading left, editorial rows right ---------- */
.c-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.c-aside { position: sticky; top: 120px; }
.outs { display: grid; }
.out { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px 28px; padding: 26px 18px; border-bottom: 1px solid var(--line); border-radius: 18px; }
.out:first-child { border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; }
.out h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.out .pts li { font-size: 16px; }

/* ---------- roles: three columns of chips ---------- */
.c-roles .h2 { margin-bottom: clamp(28px, 3.5vw, 48px); }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.role { padding: 4px clamp(18px, 2.4vw, 36px) 8px; border-left: 1px solid var(--line); border-radius: 0 18px 18px 0; }
.role:first-child { padding-left: 0; border-left: 0; }
.role h3 { font-size: 18px; font-weight: 650; margin-bottom: 14px; }
.role .chips-l { margin-top: 0; }
.c-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: clamp(28px, 3vw, 44px); padding: 18px 22px; border-radius: 20px; background: var(--bg2); font-size: 16px; color: var(--ink2); }
.c-note > svg { font-size: 22px; color: var(--olive); }
.c-note span { flex: 1 1 24em; }

/* ---------- prerequisites ---------- */
.c-pre { padding-top: 0; }
.c-pre .h2s { margin-bottom: 26px; }
.pre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pre .lbar { margin-bottom: 16px; }
.pre dt { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pre dd { font-size: 15px; color: var(--ink2); margin-top: 6px; line-height: 1.5; }

/* ---------- whom / what you will work on ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pair-col { padding: 0 clamp(20px, 3.5vw, 56px); }
.pair-col:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.pair-col:last-child { padding-right: 0; }
.pair .h2s { margin-bottom: 22px; }
.pts-lg { gap: 14px; }
.pts-lg li { font-size: 18px; line-height: 1.5; }

/* ---------- coming soon: join the first group ---------- */
.c-first { padding-top: 0; }
.first-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3.4vw, 44px); border-radius: 30px; background: var(--bg2); }
.first-box > div { flex: 1 1 26em; }
.first-txt { margin-top: 10px; font-size: 17px; color: var(--ink2); max-width: 36em; }

/* ---------- dark field: syllabus rail + assessment ---------- */
.c-syl, .c-steps { padding: 0; }
.syl-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.syl-main .lead { color: var(--band-ink2); margin-top: 18px; }
.weeks { position: relative; margin-top: 36px; display: grid; }
.weeks::before, .weeks::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; }
.weeks::before { background: var(--band-line); }
.weeks::after { background: linear-gradient(180deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); transform-origin: top; transform: scaleY(1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .weeks { view-timeline: --weeks block; }
    .weeks::after { animation: railFill linear both; animation-timeline: --weeks; animation-range: entry 40% cover 70%; }
  }
}
.weeks li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px 0 16px 36px; border-bottom: 1px solid var(--band-line); }
.weeks li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--band); box-shadow: inset 0 0 0 2px var(--olive-3); z-index: 1; }
.wk { font-size: 15px; color: var(--band-ink2); font-weight: 600; }
.wk-t { font-size: 18px; line-height: 1.4; }
.syl-pdf { margin-top: 22px; color: var(--band-ink); }
.syl-pdf svg:first-child { font-size: 20px; }
.syl-side { padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: var(--band-card); border: 1px solid var(--band-line); }
.syl-side .h3 { font-size: clamp(20px, 1.8vw, 24px); }
.abar { display: flex; gap: 4px; height: 44px; margin: 22px 0 18px; }
.abar-s { display: grid; place-items: center; min-width: 0; border-radius: 8px; font-family: "Geist", sans-serif; font-size: 13px; font-weight: 700; color: var(--olive-9); }
.s0 { background: var(--olive-3); } .s1 { background: #A9B78A; } .s2 { background: var(--rust-4); } .s3 { background: var(--lime); }
.alegend { display: grid; gap: 10px; }
.alegend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; color: var(--band-ink2); }
.alegend b { color: var(--band-ink); }
.dot { width: 12px; height: 12px; border-radius: 3px; }
.a-pass { margin-top: 16px; font-size: 14px; color: var(--band-ink2); }
.a-cert { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--band-line); font-size: 16px; line-height: 1.5; }
.a-cert svg { font-size: 24px; color: var(--lime); margin-top: 2px; }
.a-sup-t { margin-top: 26px; margin-bottom: 14px; }
.syl-side .pts li { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .js .abar-s { transform-origin: left; animation: barIn 700ms var(--ease) both; animation-delay: calc(var(--k, 0) * 90ms); }
  @keyframes barIn { from { transform: scaleX(0); opacity: 0; } }
  @supports (animation-timeline: view()) { .js .abar-s { animation-timeline: view(); animation-range: entry 20% entry 70%; animation-delay: 0s; } }
}

/* ---------- steps: inline, big numerals, no boxes ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); margin-top: clamp(28px, 3.5vw, 48px); counter-reset: s; }
.steps li { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.field .steps li { border-top-color: var(--band-line); }
.steps li::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); }
.steps-n { display: block; font-size: clamp(44px, 4.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--primary); }
.field .steps-n { color: var(--lime); }
.steps h3 { margin-top: 14px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; }
.steps p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink2); }
.field .steps p { color: var(--band-ink2); }
.c-steps-l .steps { --cols: 3; }

/* ---------- related courses: rows ---------- */
.c-related .h2s { margin-bottom: 18px; }
.rows a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 150px 28px; gap: 20px; align-items: center; min-height: 72px; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; border-radius: 16px; transition: background-color var(--t-ui) var(--ease); }
.rows li:first-child a { border-top: 1px solid var(--line); }
.rows a:hover { background: var(--bg2); }
.rows a:hover .rw-x { transform: translateX(4px); color: var(--ink); }
.rw-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rw-t { font-size: 15px; color: var(--ink2); }
.rw-p { text-align: right; } .rw-p b { font-size: 17px; }
.rw-x { font-size: 20px; color: var(--ink2); transition: transform var(--t-micro) var(--ease); }
.c-cross { margin-top: 26px; font-size: 16px; color: var(--ink2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* course art extras */
.mail-l { font-size: 14px; color: var(--ink2); padding-bottom: 8px; border-bottom: 1px solid var(--card-line); }
.mail-l b { font-weight: 600; margin-right: 8px; }
.mail-b { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.mail-b mark { background: linear-gradient(transparent 52%, var(--hl) 52%); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .c-facts-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-facts-5 > div:nth-child(4) { border-left: 0; padding-left: 0; } .c-facts-5 > div:nth-child(4)::before { left: 0; }
  .c-facts-5 > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .c-hero-grid, .c-split, .syl-grid { grid-template-columns: 1fr; }
  .c-hero { padding-top: 96px; }
  .c-aside { position: static; }
  .roles { grid-template-columns: 1fr; }
  .role, .role:first-child { padding: 0 0 22px; border-left: 0; }
  .role + .role { padding-top: 22px; border-top: 1px solid var(--line); }
  .pre { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr; }
  .pair-col, .pair-col:first-child, .pair-col:last-child { padding: 0; border: 0; }
  .pair-col + .pair-col { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .rows a { grid-template-columns: minmax(0, 1fr) auto 24px; }
  .rw-t { display: none; }
}
@media (max-width: 640px) {
  .c-hero { padding-top: 88px; }
  .h-course { font-size: clamp(34px, 10.5vw, 48px); }
  .c-lede { margin-top: 18px; font-size: 17px; }
  .c-copy .hero-ctas { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 24px; }
  .c-copy .hero-ctas .link-u { align-self: center; }
  .c-stage { margin: 0 calc(-1 * var(--pad) + 10px); padding: 16px 10px; border-radius: 28px; }
  .c-art .art { font-size: 15px; padding: 16px; }
  .c-facts, .c-facts-5 { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .c-facts > div, .c-facts > div + div { padding: 18px 12px 18px 0; border-left: 0; }
  .c-facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .c-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .c-facts > div::before, .c-facts > div + div::before { left: 0; }
  .c-facts > div:nth-child(even)::before { left: 14px; }
  .c-facts dd b { font-size: 20px; }
  .c-facts dd span { font-size: 14px; }
  .out { grid-template-columns: 1fr; padding: 20px 4px; }
  .pre { grid-template-columns: 1fr; gap: 20px; }
  .weeks li { grid-template-columns: 1fr; gap: 2px; padding-left: 32px; }
  .wk-t { font-size: 17px; }
  .syl-side { border-radius: 22px; }
  .rows a { padding: 14px 4px; gap: 12px; }
  .rw-name { font-size: 16px; }
  .first-box { border-radius: 24px; }
  .first-box .btn { width: 100%; }
}
@media (max-width: 640px) {
  /* the homepage hides .chips-l on phones (its artifacts repeat the goal doors); the roles section needs them */
  .role .chips-l { display: flex; }
  .role .chips-l li { font-size: 14px; padding: 6px 12px; }
  /* steps become compact rows: numeral beside the title */
  .steps { gap: 0; margin-top: 22px; }
  .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; }
  .steps-n { grid-row: 1 / span 2; font-size: 38px; }
  .steps h3 { margin-top: 2px; font-size: 18px; }
  .steps p { margin-top: 4px; font-size: 15px; }
}

/* footer on phones: drop the coming-soon list (each has its own page) and tighten the columns */
@media (max-width: 640px) {
  .ftr-more { display: none; }
  .ftr ul { gap: 8px; }
  .ftr ul a { font-size: 14px; }
  .ftr-grid { gap: 22px 18px; }
}

/* ===== 08-courses.css ===== */
/* 08: course and companies pages (phase 2A). Long Georgian words never break mid-word: the template sets --lw
   (longest word, in characters) and the type scales down so that word fits its column. */
.c-copy { container-type: inline-size; }
.h-course { overflow-wrap: normal; hyphens: manual; font-size: min(clamp(40px, 5.6vw, 84px), calc(100cqi / (var(--lw, 10) * .66))); }
.c-facts > div { container-type: inline-size; }
.c-facts dd b { overflow-wrap: normal; font-size: min(clamp(22px, 2.1vw, 30px), calc(100cqi / (var(--lw, 8) * .64))); }
.c-facts dd .tag { justify-self: start; }

/* High school: parents block (the parent decides; one calm box, olive check marks, one button). */
.c-parents { padding-top: 0; }
.par-box { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; padding: clamp(24px, 3.6vw, 48px); border-radius: 30px; background: var(--bg2); }
.par-txt { margin-top: 12px; font-size: 18px; line-height: 1.6; color: var(--ink2); max-width: 34em; }
.par-pts { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.par-pts li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.par-pts svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--olive); stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .par-box { grid-template-columns: 1fr; border-radius: 24px; }
  .par-box .btn { width: 100%; }
}

/* For companies */
.co-price { display: grid; gap: 4px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 30em; }
.co-price b { font-size: clamp(20px, 1.8vw, 26px); font-weight: 750; letter-spacing: -.02em; }
.co-price span { font-size: 15px; color: var(--ink2); line-height: 1.45; }
.co-pre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .co-pre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .co-pre { grid-template-columns: 1fr; } }
.co-steps .steps { --cols: 4; }
@media (max-width: 960px) { .co-steps .steps { --cols: 2; } }

/* Phones: outcome groups and role groups fold (course.js adds .is-fold; without JS everything stays open). */
button.fold { all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button.fold:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
button.fold i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bg2); }
button.fold i::before, button.fold i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; background: currentColor; border-radius: 2px; transition: rotate var(--t-ui, 250ms) var(--ease, ease); }
button.fold i::after { rotate: 90deg; }
.is-open > h3 button.fold i::after { rotate: 0deg; }
.is-fold:not(.is-open) > ul { display: none; }
.is-fold .pts, .is-fold .chips-l { margin-top: 12px; }
@media (max-width: 760px) {
  .out.is-fold { padding: 18px 0; gap: 0; }
  .role.is-fold { padding: 16px 0; }
  .role.is-fold h3 { margin-bottom: 0; }
}
@media (max-width: 760px) {
  /* course pages are reference pages: tighter rhythm than the homepage on phones */
  .pg-course .sec { padding: calc(var(--sec) * .72) 0; }
  .pg-course .pre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .pg-course .pre dt { font-size: 16px; }
  .pg-course .pre dd { font-size: 14px; }
  .pg-course .tr-quote { font-size: 24px; }
  .pg-course .weeks li { padding-block: 10px; }
}
.field button.fold i { background: var(--band-card2); }
@media (max-width: 760px) { .fold-m.is-fold { padding-top: 6px; } .fold-m.is-fold .a-sup-t { margin-top: 18px; } }
@media (max-width: 600px) {
  /* related rows: price goes under the name instead of squeezing beside it */
  .c-related .rows a { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 4px; }
  .c-related .rw-name { grid-column: 1; }
  .c-related .rw-p { grid-column: 1; grid-row: 2; text-align: left; }
  .c-related .rw-p b { font-size: 15px; font-weight: 600; color: var(--ink2); }
  .c-related .rw-p:empty { display: none; }
  .c-related .rw-x { grid-column: 2; grid-row: 1 / span 2; }
}

/* ===== 08-forms.css ===== */
/* RESKILL v3: registration form, thank-you, 404 (PHP pages). Light act only, no dark field: the form is the point.
   Note: .field is the dark olive section on other pages, so form fields use .fld. */

.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 17px; }

/* ---------- register layout ---------- */
.reg { padding: clamp(104px, 10vw, 140px) 0 var(--sec); }
.reg-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.reg-aside { position: sticky; top: 112px; }
.h-reg { font-size: clamp(34px, 3.9vw, 60px); line-height: 1.04; letter-spacing: -.04em; overflow-wrap: break-word; hyphens: manual; }
.ty-h, .nf .h-reg { font-size: clamp(34px, 4.6vw, 68px); }
.reg-aside .c-lede { margin-top: 18px; }
.reg-steps { margin-top: clamp(28px, 3vw, 40px); display: grid; gap: 0; counter-reset: rs; }
.reg-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); position: relative; }
.reg-steps li:first-child::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--bar-a) 0 52%, var(--bar-b) 52% 100%); }
.rs-n { font-size: 30px; font-weight: 800; line-height: 1; color: var(--primary); letter-spacing: -.05em; }
.rs-t { font-size: 15.5px; line-height: 1.5; color: var(--ink2); }
.rs-t b { display: block; color: var(--ink); font-size: 17px; font-weight: 650; margin-bottom: 2px; }
.reg-alt { margin-top: 22px; }

/* ---------- form card ---------- */
.fcard { background: var(--card); border-radius: var(--r); padding: clamp(22px, 3.2vw, 44px); box-shadow: var(--shadow); position: relative; }
.fld { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.lab { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; }
.req { color: var(--primary); }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.inp {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 17px; line-height: 1.4;
  transition: border-color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.inp::placeholder { color: color-mix(in srgb, var(--ink2) 70%, transparent); }
.inp:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.inp:focus { outline: none; border-color: var(--olive); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--olive) 14%, transparent); }
textarea.inp { min-height: 96px; resize: vertical; }
.sel { position: relative; }
.sel::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sel .inp { padding-right: 44px; cursor: pointer; }

/* valid / invalid states */
.fld.valid .inp { border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.fld.invalid .inp { border-color: var(--bad); background: color-mix(in srgb, var(--rust-1) 55%, var(--card)); }
.err { display: none; margin: 8px 0 0; color: var(--rust-7); font-size: 14px; font-weight: 500; line-height: 1.4; }
.fld.invalid .err { display: block; animation: rise var(--t-ui) var(--ease) both; }
.fld.invalid { animation: fshake 360ms var(--ease) 1; }
@keyframes fshake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ---------- programme picker: radio cards ---------- */
.copts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.copt { position: relative; display: block; cursor: pointer; }
.copt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.copt-in { display: flex; flex-direction: column; gap: 4px; min-height: 72px; height: 100%; padding: 14px 44px 14px 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); transition: box-shadow var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease), transform var(--t-micro) var(--ease); }
.copt-n { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.copt-p { font-family: "Geist", "Google Sans", sans-serif; font-size: 14px; font-weight: 500; color: var(--ink2); }
.copt-dot { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 24%, transparent); transition: box-shadow var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease); }
.copt:hover .copt-in { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
.copt:active .copt-in { transform: scale(.985); }
.copt input:checked ~ .copt-in { background: var(--olive-1); box-shadow: inset 0 0 0 2px var(--olive); }
.copt input:checked ~ .copt-in .copt-p { color: var(--olive); font-weight: 600; }
.copt input:checked ~ .copt-dot { background: var(--olive); box-shadow: inset 0 0 0 5px var(--olive-1), 0 0 0 0 transparent; }
.copt input:focus-visible ~ .copt-in { outline: 3px solid var(--primary); outline-offset: 3px; }
.fld-course.invalid .copt-in { box-shadow: inset 0 0 0 1px var(--bad); }

.copts-soon { margin-top: 10px; border-radius: 16px; }
.copts-soon summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px; font-size: 14.5px; color: var(--ink2); cursor: pointer; }
.copts-soon summary::-webkit-details-marker { display: none; }
.copts-soon summary i { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: rotate(45deg); transition: transform var(--t-ui) var(--ease); flex: none; margin-right: 10px; }
.copts-soon[open] summary i { transform: rotate(-135deg); }
.copts-soon .copt-in { min-height: 56px; }

/* ---------- pills (format, start) ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease), transform var(--t-micro) var(--ease); }
.pill:hover span { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 32%, transparent); }
.pill:active span { transform: scale(.97); }
.pill input:checked + span { background: var(--olive); color: #fff; box-shadow: none; }
.pill input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ---------- consent ---------- */
.consent { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--ink2); cursor: pointer; position: relative; }
.consent input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.consent .box { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent); transition: background-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.consent .box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--t-ui) var(--ease); }
.consent input:checked + .box { background: var(--olive); box-shadow: none; }
.consent input:checked + .box svg { stroke-dashoffset: 0; }
.consent input:focus-visible + .box { outline: 3px solid var(--primary); outline-offset: 3px; }
.fld.invalid .consent .box { box-shadow: inset 0 0 0 1.5px var(--bad); }

/* ---------- submit, errors, foot ---------- */
.reg-submit { margin-top: 28px; }
.reg-submit .btn-xl { justify-content: space-between; }
.sel-price:empty { display: none; }
.is-sending .btn-ico svg { animation: spin 900ms linear infinite; }
.is-sending #submit { cursor: progress; }
#submit[disabled] { opacity: .85; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.formerr { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--rust-1); color: var(--rust-7); font-size: 15px; line-height: 1.45; }
.formerr.on { display: block; animation: rise var(--t-ui) var(--ease) both; }
.reg-foot { margin-top: 18px; font-size: 14px; color: var(--ink2); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .js .reg-aside > *, .js .fcard { animation: rise var(--t-hero) var(--ease) both; }
  .js .reg-aside > :nth-child(2) { animation-delay: 60ms } .js .reg-aside > :nth-child(3) { animation-delay: 120ms }
  .js .reg-aside > :nth-child(4) { animation-delay: 180ms } .js .fcard { animation-delay: 140ms; }
}
@media (prefers-reduced-motion: reduce) { .fld.invalid { animation: none; } .is-sending .btn-ico svg { animation: none; } }

/* ---------- thank-you + 404 ---------- */
.ty, .nf { padding: clamp(120px, 13vw, 176px) 0 var(--sec); }
.ty-in, .nf-in { max-width: 820px; }
.ty-mark { width: 84px; height: 84px; margin-bottom: 28px; }
.ty-mark svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ty-mark circle { stroke: var(--olive); stroke-width: 3; fill: var(--olive-1); stroke-dasharray: 183; stroke-dashoffset: 0; }
.ty-mark path { stroke: var(--rust); stroke-width: 5; stroke-dasharray: 44; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ty-mark circle { animation: tyRing 700ms var(--ease) both; }
  .ty-mark path { animation: tyTick 500ms 450ms var(--ease) both; }
  .js .ty-in > :not(.ty-mark), .js .nf-in > * { animation: rise var(--t-hero) var(--ease) both; animation-delay: 200ms; }
}
@keyframes tyRing { from { stroke-dashoffset: 183; fill: transparent; } }
@keyframes tyTick { from { stroke-dashoffset: 44; } }
.ty-h { max-width: 14em; }
.ty-course { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-s); font-weight: 600; font-size: 16px; }
.ty-course .lbar { width: 28px; height: 3px; flex: none; }
.ty-lede { margin-top: 22px; }
.ty-sooner { margin-top: 14px; font-size: 16px; color: var(--ink2); }
.ty-sooner .link-u { padding: 0; }
.ty-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }

.nf-code { display: inline-flex; flex-direction: column; gap: 10px; font-size: clamp(88px, 13vw, 168px); font-weight: 800; line-height: .9; letter-spacing: -.06em; color: var(--olive); margin-bottom: 24px; }
.nf-code .lbar { width: 72px; height: 5px; }
.nf-en { margin-top: 10px; font-size: 15px; color: var(--ink2); }
.nf-en:empty { display: none; }
.nf-list { margin-top: clamp(48px, 6vw, 72px); }
.nf-list ul { border-top: 1px solid var(--line); }
.nf-list li a { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 16px; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.nf-list .rw-name { font-size: 18px; font-weight: 600; }
.nf-list .rw-p { font-size: 15px; color: var(--ink2); font-family: "Geist", "Google Sans", sans-serif; }
.nf-list svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--t-micro) var(--ease); }
.nf-list li a:hover svg { transform: translateX(4px); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .reg-grid { grid-template-columns: 1fr; }
  .reg-aside { position: static; }
  .reg-steps { display: none; }
  .reg-alt { margin-top: 10px; }
}
@media (max-width: 640px) {
  .reg { padding-top: 92px; }
  .fcard { border-radius: 24px; padding: 20px 16px 0; margin: 0 calc(var(--pad) * -.5); }
  .frow, .copts { grid-template-columns: 1fr; }
  .copt-in { min-height: 0; padding: 13px 44px 13px 14px; }
  .copt-dot { top: 50%; margin-top: -10px; }
  /* the submit stays reachable while the visitor scrolls the form */
  .reg-submit { position: sticky; bottom: 0; z-index: 5; margin: 24px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-radius: 0 0 24px 24px; }
  .reg-submit .btn-xl { min-height: 60px; padding-left: 22px; font-size: 17px; }
  .reg-submit .btn-ico { width: 42px; height: 42px; }
  .reg-foot { padding-bottom: 20px; }
  .ty, .nf { padding-top: 112px; }
  .ty-ctas .btn { width: 100%; }
  .nf-list li a { grid-template-columns: minmax(0, 1fr) 20px; }
  .nf-list .rw-p { display: none; }
}