/* ==========================================================================
   ProdXVerse design system v6
   Minimal, editorial, product-led. One display face (General Sans, medium),
   one text face (Inter). Neutral warm greys, a single violet accent, flame
   used only as a spark. Every colour pair used for text meets WCAG 2.2 AA.
   ========================================================================== */

@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Colour */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --subtle: #F3F2EE;
  --subtle-2: #ECEBE6;
  --line: #E4E3DE;
  --line-2: #CFCEC7;
  --ink: #0F0F0E;
  --text: #1C1C1A;
  --text-2: #4A4A45;
  --muted: #66665F;
  --night: #0F0F0E;
  --night-2: #191917;
  --night-line: #2C2C29;
  --on-night: #F4F4F1;
  --on-night-2: #B3B3AC;
  --accent: #6E32C5;
  --accent-ink: #55259C;
  --accent-soft: #F2ECFC;
  --accent-line: #DCCEF5;
  --accent-on-night: #C7AEF5;
  --flame: #FF4826;
  --flame-ink: #B3270C;
  --flame-soft: #FFF1EC;
  --ok: #157A3A;

  /* Type */
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "General Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(40px, 4.6vw + 8px, 80px);
  --fs-display: clamp(34px, 3vw + 10px, 58px);
  --fs-h2: clamp(28px, 1.9vw + 12px, 44px);
  --fs-h3: clamp(18px, .4vw + 15.5px, 21px);
  --fs-statement: clamp(26px, 2.2vw + 12px, 48px);
  --fs-lead: clamp(17px, .25vw + 15.8px, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12.5px;

  /* Space and shape */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(88px, 9vw, 144px);
  --header-h: 68px;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(15, 15, 14, .04), 0 8px 24px -12px rgba(15, 15, 14, .10);
  --shadow-lg: 0 2px 6px rgba(15, 15, 14, .04), 0 32px 64px -32px rgba(15, 15, 14, .24);
  --ease: cubic-bezier(.2, .7, .1, 1);

  /* Compatibility aliases for the blog, legal pages and illustrations. */
  --paper: var(--surface); --paper-2: var(--subtle); --paper-3: var(--subtle-2);
  --grey: var(--muted); --grey-dark: var(--on-night-2); --line-dark: var(--night-line);
  --ink-2: var(--night-2); --ink-3: #2A2A27;
  --violet: var(--accent); --violet-ink: var(--accent-ink); --violet-wash: var(--accent-soft); --violet-soft: var(--accent-on-night);
  --flame-wash: var(--flame-soft);
  --r-panel: var(--r); --r-frame: var(--r-sm);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.65; color: var(--text);
  background: var(--bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; letter-spacing: -0.006em;
}
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- Type ---------- */
.hero-title, .display, .h2, .h3, .h4, .statement, .mega,
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: inherit; text-wrap: balance; }
.hero-title, .mega { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; }
.display { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; }
.h4 { font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; }
.statement { font-size: var(--fs-statement); line-height: 1.16; letter-spacing: -0.03em; max-width: 22ch; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); letter-spacing: -0.01em; }
.answer { font-size: var(--fs-lead); line-height: 1.6; color: var(--text); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
strong, b { font-weight: 600; }
.text-accent { color: var(--accent); }
.text-flame { color: var(--flame-ink); }
.balance { text-wrap: balance; }
.measure { max-width: 60ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: .9em; }

/* Eyebrow: a quiet label with a single accent dot. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-2); letter-spacing: .01em; margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }
.eyebrow--flame::before { background: var(--flame); box-shadow: 0 0 0 4px var(--flame-soft); }

/* ---------- Layout ---------- */
.container, .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: var(--section); position: relative; }
.section--sm { padding-block: clamp(56px, 6vw, 96px); }
/* Two plain sections in a row share one gap instead of two. */
.section:not(.bg-subtle):not(.bg-night):not(.bg-accent) + .section:not(.bg-subtle):not(.bg-night):not(.bg-accent) { padding-top: 0; }
.bg-subtle { background: var(--subtle); }
.bg-night, .bg-accent {
  background: var(--night); color: var(--on-night); margin: 0 clamp(8px, 1.2vw, 16px); border-radius: var(--r-lg);
  padding-block: var(--section);
}
.bg-accent { background: var(--accent); }
.bg-night + .bg-night { margin-top: 12px; }
.bg-night .lead, .bg-night .muted, .bg-night .caption, .bg-accent .lead { color: var(--on-night-2); }
.bg-accent .lead, .bg-accent .muted { color: #E5DAF8; }
.bg-night .eyebrow, .bg-accent .eyebrow { color: var(--on-night-2); }
.bg-night .eyebrow::before { box-shadow: 0 0 0 4px rgba(110, 50, 197, .35); }
.bg-night .text-accent { color: var(--accent-on-night); }
.bg-night .text-flame { color: #FF8466; }

.sh { margin-bottom: clamp(40px, 5vw, 72px); max-width: 720px; }
.sh .lead { margin-top: 18px; max-width: 58ch; }
.sh--center { margin-inline: auto; text-align: center; }
.sh--center .lead { margin-inline: auto; }
.sh--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.sh--split .lead { margin-top: 0; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--center { align-items: center; }
.sticky { position: sticky; top: calc(var(--header-h) + 32px); }
.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.stack > * + * { margin-top: var(--gap, 16px); }
.stack--lg { --gap: 28px; }
.stack--sm { --gap: 10px; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; } .mt-xl { margin-top: clamp(56px, 7vw, 96px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.bg-night .rule { border-color: var(--night-line); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s, color .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { --bg: var(--accent); --bd: var(--accent); box-shadow: 0 10px 24px -12px rgba(110, 50, 197, .6); }
.btn:active { transform: translateY(1px); }
.btn--primary::after {
  content: ""; width: 15px; height: 15px; background: currentColor; flex: none; transition: transform .3s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn--primary:hover::after { transform: translateX(3px); }
.btn--ghost { --bg: var(--surface); --fg: var(--ink); --bd: var(--line-2); }
.btn--ghost:hover { --bg: var(--surface); --fg: var(--ink); --bd: var(--ink); box-shadow: none; }
.bg-night .btn:not(.btn--ghost), .bg-accent .btn:not(.btn--ghost) { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.bg-night .btn:not(.btn--ghost):hover, .bg-accent .btn:not(.btn--ghost):hover { --bg: var(--accent-soft); --bd: var(--accent-soft); --fg: var(--ink); box-shadow: none; }
.bg-night .btn--ghost, .bg-accent .btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .32); }
.bg-night .btn--ghost:hover, .bg-accent .btn--ghost:hover { --bd: #fff; --bg: rgba(255,255,255,.06); }
.btn--sm { min-height: 38px; padding: 0 15px; font-size: 14px; border-radius: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; color: var(--accent); }
.bg-night .link-arrow { color: var(--accent-on-night); }
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }
.text-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pill, .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; line-height: 1.3; color: var(--text-2); }
.pill--soon, .chip--soon { border-style: dashed; border-color: var(--line-2); background: transparent; }
.pill--dot::before, .chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--flame); }
.bg-night .pill, .bg-night .chip { background: transparent; border-color: var(--night-line); color: var(--on-night-2); }
.bg-accent .pill { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.card--accent .pill { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 2.4vw, 36px); }
.card--subtle { background: var(--subtle); border-color: transparent; }
.bg-subtle .card:not(.card--accent):not(.card--night) { background: var(--surface); }
.card--night { background: var(--night); color: var(--on-night); border-color: var(--night); }
.card--night .muted, .card--night .lead { color: var(--on-night-2); }
.card--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.card--accent .muted, .card--accent .lead { color: #E5DAF8; }
.bg-night .card:not(.card--accent):not(.card--light) { background: var(--night-2); border-color: var(--night-line); }
.card--dashed { background: transparent; border-style: dashed; border-color: var(--line-2); }
.card--flex { display: flex; flex-direction: column; }
.card--flex > .btn-row:last-child, .card--flex > .link-arrow:last-child { margin-top: auto; padding-top: 24px; }
a.card { text-decoration: none; color: inherit; display: block; }
.card--hover, a.card { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
@media (hover: hover) {
  .card--hover:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
}
.card .h3 + p, .card .h3 + .lead { margin-top: 8px; }
.card-kicker { display: block; font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 14px; }
.card--accent .card-kicker, .card--night .card-kicker { color: var(--accent-on-night); }
.card--accent .card-kicker { color: #E5DAF8; }
.card-num { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.bg-night .card-num { color: var(--on-night-2); }

/* Icon badge */
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 22px; }
.ico-badge--flame { background: var(--flame-soft); color: var(--flame-ink); }
.card--night .ico-badge, .bg-night .ico-badge { background: rgba(255,255,255,.07); color: var(--accent-on-night); }
.card--accent .ico-badge { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Lists ---------- */
.list-check, .ticks, .list-x, .flags { list-style: none; display: grid; gap: 12px; }
.list-check li, .ticks li, .list-x li, .flags li { position: relative; padding-left: 30px; color: var(--text-2); line-height: 1.5; }
.list-check li::before, .ticks li::before, .list-x li::before, .flags li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E32C5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.list-x li::before, .flags li::before { background: var(--flame-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3270C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center / 11px no-repeat; }
.bg-night .list-check li, .bg-night .ticks li, .bg-night .flags li, .bg-night .list-x li, .card--night li { color: var(--on-night-2); }
.bg-night .list-check li::before, .bg-night .ticks li::before, .card--night .list-check li::before { background-color: rgba(199, 174, 245, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7AEF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.bg-night .flags li::before, .bg-night .list-x li::before { background-color: rgba(255, 72, 38, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8466' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E"); }
.card--accent .list-check li { color: #F1EBFD; }
.card--accent .list-check li::before { background-color: rgba(255,255,255,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.list-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.list-dot { list-style: none; display: grid; gap: 10px; }
.list-dot li { position: relative; padding-left: 20px; color: var(--text-2); }
.list-dot li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bg-night .list-dot li { color: var(--on-night-2); }
.list-num { list-style: none; counter-reset: n; display: grid; gap: 0; }
.list-num > li { counter-increment: n; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.list-num > li:last-child { border-bottom: 1px solid var(--line); }
.list-num > li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); font-weight: 500; color: var(--accent); font-size: 15px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.bg-night .list-num > li { border-color: var(--night-line); }
.bg-night .list-num > li::before { color: var(--accent-on-night); }
.list-num .h3 + p { margin-top: 6px; color: var(--text-2); }
.bg-night .list-num .h3 + p { color: var(--on-night-2); }

/* Definition rows (key facts) */
.kv { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; border-top: 1px solid var(--line); }
.kv dt, .kv dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); font-size: var(--fs-small); padding-right: 16px; }
.kv dd { font-weight: 500; }
.bg-night .kv, .bg-night .kv dt, .bg-night .kv dd { border-color: var(--night-line); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.table-wrap:focus-visible { outline-offset: 2px; }
.matrix, .table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.matrix th, .matrix td, .table th, .table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.matrix thead th, .table thead th { font-size: 13px; font-weight: 500; color: var(--muted); background: var(--subtle); }
.matrix tbody th, .table tbody th { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; letter-spacing: -0.01em; }
.matrix tbody tr:last-child > *, .table tbody tr:last-child > * { border-bottom: 0; }
.matrix td, .table td { color: var(--text-2); }
.matrix a, .table a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.matrix a:hover { text-decoration-color: currentColor; }
.matrix .is-highlight th, .matrix .is-highlight td { background: var(--accent-soft); }

/* ---------- Notice ---------- */
.note, .notice { border-radius: var(--r); padding: clamp(20px, 2.2vw, 28px); background: var(--surface); border: 1px solid var(--line); }
.note--flame, .notice--flame { background: var(--flame-soft); border-color: #FFD8CC; }
.note--flame .h3, .notice--flame .h2, .notice--flame .h3 { color: var(--ink); }
.bg-night .note, .bg-night .notice { background: var(--night-2); border-color: var(--night-line); }

/* ---------- Stats ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); min-width: 140px; }
.bg-night .stat { background: var(--night-2); border-color: var(--night-line); }
.stat-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 1.2vw + 14px, 32px); line-height: 1; letter-spacing: -0.03em; }
.stat-label { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.bg-night .stat-label { color: var(--on-night-2); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); position: relative; }
.hero .lead { margin-top: 22px; max-width: 56ch; }
.hero .btn-row { margin-top: 32px; }
.hero .pills { margin-top: 28px; }
.hero--center { text-align: center; }
.hero--center .hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero--center .hero-title { max-width: 16ch; }
.hero--center .btn-row, .hero--center .pills { justify-content: center; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-split .hero-title, .hero-split .mega { font-size: clamp(38px, 3.6vw + 10px, 66px); }
.hero.bg-night { margin-top: 8px; padding-top: clamp(56px, 6vw, 96px); }
.breadcrumbs + .hero, .breadcrumbs + section { padding-top: clamp(32px, 4vw, 64px); }
.stage {
  margin-top: clamp(48px, 6vw, 88px); border-radius: var(--r-lg); padding: clamp(16px, 4vw, 56px);
  background: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #F6F2FD 70%, #F1EAFC 100%);
  border: 1px solid #ECE5F8; position: relative; overflow: hidden;
}
.stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(110, 50, 197, .14) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); pointer-events: none; }
.stage .hero-art { max-width: 780px; margin-inline: auto; position: relative; }

/* Illustration wrappers */
.hero-art, .section-art { width: 100%; }
.hero-art .art, .section-art .art { width: 100%; height: auto; display: block; overflow: visible; }

/* ---------- Proof bar ---------- */
.proofbar { border-block: 1px solid var(--line); }
.proofbar ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proofbar li { padding: 26px 24px; display: flex; gap: 14px; align-items: center; border-left: 1px solid var(--line); font-size: 14.5px; color: var(--text-2); line-height: 1.4; }
.proofbar li:first-child { border-left: 0; padding-left: 0; }
.proofbar .ico { color: var(--accent); }
.proofbar strong { display: block; color: var(--ink); font-weight: 500; }

/* ---------- Statement (scroll-lit) ---------- */
.statement-block { max-width: 920px; }
.statement-block .statement { max-width: none; }
.scrub-w { transition: opacity .35s linear; }
.js [data-scrub] .scrub-w { opacity: .18; }
.js [data-scrub] .scrub-w.lit { opacity: 1; }

/* ---------- Program cards ---------- */
.program { display: flex; flex-direction: column; min-height: 100%; }
.program .h2 { font-size: clamp(26px, 1.3vw + 16px, 36px); }
.program .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.card--accent .meta { color: #E5DAF8; }
.program .meta span + span::before { content: "·"; margin-right: 14px; opacity: .6; }
.program p.lead { margin-top: 16px; }
.program .list-check { margin-top: 24px; }
.program .foot { margin-top: auto; padding-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.soon-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(14px, 1.6vw, 20px); }
.soon { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.soon .h3 { margin-top: 10px; }

/* ---------- Horizontal steps (GSAP pins it; CSS fallback is a grid) ---------- */
.hsteps-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hsteps .card { min-height: 280px; display: flex; flex-direction: column; }
.hsteps .card p { color: var(--text-2); margin-top: 10px; }
.hsteps .card--night p { color: var(--on-night-2); }
.hsteps.is-pinned { overflow: hidden; }
.hsteps.is-pinned .hsteps-track { display: flex; width: max-content; max-width: none; margin: 0; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.hsteps.is-pinned .card { width: clamp(280px, 30vw, 380px); flex: none; min-height: 340px; }

/* ---------- Stacking cards (GSAP pins; fallback is a list) ---------- */
.stack-cards { display: grid; gap: 16px; }
.stack-card { min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); }
.stack-card .h3 { font-size: clamp(22px, 1vw + 16px, 30px); letter-spacing: -0.025em; }
.stack-card .lead { margin-top: 12px; }
.stack-card .ico-badge { margin-bottom: 40px; }
.stack-cards.is-stacked { position: relative; display: block; }
.is-stacked .stack-card { position: absolute; inset: 0; min-height: 0; transform-origin: 50% 0%; will-change: transform; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; transition: color .2s; }
.faq-item summary:hover h3 { color: var(--accent); }
.faq-icon { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .35s var(--ease), background-color .2s, border-color .2s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq-item[open] .faq-icon { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-answer { padding: 0 52px 24px 0; color: var(--text-2); }
.faq-answer p + p { margin-top: .8em; }
.bg-night .faq-list, .bg-night .faq-item { border-color: var(--night-line); }
.bg-night .faq-answer { color: var(--on-night-2); }

/* ---------- Media ---------- */
.media { border-radius: var(--r); overflow: hidden; background: var(--subtle); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.frame { border-radius: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-lg); }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.frame-url { margin-left: 10px; padding: 4px 12px; border-radius: 8px; background: var(--surface); font-size: 12px; color: var(--muted); flex: 1; }
.frame-body { padding: 18px; }
.skel { height: 9px; border-radius: 5px; background: var(--subtle-2); margin-top: 9px; }
.skel--dark { background: var(--ink); height: 10px; margin-top: 0; }
.skel--violet { background: var(--accent); }
.w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-90 { width: 90%; }

/* Collage of session photos */
.collage { position: relative; aspect-ratio: 5 / 4; }
.collage figure { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid #fff; background: var(--subtle); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage figure:nth-child(1) { left: 0; top: 8%; width: 62%; aspect-ratio: 4 / 3; transform: rotate(-2.5deg); z-index: 2; }
.collage figure:nth-child(2) { right: 0; top: 0; width: 48%; aspect-ratio: 4 / 5; transform: rotate(2.5deg); z-index: 1; }
.collage figure:nth-child(3) { left: 26%; bottom: 0; width: 52%; aspect-ratio: 16 / 10; transform: rotate(1deg); z-index: 3; }
.collage-tag { position: absolute; z-index: 4; left: 4%; bottom: 6%; padding: 7px 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; }

/* Photo strip (auto-scrolls; has a pause control) */
.photostrip { overflow: hidden; }
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--speed, 60s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.photostrip .marquee-track { gap: 16px; padding-right: 16px; align-items: center; }
.photostrip figure { margin: 0; flex: none; width: clamp(240px, 26vw, 360px); aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; position: relative; background: var(--subtle); }
.photostrip figure:nth-child(even) { aspect-ratio: 4 / 5; width: clamp(180px, 19vw, 270px); }
.photostrip img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.photostrip figure:hover img { transform: scale(1.04); }
.photostrip figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(15, 15, 14, .72); color: #fff; font-size: 12.5px; backdrop-filter: blur(6px); }
.marquee-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.marquee-toggle:hover { border-color: var(--ink); }
.marquee-toggle .ico { width: 16px; height: 16px; }

/* Gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-cell { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--subtle); }
.gallery-cell--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-cell:last-child:nth-child(3n+1):not(:first-child) { grid-column: span 3; aspect-ratio: 21 / 9; }
.gallery-cell:last-child:nth-child(3n+2):not(:first-child) { grid-column: span 2; aspect-ratio: auto; }
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; }
.gallery-cell figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(15, 15, 14, .72); color: #fff; font-size: 12.5px; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.founder-photo { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--night-2); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-role { color: var(--accent); font-weight: 500; font-size: 15px; margin-top: 10px; }
.bg-night .founder-role { color: var(--accent-on-night); }
.founder .stat-row { margin-top: 24px; }
.founder blockquote { margin-top: 28px; padding-left: 20px; border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: clamp(19px, .5vw + 16px, 23px); line-height: 1.45; letter-spacing: -0.015em; }
.bg-night .founder blockquote { border-color: var(--accent-on-night); }

/* ---------- Experts ---------- */
.experts-wrap { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.bg-night .experts-wrap { border-color: var(--night-line); }
.experts-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.experts-head .h3 { font-size: clamp(22px, 1vw + 16px, 28px); letter-spacing: -0.025em; }
.expert-grid { list-style: none; margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.expert-card2 { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.bg-night .expert-card2 { background: var(--night-2); border-color: var(--night-line); }
.expert-photo { position: relative; aspect-ratio: 4 / 5; background: var(--subtle); overflow: hidden; margin: 0; }
.bg-night .expert-photo { background: #22221F; }
.expert-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.expert-card2:hover .expert-photo img { transform: scale(1.04); }
.expert-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 40px; color: var(--muted); }
.expert-li { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0A66C2; }
.expert-li svg { width: 16px; height: 16px; }
.expert-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.expert-name { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }
.expert-role { font-size: 13.5px; color: var(--muted); }
.bg-night .expert-role { color: var(--on-night-2); }
.expert-co-row { margin-top: 8px; min-height: 22px; display: flex; align-items: center; }
.expert-co-logo { max-height: 22px; max-width: 110px; object-fit: contain; }
.bg-night .expert-co-logo { filter: brightness(0) invert(1); opacity: .85; }
.expert-co { font-weight: 500; font-size: 13.5px; }
.expert-topic { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--accent); }
.bg-night .expert-topic { color: var(--accent-on-night); }
.expert-marquee { margin-top: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.expert-track { display: flex; gap: 16px; width: max-content; list-style: none; animation: marquee var(--speed, 40s) linear infinite; }
.expert-marquee:hover .expert-track, .expert-marquee:focus-within .expert-track, .expert-marquee.is-paused .expert-track { animation-play-state: paused; }
.expert-marquee .expert-card2 { width: 240px; flex: none; }

/* ---------- Products ---------- */
.product-group + .product-group { margin-top: 48px; }
.product-group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.product-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-card { display: flex; align-items: center; gap: 16px; height: 100%; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
a.product-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.product-logo { flex: none; width: 52px; height: 52px; border-radius: 13px; overflow: hidden; background: var(--subtle); display: grid; place-items: center; }
.product-logo img { width: 100%; height: 100%; object-fit: contain; }
.product-logo-fallback { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--accent); }
.product-text { display: flex; flex-direction: column; min-width: 0; padding-right: 18px; }
.product-name { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; letter-spacing: -0.015em; }
.product-line { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.product-meta { font-size: 12.5px; font-weight: 500; color: var(--accent); margin-top: 6px; }
.product-arrow { position: absolute; top: 12px; right: 14px; font-size: 14px; color: var(--muted); }

/* ---------- Testimonials ---------- */
.t-grid { list-style: none; columns: 3 300px; column-gap: 16px; }
.t-card { break-inside: avoid; margin-bottom: 16px; padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.t-quote { font-size: 16.5px; line-height: 1.6; color: var(--text); }
.t-quote p::before { content: "\201C"; } .t-quote p::after { content: "\201D"; }
.t-who { display: flex; align-items: center; gap: 12px; }
.t-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.t-avatar--ph { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
.t-name { display: block; font-weight: 500; line-height: 1.3; }
.t-role { display: block; font-size: 13px; color: var(--muted); }
.t-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.t-foot:empty { display: none; }
.t-stars { color: #B76E00; letter-spacing: 2px; }
.t-source { color: var(--muted); text-decoration: none; font-weight: 500; }
a.t-source:hover { color: var(--ink); }
.t-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--night); cursor: pointer; }
.t-video img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.t-video iframe { width: 100%; height: 100%; border: 0; }
.t-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-lg); transition: transform .3s var(--ease); }
.t-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-left: 15px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.t-video:hover .t-play { transform: scale(1.08); }
.t-video-file { width: 100%; border-radius: 12px; background: var(--night); }
.t-shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.t-shot--ph { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--subtle), var(--subtle) 10px, var(--subtle-2) 10px, var(--subtle-2) 20px); }
.t-caption { font-size: 14.5px; color: var(--muted); }
.sample-badge { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--flame-soft); color: var(--flame-ink); font-size: 12px; font-weight: 600; vertical-align: middle; }

/* ---------- Pricing ---------- */
.price-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.price-card > :first-child { background: var(--night); color: var(--on-night); padding: clamp(28px, 3.4vw, 48px); }
.price-card > :last-child { padding: clamp(28px, 3.4vw, 48px); }
.price-card > :first-child .muted, .price-card > :first-child .small { color: var(--on-night-2) !important; }
.price-amount { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 3vw + 16px, 64px); line-height: 1; letter-spacing: -0.04em; margin-block: 12px 6px; }
.price-amount--sm { font-size: clamp(28px, 1.4vw + 16px, 38px); }
.price-tbc { font-size: .42em; letter-spacing: -0.01em; display: inline-block; line-height: 1.2; }
.price-emi, .next-cohort { font-size: 14px; color: var(--on-night-2); margin-top: 4px; }
.next-cohort strong { color: #fff; }
.price-tier { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--night-line); }
.price-card .btn-row { margin-top: 28px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); }
.field { display: grid; gap: 7px; }
.field label, .field legend { font-size: 14px; font-weight: 500; color: var(--text); }
.field .opt { color: var(--muted); font-weight: 400; }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-size: 15.5px; transition: border-color .2s, box-shadow .2s; }
.textarea { min-height: 120px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #ACABA3; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--flame-ink); }
.field-error { font-size: 13px; color: var(--flame-ink); }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 14px; transition: background-color .2s, border-color .2s, color .2s; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-status { font-size: 14.5px; padding: 12px 14px; border-radius: 12px; }
.form-status:empty { display: none; }
.form-status.is-ok { background: #E9F7EE; color: var(--ok); }
.form-status.is-err { background: var(--flame-soft); color: var(--flame-ink); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Tabs ---------- */
[role="tablist"] { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--subtle); }
.tab { border: 0; background: transparent; padding: 10px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
[role="tabpanel"] { margin-top: 28px; }
[role="tabpanel"]:focus-visible { outline-offset: 8px; }

/* ---------- Contact routes ---------- */
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.route { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .2s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.route:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.route[aria-pressed="true"], .route.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.route .h4 { font-size: 16.5px; }
.route p { font-size: 14px; color: var(--muted); }
.route-cta { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; color: var(--accent); }

/* ---------- Careers board ---------- */
.board { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 24px); }
.filter-group { border-bottom: 1px solid var(--line); padding: 14px 0; }
.filter-group summary { font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "+"; color: var(--muted); }
.filter-group[open] summary::after { content: "−"; }
.filter-group .choice-grid { margin-top: 12px; }
.filter-group .choice span { padding: 6px 11px; font-size: 13px; }
.board-bar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.board-bar .input { max-width: 380px; }
.job-list { list-style: none; display: grid; gap: 10px; }
.job-list li > a:not(.btn), .job-card { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .2s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.job-list li > a:not(.btn):hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.job-sample { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--flame-soft); color: var(--flame-ink); }
.empty-state { padding: clamp(28px, 4vw, 48px); border-radius: var(--r); border: 1px dashed var(--line-2); text-align: left; }

/* ---------- Certificate mock ---------- */
.cert { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-lg); position: relative; }
.cert-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 1.4vw + 14px, 30px); letter-spacing: -0.025em; margin-top: 8px; }
.cert dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin-top: 20px; font-size: 14px; }
.cert dt { color: var(--muted); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250, 250, 247, .82); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); }
.site-header.is-scrolled { border-color: var(--line); }
.site-header > .container { display: flex; align-items: center; gap: 24px; height: 100%; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand .logo-img { height: 28px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-list { display: flex; align-items: center; list-style: none; gap: 2px; }
.nav-link, .nav-trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 0; background: none; text-decoration: none; font-size: 14.5px; font-weight: 450; color: var(--text-2); cursor: pointer; transition: color .2s, background-color .2s; }
.nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); background: var(--subtle); }
.nav-link[aria-current="page"], .nav-trigger[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1.5px; background: var(--accent); border-radius: 2px; }
.nav-trigger svg { width: 10px; transition: transform .25s; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.mega-menu { position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 32px 64px -40px rgba(15, 15, 14, .3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.mega-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease); }
.mega-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 12px; padding-block: 24px 32px; }
.mega-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r); text-decoration: none; background: var(--subtle); transition: background-color .2s, transform .3s var(--ease); }
.mega-card:hover { background: var(--accent-soft); transform: translateY(-2px); }
.mega-card .h3 { font-size: 18px; }
.mega-kicker { font-size: 12.5px; font-weight: 500; color: var(--accent); }
.mega-card .small, .mega-soon .small { color: var(--muted); }
.mega-soon { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r); border: 1px dashed var(--line-2); }
.mega-soon .mega-kicker { color: var(--muted); }
.mega-soon-item { display: flex; flex-direction: column; padding: 8px 10px; margin-inline: -10px; border-radius: 10px; text-decoration: none; }
.mega-soon-item:hover { background: var(--subtle); }
.mega-note { padding: 20px; align-self: end; }
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-top: 20px; font-size: 13.5px; color: var(--muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumbs a { text-decoration: none; color: inherit; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-night); margin: 12px clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px); border-radius: var(--r-lg); padding-top: clamp(64px, 7vw, 104px); padding-bottom: 32px; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.brand--footer .logo-img { height: 34px; }
.footer-tagline { margin-top: 20px; max-width: 32ch; color: var(--on-night-2); font-size: 15.5px; }
.footer-col h2 { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--on-night-2); margin-bottom: 16px; letter-spacing: .01em; }
.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a { text-decoration: none; color: var(--on-night); font-size: 14.5px; transition: color .2s; }
.footer-col a:hover { color: var(--accent-on-night); }
.footer-soon { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--night-line); font-size: 11.5px; color: var(--on-night-2); vertical-align: 1px; }
.footer-col .footer-social, .footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--night-line); color: var(--on-night); transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease); }
.footer-social a:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-mail { display: inline-block; margin-top: 18px; color: var(--on-night); font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--night-line); }
.footer-mail:hover { border-color: var(--on-night); }
.footer-mark { margin-top: clamp(56px, 7vw, 96px); opacity: .9; }
.footer-mark-img { width: 100%; height: auto; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--night-line); font-size: 13.5px; color: var(--on-night-2); }
.footer-base a { color: var(--on-night); text-decoration: none; border-bottom: 1px solid var(--night-line); }
.footer-base a:hover { border-color: var(--on-night); }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #1F9E52; color: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); transition: transform .3s var(--ease); }
.wa-float svg { width: 26px; height: 26px; }
.wa-float:hover { transform: scale(1.06); }

/* ---------- Motion states ---------- */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.js [data-split].is-in .w > span { transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .section-art:not(.is-in) .art * { animation-play-state: paused; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-list { gap: 0; }
  .nav-link, .nav-trigger { padding: 8px 9px; }
  .mega-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --header-h: 62px; }
  .menu-btn { display: block; }
  .nav { position: fixed; inset: var(--header-h) 0 0; z-index: 99; flex-direction: column; align-items: stretch; gap: 0; padding: 20px var(--gutter) 40px; background: var(--bg); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; margin: 0; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-link, .nav-trigger { font-size: 19px; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); justify-content: space-between; width: 100%; color: var(--ink); }
  .nav-link[aria-current="page"]::after { display: none; }
  .mega-menu { position: static; box-shadow: none; border: 0; transform: none; display: none; opacity: 1; visibility: visible; }
  .mega-menu.is-open { display: block; }
  .mega-inner { grid-template-columns: 1fr; padding: 12px 0; }
  .nav-cta { margin: 24px 0 0; min-height: 52px; }
  .split, .split--even, .sh--split, .hero-split, .founder, .board { grid-template-columns: 1fr; }
  .sticky, .filters { position: static; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proofbar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proofbar li:nth-child(3) { border-left: 0; padding-left: 0; }
  .proofbar li { border-top: 1px solid var(--line); }
  .proofbar li:nth-child(-n+2) { border-top: 0; }
  .price-card { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .hsteps-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-cell--wide { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .gallery-cell:last-child:nth-child(n) { grid-column: auto; aspect-ratio: 4 / 3; }
  .gallery-cell:last-child:nth-child(2n):not(:first-child) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .hero-art { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  :root { --fs-body: 16px; }
  .cols-2, .cols-3, .cols-4, .soon-row, .product-grid, .list-cols { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .hsteps-track { grid-template-columns: 1fr; }
  .expert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .proofbar ul { grid-template-columns: 1fr; }
  .proofbar li { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .proofbar li:first-child { border-top: 0 !important; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .bg-night, .bg-accent { margin-inline: 6px; border-radius: 20px; }
  .site-footer { margin-inline: 6px; border-radius: 20px; }
  .stage { padding: 12px; border-radius: 20px; }
  .btn-row .btn { flex: 1 1 auto; }
  .faq-answer { padding-right: 0; }
  .list-num > li { grid-template-columns: 40px 1fr; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-bottom: 0; }
  .wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee, .expert-marquee { overflow-x: auto; }
  .js [data-split] .w > span, .js [data-reveal] { transform: none !important; opacity: 1 !important; }
  .js [data-scrub] .scrub-w { opacity: 1; }
}
@media print {
  .site-header, .site-footer, .wa-float, .marquee, .read-progress { display: none !important; }
  .bg-night, .bg-accent { background: none; color: #000; }
}

/* ==========================================================================
   Illustrations (inline SVG in app/art/*.svg)
   ========================================================================== */
/* ---------- Illustration typography ---------- */
.art text { font-family: var(--font); }
.art .a-hand { font-size: 15px; font-weight: 600; fill: #5B4500; }
.art .a-url { font-size: 10px; fill: #8A8A85; }
.art .a-num { font-family: var(--font-display); font-size: 21px; font-weight: 600; fill: #0B0B0B; }
.art .a-num--flame { fill: #C42A0C; }
.art .a-ph-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; fill: #0B0B0B; }
.art .a-btn { font-size: 12px; font-weight: 600; fill: #fff; }
.art .a-ai-label { font-size: 11px; font-weight: 600; fill: #BFA6F2; letter-spacing: .02em; }
.art .a-ai { font-size: 14px; font-weight: 500; fill: #fff; }
.art .a-ai--dim { fill: #A3A3A3; }
.art .a-toast-t { font-size: 13px; font-weight: 600; fill: #0B0B0B; }
.art .a-cur-t { font-size: 11px; font-weight: 600; fill: #fff; }
.art .a-doc-k { font-size: 10px; font-weight: 700; fill: #6E32C5; letter-spacing: .1em; }
.art .a-doc-h { font-family: var(--font-display); font-size: 22px; font-weight: 600; fill: #0B0B0B; }
.art .a-av { font-size: 11px; font-weight: 700; fill: #fff; }
.art .a-av--violet { fill: #6E32C5; }
.art .a-cm-n { font-size: 12px; font-weight: 600; fill: #BFA6F2; }
.art .a-cm-n--ink { fill: #0B0B0B; }
.art .a-cm { font-size: 13px; fill: #fff; }
.art .a-cm--grey { fill: #636363; }
.art .a-badge { font-size: 9px; font-weight: 700; fill: #fff; letter-spacing: .08em; }
.art .a-chip { font-size: 12px; font-weight: 600; fill: #C9C9C4; }
.art .a-chip--on { fill: #fff; }
.art .a-job-t { font-family: var(--font-display); font-size: 18px; font-weight: 600; fill: #0B0B0B; }
.art .a-job-c { font-size: 12.5px; fill: #636363; }
.art .a-ver { font-size: 12px; font-weight: 600; fill: #15803D; }
.art .a-msg { font-size: 14px; fill: #0B0B0B; }
.art .a-msg--light { fill: #fff; }
.art .a-msg--soft { font-size: 12px; fill: #A3A3A3; }
.art .a-pg-k { font-size: 10.5px; font-weight: 700; fill: rgba(255,255,255,.85); letter-spacing: .08em; }
.art .a-pg-k--grey { fill: #636363; }
.art .a-pg-h { font-family: var(--font-display); font-size: 21px; font-weight: 600; fill: #fff; }
.art .a-pg-h--ink { fill: #0B0B0B; }
.art .a-pg-s { font-size: 12.5px; font-weight: 500; fill: #fff; }
.art .a-pg-s--dim { fill: rgba(255,255,255,.6); }

/* ---------- Illustration motion ---------- */
.art g, .art path, .art circle, .art rect { transform-box: fill-box; transform-origin: center; }
.art .a-d1 { --ad: .1s; } .art .a-d2 { --ad: .35s; } .art .a-d3 { --ad: .6s; } .art .a-d4 { --ad: .85s; } .art .a-d5 { --ad: 1.1s; }
@keyframes a-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes a-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes a-pop { 0% { opacity: 0; transform: scale(.86); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes a-draw { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes a-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes a-dash { to { stroke-dashoffset: -44; } }
@keyframes a-toast { 0%, 12% { opacity: 0; transform: translateY(10px) scale(.95); } 18%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-6px); } }

.art .a-float { animation: a-float 6s ease-in-out infinite; animation-delay: calc(var(--ad, 0s) * 3); }
.art .a-rise { animation: a-rise 1s var(--ease) both; animation-delay: var(--ad, 0s); }
.art .a-pop { animation: a-pop .8s var(--ease) both; animation-delay: calc(var(--ad, 0s) + .3s); }
.art path.a-draw:not([stroke-dasharray]) { stroke-dasharray: 700; animation: a-draw 2.2s var(--ease) .6s both; }
.art path.a-draw[stroke-dasharray] { animation: a-fade 1s ease both; animation-delay: calc(var(--ad, 0s) + .5s); }
.art .a-dot { animation: a-dot 1.4s ease-in-out infinite; animation-delay: var(--ad, 0s); }
.art .a-blink { animation: a-blink 1.6s ease-in-out infinite; }
.art .a-dash path { animation: a-dash 2.4s linear infinite; }
.art .a-toast { animation: a-toast 7s var(--ease) 1.4s infinite both; }
.art .a-tick { animation: a-pop .6s var(--ease) both; animation-delay: calc(var(--ad, 0s) + 1.2s); }

/* Cursors: a resting position (reduced motion) plus a slow tour. */
.art .a-cursor { transform-box: view-box; transform-origin: 0 0; }
.art--home .a-cursor--a { transform: translate(300px, 170px); animation: cur-home-a 11s ease-in-out infinite; }
.art--home .a-cursor--b { transform: translate(250px, 300px); animation: cur-home-b 13s ease-in-out infinite; }
.art--home .a-cursor--c { transform: translate(470px, 380px); animation: cur-home-c 9s ease-in-out infinite; }
@keyframes cur-home-a { 0%, 100% { transform: translate(300px, 170px); } 30% { transform: translate(420px, 150px); } 60% { transform: translate(230px, 230px); } }
@keyframes cur-home-b { 0%, 100% { transform: translate(250px, 300px); } 35% { transform: translate(330px, 250px); } 70% { transform: translate(400px, 320px); } }
@keyframes cur-home-c { 0%, 100% { transform: translate(470px, 380px); } 50% { transform: translate(450px, 300px); } }
.art--internship .a-cursor--a { transform: translate(280px, 240px); animation: cur-int 10s ease-in-out infinite; }
@keyframes cur-int { 0%, 100% { transform: translate(280px, 240px); } 40% { transform: translate(330px, 215px); } 70% { transform: translate(200px, 340px); } }
.art--careers .a-cursor--b { transform: translate(430px, 140px); animation: cur-car 9s ease-in-out infinite; }
@keyframes cur-car { 0%, 100% { transform: translate(430px, 140px); } 33% { transform: translate(450px, 255px); } 66% { transform: translate(470px, 368px); } }
.art--programs .a-cursor--c { transform: translate(120px, 120px); animation: cur-pg 10s ease-in-out infinite; }
@keyframes cur-pg { 0%, 100% { transform: translate(120px, 120px); } 40% { transform: translate(300px, 92px); } 70% { transform: translate(250px, 160px); } }

/* ---------- v4: in-between section illustrations ---------- */
.art .a-ac-k { font-size: 11px; font-weight: 500; fill: #6B6B68; }
.art .a-ac-h { font-family: var(--font-display); font-size: 20px; font-weight: 600; fill: #0B0B0B; letter-spacing: -0.02em; }
.art .a-flag { font-size: 14px; font-weight: 700; fill: #fff; }
.art .a-ac-n { font-size: 13px; font-weight: 600; fill: #fff; }
.art .a-ac-s { font-size: 11.5px; fill: #A3A3A3; }
.art .a-cur-t--ink { fill: #0B0B0B; }
.art .a-ring-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: #0B0B0B; }
.art .a-li { font-size: 13.5px; font-weight: 500; fill: #0B0B0B; }
.art .a-li--b { font-weight: 600; }
.art .a-li--dim { fill: #8A8A85; font-weight: 400; }
.art .a-li--w { fill: #fff; }
.art .a-pill { font-size: 11px; font-weight: 600; fill: #C42A0C; }
.art .a-pp-c { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: #0B0B0B; }
.s-dark .art .a-pp-c { fill: #fff; }
.art .a-doc-k--soft { fill: #BFA6F2; }
.art .a-wk { font-size: 12px; font-weight: 600; fill: #A3A3A3; }
.art .a-sp-h { font-family: var(--font-display); font-size: 17px; font-weight: 600; fill: #0B0B0B; letter-spacing: -0.02em; }
.art .a-sp-h--w { fill: #fff; }
.art .a-sp-s { font-size: 11px; font-weight: 600; fill: #6B6B68; }
.art--sprint .a-sp-s { fill: #15803D; }
.art .a-sp-s--flame { fill: #C42A0C; }
.art .a-sp-s--w { fill: #fff; }
.art .a-ds-aa { font-family: var(--font-display); font-size: 52px; font-weight: 600; fill: #0B0B0B; letter-spacing: -0.04em; }
.art .a-ds-t1 { font-family: var(--font-display); font-size: 18px; font-weight: 600; fill: #0B0B0B; }
.art .a-ds-t2 { font-size: 12px; fill: #6B6B68; }
.art .a-btn--ink { fill: #0B0B0B; }
.art .a-ag-t { font-size: 12.5px; font-weight: 600; fill: #6B6B68; font-variant-numeric: tabular-nums; }

@keyframes a-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-ring { from { stroke-dashoffset: 164; } to { stroke-dashoffset: 41; } }
@keyframes a-knob { 0%, 45% { transform: translateX(0); } 55%, 100% { transform: translateX(0); } }
.art .a-grow { transform-origin: left center; animation: a-grow 2.4s var(--ease) .4s both; }
.art .a-ring { animation: a-ring 1.8s var(--ease) .5s both; }
.art--aicheck .a-cursor--c { transform: translate(250px, 240px); animation: cur-ac 10s ease-in-out infinite; }
@keyframes cur-ac { 0%, 100% { transform: translate(250px, 240px); } 33% { transform: translate(330px, 190px); } 66% { transform: translate(120px, 140px); } }
.art--designsys .a-cursor--a { transform: translate(200px, 214px); animation: cur-ds 9s ease-in-out infinite; }
@keyframes cur-ds { 0%, 100% { transform: translate(200px, 214px); } 40% { transform: translate(84px, 150px); } 70% { transform: translate(250px, 150px); } }

.art .a-ring { animation: a-ring 1.8s var(--ease) .5s both; }
.art .a-ring { transform: rotate(-90deg); }
.art .a-tilt { transform: rotate(-7deg); }

.sh--wide { max-width: none; }
.art .a-ring { transform: rotate(-90deg); }

/* A container that is also a section head keeps the container width. */
.wrap.sh, .wrap.sh--split { max-width: var(--container); }
.stack-cards.is-stacked .stack-card { box-shadow: 0 -12px 40px -20px rgba(15, 15, 14, .25); }

/* Curriculum weeks: question on the left, detail on the right. */
.week { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.week .card-num { margin-bottom: 18px; }
.week-head .lead { margin-top: 14px; }
.week-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.week-out { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.week-out span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bg-night .week-out { border-color: var(--night-line); }
.bg-night .week-out span { color: var(--on-night-2); }
@media (max-width: 960px) {
  .week, .week-body { grid-template-columns: 1fr; }
}
.price-card > :first-child .btn:not(.btn--ghost) { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.price-card > :first-child .btn:not(.btn--ghost):hover { --bg: var(--accent-soft); --bd: var(--accent-soft); box-shadow: none; }
.price-card > :first-child .btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .32); }
.price-card > :first-child .btn--ghost:hover { --bd: #fff; }
.footer-col li:has(.footer-soon) { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.list-num--compact > li { padding: 14px 0; align-items: baseline; }
.list-num--compact .h4 { font-weight: 500; }
.cols-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
@media (max-width: 640px) { .cols-list { grid-template-columns: 1fr; } }
.lesson { display: flex; flex-direction: column; }
.lesson .week-out { margin-top: auto; }

.bg-night [role="tablist"] { background: var(--night-2); border: 1px solid var(--night-line); }
.bg-night .tab { color: var(--on-night-2); }
.bg-night .tab:hover { color: #fff; }
.bg-night .tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: none; }
.bg-night .table-wrap { background: var(--night-2); border-color: var(--night-line); }
.bg-night .matrix th, .bg-night .matrix td { border-color: var(--night-line); color: var(--on-night-2); }
.bg-night .matrix thead th { background: transparent; color: var(--on-night-2); }
.bg-night .matrix tbody th, .bg-night .matrix tr.is-highlight td { color: var(--on-night); }
/* Internship roadmap: one row per month. */
.month { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding-block: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.month:last-child { border-bottom: 1px solid var(--line); }
.month-head .card-num { margin-bottom: 10px; }
.lesson .caption { color: var(--muted); }
.card--night.lesson .caption { color: var(--on-night-2); }
.clarity { align-self: center; }
@media (max-width: 1100px) { .month { grid-template-columns: 1fr; } }
.card--night .list-dot li, .card--accent .list-dot li { color: var(--on-night-2); }
.card--accent .list-dot li { color: #F1EBFD; }
.card--accent .list-dot li::before, .card--night .list-dot li::before { background: var(--accent-on-night); }
.lesson > :nth-last-child(2) { margin-bottom: 24px; }
.month { grid-template-columns: 180px minmax(0, 1fr); }
@media (max-width: 1100px) { .month { grid-template-columns: 1fr; } }

/* Forms: two columns when the form marks its full-width rows. */
.form:has(.full) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form .full, .form .form-status, .form fieldset { grid-column: 1 / -1; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form fieldset legend { margin-bottom: 10px; padding: 0; }
.consent { font-size: 13px; line-height: 1.5; color: var(--muted); }
.bg-night .form-card { color: var(--ink); border-color: transparent; }
.bg-night .form-card .muted, .bg-night .form-card .consent { color: var(--muted); }
@media (max-width: 640px) { .form:has(.full) { grid-template-columns: 1fr; } }

/* Colleges: formats on a duration scale. */
.ruler-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--shadow); }
.ruler { list-style: none; margin-top: 14px; display: grid; }
.ruler a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.ruler li:first-child a { border-top: 0; }
.ruler-name { font-size: 14.5px; font-weight: 500; }
.ruler-dur { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ruler-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--subtle); position: relative; overflow: hidden; }
.ruler-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.ruler-bar--full::after { background: var(--flame); }
.ruler a:hover .ruler-name { color: var(--accent); }
.ruler a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* In-page table of contents (sticky). */
.toc ol { list-style: none; counter-reset: t; display: grid; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 36px 1fr; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text-2); font-size: 15px; transition: color .2s; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 2px; }
.toc a:hover { color: var(--ink); }
.bg-night .toc a { border-color: var(--night-line); color: var(--on-night-2); }
.bg-night .toc a:hover { color: #fff; }
.bg-night .toc a::before { color: var(--accent-on-night); }
.format .btn-row { margin-top: 20px; }
.card--tall { min-height: 260px; display: flex; flex-direction: column; }
.card--tall .card-num { margin-bottom: auto; padding-bottom: 40px; }
.card--accent .card-num { color: #E5DAF8; }
.btn--light { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--light:hover { --bg: var(--accent-soft); --bd: var(--accent-soft); }
.speaker { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; }
.speaker img { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
@media (max-width: 960px) { .toc { display: none; } }
.bg-night .form-card .btn:not(.btn--ghost) { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.bg-night .form-card .btn:not(.btn--ghost):hover { --bg: var(--accent); --bd: var(--accent); --fg: #fff; }
.job-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; padding: 24px; }
.job-card > * { grid-column: 1 / -1; }
.job-card > div { grid-column: 1; }
.job-card > .btn { grid-column: 2; grid-row: 1; align-self: start; }
.job-card .job-verified { font-size: 13px; color: var(--muted); }
.job-card .h3 + p { color: var(--text-2); margin-top: 2px; }
a.card--night { color: var(--on-night); }
a.card--accent { color: #fff; }
.route-list { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }
.route-list span:not(:last-child)::after { content: " · "; }
.routes + .tabpanel, .routes ~ .tabpanel { margin-top: 20px; }
.kv--night dt { color: var(--on-night-2); }
.kv--night dt, .kv--night dd { border-color: var(--night-line); }
.kv dd { font-size: 17px; }
.routes[role="tablist"] { display: grid; padding: 0; background: none; border-radius: 0; }
.card--flex, a.card--flex { display: flex; flex-direction: column; min-height: 180px; }
.card--flex > .link-arrow { margin-top: auto; padding-top: 24px; }
.card--flex > .btn-row:last-child { margin-top: auto; padding-top: 20px; }
.hero--404 { min-height: 70vh; display: flex; align-items: center; }
.job-body { display: grid; gap: 36px; }
.job-sec .list-dot, .job-sec ul { margin-top: 12px; }

/* Dark cards: secondary text and links use the on-night palette (AA). */
.card--night { --muted: var(--on-night-2); }
.card--night .meta, .card--night .card-num, .card--night .caption, .card--night .week-out span { color: var(--on-night-2); }
.card--night .link-arrow, .bg-night .link-arrow { color: var(--accent-on-night); }
.bg-night .caption { color: var(--on-night-2); }
.marquee:focus-visible, .expert-marquee:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.price-card > :first-child .caption { color: var(--on-night-2); }
.bg-night .marquee-toggle { background: transparent; color: var(--on-night); border-color: rgba(255, 255, 255, .28); }
.bg-night .marquee-toggle:hover { border-color: #fff; }
.bg-night .expert-photo { background: var(--night-2); }
.bg-night .expert-ph { color: var(--on-night-2); }
.post-cta { margin-top: clamp(56px, 6vw, 96px); margin-bottom: 12px; }

/* ==========================================================================
   v7: fixes + photographic layer
   ========================================================================== */

/* Tables never force a sideways scroll on desktop; on phones each row
   becomes a small stacked card, with column names from data-label (site.js). */
.matrix, .table { min-width: 0; table-layout: auto; }
.matrix th, .matrix td { padding: 18px 24px; }
.matrix tbody th { width: 34%; }
@media (max-width: 720px) {
  .table-wrap { overflow: visible; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix tr { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .matrix tbody tr:last-child { border-bottom: 0; }
  .matrix th, .matrix td { padding: 0; border: 0; }
  .matrix td { margin-top: 10px; }
  .matrix tbody th + td, .matrix tr > td:first-child { margin-top: 0; }
  .matrix td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: .02em; color: var(--muted); margin-bottom: 2px; }
  .matrix tbody th { width: auto; margin-bottom: 6px; }
  .bg-night .matrix tr { border-color: var(--night-line); }
  .bg-night .matrix td[data-label]::before { color: var(--on-night-2); }
}

/* List markers: larger, crisper, clearly readable. */
.list-check li, .ticks li, .list-x li, .flags li { padding-left: 34px; }
.list-check li::before, .ticks li::before, .list-x li::before, .flags li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px; border-radius: 50%;
  background-size: 13px !important; background-position: center !important; background-repeat: no-repeat !important;
}
.list-check li::before, .ticks li::before { background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E32C5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E"); }
.list-x li::before, .flags li::before { background-color: #FFE6DF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3270C' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.bg-night .list-x li::before, .bg-night .flags li::before, .card--night .list-x li::before, .card--night .flags li::before { background-color: rgba(255, 132, 102, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9A80' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.bg-night .list-check li::before, .bg-night .ticks li::before, .card--night .list-check li::before { background-color: rgba(199, 174, 245, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9C7FA' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E"); }
.list-dot li::before { width: 7px; height: 7px; top: .6em; }
.ico-badge { width: 46px; height: 46px; }
.ico-badge .ico { width: 22px; height: 22px; stroke-width: 1.8; }

/* A button row after text always gets air (explicit mt-* still wins). */
:where(p, ul, ol, h2, h3, h4, dl, .note, .measure, .lead) + :where(.btn-row) { margin-top: 24px; }
.empty-state h3 + p { margin-top: 10px; }

/* Select boxes: custom chevron with room on the right. */
.select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366665F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.select::-ms-expand { display: none; }
.input, .select, .textarea { padding-left: 16px; }
.textarea { padding-top: 14px; }
.form-card { padding: clamp(28px, 3.4vw, 48px); }
.form { row-gap: 22px; }

/* Dark blocks get a soft violet glow, like a lit stage. */
.bg-night { background:
  radial-gradient(900px 420px at 88% -8%, rgba(110, 50, 197, .32), transparent 62%),
  radial-gradient(700px 360px at -6% 108%, rgba(255, 72, 38, .10), transparent 60%),
  var(--night); }

/* ---------- Photographic hero ---------- */
.hero-media { padding: 12px 0 0; }
.breadcrumbs + .hero-media { padding-top: 0; }
.hero-frame {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  margin: 0 clamp(8px, 1.2vw, 16px); border-radius: var(--r-lg); min-height: min(86vh, 860px);
  background: var(--night); color: #fff;
}
.hero-frame--short { min-height: min(74vh, 700px); }
.hero-frame .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform-origin: 50% 40%; }
.hero-frame::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 11, 10, .30) 0%, rgba(12, 11, 10, .18) 35%, rgba(12, 11, 10, .86) 100%),
              linear-gradient(90deg, rgba(12, 11, 10, .62) 0%, rgba(12, 11, 10, .10) 70%); }
.hero-frame > .wrap { position: relative; padding-block: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.hero-frame .hero-title { color: #fff; max-width: 15ch; font-size: clamp(40px, 4.4vw + 8px, 84px); }
.hero-frame--short .hero-title { font-size: clamp(36px, 3.4vw + 10px, 68px); max-width: 17ch; }
.hero-frame .lead { color: rgba(255, 255, 255, .86); max-width: 52ch; }
.hero-frame .eyebrow { color: rgba(255, 255, 255, .9); }
.hero-frame .eyebrow::before { box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.hero-frame .btn:not(.btn--ghost) { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.hero-frame .btn:not(.btn--ghost):hover { --bg: var(--accent-soft); --bd: var(--accent-soft); box-shadow: none; }
.hero-frame .btn--ghost { --bg: rgba(255, 255, 255, .10); --fg: #fff; --bd: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-frame .btn--ghost:hover { --bg: rgba(255, 255, 255, .18); --bd: #fff; --fg: #fff; }
.hero-frame .pill { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .26); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Frosted panels over photos. */
.glass { position: relative; border-radius: 20px; padding: 22px 24px; color: #fff; max-width: 360px;
  background: rgba(20, 18, 16, .42); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.glass .caption, .glass .small { color: rgba(255, 255, 255, .78); }
.glass-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; margin-top: 6px; }
.glass ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.glass li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: rgba(255, 255, 255, .9); }
.glass li .ico { width: 18px; height: 18px; color: #D9C7FA; }

/* The white panels that sit on a hero photo (clarity note, duration ruler). */
.hero-frame .hero-panel { width: min(440px, 100%); background: rgba(255, 255, 255, .96); color: var(--ink); border-radius: 22px; padding: clamp(20px, 2.2vw, 28px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); border: 0; }
.hero-frame .hero-panel .muted { color: var(--muted); }
.hero-frame .note--flame.hero-panel { background: #FFF4F0; }

@media (max-width: 960px) {
  .hero-frame { min-height: 0; }
  .hero-frame > .wrap { grid-template-columns: 1fr; padding-top: clamp(160px, 40vw, 280px); }
  .hero-frame .glass, .hero-frame .hero-panel { max-width: none; width: 100%; }
}

/* ---------- Photos in the flow ---------- */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--subtle); isolation: isolate; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo--landscape { aspect-ratio: 3 / 2; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--square { aspect-ratio: 1; }
.photo-tag { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #fff;
  background: rgba(20, 18, 16, .5); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.photo .glass { position: absolute; left: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); }

/* Full-width cinematic band with a statement over the photo. */
.band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(420px, 46vw, 640px);
  display: flex; align-items: flex-end; color: #fff; background: var(--night); }
.band > img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; z-index: -2; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 11, 10, .74), rgba(12, 11, 10, .18) 72%), linear-gradient(0deg, rgba(12, 11, 10, .55), transparent 55%); }
.band-body { padding: clamp(28px, 5vw, 64px); max-width: 860px; }
.band .statement { color: #fff; max-width: 24ch; }
.band .statement .text-accent { color: #D9C7FA; }
.band .eyebrow { color: rgba(255, 255, 255, .88); }

/* Cards with a photo on top. */
.card--media, a.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--subtle); margin: 0; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.card-media .photo-tag { left: 14px; bottom: 14px; }
.card--media:hover .card-media img { transform: scale(1.045); }
.card-body { padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; flex: 1; }
.card-body > .foot, .card-body > .link-arrow:last-child { margin-top: auto; padding-top: 24px; }
.card--night .card-media { background: var(--night-2); }

/* Photo cards inside a bento grid. */
.card--photo { position: relative; padding: 0; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; color: #fff; border: 0; isolation: isolate; background: var(--night); }
.card--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--ease); }
.card--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 11, 10, .84), rgba(12, 11, 10, 0) 62%); }
.card--photo:hover > img { transform: scale(1.04); }
.card--photo .card-body { position: relative; }
.card--photo .h3, .card--photo .h4 { color: #fff; }
.card--photo .muted { color: rgba(255, 255, 255, .82); }
.row-span-2 { grid-row: span 2; }
@media (max-width: 960px) { .row-span-2 { grid-row: auto; min-height: 380px; } }
.bg-subtle .card--photo, .bg-subtle .card--media.card--night { background: var(--night); }
.hero-frame .hero-panel { width: 420px; max-width: 100%; }
.hero-frame .glass { width: 340px; }
@media (max-width: 960px) { .hero-frame .hero-panel, .hero-frame .glass { width: 100%; } }
.hero-media { padding-bottom: 12px; }
.card--photo > img { object-position: 50% 35%; }
.job-head { display: flex; gap: 16px; align-items: flex-start; }
.job-logo { width: 44px; height: 44px; flex: none; border-radius: 12px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); }
.job-logo--ph { display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.job-card .job-meta { margin-top: 4px; }
.card--night .frame { --muted: #66665F; } .frame-url { color: #66665F; }

/* ==========================================================================
   v8: QA fixes
   ========================================================================== */

/* Tables: no scroll container unless a table genuinely overflows sideways,
   and never a vertical scrollbar. */
.table-wrap { overflow-x: auto; overflow-y: hidden; }

/* Colleges speaker card: fixed portrait, never stretched by the grid. */
.speaker { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
.speaker img { width: 112px; height: 140px; aspect-ratio: auto; align-self: start; object-fit: cover; object-position: 50% 20%; border-radius: 14px; }
@media (max-width: 480px) { .speaker { grid-template-columns: 1fr; } .speaker img { width: 96px; height: 120px; } }

/* Contact: a two-step picker that reads as a choice. */
.step-label { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }
.step-label > span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-family: var(--font); }
.step-label strong { font-weight: 500; color: var(--accent); }
.step-label--2 { margin-top: clamp(40px, 5vw, 64px); }
.routes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.route { position: relative; padding: 22px 20px 20px; border: 1.5px solid var(--line-2); background: var(--surface); }
.route .h4 { padding-right: 30px; }
.route-radio { position: absolute; top: 18px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); transition: border-color .2s, background-color .2s; }
.route:hover { border-color: var(--ink); }
.route:hover .route-radio { border-color: var(--ink); }
.route[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(110, 50, 197, .14); transform: none; }
.route[aria-selected="true"] .route-radio { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.route .route-cta { display: inline-flex; align-items: center; gap: 6px; }
.route .route-cta::after { content: "→"; transition: transform .3s var(--ease); }
.route:hover .route-cta::after { transform: translateX(3px); }
.route[aria-selected="true"] .route-cta { color: var(--accent-ink, var(--accent)); }
.route[aria-selected="true"] .route-cta::after { content: "✓"; }
.route:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.routes ~ .tabpanel { margin-top: 0; }
.routes ~ .tabpanel.form-card { border: 1.5px solid var(--accent); box-shadow: 0 30px 60px -40px rgba(110, 50, 197, .45); }
@media (max-width: 1100px) { .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .routes { grid-template-columns: 1fr; } .route-list { display: none; } }
.route .route-cta { display: block; } .route .route-cta::after { display: inline-block; margin-left: 6px; }
/* Tap targets: at least 24px for every standalone control (WCAG 2.5.8). */
.check input { width: 22px; height: 22px; margin-top: 1px; }
.footer-base a { display: inline-block; padding: 4px 2px; margin: -4px -2px; }
.check input { flex: none; }
.check input { width: 24px; height: 24px; min-width: 24px; }
@media (max-width: 720px) {
  .route > .small.muted:not(.route-desc) { display: none; }
  .route-list { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}