/* === Columba Marketing Site === */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=VT323&family=IBM+Plex+Mono:wght@500;600&family=Pacifico&family=Big+Shoulders+Display:wght@700;800;900&family=Caveat:wght@600;700&family=Patrick+Hand&family=EB+Garamond:ital,wght@1,600;1,700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  --bg: oklch(0.985 0.004 90);
  --bg-2: oklch(0.965 0.005 90);
  --bg-3: oklch(0.94 0.006 90);
  --ink: oklch(0.16 0 0);
  --ink-2: oklch(0.32 0 0);
  --ink-3: oklch(0.5 0 0);
  --ink-4: oklch(0.7 0 0);
  --hairline: oklch(0.88 0.003 90);
  --hairline-2: oklch(0.92 0.003 90);

  /* Logo-derived accents */
  --mint:  #A8DBC0;     /* builder */
  --sky:   #A8C8F0;     /* professional */
  --peach: #F4C8A0;     /* developer */
  --mint-ink:  oklch(0.42 0.08 160);
  --sky-ink:   oklch(0.42 0.10 245);
  --peach-ink: oklch(0.42 0.10 60);

  --radius: 10px;
  --radius-lg: 14px;

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }
.mono {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  color: var(--ink-3);
}

::selection { background: oklch(0.86 0.07 60 / 0.4); color: var(--ink); }

/* Global focus-visible — keyboard users get a clear, branded ring on
   interactive controls. Components that paint a custom ring (type-card,
   wl-chip, scale-btn, field input, etc.) override this with their own
   :focus-visible rule. Headings with tabindex="-1" (set by the SPA router
   for screen-reader landmark focus) are NOT keyboard-reachable, so they
   should not paint a visible ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--peach);
  outline-offset: 2px;
}
/* Programmatic focus on landmarks (h1 with tabindex="-1") must not paint */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ---------------- Layout ---------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------------- Nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: oklch(0.985 0.004 90 / 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled { border-color: var(--hairline); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--gutter);
  max-width: 1320px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.brand-icon { width: 26px; height: 26px; display: block; }
.brand-logo { height: 30px; width: auto; display: block; }
.nav .brand-logo { height: 44px; }

/* hero trust strip */
.hero-trust {
  margin-top: 32px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
}
.hero-trust > span { white-space: nowrap; }
.hero-trust .dot { color: var(--ink-4); }
.hero-trust > span:first-child { font-family: 'Geist', sans-serif; color: var(--ink-2); margin-right: 4px; }

/* explainer 3-step */
.explain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .explain { grid-template-columns: 1fr; }
  .explain-arrow { display: none; }
}
.explain-step {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 32px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
}
.explain-num {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3);
}
.explain-step h3 { font-size: 24px; letter-spacing: -0.025em; font-weight: 500; }
.explain-step p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.explain-arrow {
  font-size: 24px; color: var(--ink-4); align-self: center;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 14px; font-size: 14px; color: var(--ink-2); border-radius: 8px;
  transition: background .15s ease, color .15s ease;
  font-weight: 450;
}
.nav-links a:hover { background: var(--bg-3); color: var(--ink); }
.nav-links a.active { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 6px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  transition: all .18s ease;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
/* magicui.css ships a shimmering conic-gradient perimeter and a filled
   --ink inner pill on .btn-primary via ::before/::after. The hollow-pill
   redesign drops both — the border + transparent fill carry the
   affordance, so kill the pseudo-elements outright. */
.btn-primary::before, .btn-primary::after { content: none !important; display: none !important; }
.btn-primary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.btn-ghost { color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-3); color: var(--ink); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-lg { padding: 10px 22px; font-size: 15px; border-radius: 999px; }
/* Hide trailing arrow glyphs site-wide on buttons — the pill shape and
   hover state carry the affordance now. */
.btn .arrow { display: none; }

/* ---------------- Pages ---------------- */
.page { display: none; padding-top: 64px; padding-bottom: clamp(40px, 5vw, 80px); }
.page.active { display: block; }

/* ---------------- Section ---------------- */
/* Base section rhythm. NOTE: magicui.css ships its own `section` and
   `section.tight` / `section.section-tight` rules (lines ~619-622) that
   override these — the magicui.css system is the authoritative source
   for vertical rhythm (tight = padding-top only, with an adjacent-sibling
   rule that collapses padding between two consecutive tight sections).
   This rule is kept as a sane fallback if magicui.css fails to load. */
/* Use longhand padding-top/bottom only — shorthand `padding: ... 0` would
   set padding-left/right to 0, which beats `.wrap` (specificity (0,1,1) >
   (0,1,0)) and slams quote-blocks to the viewport edges on mobile. */
section { padding-top: clamp(80px, 11vw, 140px); padding-bottom: clamp(80px, 11vw, 140px); position: relative; }
section.tight { padding-top: clamp(50px, 7vw, 90px); padding-bottom: clamp(50px, 7vw, 90px); }

.eyebrow {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-3); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3);
}

h1, h2, h3, h4 { letter-spacing: -0.035em; line-height: 1.02; font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(48px, 7.5vw, 104px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.96; }
h2 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }

p { color: var(--ink-2); }
p.lead { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.012em; max-width: 620px; }
.lede { font-weight: 400; font-size: 19px; line-height: 1.5; color: var(--ink-2); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(80px, 9vw, 130px);
  padding-bottom: clamp(70px, 8vw, 110px);
  /* `overflow: clip` (vs `hidden`) lets browsers paint slight visual
     overflow without affecting layout. We also apply `overflow: hidden`
     to `.hero-bg` itself (where the canvas lives) so the dot animation
     stays contained even though the hero foreground can paint past
     its box edge — that's what lets the italic "e" of "AI-native"
     never get clipped, regardless of viewport width. */
  overflow: clip;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  pointer-events: auto;
  overflow: hidden;
}
.hero-bg canvas { display: block; width: 100%; height: 100%; }
/* Soft fade so dots dissolve into page bg + the right-side text area stays legible */
.hero-fade {
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  /* Soft vignette only — keep dots visible across the full hero, just fade edges into page bg */
  background:
    linear-gradient(180deg, rgba(250,250,247,0) 0%, rgba(250,250,247,0) 70%, var(--bg) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(250,250,247,0) 40%, rgba(250,250,247,0.35) 85%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 1; }
.hero h1, .hero .lead, .hero .hero-cta-row, .hero .hero-trust { position: relative; }
.hero {
  /* keep block layout from hero wrap padding */
  padding-left: 0; padding-right: 0;
  position: relative;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 56px;
}
.hero-eyebrow { margin-bottom: 28px; }
.hero h1 { margin-bottom: 30px; max-width: 18ch; }
.hero h1 .accent {
  background-image: linear-gradient(115deg, var(--peach) 0%, color-mix(in oklch, var(--peach) 70%, var(--ink)) 60%, var(--peach) 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: hueShift 9s ease-in-out infinite alternate;
  font-style: italic; font-weight: 500;
}
@keyframes hueShift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.hero-cta-row { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-link:hover { color: var(--ink); border-bottom-color: var(--ink-3); }
.hero-promise {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 18px;
  margin-bottom: 0;
}
/* image placeholder */
.img-ph {
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, var(--bg-2) 12px 13px);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  text-align: center;
  min-height: 200px;
}
.img-ph .ph-inner { max-width: 80%; }
.img-ph .ph-tag {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 11px; color: var(--ink-3);
  display: block; margin-bottom: 10px; letter-spacing: 0.04em;
}
.img-ph .ph-prompt {
  font-size: 13px; color: var(--ink-3); font-style: italic; line-height: 1.5;
  display: block;
}
.bento-cell.dark .img-ph { border-color: oklch(0.35 0 0); background: repeating-linear-gradient(135deg, transparent 0 12px, oklch(0.22 0 0) 12px 13px); }
.bento-cell.dark .img-ph .ph-tag, .bento-cell.dark .img-ph .ph-prompt { color: oklch(0.7 0 0); }
.hero-placeholder {
  position: absolute; right: var(--gutter); top: 110px;
  width: 380px; height: 380px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, var(--bg-2) 12px 13px);
  display: none;
  align-items: center; justify-content: center;
  padding: 28px;
}
@media (min-width: 1100px) { .hero-placeholder { display: flex; } }
.hero-placeholder-inner { max-width: 80%; text-align: center; }

/* hero stats strip */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.hero-stats .item {
  padding: 28px 24px;
  border-right: 1px solid var(--hairline);
}
.hero-stats .item:last-child { border-right: 0; }
.hero-stats .num { font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -0.04em; }
.hero-stats .lbl { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .item:nth-child(2) { border-right: 0; }
  .hero-stats .item:nth-child(1), .hero-stats .item:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}

/* ---------------- Logos strip ---------------- */
.partners {
  padding: 50px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.partners-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); text-align: center; margin-bottom: 24px; font-family: 'Geist', system-ui, sans-serif; font-weight: 500; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 80px; animation: scroll 38s linear infinite; width: max-content; }
.marquee-item {
  font-size: 22px; font-weight: 500; color: var(--ink-3); letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px;
  opacity: 0.7;
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--bg);
  border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.card .card { box-shadow: none; }
.card:hover {
  border-color: var(--ink-4);
  transform: translateY(-2px);
}
.card .corner {
  position: absolute; right: 24px; top: 24px;
  width: 10px; height: 10px; border-radius: 999px;
  opacity: 0.7;
}

/* ---------------- Three Paths ---------------- */
.paths-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 1100px) { .paths-grid.paths-grid-flagship { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .paths-grid { grid-template-columns: 1fr; } }

/* === Paths page: asymmetric featured layout =========================
   Row 1: one wide featured card (Builder) — art on the left, body on
   the right, taller and more detailed.
   Row 2: a 2-up sub-grid for Professional + Developer with the
   classic art-on-top layout.
   ==================================================================== */
.paths-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.paths-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 900px) {
  .paths-pair { grid-template-columns: 1fr; gap: 18px; }
  .paths-layout { gap: 18px; }
}

/* Featured (horizontal) card variant — used on the Builder card in the
   paths page hero. Larger, art on the left, body on the right. */
.path-card--featured {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  display: grid;
  position: relative;
}
.path-card--featured .path-card-art {
  aspect-ratio: auto;
  min-height: 100%;
  border-bottom: 0;
  border-right: 1px solid var(--hairline);
}
.path-card--featured .path-card-body {
  padding: 36px 36px 32px;
}
.path-card--featured .path-num { font-size: 12px; }
.path-card--featured h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  margin-bottom: 14px;
}
.path-card--featured .path-lede {
  font-size: 15px;
  line-height: 1.55;
}
/* Push the CTA to the bottom of the body so the featured card looks
   anchored, even when the body content is shorter than the art panel. */
.path-card--featured .path-card-foot { margin-top: auto; }
/* A subtle "Featured" badge to add visual hierarchy. */
.path-card--featured::after {
  content: 'Most popular';
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px -10px oklch(0.18 0 0 / 0.18);
}

@media (max-width: 1100px) {
  .path-card--featured { grid-template-columns: 1fr; }
  .path-card--featured .path-card-art {
    aspect-ratio: 16 / 8;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .path-card--featured .path-card-body { padding: 28px 28px 28px; }
}

/* Hero meta strip — three small color-chip labels below the lead copy,
   reinforcing the three-track theme without adding more body copy. */
.paths-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.paths-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px 5px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--ink-2);
}
.paths-hero-chip i {
  width: 8px; height: 8px; border-radius: 999px;
  display: inline-block;
}

.path-card {
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .2s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.path-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--accent);
  z-index: 2;
}
/* per-track variables */
.path-card.builder      { --accent: var(--mint);  --accent-ink: var(--mint-ink); --accent-soft: oklch(from var(--mint) l c h / 0.18); }
.path-card.professional { --accent: var(--sky);   --accent-ink: var(--sky-ink);  --accent-soft: oklch(from var(--sky) l c h / 0.18); }
.path-card.developer    { --accent: var(--peach); --accent-ink: var(--peach-ink); --accent-soft: oklch(from var(--peach) l c h / 0.18); }

.path-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-ink);
  box-shadow: 0 30px 60px -38px oklch(0.18 0 0 / 0.25), 0 8px 22px -14px oklch(0.18 0 0 / 0.10);
}

/* === Card art panel (top) === */
.path-card-art {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 80% 20%, var(--accent-soft) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--hairline);
  color: var(--accent-ink);
  transition: background .3s ease;
}
.path-card:hover .path-card-art {
  background:
    radial-gradient(120% 120% at 80% 20%, oklch(from var(--accent) l c h / 0.32) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.path-card-art > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--accent-ink);
  display: block;
}
.art-corner-glyph {
  position: absolute; right: 14px; top: 14px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink);
  z-index: 2;
  transition: transform .3s ease, border-color .2s ease;
}
.path-card:hover .art-corner-glyph { transform: rotate(-4deg) scale(1.06); border-color: var(--accent-ink); }

/* Builder art: gentle floating tile motion */
.art-builder .art-tiles { transform-origin: center; transition: transform .6s ease; }
.path-card.builder:hover .art-builder .art-tiles { transform: translateY(-3px); }

/* Developer art: animated dashed flow */
.art-developer .art-edges { stroke-dasharray: 4 4; animation: dash-flow 4s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .art-developer .art-edges { animation: none; } }

/* Terminal vignette (now used by Developer card) — colors flow from --accent */
.art-terminal {
  position: absolute; inset: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, oklch(0.16 0 0) 0%, oklch(0.13 0.005 60) 100%);
  border: 1px solid oklch(0.28 0.02 60);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 30px -16px oklch(0.18 0.02 60 / 0.4);
}
.art-terminal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid oklch(0.28 0.02 60);
  background: oklch(0.18 0.005 60);
}
.art-terminal-bar i {
  width: 8px; height: 8px; border-radius: 999px;
  background: oklch(0.42 0.04 60);
}
.art-terminal-bar i:nth-child(1) { background: #FF5F57; }
.art-terminal-bar i:nth-child(2) { background: #FEBC2E; }
.art-terminal-bar i:nth-child(3) { background: #28C840; }
.art-terminal-title {
  margin-left: 8px;
  font-size: 10px;
  color: oklch(0.65 0.01 60);
  letter-spacing: 0.04em;
}
.art-terminal-body {
  flex: 1;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--accent);
  overflow: hidden;
}
.art-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-line.dim { color: oklch(0.62 0.04 60); }
.art-prompt { color: var(--accent); margin-right: 6px; }
.art-pulse {
  display: inline-block;
  background: oklch(from var(--accent) l c h / 0.18);
  color: var(--accent);
  padding: 1px 6px; border-radius: 4px;
  animation: art-pulse 2s ease-in-out infinite;
}
@keyframes art-pulse { 50% { background: oklch(from var(--accent) l c h / 0.4); } }
.art-cursor {
  display: inline-block;
  width: 7px; height: 12px;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: -2px;
  animation: art-blink 1s steps(1) infinite;
}
@keyframes art-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .art-pulse, .art-cursor { animation: none; }
}

/* Professional art: chat conversation vignette */
.art-chat {
  position: absolute; inset: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 30px -16px oklch(0.18 0 0 / 0.18);
}
.art-chat-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-2);
}
.art-chat-avatar {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.18);
}
.art-chat-title {
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.art-chat-status {
  margin-left: auto;
  font-size: 9px;
  color: var(--accent-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.art-chat-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  animation: art-chat-dot 1.6s ease-in-out infinite;
}
@keyframes art-chat-dot { 50% { opacity: 0.35; } }
.art-chat-body {
  flex: 1;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
}
.art-chat-bubble {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;
  max-width: 80%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art-chat-bubble.agent {
  align-self: flex-start;
  background: oklch(from var(--accent) l c h / 0.14);
  color: var(--accent-ink);
  border-top-left-radius: 4px;
}
.art-chat-bubble.user {
  align-self: flex-end;
  background: var(--accent);
  color: oklch(0.18 0 0);
  border-top-right-radius: 4px;
}
.art-chat-bubble.typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 10px;
  background: oklch(from var(--accent) l c h / 0.14);
}
.art-chat-bubble.typing i {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--accent);
  animation: art-typing 1.2s ease-in-out infinite;
}
.art-chat-bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.art-chat-bubble.typing i:nth-child(3) { animation-delay: 0.30s; }
@keyframes art-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .art-chat-bubble.typing i, .art-chat-dot { animation: none; }
}

/* ====================================================================
   Path banners — three big horizontal cards on /paths.
   Each banner has a full-bleed ambient bg widget (dithering / waves /
   ascii-dots) layered behind a 2-col content grid. Per-track bg variants:
     .builder      → light dithering (mint front on cream)
     .professional → dark waves (sky stroke on near-black)
     .developer    → dark ascii-dots (peach dots on near-black)
   ==================================================================== */
.paths-banners {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  margin-top: 32px;
}
.path-banner {
  position: relative;
  display: block;
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--hairline);
  min-height: clamp(360px, 38vw, 460px);
  box-shadow:
    0 22px 48px -32px oklch(0.18 0 0 / 0.32),
    0 8px 18px -10px oklch(0.18 0 0 / 0.12);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
  --banner-ink: var(--ink);
  --banner-ink-2: var(--ink-2);
  --banner-ink-3: var(--ink-3);
  --banner-hairline: var(--hairline);
  --banner-accent: var(--accent, var(--ink));
}
.path-banner:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 78px -36px oklch(0.18 0 0 / 0.42),
    0 14px 32px -18px oklch(0.18 0 0 / 0.20);
}
.path-banner:focus-visible {
  outline: 2px solid var(--banner-accent);
  outline-offset: 4px;
}

.path-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.path-banner-bg > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-track surface treatments — Builder reads on the cream surface;
   Professional and Developer use dark surfaces so their full-bleed
   ambient widgets (waves on dark blue, ascii dots on near-black) don't
   eat the text. Light ink overrides for those two. */
.path-banner.builder {
  --accent: var(--mint);
  --banner-accent: var(--mint-ink);
  /* Mint-on-cream dithering competes with secondary text. Pull the ink-2 and
     ink-3 tokens up toward the strongest ink so the lede, list rows, and stat
     labels stay legible against the pattern. Visual hierarchy is preserved by
     font-size and weight rather than by color alone. */
  --banner-ink-2: var(--ink);
  --banner-ink-3: var(--ink-2);
}
/* Soft cream scrim that sits between the dithering and the text content on
   the Builder banner only — knocks ~30% of the pattern visibility back so
   prose reads cleanly. Pro/Dev don't need this (their dark surfaces already
   absorb their backgrounds). */
.path-banner.builder .path-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(from var(--bg) l c h / 0.32);
  pointer-events: none;
}
.path-banner.professional {
  background: oklch(0.165 0.02 245);
  border-color: oklch(0.28 0.02 245);
  color: #fff;
  --accent: var(--sky);
  --banner-accent: oklch(0.85 0.06 245);
  --banner-ink: #fff;
  --banner-ink-2: oklch(0.92 0.02 245);
  --banner-ink-3: oklch(0.78 0.03 245);
  --banner-hairline: oklch(0.32 0.02 245);
}
.path-banner.developer {
  background: #0E0E10;
  border-color: oklch(0.25 0 0);
  color: #fff;
  --accent: var(--peach);
  --banner-accent: var(--peach);
  --banner-ink: #fff;
  --banner-ink-2: oklch(0.92 0 0);
  --banner-ink-3: oklch(0.78 0 0);
  --banner-hairline: oklch(0.26 0 0);
}

.path-banner-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding: clamp(36px, 4vw, 56px);
  align-items: start;
  height: 100%;
  color: var(--banner-ink);
}

.path-banner-head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
}
.path-banner-head .path-num {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--banner-accent);
  margin: 0;
}
.path-mega {
  font-size: clamp(56px, 8.4vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin: 0;
  color: var(--banner-ink);
}
.path-tagline {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--banner-ink-2);
  max-width: 22ch;
}

.path-banner-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 26px);
  padding-top: 8px;
}
.path-banner-detail .path-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--banner-ink-2);
  margin: 0;
  max-width: 42ch;
}
.path-banner-detail .path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.path-banner-detail .path-list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--banner-ink-2);
  padding: 11px 0;
  border-top: 1px solid var(--banner-hairline);
  position: relative;
  padding-left: 18px;
}
.path-banner-detail .path-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 19px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--banner-accent);
  opacity: 0.85;
}
.path-banner-detail .path-list li:last-child {
  border-bottom: 1px solid var(--banner-hairline);
}

.path-banner-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding-top: 4px;
}
.path-banner-foot .path-stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 28px;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.path-banner-foot .path-stat { display: flex; flex-direction: column; gap: 4px; }
.path-banner .path-banner-foot .s-num,
.path-banner .path-banner-foot .path-stats .s-num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--banner-ink);
}
.path-banner .path-banner-foot .s-lbl,
.path-banner .path-banner-foot .path-stats .s-lbl {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--banner-ink-3);
}
.path-banner .path-banner-foot .path-claims {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.path-banner .path-banner-foot .path-claim {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--banner-ink-2);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--banner-hairline);
  background: oklch(from var(--banner-ink) l c h / 0.05);
}
.path-banner .path-cta {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--banner-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.path-banner .path-cta .arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.path-banner:hover .path-cta .arrow {
  transform: translateX(6px);
}

/* Mobile: stack the columns and shrink the mega title */
@media (max-width: 900px) {
  .path-banner { min-height: 0; }
  .path-banner-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .path-mega { font-size: clamp(44px, 13vw, 76px); }
  .path-banner-foot {
    flex-direction: column;
    align-items: start;
    gap: 18px;
  }
  .path-banner-foot .path-cta { align-self: flex-end; }
}

/* === Card body === */
.path-card-body { padding: 28px 28px 28px; display: flex; flex-direction: column; flex: 1; gap: 0; }
.path-num { font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 11px; color: var(--accent-ink); margin-bottom: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.path-card h3 { font-size: clamp(20px, 1.6vw, 24px); margin-bottom: 12px; line-height: 1.15; }
.path-card .path-lede { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 4px; }

.path-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.path-section-label {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.path-list { list-style: none; margin: 0; padding: 0; border-top: 0; }
.path-list li {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 5px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}
.path-list li::before {
  content: '→';
  color: var(--accent-ink);
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.path-roles { font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.01em; line-height: 1.5; }

.path-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.path-stat { display: flex; flex-direction: column; gap: 4px; }
.path-stats .s-num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.path-stats .s-lbl {
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.path-card-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
}
.path-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.path-cta .arrow { transition: transform .25s ease; color: var(--accent-ink); }
.path-card:hover .path-cta .arrow { transform: translateX(4px); }

/* ---------------- Section header ---------------- */
.section-head {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: end;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 24px; } }
.section-head .eyebrow { margin-bottom: 16px; }

/* ---------------- Stats blocks ---------------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
.stats-strip .cell { padding: 36px; border-right: 1px solid var(--hairline); }
.stats-strip .cell:last-child { border-right: 0; }
.stats-strip .big {
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin-bottom: 12px;
}
.stats-strip .desc { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 900px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .cell:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .stats-strip .cell:nth-child(even) { border-right: 0; }
  .stats-strip .cell:nth-child(1), .stats-strip .cell:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}

/* ---------------- Steps ---------------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  position: relative;
}
.step .step-num { font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-bottom: 60px; display: flex; justify-content: space-between; align-items: center; }
.step h3 { margin-bottom: 12px; font-size: 22px; }
.step p { font-size: 14px; color: var(--ink-2); }
.step .step-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--bg-3);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ---------------- Side nav (in-page) ---------------- */
.split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------------- Pin/Sticky ---------------- */
.pin-section { position: relative; }
.pin-stage { position: sticky; top: 64px; height: 100vh; display: flex; align-items: center; }
.timeline-pin { position: sticky; top: 100px; }
@media (max-width: 900px) { .timeline-pin { position: static; top: auto; } }

/* ---------------- Comparison table ---------------- */
.compare {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: 18px 20px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--hairline);
}
.compare th { font-weight: 500; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-2); }
.compare th.col-us { background: var(--ink); color: var(--bg); }
.compare td.col-us { background: oklch(0.18 0 0 / 0.04); font-weight: 500; }
.compare tr:last-child td { border-bottom: 0; }
.compare .check { color: oklch(0.5 0.13 160); font-weight: 600; }
.compare .x { color: var(--ink-4); }
.compare .partial { color: oklch(0.6 0.1 60); }

/* ---------------- Quote ---------------- */
.quote-block {
  padding: clamp(40px, 6vw, 80px);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.quote-block .q {
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-weight: 500;
  margin-bottom: 24px;
  max-width: 24ch;
}
.quote-block .q em { font-style: italic; font-weight: 400; color: var(--peach); }
.quote-block .src { font-size: 13px; color: oklch(0.7 0 0); }
.quote-block .src strong { color: var(--bg); font-weight: 500; }
.quote-block .dots {
  position: absolute; right: 60px; bottom: 60px;
  width: 96px; height: 96px;
  background-image: url('assets/columba_icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}
.quote-block .dots i { display: none; }
/* On narrow viewports the icon's 96×96px footprint plus the right/bottom
   60px offset can overlap the quote text. Shrink + tuck closer to the
   corner; hide entirely under 480px where space is too cramped. */
@media (max-width: 720px) {
  .quote-block .dots { width: 64px; height: 64px; right: 24px; bottom: 24px; opacity: 0.55; }
}
@media (max-width: 480px) {
  .quote-block .dots { display: none; }
}

/* ---------------- Big featured ---------------- */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } }

.feature-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px;
  background: var(--bg);
  display: flex; flex-direction: column;
  min-height: 360px;
  /* CSS grid default min-width:auto lets intrinsic content width blow out
     the 1fr track on narrow viewports. Force the card to honor its track. */
  min-width: 0;
}
@media (max-width: 720px) {
  .feature-card { padding: 24px; min-height: auto; }
}
.feature-card .body { flex: 1; }
.feature-card h3 { margin-bottom: 14px; }
.feature-card .label { font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }

/* ---------------- Mock UI bits ---------------- */
.mock {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 18px;
  margin-top: 24px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 12px;
  color: var(--ink-2);
}
.mock-bar {
  display: grid; grid-template-columns: 140px 1fr 80px; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  min-width: 0;
  align-items: center;
  margin-bottom: 6px;
  background: var(--bg);
  border: 1px solid var(--hairline-2);
}
.mock-bar.h { background: transparent; border: 0; color: var(--ink-3); font-size: 11px; padding-bottom: 4px; }
.mock-bar > * { min-width: 0; }
.mock-bar .progress { height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; position: relative; }
.mock-bar .progress span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
@media (max-width: 720px) {
  .mock-bar { grid-template-columns: minmax(80px, 1fr) minmax(60px, 2fr) auto; gap: 8px; padding: 8px 10px; font-size: 12px; }
}
/* Tags */
.tag {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--ink-2);
  white-space: nowrap; line-height: 1; display: inline-flex; align-items: center;
  max-width: 100%;
}
.tag.green { background: oklch(0.9 0.06 160); color: oklch(0.32 0.1 160); }
.tag.amber { background: oklch(0.92 0.07 75); color: oklch(0.4 0.1 60); }
.tag.red   { background: oklch(0.92 0.06 25); color: oklch(0.4 0.13 25); }
@media (max-width: 720px) {
  /* Long multi-value tags ("function 60 · clarity 25 · …") overflow narrow
     cards because of nowrap. Allow wrap and break on the · separator. */
  .tag { white-space: normal; line-height: 1.3; word-break: break-word; }
}
/* path-tag is the path-name label — keep visible (was hidden during the tag-chip removal pass; restored intentionally) */
.path-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  background: var(--accent);
  color: var(--accent-ink);
  margin-bottom: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------- Pricing ---------------- */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 36px;
  background: var(--bg);
}
.price-card.feat { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.price-card.feat p, .price-card.feat li { color: oklch(0.78 0 0); }
.price-card.feat h3 { color: var(--bg); }
.price-card .name { font-size: 13px; font-family: 'Geist', system-ui, sans-serif; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; }
.price-card.feat .name { color: var(--peach); }
.price-card .num { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 6px; }
.price-card .num small { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.price-card .num-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; font-family: 'Geist', system-ui, sans-serif; font-weight: 500; }
.price-card.feat .num-sub { color: oklch(0.7 0 0); }
.price-card.feat .num small { color: oklch(0.7 0 0); }
.price-card .desc { font-size: 14px; margin-bottom: 28px; min-height: 42px; }
.price-card ul { list-style: none; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.price-card.feat ul { border-color: oklch(0.3 0 0); }
.price-card ul li { font-size: 14px; padding: 8px 0; display: flex; gap: 10px; align-items: flex-start; }
.price-card ul li::before { content: '✓'; color: oklch(0.5 0.12 160); font-weight: 700; flex-shrink: 0; }
.price-card.feat ul li::before { color: var(--mint); }

/* ---------------- Faq ---------------- */
/* `faq-list` wraps a stack of `faq-item` <details>. Each item already has
   its own border-bottom, so this just flushes vertical margins so the
   border is the only thing separating items. */
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-list .faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  cursor: pointer;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { font-family: 'Geist', system-ui, sans-serif; font-weight: 500; color: var(--ink-3); transition: transform .2s ease; font-size: 18px; }
.faq-item[open] summary .ic { transform: rotate(45deg); }
.faq-item .answer { padding-top: 14px; max-width: 70ch; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* ---------------- Footer ---------------- */
footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(56px, 7vw, 80px) 0 clamp(40px, 4vw, 50px);
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-grid h5 { font-size: 12px; font-family: 'Geist', system-ui, sans-serif; font-weight: 500; color: var(--ink-3); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-grid ul { list-style: none; }
.footer-grid li { padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.footer-grid li a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: clamp(48px, 6vw, 80px); padding-top: 30px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--ink-3);
}

/* ---------------- Reveal ---------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; }

/* ---------------- Cursor word reveal ---------------- */
.split-words .word { display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.split-words.in .word { opacity: 1; transform: none; }
.split-words.in .word:nth-child(1)  { transition-delay: 30ms; }
.split-words.in .word:nth-child(2)  { transition-delay: 70ms; }
.split-words.in .word:nth-child(3)  { transition-delay: 110ms; }
.split-words.in .word:nth-child(4)  { transition-delay: 150ms; }
.split-words.in .word:nth-child(5)  { transition-delay: 190ms; }
.split-words.in .word:nth-child(6)  { transition-delay: 230ms; }
.split-words.in .word:nth-child(7)  { transition-delay: 270ms; }
.split-words.in .word:nth-child(8)  { transition-delay: 310ms; }
.split-words.in .word:nth-child(9)  { transition-delay: 350ms; }
.split-words.in .word:nth-child(10) { transition-delay: 390ms; }
.split-words.in .word:nth-child(11) { transition-delay: 430ms; }
.split-words.in .word:nth-child(12) { transition-delay: 470ms; }
.split-words.in .word:nth-child(13) { transition-delay: 510ms; }

/* ---------------- Page header ---------------- */
.page-hero {
  padding: clamp(48px, 5vw, 72px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-2);
}
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero h1 { font-size: clamp(42px, 5.5vw, 78px); max-width: 18ch; margin-bottom: 22px; }
.page-hero .lead { max-width: 60ch; }

/* Product page: layered flickering-grid background */
.product-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* slightly more vertical room so the masked logo grid has space to read */
  padding: clamp(72px, 7vw, 120px) 0 clamp(64px, 6vw, 96px);
}
.product-hero .wrap { position: relative; z-index: 1; }
.product-hero .lead { color: var(--ink-2); }

.flicker-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.flicker-bg canvas { display: block; }

/* Soft full-bleed grid faded radially into the page bg */
.flicker-bg--soft {
  -webkit-mask-image: radial-gradient(900px circle at 60% 50%, #000 0%, rgba(0,0,0,0.5) 55%, transparent 85%);
          mask-image: radial-gradient(900px circle at 60% 50%, #000 0%, rgba(0,0,0,0.5) 55%, transparent 85%);
}

/* Columba mark made of three circles, each its own flickering grid in
   mint/sky/peach so the logo visibly flickers to life. */
.flicker-logo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Place the icon on the right side of the hero, vertically centered */
  display: block;
}
.flicker-bg--circle {
  /* Each circle is sized in vw so all three line up with the original
     logo geometry: cx 166 / 256 / 346 of viewBox 512. */
  position: absolute;
  width: clamp(110px, 13vw, 180px);
  height: clamp(110px, 13vw, 180px);
  inset: auto;
  top: clamp(64px, 10vh, 140px);
  -webkit-mask-image: radial-gradient(circle, #000 60%, rgba(0,0,0,0.4) 70%, transparent 76%);
          mask-image: radial-gradient(circle, #000 60%, rgba(0,0,0,0.4) 70%, transparent 76%);
}
/* Right-side cluster on desktop, mirrors the icon's 166/256/346 spacing */
.flicker-bg--mint  { right: clamp(180px, 22vw, 320px); }
.flicker-bg--sky   { right: clamp(95px, 13vw, 195px); }
.flicker-bg--peach { right: clamp(10px, 4vw, 70px); }

@media (max-width: 900px) {
  .flicker-bg--circle {
    width: clamp(88px, 22vw, 130px);
    height: clamp(88px, 22vw, 130px);
    top: auto;
    bottom: 18px;
    transform: none;
    opacity: 0.7;
  }
  .flicker-bg--mint  { right: auto; left: 14%; }
  .flicker-bg--sky   { right: auto; left: 50%; transform: translateX(-50%); }
  .flicker-bg--peach { right: 14%; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .flicker-bg { opacity: 0.5; }
}

/* Paths page: skewed Background Boxes with cursor trail */
.paths-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Extra room so the cards below don't kiss the hero */
  padding: clamp(80px, 8vw, 130px) 0 clamp(72px, 7vw, 110px);
}
.paths-hero .wrap { position: relative; z-index: 2; }
.boxes-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-2);
}
.boxes-bg canvas {
  /* Make sure the canvas fills the box even before first tile */
  width: 100%;
  height: 100%;
}

/* ---------------- Scroll progress ---------------- */
.scroll-progress {
  position: fixed; left: 0; top: 64px; height: 2px;
  background: var(--peach);
  width: 0%; z-index: 99; transition: width .15s ease-out;
}

/* ---------------- Cohort visual ---------------- */
.cohort-board {
  margin-top: 24px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.cohort-board .row {
  display: grid; grid-template-columns: 32px 1fr 100px 80px;
  gap: 14px; align-items: center;
  padding: 12px 16px; font-size: 13px;
  border-bottom: 1px solid var(--hairline-2);
  min-width: 0;
}
.cohort-board .row > * { min-width: 0; }
.cohort-board .row:last-child { border-bottom: 0; }
.cohort-board .row.h { background: var(--bg-2); color: var(--ink-3); font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 720px) {
  .cohort-board .row {
    grid-template-columns: 24px 1fr 44px 44px;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .cohort-board .row.h { font-size: 10px; letter-spacing: 0.04em; }
  .cohort-board .avatar { width: 22px; height: 22px; font-size: 10px; }
}
.avatar { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--bg); }

/* ---------------- Misc ---------------- */
.divider { height: 1px; background: var(--hairline); margin: 0; }
.kbd { font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 11px; padding: 2px 6px; background: var(--bg-3); border-radius: 4px; border: 1px solid var(--hairline); color: var(--ink-2); }

/* ---------------- Animated number track ---------------- */
.bignum { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.bignum .unit { font-size: 0.5em; color: var(--ink-3); }

/* ---------------- How grid (numbered process cards) ---------------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .how-grid { grid-template-columns: 1fr; } }

.how-step {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  position: relative;
  transition: transform .25s ease, border-color .2s ease;
}
.how-step:hover { transform: translateY(-2px); border-color: var(--ink-4); }
.how-step .how-num {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em;
}
.how-step .how-label {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10px; color: var(--ink-2); letter-spacing: 0.1em;
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.how-step .how-title { letter-spacing: -0.025em; font-size: 20px; line-height: 1.2; font-weight: 500; }
.how-step .how-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ---------------- "Pick the shape of your work" cards ---------------- */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
  margin-top: 12px;
}
@media (max-width: 1000px) { .shape-grid { grid-template-columns: 1fr; } }

.shape-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 8px 22px -14px oklch(0.18 0 0 / 0.10);
}
.shape-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-ink);
  box-shadow:
    0 30px 60px -34px oklch(0.18 0 0 / 0.30),
    0 14px 32px -22px oklch(0.18 0 0 / 0.16),
    0 0 0 1px oklch(from var(--accent) l c h / 0.20);
}
.shape-card:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}

.shape-card-art {
  position: relative;
  height: clamp(150px, 16vw, 200px);
  background:
    radial-gradient(80% 70% at 50% 0%, var(--accent-soft) 0%, transparent 80%),
    var(--bg-2);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
}
.shape-card-art > .waves-bg,
.shape-card-art > .dithering,
.shape-card-art > [data-ascii-dots] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shape-card-art--dark { background: #0E0E10; border-bottom-color: oklch(0.25 0 0); }
.shape-card-art--dark .shape-card-art-glyph { color: var(--peach); }
.shape-card-art-glyph {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid oklch(from var(--accent) l c h / 0.30);
  box-shadow: 0 8px 22px -10px oklch(from var(--accent) l c h / 0.40);
}
.shape-card-art--dark .shape-card-art-glyph {
  background: oklch(0.16 0 0);
  border-color: oklch(from var(--accent) l c h / 0.45);
}

.shape-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 24px;
  flex: 1;
}
.shape-card-label {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.shape-card-h {
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.15;
  margin: 4px 0 0;
}
.shape-card-body-p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.shape-card-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shape-card-list li {
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 18px;
}
.shape-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.8;
}
.shape-card-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  margin-top: 4px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.shape-card-tools img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity .2s ease, transform .2s ease;
}
.shape-card:hover .shape-card-tools img { opacity: 1; }
.shape-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.shape-card-for {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.shape-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
  white-space: nowrap;
}
.shape-card-cta .arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.shape-card:hover .shape-card-cta .arrow { transform: translateX(4px); }

/* ---------------- Bento Grid ---------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bento { grid-template-columns: 1fr; } }

.bento-cell {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 34px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.bento-cell:hover { transform: translateY(-2px); border-color: var(--ink-4); }
.bento-cell .b-label {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: 11.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.bento-cell h3 { letter-spacing: -0.025em; }
.bento-cell .b-body { font-size: 14px; color: var(--ink-2); margin-top: 16px; line-height: 1.55; }
.bento-cell .b-foot { margin-top: auto; padding-top: 28px; }

/* spans */
.bento-cell.col-2 { grid-column: span 2; }
.bento-cell.col-3 { grid-column: span 3; }
.bento-cell.col-4 { grid-column: span 4; }
.bento-cell.col-6 { grid-column: span 6; }
.bento-cell.row-2 { grid-row: span 2; }
@media (max-width: 1000px) {
  .bento-cell.col-2, .bento-cell.col-3, .bento-cell.col-4, .bento-cell.col-6 { grid-column: span 2; }
  .bento-cell.row-2 { grid-row: span 1; }
}
@media (max-width: 600px) {
  .bento-cell.col-2, .bento-cell.col-3, .bento-cell.col-4, .bento-cell.col-6 { grid-column: span 1; }
}

.bento-cell.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bento-cell.dark .b-label { color: oklch(0.7 0 0); }
.bento-cell.dark .b-body { color: oklch(0.78 0 0); }
.bento-cell.dark h3 { color: var(--bg); }

.bento-cell .glyph {
  position: absolute; right: -30px; bottom: -30px;
  width: 180px; height: 180px;
  opacity: 0.08;
  pointer-events: none;
}

/* huge stat tile */
.tile-stat .num {
  font-size: clamp(48px, 6vw, 88px); font-weight: 600;
  letter-spacing: -0.05em; line-height: 0.92;
  font-variant-numeric: tabular-nums;
}
.tile-stat .num small { font-size: 0.4em; color: var(--ink-3); font-weight: 500; }

/* mini progress bars list */
.mini-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mini-bars .row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 10px; font-size: 12px; }
.mini-bars .bar { height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; position: relative; }
.mini-bars .bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 1.4s ease-out; }

/* skill chips inside cell */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--hairline);
}
.bento-cell.dark .chip { background: oklch(0.24 0 0); color: oklch(0.85 0 0); border-color: oklch(0.3 0 0); }

/* big quote in bento */
.bento-cell.quote-cell q { quotes: none; }
.bento-cell.quote-cell .q { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.025em; line-height: 1.18; font-weight: 500; }
.bento-cell.quote-cell .q em { font-style: italic; color: var(--peach); font-weight: 400; }

/* page-hero in flex */
.page-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: end; }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } }

/* ---------------- Page transitions ---------------- */
.page { animation: pageIn .35s ease both; opacity: 1; }
@keyframes pageIn {
  from { opacity: 0.5; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}


/* ---------------- Urgency / Alarm Section ---------------- */
.alarm {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5.5vw, 80px) clamp(36px, 5vw, 72px);
  margin: clamp(36px, 5vw, 60px) 0;
  position: relative;
  overflow: hidden;
}
.alarm-eyebrow {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--peach);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.alarm-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--peach);
}
.alarm h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 22ch;
  margin-bottom: 18px;
}
.alarm h2 em { font-style: normal; color: var(--peach); }
.alarm h2 .accent-mint { color: var(--mint); font-style: normal; }
.alarm-lead {
  font-size: 17px;
  color: oklch(0.78 0 0);
  max-width: 58ch;
  line-height: 1.55;
  margin-bottom: 56px;
}

/* === REDESIGN: divergence chart replaces the old split === */
.alarm-split { display: none !important; }

.divergence {
  position: relative;
  margin: 64px 0 0;
}
.divergence-chart {
  width: 100%;
  height: clamp(220px, 28vw, 320px);
  display: block;
  overflow: visible;
}
.divergence-chart .grid-base {
  stroke: oklch(0.3 0 0);
  stroke-dasharray: 2 6;
  stroke-width: 1;
}
.divergence-chart .line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.divergence-chart .line.bad  { stroke: var(--peach); }
.divergence-chart .line.good { stroke: var(--mint); }
.divergence-chart .area.bad  { fill: var(--peach); fill-opacity: 0.08; }
.divergence-chart .area.good { fill: var(--mint);  fill-opacity: 0.10; }
.divergence-chart .end-dot   { stroke-width: 0; }
.divergence-chart .end-dot.bad  { fill: var(--peach); }
.divergence-chart .end-dot.good { fill: var(--mint); }
.divergence-chart .end-ring  { fill: none; stroke-width: 2; stroke-opacity: 0.35; }
.divergence-chart .end-ring.bad  { stroke: var(--peach); }
.divergence-chart .end-ring.good { stroke: var(--mint); }

@keyframes drawLine {
  from { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
  to   { stroke-dasharray: 1200; stroke-dashoffset: 0; }
}
.alarm.in .divergence-chart .line { animation: drawLine 1.6s cubic-bezier(.55,.05,.25,1) .15s both; }
.alarm.in .divergence-chart .line.good { animation-delay: .35s; }

.divergence-callout {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  max-width: 22ch;
}
.divergence-callout.bad  { left: 0;  top: 6%; color: var(--peach); }
.divergence-callout.good { right: 0; top: -2%; color: var(--mint); text-align: right; align-items: flex-end; }
.divergence-callout .cal-num {
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.divergence-callout .cal-num small {
  font-size: 0.36em; font-weight: 500; opacity: 0.8;
  letter-spacing: -0.02em; margin-left: 1px;
}
.divergence-callout .cal-label {
  font-size: 13px;
  color: var(--bg);
  font-weight: 450;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.divergence-callout .cal-source {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10px;
  color: oklch(0.55 0 0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.divergence-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding: 0 4px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px;
  color: oklch(0.5 0 0);
  letter-spacing: 0.06em;
}

@media (max-width: 700px) {
  .divergence-callout.bad  { top: 0; }
  .divergence-callout.good { top: 0; }
  .divergence-callout .cal-label { display: none; }
  .divergence-callout .cal-source { display: none; }
}

/* === REDESIGN: hero stat + 3-row list, replaces 4-up strip === */
.alarm-strip { display: none !important; }

.alarm-stats {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  margin-top: 88px;
  padding-top: 56px;
  border-top: 1px solid oklch(0.3 0 0);
}
@media (max-width: 800px) {
  .alarm-stats { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; margin-top: 56px; }
}

.stat-hero {
  padding-right: 64px;
  border-right: 1px solid oklch(0.3 0 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 800px) {
  .stat-hero { padding-right: 0; padding-bottom: 40px; border-right: 0; border-bottom: 1px solid oklch(0.3 0 0); }
}
.stat-hero .num {
  font-size: clamp(80px, 11vw, 156px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
  color: var(--peach);
  margin-bottom: 22px;
}
.stat-hero .num small {
  font-size: 0.42em;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: -0.02em;
  margin-left: 4px;
}
.stat-hero .num small.num-unit {
  font-size: 0.26em;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: -0.01em;
  margin-left: 8px;
  vertical-align: 0.55em;
}
.stat-hero .lbl {
  font-size: 19px;
  color: var(--bg);
  line-height: 1.4;
  max-width: 22ch;
  font-weight: 450;
  letter-spacing: -0.012em;
}
.stat-hero .src {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10.5px;
  color: oklch(0.55 0 0);
  margin-top: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-list {
  list-style: none;
  padding: 0 0 0 64px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
@media (max-width: 800px) { .stat-list { padding-left: 0; } }
.stat-list li {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid oklch(0.28 0 0);
}
.stat-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.stat-list li:first-child { padding-top: 0; }
.stat-list .rn {
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.stat-list .rn.mint  { color: var(--mint); }
.stat-list .rn.peach { color: var(--peach); }
.stat-list .rn.sky   { color: var(--sky); }
.stat-list .rn.bg    { color: var(--bg); }
.stat-list .rn small { font-size: 0.55em; font-weight: 500; opacity: 0.85; margin-left: 1px; }
.stat-list .rt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stat-list .rl {
  font-size: 14px;
  color: oklch(0.88 0 0);
  line-height: 1.4;
  font-weight: 450;
  letter-spacing: -0.005em;
}
.stat-list .rl em { font-style: italic; color: oklch(0.96 0 0); }
.stat-list .rs {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10px;
  color: oklch(0.5 0 0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------- Premium / Wage Section ---------------- */
.premium-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  margin-top: 0;
}
@media (max-width: 1000px) { .premium-grid { grid-template-columns: 1fr; } }
.premium-grid--single { grid-template-columns: 1fr; }

.premium-hero {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
}
.premium-hero .h-eyebrow {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.premium-hero .h-title {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 28px;
  max-width: 26ch;
}

/* horizontal compare bars */
.compare-bars {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 24px;
}
.compare-bars .row {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: center; gap: 16px;
  font-size: 13px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
}
.compare-bars .yr { color: var(--ink-3); letter-spacing: 0.04em; }
.compare-bars .track {
  height: 28px; border-radius: 6px;
  background: var(--bg-3); position: relative; overflow: hidden;
}
.compare-bars .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--peach), color-mix(in oklch, var(--peach) 70%, var(--ink)));
  border-radius: 6px;
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.compare-bars .row.prior .fill { background: var(--bg-3); border: 1px solid var(--ink-4); }
.compare-bars .pct {
  font-weight: 600; color: var(--ink); font-size: 14px;
  text-align: right;
}
.premium-hero .src {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; color: var(--ink-3);
  padding-top: 16px; border-top: 1px solid var(--hairline);
  letter-spacing: 0.02em;
}

/* The big multiplier card */
.multiplier-card {
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex; flex-direction: column;
  position: relative;
}
.multiplier-card .m-eyebrow {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.06em;
  color: oklch(0.65 0 0); text-transform: uppercase;
  margin-bottom: 24px;
}
.multiplier-card .m-num {
  font-size: clamp(80px, 11vw, 160px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--peach), color-mix(in oklch, var(--peach) 70%, var(--ink)) 60%, var(--peach));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.multiplier-card .m-num small {
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: none; -webkit-text-fill-color: oklch(0.78 0 0); color: oklch(0.78 0 0);
}
.multiplier-card .m-rows {
  margin-top: 28px;
  border-top: 1px solid oklch(0.3 0 0);
}
.multiplier-card .m-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid oklch(0.3 0 0);
  font-size: 14px;
}
.multiplier-card .m-row:last-child { border-bottom: 0; }
.multiplier-card .m-row .k { color: oklch(0.78 0 0); }
.multiplier-card .m-row .v {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-weight: 600;
  color: var(--peach);
  font-size: 16px;
}

/* ---------------- Skills gap row ---------------- */
.gap-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) { .gap-row { grid-template-columns: 1fr; } }
.gap-row--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.gap-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 240px;
}
.gap-card .g-tag {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}

/* Inline donut: 86% of 100% (overridable via inline --p) */
.donut {
  --p: 86;
  --color: var(--peach);
  width: 88px; height: 88px;
  border-radius: 50%;
  background:
    conic-gradient(var(--color) calc(var(--p) * 1%), var(--bg-3) 0);
  display: grid; place-items: center;
  position: relative;
  margin-bottom: 16px;
}
.donut::before {
  content: ''; position: absolute; inset: 8px;
  border-radius: 50%; background: var(--bg);
}
.donut .v {
  position: relative; z-index: 1;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.gap-card .g-headline {
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.gap-card .g-body {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.gap-card .g-src {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10px; color: var(--ink-3);
  margin-top: auto; padding-top: 14px;
  letter-spacing: 0.02em;
}

/* horizontal bar in gap card */
.gbar {
  height: 36px; border-radius: 6px;
  background: var(--bg-3);
  position: relative; overflow: hidden;
  margin-bottom: 16px;
}
.gbar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--peach);
  border-radius: 6px;
  display: flex; align-items: center; padding-left: 12px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 12px;
  color: var(--ink); font-weight: 600;
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.gbar.mint .fill { background: var(--mint); }
.gbar.sky .fill  { background: var(--sky); }

/* =================== HERO ROTATOR (flip-word) =================== */
.hero-rotator-h1 {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  max-width: 22ch;
  /* Defensive: italic glyphs in `.accent` lean right past their advance.
     Make damn sure no ancestor between `.accent` and the hero clips. */
  overflow: visible;
}
.hero-rotator-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.32em;
  row-gap: 0.02em;
  overflow: visible;
}
.hero-rotator-h1 .word { display: inline-flex; align-items: baseline; overflow: visible; }
.hero-rotator-h1 .accent {
  /* Italic glyphs lean right past their advance width. background-clip:text
     paints only inside the inline-block's content box. So we extend the
     content box generously to the right with padding (so the gradient
     paints through the lean), pull back layout-wise with a negative
     margin so the next word doesn't get pushed off, add a touch of
     letter-spacing for breathing room, and explicitly opt into visible
     overflow. The hero element clips with overflow:hidden (to contain
     the ASCII-dots canvas) — the padding here MUST exceed any italic
     lean the font produces, hence the 1.4em. */
  display: inline-block;
  padding-right: 1.4em;
  margin-right: -0.55em;
  letter-spacing: 0.01em;
  overflow: visible;
  /* Force the gradient to paint precisely so the lean tip catches it. */
  text-rendering: geometricPrecision;
}
.hero-rotator-h1 .word { overflow: visible; }
.hero-rotator-h1 .rotator-article { display: inline-block; min-width: 1.1ch; }
.rotator-slot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
/* Inline-grid stack: every word occupies the same single grid cell, so
   the stage auto-sizes to the widest word and every word renders on the
   same baseline (no absolute positioning, no transforms, no drops). */
.rotator-stage {
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline;
  line-height: 1;
  /* Lock baseline to the LAST grid item so the rotator-stage's baseline,
     as seen by the parent flex line, matches one of the words rather
     than the empty cell. */
  align-items: end;
}
.rotator-word {
  grid-area: stack;
  white-space: nowrap;
  line-height: 1;
  /* Solid color only — never a gradient or background-clip:text on rotating
     words (that would render as a rectangle the moment background-clip
     gets reset by a per-word `background:` shorthand). */
  background: none;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.rotator-word.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .rotator-word { transition: opacity 0.15s linear; }
}

/* Blinking caret that lives inside the active rotator word as it types. */
.rotator-cursor {
  display: inline-block;
  width: 0.07em;
  height: 0.85em;
  background: currentColor;
  margin-left: 0.06em;
  vertical-align: -0.03em;
  border-radius: 1px;
  opacity: 0.85;
  animation: rotator-blink 0.85s steps(1) infinite;
  will-change: opacity;
}
@keyframes rotator-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rotator-cursor { animation: none; opacity: 0.7; }
}

/* Per-profession typography. All Geist — restraint over typeface zoo.
   Subtle weight/italic/letter-spacing/color variation gives each word
   a touch of personality without breaking the type system. */
.rw-accountant {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: currentColor;
}
.rw-developer {
  /* Pixel "Geist" — VT323 is already imported and gives the rotator a
     terminal/pixel feel for "Developer." while leaving every other word
     in the regular sans. */
  font-family: 'VT323', 'Geist Mono', ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0;
  color: currentColor;
}
.rw-analyst {
  font-weight: 600;
  letter-spacing: -0.04em;
  color: currentColor;
}
.rw-marketer {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: currentColor;
}
.rw-manager {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: currentColor;
}
.rw-teacher {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: currentColor;
}
.rw-student {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: currentColor;
}
.rw-lawyer {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: currentColor;
}
.rw-administrator {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: currentColor;
}

/* =================== PIPELINE 3-STEP (Train · Certify · Get discovered) =================== */
.pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: 8px;
}
@media (max-width: 900px) { .pipeline { grid-template-columns: 1fr; } }
.pipeline-step {
  position: relative;
  padding: clamp(28px, 2.4vw, 40px);
  border-radius: 22px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
}
/* Top-edge accent stripe removed per design feedback — accent now only
   appears via the magic-spot, beam, and hover halo. */
.pipeline-step::after {
  content: '';
  position: absolute; inset: -1px;
  pointer-events: none;
  border-radius: 22px;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
  z-index: -1;
  opacity: 0.7;
}
.pipeline-step:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--hairline));
  box-shadow: 0 12px 30px -16px color-mix(in oklab, var(--accent) 35%, transparent);
}
.ps-head {
  display: flex; align-items: center; gap: 12px;
}
.ps-num {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.18em; color: var(--ink-3);
  padding: 4px 8px; border-radius: 6px;
  background: color-mix(in oklab, var(--accent) 22%, var(--bg));
  color: var(--accent-ink, var(--ink));
}
.ps-tag {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.ps-title {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.ps-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36ch;
}
.ps-rule {
  margin-top: auto;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 60%, transparent), transparent);
}

/* =================== ENTERPRISE TEASER STRIP =================== */
.enterprise-strip {
  position: relative;
  display: block;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 36px);
  border-radius: 18px;
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid oklch(0.28 0 0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
}
.enterprise-strip:hover {
  transform: translateY(-1px);
  border-color: var(--peach);
  box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--peach) 60%, transparent);
}
.enterprise-strip-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
.enterprise-strip-bg canvas {
  display: block; width: 100%; height: 100%;
}
.enterprise-strip-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 120% at 100% 50%, color-mix(in oklab, var(--peach) 28%, transparent), transparent 70%),
    linear-gradient(90deg, transparent 30%, color-mix(in oklab, var(--ink) 92%, transparent) 60%, var(--ink) 100%);
}
.enterprise-strip-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.enterprise-strip-text {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.enterprise-strip-eyebrow {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach-ink, #5a3a1f);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--peach) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--peach) 70%, transparent);
}
.enterprise-strip-title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--bg);
}
.enterprise-strip-sub {
  font-size: 14px;
  color: oklch(0.78 0 0);
  max-width: 50ch;
}
.enterprise-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.enterprise-strip:hover .enterprise-strip-cta { background: var(--peach); }
.enterprise-strip:hover .enterprise-strip-cta .arrow { transform: translateX(3px); }
.enterprise-strip-cta .arrow { transition: transform .25s ease; }
@media (max-width: 760px) {
  .enterprise-strip-content { gap: 14px; }
  .enterprise-strip-text { gap: 8px; }
  .enterprise-strip-cta { width: 100%; justify-content: center; }
}

/* =================== MAGIC CARD =================== */
/* Cursor-following spotlight + traveling border beam.
   Markup: any host with `.magic-card` + `data-magic`, containing
   `<span class="magic-spot"></span>` and `<span class="magic-beam"></span>`.
   The bound JS in magicui.js writes --mx / --my (CSS pixels relative to
   the host's top-left) on pointermove and parks them at -9999px on
   pointerleave so the spot fades off-card.

   Stacking model: each .magic-card establishes its own isolation. The
   spot sits at z-index 0 (above the card background), the beam at
   z-index 2 (above content edges, traces the perimeter), and all
   other host children are bumped to z-index 1 so text stays legible. */

.magic-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fallback values so the spot is invisible until JS writes real coords. */
  --mx: -9999px;
  --my: -9999px;
  --magic-spot-radius: 280px;
  --magic-spot-strength: 0.28;
  --magic-radius: 22px;
}

/* Ensure the actual content of the card paints above the spotlight. */
.magic-card > *:not(.magic-spot):not(.magic-beam) {
  position: relative;
  z-index: 1;
}

/* ---------- Spotlight (cursor-following radial gradient) ---------- */
.magic-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  /* The gradient is centered on (--mx, --my). When parked off-card the
     radial origin is far away and only fully-transparent stops are
     visible inside the box, so the layer reads as empty. */
  background: radial-gradient(
    var(--magic-spot-radius) circle at var(--mx) var(--my),
    color-mix(in oklab, var(--accent, var(--mint)) calc(var(--magic-spot-strength) * 100%), transparent) 0%,
    color-mix(in oklab, var(--accent, var(--mint)) 8%, transparent) 35%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .25s ease;
}
/* Reveal whenever the pointer is over the host (regardless of which
   nested element it lands on). Combined with --mx / --my from JS the
   spot snaps to the cursor instantly, no extra rAF needed. */
.magic-card:hover .magic-spot,
.magic-card:focus-within .magic-spot {
  opacity: 1;
}

/* Slightly stronger spot on dark bento variants so the accent reads. */
.bento-cell.dark.magic-card {
  --magic-spot-strength: 0.42;
}

/* ---------- Border beam (traveling light along the inside edge) ---------- */
.magic-beam {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  /* A small tracer that rides along the inner border. Width/height
     define the bead size; offset-path traces a rounded rectangle inset
     by 1px to sit just inside the card border. */
  width: 110px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent, var(--mint)) 70%, transparent) 35%,
    color-mix(in oklab, var(--accent, var(--mint)) 100%, transparent) 50%,
    color-mix(in oklab, var(--accent, var(--mint)) 70%, transparent) 65%,
    transparent 100%
  );
  filter: blur(0.5px);
  opacity: 0.85;
  /* Trace the rounded inner perimeter. rect() args = top right bottom left
     measured from the reference box edges; the 1px insets keep the bead
     tucked just inside the visible border. */
  offset-path: rect(1px 1px 1px 1px round var(--magic-radius));
  offset-rotate: auto;
  offset-distance: 0%;
  animation: magic-beam-travel 6s linear infinite;
}

/* Stagger the three sibling cards in each grid so the beams desync. */
.magic-card:nth-of-type(2) .magic-beam { animation-delay: -2s; }
.magic-card:nth-of-type(3) .magic-beam { animation-delay: -4s; }

@keyframes magic-beam-travel {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

/* Respect reduced-motion: kill the traveling beam, keep the spotlight. */
@media (prefers-reduced-motion: reduce) {
  .magic-beam { animation: none; opacity: 0; }
}

/* Fallback for browsers without offset-path support: hide the beam
   gracefully so it can't sit stranded in a corner. */
@supports not (offset-path: rect(0 0 0 0)) {
  .magic-beam { display: none; }
}

/* ---------- Card refinements (tasteful polish) ---------- */
/* Pipeline cards: warmer accent-tinted shadow on hover. The base rule
   already handles transform + border-color; we layer a stronger glow. */
.pipeline-step.magic-card:hover {
  box-shadow:
    0 18px 40px -22px color-mix(in oklab, var(--accent) 55%, transparent),
    0 2px 0 0 color-mix(in oklab, var(--accent) 30%, transparent) inset;
}

/* Bento "Pick the shape" cards: subtle accent border tint + lift. */
.bento-cell.magic-card {
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.bento-cell.magic-card:hover {
  border-color: color-mix(in oklab, var(--accent, var(--ink-4)) 55%, var(--hairline));
  box-shadow: 0 16px 38px -24px color-mix(in oklab, var(--accent, var(--ink-3)) 55%, transparent);
}

/* Path cards: extend the existing hover with an accent-tinted glow. */
.path-card.magic-card {
  transition: transform .3s ease, border-color .2s ease, box-shadow .35s ease;
}
.path-card.magic-card:hover {
  box-shadow: 0 22px 48px -28px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* =================== WAITLIST PAGE =================== */
/* Owned by the apply / waitlist agent. Backgrounds (.flicker-bg*, .boxes-*) and
   .magic-card / .magic-spot / .magic-beam belong to other agents — do not add
   rules for them here. */

/* Apply page: full-screen flickering grid bg w/ Columba mark, mirroring the product hero */
[data-page="apply"] { position: relative; isolation: isolate; }
/* Waitlist (apply) route: hide the wordmark PNG in the nav and replace with
   the dotted Columba icon. <html data-route="apply"> is set by router.js on
   navigate, which lets us scope this without touching the global nav markup. */
[data-route="apply"] .nav .brand-logo { display: none; }
[data-route="apply"] .nav .brand {
  width: 44px;
  height: 44px;
  background-image: url('assets/columba_icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  /* preserve the link's flex layout but suppress text content */
  font-size: 0;
}

[data-page="apply"] .apply-bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
[data-page="apply"] .apply-bg-stage .flicker-bg { position: absolute; }
/* Apply-page override: kill the global `.flicker-bg--soft` radial mask so
   the dot grid covers the entire viewport instead of fading into a small
   spotlight. Combined with the lowered data-grid-max-opacity in body.html
   this reads as a uniform low-contrast texture behind the waitlist. */
[data-page="apply"] .apply-bg-stage .flicker-bg--soft {
  -webkit-mask-image: none;
          mask-image: none;
}

[data-page="apply"] .page-hero.waitlist-hero {
  position: relative;
  overflow: visible;
  background: transparent;
  border-bottom: 0;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
[data-page="apply"] .waitlist-hero .wrap { position: relative; z-index: 1; }
[data-page="apply"] .waitlist-hero h1 { max-width: 18ch; margin-bottom: 22px; }
[data-page="apply"] .waitlist-section { position: relative; z-index: 1; background: transparent; }

/* Hero row: text on the left, three-dot icon on the right. */
[data-page="apply"] .waitlist-hero-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
[data-page="apply"] .waitlist-hero-text { min-width: 0; }
[data-page="apply"] .waitlist-hero-mark {
  width: clamp(120px, 14vw, 200px);
  height: auto;
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 30px oklch(0.18 0 0 / 0.06));
}
@media (max-width: 720px) {
  [data-page="apply"] .waitlist-hero-row { grid-template-columns: 1fr; }
  [data-page="apply"] .waitlist-hero-mark { width: 96px; justify-self: start; }
}

.waitlist-section { padding-top: clamp(36px, 5vw, 64px) !important; padding-bottom: clamp(80px, 10vw, 140px) !important; }

.waitlist-shell {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  isolation: isolate;
  --wl-accent: var(--ink-3);
  --wl-accent-ink: var(--ink);
  --wl-accent-soft: var(--bg-3);
}
.waitlist-shell.t-student      { --wl-accent: var(--mint);  --wl-accent-ink: var(--mint-ink);  --wl-accent-soft: oklch(0.95 0.04 160 / 0.6); }
.waitlist-shell.t-professional { --wl-accent: var(--sky);   --wl-accent-ink: var(--sky-ink);   --wl-accent-soft: oklch(0.95 0.04 245 / 0.6); }
.waitlist-shell.t-enterprise   { --wl-accent: var(--peach); --wl-accent-ink: var(--peach-ink); --wl-accent-soft: oklch(0.95 0.04 60  / 0.6); }

/* Progress */
.waitlist-progress {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.waitlist-progress .wp-track {
  flex: 1; height: 4px; background: var(--bg-3);
  border-radius: 999px; overflow: hidden;
}
.waitlist-progress .wp-fill {
  height: 100%; width: 16%;
  background: var(--wl-accent);
  border-radius: 999px;
  transition: width .22s cubic-bezier(.2,.7,.2,1), background .15s ease;
}

/* Apply page: make all reveal animations snappier inside the form so the
   multi-step flow feels responsive. Doesn't affect marketing-page reveals. */
[data-page="apply"] .reveal {
  transition: opacity .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1);
}
[data-page="apply"] .reveal-stagger > * {
  transition: opacity .22s ease, transform .22s ease;
}
[data-page="apply"] .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
[data-page="apply"] .reveal-stagger.in > *:nth-child(2) { transition-delay: 30ms; }
[data-page="apply"] .reveal-stagger.in > *:nth-child(3) { transition-delay: 60ms; }
[data-page="apply"] .reveal-stagger.in > *:nth-child(4) { transition-delay: 90ms; }
[data-page="apply"] .reveal-stagger.in > *:nth-child(5) { transition-delay: 120ms; }
[data-page="apply"] .reveal-stagger.in > *:nth-child(6) { transition-delay: 150ms; }
[data-page="apply"].page,
[data-page="apply"] .page { animation-duration: .2s; }
.waitlist-progress .wp-label {
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Stage + step transitions */
.waitlist-stage { position: relative; min-height: 320px; }
.waitlist-step {
  position: relative;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  display: none;
}
.waitlist-step.is-active {
  display: block;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.waitlist-step.is-leaving-back  { transform: translateX(-14px); }
.waitlist-step.is-entering-back { transform: translateX(-14px); }

.ws-head { margin-bottom: 24px; }
.ws-eyebrow {
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ws-h {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.025em; line-height: 1.1;
  margin-bottom: 8px;
}
.ws-sub { color: var(--ink-2); font-size: 15px; max-width: 56ch; }

.ws-grid {
  display: grid; gap: 12px;
}
.ws-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ws-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .ws-grid.cols-2, .ws-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Type cards (step 1) — mini versions of the path-banners on /paths.
   Each card has a full-bleed ambient bg widget (dithering / waves /
   ascii-dots) layered behind a big track name + description. The
   `t-student | t-professional | t-enterprise` modifiers swap surface
   color, ink color, and accent. JS hooks (data-type, aria-checked,
   .type-name/desc/tag) preserved. */
.type-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .type-grid { grid-template-columns: 1fr; gap: 14px; } }

.type-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  min-height: clamp(340px, 32vw, 380px);
  background: var(--bg);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
  --tc-accent: var(--ink-3);
  --tc-accent-ink: var(--ink);
  --tc-ink: var(--ink);
  --tc-ink-2: var(--ink-2);
  --tc-ink-3: var(--ink-3);
  --tc-hairline: var(--hairline);
  --tc-mark-bg: var(--bg);
}
.type-card.t-student,
.type-card.t-builder {
  background: #F5EFE2;
  --tc-accent: var(--mint);
  --tc-accent-ink: var(--mint-ink);
}
.type-card.t-professional {
  background: oklch(0.165 0.02 245);
  border-color: oklch(0.28 0.02 245);
  color: #fff;
  --tc-accent: var(--sky);
  --tc-accent-ink: oklch(0.85 0.06 245);
  --tc-ink: #fff;
  --tc-ink-2: oklch(0.86 0.02 245);
  --tc-ink-3: oklch(0.68 0.03 245);
  --tc-hairline: oklch(0.32 0.02 245);
  --tc-mark-bg: oklch(0.18 0.005 245);
}
/* Developer card — surface is the same near-black ascii-dot field rendered
   by the bg widget. The card itself needs to flip to light text on dark
   bg in BOTH themes, since the art is always dark. */
.type-card.t-developer {
  background: #0E0E10;
  border-color: oklch(0.25 0 0);
  color: #fff;
  --tc-accent: var(--peach);
  --tc-accent-ink: oklch(0.85 0.06 60);
  --tc-ink: #fff;
  --tc-ink-2: oklch(0.86 0 0);
  --tc-ink-3: oklch(0.66 0 0);
  --tc-hairline: oklch(0.26 0 0);
  --tc-mark-bg: oklch(0.18 0 0);
}
.type-card.t-enterprise {
  background: #0E0E10;
  border-color: oklch(from var(--peach) l c h / 0.45);
  border-width: 1px;
  color: #fff;
  --tc-accent: var(--peach);
  --tc-accent-ink: var(--peach);
  --tc-ink: #fff;
  --tc-ink-2: oklch(0.86 0 0);
  --tc-ink-3: oklch(0.66 0 0);
  --tc-hairline: oklch(0.26 0 0);
  --tc-mark-bg: oklch(0.18 0 0);
}
/* Apply-form ONLY: green/mint variant of the Student card so it visually
   matches Professional / Enterprise (dark surface + accent border + waves
   pattern) instead of the light cream-with-dithering treatment used
   elsewhere. Scoped to [data-page="apply"] so any other use of t-student
   keeps its original styling. */
[data-page="apply"] .type-card.t-student {
  background: #0E0E10;
  border-color: oklch(from var(--mint) l c h / 0.45);
  border-width: 1px;
  color: #fff;
  --tc-accent: var(--mint);
  --tc-accent-ink: var(--mint);
  --tc-ink: #fff;
  --tc-ink-2: oklch(0.86 0 0);
  --tc-ink-3: oklch(0.66 0 0);
  --tc-hairline: oklch(0.26 0 0);
  --tc-mark-bg: oklch(0.18 0 0);
}
[data-theme="dark"][data-page="apply"] .type-card.t-student,
[data-theme="dark"] [data-page="apply"] .type-card.t-student {
  background: var(--bg-2);
  border-color: oklch(from var(--mint) l c h / 0.22);
  color: var(--ink);
  --tc-accent: var(--mint);
  --tc-accent-ink: var(--mint);
  --tc-ink: var(--ink);
  --tc-ink-2: var(--ink-2);
  --tc-ink-3: var(--ink-3);
  --tc-hairline: oklch(from var(--mint) l c h / 0.20);
  --tc-mark-bg: var(--bg-3);
}
/* Enterprise teaser strip on the apply page — mirrors the home-page
   enterprise-strip but tuned for the form context (tighter top margin,
   no extra wrap). The base `.enterprise-strip` styles do all the heavy
   lifting; this just resets the home-page top margin. */
.enterprise-strip--apply {
  margin-top: 14px;
  margin-bottom: 18px;
}

.type-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.type-card-bg > * {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.type-card-mark {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--tc-mark-bg);
  border: 1px solid var(--tc-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--tc-accent-ink);
  z-index: 2;
  transition: transform .3s ease, border-color .25s ease;
}
.type-card-mark svg { display: block; }
.type-card:hover .type-card-mark {
  transform: rotate(-4deg) scale(1.06);
  border-color: var(--tc-accent-ink);
}

.type-card-inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  color: var(--tc-ink);
}
.type-card-eyebrow {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-accent-ink);
}
.type-card .type-name {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--tc-ink);
  margin: 4px 0 8px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.type-card .type-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tc-ink-2);
  flex: 1;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.type-card .type-tag { display: none; }

/* States */
.type-card:hover {
  transform: translateY(-3px);
  border-color: var(--tc-accent-ink);
  box-shadow: 0 24px 48px -28px oklch(0.18 0 0 / 0.40), 0 8px 22px -16px oklch(0.18 0 0 / 0.18);
}
.type-card:focus-visible {
  outline: none;
  border-color: var(--tc-accent-ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tc-accent) 50%, transparent);
}
.type-card[aria-checked="true"] {
  border-color: var(--tc-accent-ink);
  box-shadow:
    inset 0 0 0 3px color-mix(in oklab, var(--tc-accent) 45%, transparent),
    0 24px 48px -24px oklch(0.18 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .type-card { transition: border-color .2s ease; }
  .type-card:hover { transform: none; }
  .type-card:hover .type-card-mark { transform: none; }
}

/* Track cards (student step) — three colored options */
.track-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .track-grid { grid-template-columns: 1fr; } }
.track-card {
  display: flex; flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  position: relative; overflow: hidden;
  cursor: pointer;
  font-family: inherit; color: var(--ink);
  isolation: isolate;
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 10px 24px -16px oklch(0.18 0 0 / 0.14),
    0 4px 10px -6px oklch(0.18 0 0 / 0.08);
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.track-card.builder      { --accent: var(--mint);  --accent-ink: var(--mint-ink); }
.track-card.professional { --accent: var(--sky);   --accent-ink: var(--sky-ink); }
.track-card.developer    { --accent: var(--peach); --accent-ink: var(--peach-ink); }
.track-card:hover {
  border-color: var(--accent-ink); transform: translateY(-3px);
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 26px 50px -30px oklch(0.18 0 0 / 0.26),
    0 10px 22px -14px oklch(0.18 0 0 / 0.14);
}
.track-card[aria-checked="true"] {
  border-color: var(--accent-ink);
  box-shadow:
    0 0 0 1px oklch(from var(--accent) l c h / 0.30),
    0 26px 50px -30px oklch(0.18 0 0 / 0.26);
}
/* Art header — same ambient bg widget as the /paths banners, contained
   to a slim strip at the top of each card. */
.track-card .tc-art {
  display: block;
  position: relative;
  height: 96px;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--bg-2);
}
.track-card .tc-art > * {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.track-card.developer .tc-art { background: #0E0E10; }
.track-card .tc-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 24px 24px;
}
.track-card .tc-tag {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  align-self: flex-start;
}
.track-card .tc-h { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.track-card .tc-d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.track-card .tc-tools {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.track-card .tc-tools img {
  width: 22px; height: 22px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity .2s ease;
}
.track-card:hover .tc-tools img { opacity: 1; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  font-family: inherit;
  letter-spacing: -0.005em;
  text-transform: none;
  margin-bottom: 6px;
  display: inline-block;
}
.field .req { color: var(--peach-ink); margin-left: 4px; }
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--wl-accent-ink);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--wl-accent) 35%, transparent);
}
.field .err {
  font-size: 12.5px; color: oklch(0.5 0.16 25);
  font-family: inherit;
  min-height: 14px;
  margin-top: 4px;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: oklch(0.62 0.18 25);
}
.field-hint { font-size: 12px; color: var(--ink-3); }

/* Checkbox row */
.check-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; font-size: 14px; color: var(--ink-2);
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--wl-accent-ink);
}

/* Chip multi-select (ai_provider) — scoped to waitlist to avoid collision with .chip in bento cells */
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wl-chip:hover { border-color: var(--ink-4); color: var(--ink); }
.wl-chip[aria-pressed="true"] {
  background: var(--wl-accent-soft);
  border-color: var(--wl-accent-ink);
  color: var(--wl-accent-ink);
}

/* Scale (ai_experience) */
.scale {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.scale-btn {
  padding: 14px 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg);
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.scale-btn:hover { border-color: var(--ink-4); color: var(--ink); }
.scale-btn[aria-pressed="true"] {
  background: var(--wl-accent-soft);
  border-color: var(--wl-accent-ink);
  color: var(--wl-accent-ink);
}
.scale-anchors {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  margin-top: 6px;
}

/* School autocomplete */
.school-combo { position: relative; }
.school-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 16px 40px -20px oklch(0 0 0 / 0.18);
  max-height: 320px;
  overflow-y: auto;
  z-index: 5;
  padding: 4px;
}
.school-suggest[hidden] { display: none; }
.school-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.school-row:hover, .school-row.is-active { background: var(--bg-3); }
.school-logo {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-3);
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px;
  color: var(--ink-3);
}
.school-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.school-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.school-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-country { font-size: 11px; color: var(--ink-3); font-family: 'Geist', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.03em; }
.school-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

/* Selected school chip */
.school-selected {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--wl-accent-ink);
  background: var(--wl-accent-soft);
  border-radius: 12px;
  margin-top: 6px;
}
.school-selected .school-logo { background: var(--bg); }
.school-selected button {
  margin-left: auto; font-size: 12px;
  color: var(--ink-3); padding: 4px 8px;
  border-radius: 6px;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.school-selected button:hover { color: var(--ink); background: var(--bg); }

/* Step actions */
.ws-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.ws-actions .ws-hint { font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; text-transform: uppercase; }
.ws-actions .ws-actions-right { display: flex; gap: 10px; align-items: center; }
.ws-actions .btn[disabled] { opacity: 0.45; pointer-events: none; }
.ws-actions .btn-back {
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  padding: 12px 16px;
}
.ws-actions .btn-back:hover { color: var(--ink); border-color: var(--ink); }

/* Status / error / success banners */
.waitlist-status {
  margin-top: 22px;
  padding: 14px 16px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  color: var(--ink-2);
}
.waitlist-status.is-error {
  border-color: oklch(0.62 0.18 25);
  background: oklch(0.96 0.04 25);
  color: oklch(0.4 0.18 25);
}

/* Success state */
.waitlist-success {
  text-align: center;
  padding: clamp(28px, 4vw, 56px) 0;
}

/* Three concentric/stacked dots that mirror the dotted Columba icon. */
.waitlist-success .wl-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.waitlist-success .wl-dots span {
  width: 18px; height: 18px; border-radius: 999px; display: inline-block;
  box-shadow: 0 4px 14px -6px oklch(0.18 0 0 / 0.30);
  animation: wl-dot-pulse 2.4s cubic-bezier(.4,.2,.2,1) infinite;
}
.waitlist-success .wl-dots span:nth-child(1) { background: var(--mint);  animation-delay: 0s; }
.waitlist-success .wl-dots span:nth-child(2) { background: var(--sky);   animation-delay: .25s; }
.waitlist-success .wl-dots span:nth-child(3) { background: var(--peach); animation-delay: .50s; }
@keyframes wl-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.78); opacity: 0.6; }
}

.waitlist-success .wl-headline {
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.035em;
  font-weight: 600;
  line-height: 1.05;
  max-width: 22ch;
  margin: 0 auto 16px;
}
.waitlist-success .wl-lede {
  max-width: 50ch;
  margin: 0 auto 36px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}

/* Three-step timeline: what happens after submission. */
.waitlist-success .wl-timeline {
  list-style: none;
  margin: 0 auto 32px;
  padding: 0;
  max-width: 540px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
}
.waitlist-success .wl-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.waitlist-success .wl-step:last-child { border-bottom: 0; }
.waitlist-success .wl-step-num {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-top: 2px;
}
.waitlist-success .wl-step-text { display: flex; flex-direction: column; gap: 2px; }
.waitlist-success .wl-step-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.waitlist-success .wl-step-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.waitlist-success .wl-success-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.waitlist-success .wl-receipt {
  display: inline-flex; gap: 10px; align-items: center;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 12px;
  color: var(--ink-3);
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-2);
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-success .wl-dots span { animation: none; }
}

/* Review summary list */
.wl-review {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 18px 40px -28px oklch(0.18 0 0 / 0.20),
    0 6px 14px -8px oklch(0.18 0 0 / 0.10);
}
.wl-review-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 16px 22px;
  font-size: 14px;
  border-bottom: 1px solid var(--hairline-2);
  align-items: baseline;
  transition: background .15s ease;
}
.wl-review-row:last-child { border-bottom: 0; }
.wl-review-row:hover { background: oklch(from var(--ink) l c h / 0.025); }
.wl-review-k {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wl-review-v {
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}
@media (max-width: 600px) {
  .wl-review-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .wl-review-k { font-size: 10.5px; }
}

/* Track explanation reveal */
.track-explainer {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  background: var(--bg-2);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.track-explainer strong { color: var(--ink); }

/* =================== WAITLIST: MODERN UI POLISH ===================
   Scoped exclusively to `[data-page="apply"]` so we don't perturb the
   global `.btn` styles that the rest of the site relies on. Visual
   techniques adapted from magicui:
     - shimmer-button: a conic-gradient that travels under the button via
       animated background-position, masked off the inner content so only
       the rim sheen is visible (kept lightweight — no extra DOM).
     - interactive-hover-button: badge dot scales / arrow slide on hover.
     - shine-border: gradient border tint on the .waitlist-shell + chip.
   All animations honour prefers-reduced-motion at the bottom of this
   file. The active track accent flows through every surface via
   --wl-accent / --wl-accent-ink already set on the shell. */


/* ---- Custom-select widget (replaces native <select> popup) ----------
   The trigger looks identical to a styled .field input/select (same
   border, radius, background, padding). The popup is rendered in-page
   so we don't fall back to the OS-level dropdown UI. The hidden input
   inside .wl-cs-field is the value-bearing node — callers read it
   the same way they used to read the <select>. */
.wl-cs-field { position: relative; }
.wl-cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 15px;
  text-align: left;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wl-cs-trigger:focus-visible {
  outline: none;
  border-color: var(--wl-accent-ink, var(--ink));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--wl-accent, var(--ink)) 35%, transparent);
}
.wl-cs-trigger[aria-invalid="true"] {
  border-color: oklch(0.55 0.18 25);
}
.wl-cs-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-cs-value.is-placeholder { color: var(--ink-4); }
.wl-cs-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 10px;
  color: var(--ink-3);
  transition: transform .18s ease, color .15s ease;
  flex-shrink: 0;
}
.wl-cs-field.is-open .wl-cs-arrow { transform: rotate(180deg); color: var(--ink); }
.wl-cs-field.is-open .wl-cs-trigger { border-color: var(--wl-accent-ink, var(--ink)); }

.wl-cs-list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 12px 28px -12px oklch(0 0 0 / 0.18), 0 2px 6px -2px oklch(0 0 0 / 0.08);
}
.wl-cs-list[hidden] { display: none; }
.wl-cs-option {
  display: flex; align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background .12s ease;
}
.wl-cs-option:hover,
.wl-cs-option.is-active { background: var(--bg-3); }
.wl-cs-option.is-selected {
  color: var(--wl-accent-ink, var(--ink));
  font-weight: 500;
}
.wl-cs-option.is-selected::after {
  content: "✓";
  margin-left: auto;
  font-size: 13px;
  color: var(--wl-accent-ink, var(--ink-3));
}
.wl-cs-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
/* Combobox variant — input keeps its base border, popup floats below.
   When the popup is open, lift the input border to the accent color so
   the input + popup read as one connected control. */
.wl-combo-field.is-open input { border-color: var(--wl-accent-ink, var(--ink)); }
[data-theme="dark"] .wl-cs-trigger,
[data-theme="dark"] .wl-cs-list { background: var(--bg-2, var(--bg)); }
[data-theme="dark"] .wl-cs-option:hover,
[data-theme="dark"] .wl-cs-option.is-active { background: var(--bg-3); }

/* On mobile, reserve a bit more height to keep the list comfortable
   without forcing the user to scroll inside a tight popup. */
@media (max-width: 480px) {
  .wl-cs-list { max-height: 60vh; }
  .wl-cs-trigger { font-size: 16px; padding: 12px 14px; }
}

/* ---- Inputs / selects / textareas ----------------------------------- */
[data-page="apply"] .field input[type="text"],
[data-page="apply"] .field input[type="email"],
[data-page="apply"] .field select,
[data-page="apply"] .field textarea {
  border-radius: 12px;
  border-color: color-mix(in oklab, var(--ink) 8%, var(--hairline));
  background: color-mix(in oklab, var(--bg) 92%, var(--bg-3));
  transition:
    border-color .2s ease,
    box-shadow .25s ease,
    background .25s ease;
}
[data-page="apply"] .field input:hover,
[data-page="apply"] .field select:hover,
[data-page="apply"] .field textarea:hover {
  border-color: color-mix(in oklab, var(--wl-accent-ink) 28%, var(--hairline));
}
[data-page="apply"] .field input:focus,
[data-page="apply"] .field select:focus,
[data-page="apply"] .field textarea:focus {
  border-color: var(--wl-accent-ink);
  background: var(--bg);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--wl-accent) 38%, transparent),
    0 1px 0 color-mix(in oklab, var(--wl-accent-ink) 25%, transparent) inset;
}

/* ---- Chips & scale buttons ----------------------------------------- */
[data-page="apply"] .wl-chip,
[data-page="apply"] .scale-btn {
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    transform .2s cubic-bezier(.2,.7,.2,1),
    box-shadow .25s ease;
}
[data-page="apply"] .wl-chip:hover,
[data-page="apply"] .scale-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--wl-accent-ink) 40%, var(--hairline));
  background: color-mix(in oklab, var(--wl-accent) 10%, var(--bg));
  color: var(--ink);
  box-shadow: 0 6px 16px -10px color-mix(in oklab, var(--wl-accent-ink) 55%, transparent);
}
[data-page="apply"] .wl-chip[aria-pressed="true"],
[data-page="apply"] .scale-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in oklab, var(--wl-accent) 35%, var(--bg)) 0%, color-mix(in oklab, var(--wl-accent) 18%, var(--bg)) 100%);
  border-color: var(--wl-accent-ink);
  color: var(--wl-accent-ink);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--wl-accent) 30%, transparent),
    0 6px 18px -10px color-mix(in oklab, var(--wl-accent-ink) 50%, transparent);
}
[data-page="apply"] .wl-chip:focus-visible,
[data-page="apply"] .scale-btn:focus-visible {
  outline: none;
  border-color: var(--wl-accent-ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wl-accent) 50%, transparent);
}

/* ---- Progress bar refinement --------------------------------------- */
[data-page="apply"] .waitlist-progress { gap: 16px; }
[data-page="apply"] .waitlist-progress .wp-track {
  height: 6px;
  background: color-mix(in oklab, var(--bg-3) 80%, var(--hairline));
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 60%, transparent) inset;
}
[data-page="apply"] .waitlist-progress .wp-fill {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--wl-accent) 80%, var(--wl-accent-ink)) 0%,
    var(--wl-accent) 60%,
    color-mix(in oklab, var(--wl-accent) 70%, #fff) 100%);
  box-shadow:
    0 0 12px color-mix(in oklab, var(--wl-accent) 75%, transparent),
    0 0 0 1px color-mix(in oklab, var(--wl-accent-ink) 25%, transparent) inset;
  position: relative;
}
/* Shimmering edge that travels along the fill */
[data-page="apply"] .waitlist-progress .wp-fill::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, #fff 60%, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: wl-progress-shimmer 2.4s linear infinite;
  opacity: 0.7;
}
@keyframes wl-progress-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}
[data-page="apply"] .waitlist-progress .wp-label {
  font-weight: 500;
  color: var(--ink-2);
  font-size: 11px;
}
[data-page="apply"] .waitlist-progress .wp-label [data-waitlist-step-num] {
  color: var(--wl-accent-ink);
  font-weight: 600;
}

/* ---- Shell: subtle accent glow + soft drop shadow ------------------ */
[data-page="apply"] .waitlist-shell {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--wl-accent) 4%, var(--bg)) 0%, var(--bg) 30%);
  border-color: color-mix(in oklab, var(--wl-accent-ink) 18%, var(--hairline));
  box-shadow:
    0 1px 0 color-mix(in oklab, #fff 70%, transparent) inset,
    0 30px 80px -50px color-mix(in oklab, var(--wl-accent-ink) 55%, transparent),
    0 8px 24px -16px color-mix(in oklab, var(--ink) 30%, transparent);
}
/* Faint top accent strip that hints at the active track without shouting */
[data-page="apply"] .waitlist-shell::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--wl-accent) 70%, transparent) 25%,
    color-mix(in oklab, var(--wl-accent-ink) 70%, transparent) 50%,
    color-mix(in oklab, var(--wl-accent) 70%, transparent) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* School suggest dropdown — match the new modern surface treatment. */
[data-page="apply"] .school-suggest {
  border-color: color-mix(in oklab, var(--wl-accent-ink) 22%, var(--hairline));
  box-shadow:
    0 22px 50px -28px color-mix(in oklab, var(--wl-accent-ink) 55%, transparent),
    0 1px 0 color-mix(in oklab, #fff 60%, transparent) inset;
}
[data-page="apply"] .school-row:hover,
[data-page="apply"] .school-row.is-active {
  background: color-mix(in oklab, var(--wl-accent) 14%, var(--bg));
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .waitlist-step { transition: none; }
  .waitlist-progress .wp-fill { transition: none; }
  [data-page="apply"] .wl-chip,
  [data-page="apply"] .scale-btn { transition: background .2s ease, color .2s ease, border-color .2s ease; }
  [data-page="apply"] .wl-chip:hover,
  [data-page="apply"] .scale-btn:hover { transform: none; }
  [data-page="apply"] .waitlist-progress .wp-fill::after { animation: none; opacity: 0; }
}

/* =================== TRACKS DETAIL PAGE =================== */
/* Per-track scoped accent variables.
   --tk-surface       page-hero background colour matching the matching /paths banner
   --tk-ink           primary text colour against that surface
   --tk-ink-2         secondary text against that surface
   --tk-ink-3         tertiary / mono labels
   --tk-hairline      borders within the hero (against the surface)
   Builder is a light cream — keep dark ink. Professional + Developer are
   near-black surfaces — switch to light ink so the mega title is legible
   over the dithered/waves/ascii-dots ambient bg. */
.tk-page.tk-builder {
  --tk-accent: var(--mint);
  --tk-accent-ink: var(--mint-ink);
  --tk-accent-soft: oklch(from var(--mint) l c h / 0.18);
  --tk-surface: #F5EFE2;
  --tk-ink: var(--ink);
  --tk-ink-2: var(--ink-2);
  --tk-ink-3: var(--ink-3);
  --tk-hairline: var(--hairline);
}
.tk-page.tk-professional {
  --tk-accent: var(--sky);
  --tk-accent-ink: oklch(0.85 0.06 245);
  --tk-accent-soft: oklch(from var(--sky) l c h / 0.22);
  --tk-surface: oklch(0.165 0.02 245);
  --tk-ink: #fff;
  --tk-ink-2: #fff;
  --tk-ink-3: oklch(0.78 0.03 245);
  --tk-hairline: oklch(0.32 0.02 245);
}
.tk-page.tk-developer {
  --tk-accent: var(--peach);
  --tk-accent-ink: var(--peach);
  --tk-accent-soft: oklch(from var(--peach) l c h / 0.22);
  --tk-surface: #0E0E10;
  --tk-ink: #fff;
  --tk-ink-2: #fff;
  --tk-ink-3: oklch(0.78 0 0);
  --tk-hairline: oklch(0.26 0 0);
}

/* Lede on dark-surface hero: keep white but tame the optical weight so it
   reads as supporting copy, not a second headline. */
.tk-page.tk-professional .tk-hero .lead,
.tk-page.tk-developer .tk-hero .lead {
  color: #fff;
  opacity: 0.95;
}

/* ---- Hero ---- */
.tk-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tk-surface, var(--bg-2));
  color: var(--tk-ink, var(--ink));
  padding-top: clamp(56px, 9vw, 120px);
  padding-bottom: clamp(56px, 9vw, 120px);
}

/* Full-bleed ambient bg slot — the dithering / waves / ascii-dots widget
   fills this layer absolutely. Sits behind the content (z-index 0), the
   .tk-hero-wrap content sits at z-index 1. */
.tk-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tk-hero-bg > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tk-hero-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 88px);
  align-items: center;
}
@media (max-width: 980px) {
  .tk-hero-wrap { grid-template-columns: 1fr; gap: 32px; }
  .tk-hero-art  { order: 2; max-width: 540px; margin: 0 auto; width: 100%; }
}

/* Left column of the track-detail hero grid: eyebrow → h1 → lede → CTAs.
   Establish vertical rhythm explicitly rather than rely on UA defaults. */
.tk-hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tk-hero-text .hero-cta-row { margin-top: 6px; }
.tk-hero .eyebrow { color: var(--tk-accent-ink); }
.tk-hero .eyebrow::before { background: var(--tk-accent-ink); }

/* Builder hero eyebrow sits on a mint-dithered cream surface — the small
   12px text was getting eaten by the dot pattern. Bump weight, darken,
   and back it with a soft cream pill so it reads at any density. */
.tk-page.tk-builder .tk-hero .eyebrow {
  font-weight: 600;
  color: oklch(0.34 0.09 160);
  background: oklch(from #F5EFE2 l c h / 0.85);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  align-self: flex-start;
  backdrop-filter: blur(2px);
}
.tk-page.tk-builder .tk-hero .eyebrow::before { background: oklch(0.34 0.09 160); }

/* Same problem as the eyebrow: the lede ("For people whose job is to build…")
   was rendering in --tk-ink-2 (medium gray) on the mint-dithered cream hero,
   and the busy pattern was eating it. Pull it up to the strongest ink so the
   subhead reads at any density. Visual hierarchy is preserved by font-size,
   weight, and the bigger h1 above it. */
.tk-page.tk-builder .tk-hero .lead {
  color: var(--ink);
  font-weight: 500;
}
/* Soft cream scrim over the dithering on the Builder track hero only, matching
   the treatment on the Builder card on /paths. ~32% opacity is enough to
   suppress the pattern behind text without flattening the surface. */
.tk-page.tk-builder .tk-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(from #F5EFE2 l c h / 0.32);
  pointer-events: none;
}

.tk-hero h1 {
  max-width: 12ch;
  font-size: clamp(56px, 8.4vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--tk-ink);
  margin: 0;
}

/* All three track heroes: drop the right-hand artwork (terminal / ascii
   panel / SVG composition). Keep the original 2-column grid so the text
   stays anchored to the left — we just leave the right column empty.
   Headline can scale up since it has more breathing room. */
.tk-hero-art { display: none; }
.tk-hero-wrap { align-items: center; }
.tk-hero h1 {
  font-size: clamp(56px, 8vw, 112px);
  max-width: 100%;
}
.tk-hero .lead {
  max-width: 52ch;
  color: var(--tk-ink-2);
}

/* Dark-surface tracks: outline button on near-black needs light ink so it's
   visible against the ambient bg. */
.tk-page.tk-professional .tk-hero .btn-outline,
.tk-page.tk-developer .tk-hero .btn-outline {
  color: var(--tk-ink);
  border-color: oklch(from var(--tk-ink) l c h / 0.45);
  background: transparent;
}
.tk-page.tk-professional .tk-hero .btn-outline:hover,
.tk-page.tk-developer .tk-hero .btn-outline:hover {
  border-color: var(--tk-accent-ink);
  color: var(--tk-accent-ink);
  background: oklch(from var(--tk-ink) l c h / 0.06);
}

.tk-hero-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 90% at 60% 40%, var(--tk-accent-soft) 0%, transparent 70%),
    var(--bg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  box-shadow:
    0 30px 60px -36px oklch(0.18 0 0 / 0.25),
    0 8px 22px -14px oklch(0.18 0 0 / 0.10);
}
.tk-art-svg { width: 100%; height: 100%; display: block; }

/* hero terminal (professional) */
.tk-hero-art .tk-terminal {
  position: absolute; inset: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, oklch(0.16 0 0) 0%, oklch(0.13 0.005 245) 100%);
  border: 1px solid oklch(0.28 0.02 245);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 oklch(0.34 0.02 245);
}
.tk-terminal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid oklch(0.28 0.02 245);
  background: oklch(0.18 0.005 245);
}
.tk-terminal-bar i {
  width: 9px; height: 9px; border-radius: 999px;
  background: oklch(0.42 0.04 245);
}
.tk-terminal-bar i:nth-child(1) { background: #FF5F57; }
.tk-terminal-bar i:nth-child(2) { background: #FEBC2E; }
.tk-terminal-bar i:nth-child(3) { background: #28C840; }
.tk-terminal-title { margin-left: 10px; font-size: 11px; color: oklch(0.65 0.01 245); letter-spacing: 0.04em; }
.tk-terminal-body {
  flex: 1; padding: 16px 18px; font-size: 12.5px; line-height: 1.7;
  color: oklch(0.94 0.01 245); overflow: hidden;
}
.tk-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-line.dim { color: oklch(0.72 0.04 245); }
.tk-prompt { color: var(--sky); margin-right: 8px; }
.tk-pulse {
  display: inline-block;
  background: oklch(from var(--sky) l c h / 0.18);
  color: var(--sky); padding: 1px 8px; border-radius: 4px;
  animation: tk-pulse-anim 2s ease-in-out infinite;
}
@keyframes tk-pulse-anim { 50% { background: oklch(from var(--sky) l c h / 0.42); } }
.tk-cursor {
  display: inline-block; width: 8px; height: 14px;
  background: var(--sky); margin-left: 4px; vertical-align: -2px;
  animation: tk-blink 1s steps(1) infinite;
}
@keyframes tk-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tk-pulse, .tk-cursor { animation: none; }
}

/* ---- Section spacing inside detail page ---- */
.tk-section { padding: clamp(56px, 7vw, 96px) 0 0; }
.tk-section:last-child { padding-bottom: clamp(40px, 5vw, 80px); }
.tk-section--strip { padding-top: clamp(28px, 3.5vw, 48px); }

/* ---- Comparison strip ---- */
.tk-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .tk-strip { grid-template-columns: 1fr; } }
.tk-strip-cell {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, background .25s ease;
  position: relative;
}
.tk-strip-cell:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.tk-strip-cell.is-active {
  border-color: var(--tk-accent-ink);
  background:
    linear-gradient(180deg, var(--tk-accent-soft) 0%, transparent 100%),
    var(--bg);
}
.tk-strip-cell.is-active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tk-accent-ink);
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}
.tk-strip-num { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; }
.tk-strip-name { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); }
.tk-strip-line { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.tk-strip-link { font-size: 11px; color: var(--ink-3); margin-top: 2px; align-self: flex-start; }
.tk-strip-cell.is-active .tk-strip-link { color: var(--tk-accent-ink); }

/* Per-track tint for the active strip cell — uses the matching banner
   accent (mint / sky / peach) instead of the generic --tk-accent-soft so
   the strip subtly echoes the hero-bg theme. */
.tk-page.tk-builder      .tk-strip-cell[data-strip-slug="builder"]      { border-color: oklch(from var(--mint)  l c h / 0.55); }
.tk-page.tk-professional .tk-strip-cell[data-strip-slug="professional"] { border-color: oklch(from var(--sky)   l c h / 0.55); }
.tk-page.tk-developer    .tk-strip-cell[data-strip-slug="developer"]    { border-color: oklch(from var(--peach) l c h / 0.55); }

/* ---- Learn grid ---- */
.tk-learn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .tk-learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tk-learn-grid { grid-template-columns: 1fr; } }
.tk-learn-cell {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px 24px 22px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 180px;
  transition: border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  position: relative;
  box-shadow: 0 1px 0 oklch(0.18 0 0 / 0.04), 0 6px 18px -14px oklch(0.18 0 0 / 0.08);
}
.tk-learn-cell:hover {
  border-color: var(--tk-accent-ink);
  transform: translateY(-4px);
  box-shadow:
    0 18px 38px -22px oklch(0.18 0 0 / 0.20),
    0 0 0 1px oklch(from var(--tk-accent) l c h / 0.18);
}
.tk-learn-num {
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--tk-accent-ink); margin-bottom: 6px;
}
.tk-learn-title { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.tk-learn-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ---- Build (capstones) grid ---- */
.tk-build-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .tk-build-grid { grid-template-columns: 1fr; } }
.tk-build-cell {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--tk-accent-soft) 0%, transparent 50%),
    var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 180px;
  transition: border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  box-shadow: 0 1px 0 oklch(0.18 0 0 / 0.04), 0 8px 22px -16px oklch(0.18 0 0 / 0.10);
}
.tk-build-cell:hover {
  border-color: var(--tk-accent-ink);
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px -22px oklch(from var(--tk-accent) l c h / 0.30),
    0 0 0 1px oklch(from var(--tk-accent) l c h / 0.22);
}

/* ---- Capstone preview tile (lives at the bottom of every .tk-build-cell) */
.tk-build-preview {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--tk-hairline);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12px;
  color: var(--tk-ink-2);
}
.tk-prev {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: oklch(from var(--tk-surface, var(--bg)) l c h / 0);
}
.tk-prev-meta {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--tk-ink-3);
  text-transform: uppercase;
}

/* Row layouts */
.tk-prev--rows .tk-prev-row,
.tk-prev--rank .tk-prev-rank-row,
.tk-prev--trail .tk-prev-trail-row,
.tk-prev--svc .tk-prev-svc-row,
.tk-prev--pr .tk-prev-pr-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--tk-hairline);
  border-radius: 8px;
  font-size: 12px;
  color: var(--tk-ink-2);
}
.tk-page.tk-professional .tk-prev--rows .tk-prev-row,
.tk-page.tk-professional .tk-prev--rank .tk-prev-rank-row,
.tk-page.tk-professional .tk-prev--trail .tk-prev-trail-row,
.tk-page.tk-developer    .tk-prev--svc .tk-prev-svc-row,
.tk-page.tk-developer    .tk-prev--pr .tk-prev-pr-row,
.tk-page.tk-developer    .tk-prev--rows .tk-prev-row,
.tk-page.tk-developer    .tk-prev--rank .tk-prev-rank-row,
.tk-page.tk-developer    .tk-prev--trail .tk-prev-trail-row {
  background: oklch(from var(--tk-surface) l c h / 0.45);
  border-color: oklch(from var(--tk-ink) l c h / 0.10);
  color: var(--tk-ink-2);
}
.tk-prev-dot {
  width: 8px; height: 8px; border-radius: 999px; display: block;
}
.tk-prev-dot--g { background: oklch(0.62 0.15 150); }
.tk-prev-dot--a { background: oklch(0.78 0.15  85); }
.tk-prev-dot--r { background: oklch(0.62 0.20  25); }
.tk-prev-rank-i,
.tk-prev-pr-i {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--tk-accent-ink);
  letter-spacing: 0.04em;
  min-width: 28px;
}

/* Checklist / progress bar (onboarding) */
.tk-prev--check { gap: 8px; }
.tk-prev-check-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.tk-prev-box {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--tk-ink-3);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}
.tk-prev-box.on {
  background: var(--tk-accent-ink);
  border-color: var(--tk-accent-ink);
}
.tk-prev-box.on::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(45deg);
}
.tk-prev-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.tk-prev-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tk-accent), var(--tk-accent-ink));
  border-radius: 999px;
}

/* Chat-style preview (assistant) */
.tk-prev--chat { gap: 8px; }
.tk-prev-msg {
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 92%;
}
.tk-prev-msg--u {
  background: var(--bg-2);
  color: var(--tk-ink);
  border-bottom-left-radius: 4px;
}
.tk-prev-msg--a {
  align-self: flex-end;
  background: var(--tk-accent-soft);
  color: var(--tk-ink);
  border-bottom-right-radius: 4px;
}

/* Flow nodes (pipeline) */
.tk-prev--flow {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tk-prev-node {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--tk-hairline);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--tk-ink-2);
}
.tk-prev-node--out {
  background: var(--tk-accent-soft);
  color: var(--tk-accent-ink);
  border-color: var(--tk-accent-ink);
}
.tk-prev-arrow {
  font-family: 'Geist', system-ui, sans-serif;
  color: var(--tk-ink-3);
  font-size: 14px;
}

/* Doc preview (memo) */
.tk-prev--doc {
  background: var(--bg);
  border: 1px solid var(--tk-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  gap: 6px;
}
.tk-page.tk-professional .tk-prev--doc {
  background: oklch(from var(--tk-surface) l c h / 0.4);
  border-color: oklch(from var(--tk-ink) l c h / 0.10);
}
.tk-prev-doc-h {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tk-accent-ink);
  font-weight: 500;
}
.tk-prev-doc-p {
  font-size: 13px; line-height: 1.5; color: var(--tk-ink);
}
.tk-prev-cite {
  font-size: 9.5px; color: var(--tk-accent-ink); font-weight: 600;
  vertical-align: super; margin-left: 1px;
}
.tk-prev-doc-foot {
  display: flex; justify-content: space-between;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tk-ink-3); padding-top: 6px;
  border-top: 1px solid var(--tk-hairline);
}

/* Diff preview (contracts) */
.tk-prev--diff { gap: 4px; }
.tk-prev-diff-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 0;
  align-items: center;
  font-family: 'Geist', system-ui, sans-serif;
}
.tk-prev-diff-row > span:first-child {
  font-weight: 600;
  color: var(--tk-ink-3);
  text-align: center;
}
.tk-prev-diff--add > span:first-child { color: oklch(0.62 0.15 150); }
.tk-prev-diff--del > span:first-child { color: oklch(0.62 0.20  25); }

/* Code preview (MCP) */
.tk-prev--code {
  background: oklch(0.16 0 0);
  color: oklch(0.92 0 0);
  border-radius: 10px;
  padding: 12px 14px;
  gap: 2px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.55;
}
.tk-prev-code-line { display: block; white-space: pre; }
.tk-prev-code-k  { color: oklch(0.78 0.15 290); }
.tk-prev-code-fn { color: oklch(0.82 0.16  85); }
.tk-prev-code-meta {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid oklch(0.30 0 0);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: oklch(0.7 0 0); text-transform: uppercase;
}

/* PR tags */
.tk-prev-pr-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
}
.tk-prev-pr-tag--g { background: oklch(0.92 0.06 150); color: oklch(0.32 0.10 150); }
.tk-prev-pr-tag--a { background: oklch(0.92 0.10  85); color: oklch(0.36 0.13  85); }

/* Query preview (retrieval) */
.tk-prev--query { gap: 6px; }
.tk-prev-query-q {
  background: var(--bg);
  border-left: 2px solid var(--tk-accent-ink);
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--tk-ink);
  border-radius: 0 8px 8px 0;
}
.tk-page.tk-developer .tk-prev-query-q {
  background: oklch(from var(--tk-surface) l c h / 0.4);
}
.tk-prev-query-r {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: 11.5px;
  padding: 4px 10px;
  color: var(--tk-ink-2);
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* Trail preview (audit trail) */
.tk-prev--trail .tk-prev-trail-row {
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* Service preview */
.tk-prev--svc .tk-prev-svc-row {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

/* ---- Diff cell with comparison-color stripe ---- */
.tk-diff-cell {
  position: relative;
}
.tk-diff-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tk-accent-ink);
  opacity: 0.6;
}
.tk-diff-cell[data-vs="builder"]::before      { background: var(--mint-ink, var(--mint)); opacity: 0.8; }
.tk-diff-cell[data-vs="professional"]::before { background: var(--sky-ink,  var(--sky));  opacity: 0.8; }
.tk-diff-cell[data-vs="developer"]::before    { background: var(--peach-ink,var(--peach));opacity: 0.8; }
.tk-build-tag {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--tk-accent-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.tk-build-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--tk-accent-ink);
}
.tk-build-title { font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); }
.tk-build-body { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ---- Tools chips ---- */
.tk-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.tk-chip:hover {
  border-color: var(--tk-accent-ink);
  color: var(--tk-accent-ink);
  background: var(--tk-accent-soft);
}
.tk-chip--logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
}
.tk-chip--logo img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  filter: none;
}
.tk-page.tk-professional .tk-chip--logo,
.tk-page.tk-developer .tk-chip--logo {
  /* On dark surfaces, give the logos a small light bg pill so colored
     glyphs (Anthropic orange, Slack purple) stay legible against near-black. */
  background: oklch(from var(--tk-ink) l c h / 0.06);
  border-color: oklch(from var(--tk-ink) l c h / 0.18);
}
.tk-page.tk-professional .tk-chip--logo img,
.tk-page.tk-developer .tk-chip--logo img {
  background: var(--bg);
  border-radius: 4px;
  padding: 1px;
}

/* ---- Sample week ---- */
.tk-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1000px) { .tk-week { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tk-week { grid-template-columns: 1fr; } }
.tk-week-cell {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 20px 18px 22px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  min-height: 160px;
  transition: border-color .2s ease, transform .25s ease;
}
.tk-week-cell::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0;
  height: 2px;
  background: var(--tk-accent);
  border-radius: 0 0 2px 2px;
}
.tk-week-cell:hover { border-color: var(--tk-accent-ink); transform: translateY(-2px); }
.tk-week-day {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tk-accent-ink);
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 4px;
}
.tk-week-title { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.tk-week-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ---- Roles pills ---- */
.tk-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-role-pill {
  display: inline-flex; align-items: center;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tk-role-pill:hover {
  border-color: var(--tk-accent-ink);
  color: var(--tk-accent-ink);
}

/* ---- Diff (vs. other tracks) ---- */
.tk-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .tk-diff-grid { grid-template-columns: 1fr; } }
.tk-diff-cell {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.tk-diff-head {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tk-accent-ink);
  text-transform: uppercase;
}
.tk-diff-line {
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink);
}
.tk-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tk-diff-list li {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.tk-diff-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.65em;
  width: 8px; height: 1px;
  background: var(--tk-accent-ink);
}

/* ---- CTA band scoping inside tracks ---- */
.tk-page .cta-band .eyebrow { color: var(--tk-accent-ink); }
.tk-page .cta-band .eyebrow::before { background: var(--tk-accent-ink); }

/* =================== ENTERPRISE BETA-REQUEST MODAL =================== */
/* Triggered by [data-beta-trigger] anywhere on the site. POSTs to
   public.beta_request in Supabase. Distinct intent from the waitlist:
   beta launches June 2026 and is enterprise-scoped. */
.beta-modal {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.beta-modal[hidden] { display: none; }
.beta-backdrop {
  position: absolute; inset: 0;
  background: oklch(0 0 0 / 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: betaFadeIn .18s ease-out;
}
.beta-dialog {
  position: relative;
  background: var(--bg);
  border-radius: 22px;
  max-width: 600px; width: 100%;
  padding: 36px;
  box-shadow: 0 32px 80px -20px oklch(0 0 0 / 0.45);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  animation: betaPopIn .22s cubic-bezier(.2,.9,.2,1.1);
  border: 1px solid var(--hairline);
}
@keyframes betaFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes betaPopIn  { from { opacity: 0; transform: translateY(8px) scale(0.98) } to { opacity: 1; transform: none } }

.beta-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink-3);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
  display: flex; align-items: center; justify-content: center;
}
.beta-close:hover { background: var(--bg-2); color: var(--ink); }

.beta-meta {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--peach-ink);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.beta-meta::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--peach);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--peach) 25%, transparent);
}
.beta-dialog h3 { font-size: 26px; line-height: 1.15; margin: 0 0 10px; max-width: 24ch; }
.beta-lead { font-size: 14px; color: var(--ink-2); margin: 0 0 24px; max-width: 50ch; }

/* Reuse .field styles from the waitlist; just scope the accent for focus rings */
.beta-form { --wl-accent: var(--peach); --wl-accent-ink: var(--peach-ink); }
.beta-form .field { margin-bottom: 14px; }
.beta-form .field-row { gap: 12px; margin-bottom: 0; }
.beta-form textarea { resize: vertical; min-height: 70px; }

.beta-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 12px; align-items: center;
}
.beta-actions .btn { white-space: nowrap; }
.beta-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Geist', sans-serif;
}
.beta-status.is-success {
  background: color-mix(in oklab, var(--mint) 20%, var(--bg));
  color: var(--mint-ink);
  border: 1px solid color-mix(in oklab, var(--mint) 40%, var(--hairline));
}
.beta-status.is-error {
  background: color-mix(in oklab, oklch(0.62 0.18 25) 14%, var(--bg));
  color: oklch(0.42 0.18 25);
  border: 1px solid color-mix(in oklab, oklch(0.62 0.18 25) 35%, var(--hairline));
}

@media (max-width: 600px) {
  .beta-modal { padding: 12px; }
  .beta-dialog { padding: 24px; border-radius: 18px; }
  .beta-actions { flex-direction: column-reverse; }
  .beta-actions .btn { width: 100%; justify-content: center; }
  .beta-dialog h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .beta-backdrop, .beta-dialog { animation: none; }
}

/* =====================================================================
 * Card elevation pass — apply a consistent resting + hover shadow
 * across every card-style surface. .shape-card and .path-banner already
 * carry their own elevation, so they're not listed here.
 * ===================================================================== */
.bento-cell,
.gap-card,
.feature-card,
.tk-learn-cell,
.tk-build-cell,
.tk-week-cell,
.tk-diff-cell,
.tk-strip-cell {
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 10px 24px -16px oklch(0.18 0 0 / 0.14),
    0 4px 10px -6px oklch(0.18 0 0 / 0.08);
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.bento-cell:hover,
.gap-card:hover,
.feature-card:hover,
.tk-learn-cell:hover,
.tk-build-cell:hover,
.tk-week-cell:hover,
.tk-diff-cell:hover,
.tk-strip-cell:hover {
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 26px 50px -30px oklch(0.18 0 0 / 0.26),
    0 10px 22px -14px oklch(0.18 0 0 / 0.14);
}
.bento-cell.dark { box-shadow: 0 14px 32px -18px oklch(0 0 0 / 0.55); }
.bento-cell.dark:hover { box-shadow: 0 24px 50px -22px oklch(0 0 0 / 0.65); }

/* =====================================================================
 * Process flow — animated 4-step sequence (Apply → Train → Certify →
 * Get discovered). Replaces the old 4-cell bento. Connecting track fills
 * left-to-right (top-to-bottom on mobile) as steps light up; each node
 * pops + ring-pulses when it becomes the active step. JS in router.js
 * cycles `is-current` and toggles the section's `--process-progress`
 * custom prop to drive the track-fill width.
 * ===================================================================== */
.process-flow {
  --process-progress: 0%;
  --process-node: 56px;
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 3vw, 36px) 0;
}
.process-track {
  position: absolute;
  left: calc(var(--process-node) / 2);
  right: calc(var(--process-node) / 2);
  top: calc(clamp(24px, 3vw, 36px) + var(--process-node) / 2);
  height: 2px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  z-index: 0;
}
.process-track-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--mint) 0%, var(--mint) 33%,
    var(--sky) 33%, var(--sky) 66%,
    var(--peach) 66%, var(--peach) 100%);
  width: var(--process-progress);
  transition: width 0.7s cubic-bezier(.25,.7,.3,1);
}
.process-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.25,.7,.3,1);
}
.process-flow.is-in .process-step { opacity: 1; transform: translateY(0); }
.process-flow.is-in .process-step:nth-child(1) { transition-delay: 0.05s; }
.process-flow.is-in .process-step:nth-child(2) { transition-delay: 0.18s; }
.process-flow.is-in .process-step:nth-child(3) { transition-delay: 0.31s; }
.process-flow.is-in .process-step:nth-child(4) { transition-delay: 0.44s; }

.process-node {
  position: relative;
  width: var(--process-node);
  height: var(--process-node);
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1.5px solid var(--hairline);
  color: var(--ink-3);
  transition: border-color 0.35s ease, color 0.35s ease,
              background 0.35s ease, transform 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s ease;
}
.process-node svg { display: block; }
.process-num {
  position: absolute;
  bottom: -22px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 600;
}
.process-step.is-passed .process-node {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.process-step.is-current .process-node {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.08);
  box-shadow:
    0 0 0 6px oklch(from var(--accent) l c h / 0.16),
    0 16px 36px -18px oklch(from var(--accent-ink) l c h / 0.45);
}
.process-step.is-current .process-num { color: var(--accent-ink); font-weight: 700; }

.process-content { max-width: 26ch; padding-top: 16px; }
.process-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
  transition: color 0.35s ease;
}
.process-step.is-current .process-title { color: var(--accent-ink); }
.process-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Mobile: vertical timeline, line on the left */
@media (max-width: 760px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
  }
  .process-content { padding-top: 10px; }
  .process-track {
    left: calc(var(--process-node) / 2 - 1px);
    right: auto;
    top: calc(clamp(24px, 3vw, 36px) + var(--process-node) / 2);
    bottom: clamp(24px, 3vw, 36px);
    width: 2px;
    height: auto;
  }
  .process-track-fill {
    background: linear-gradient(180deg,
      var(--mint) 0%, var(--mint) 33%,
      var(--sky) 33%, var(--sky) 66%,
      var(--peach) 66%, var(--peach) 100%);
    width: 100%;
    height: var(--process-progress);
    transition: height 0.7s cubic-bezier(.25,.7,.3,1);
  }
  .process-num { bottom: auto; top: -2px; right: -52px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-step,
  .process-node,
  .process-track-fill { transition: none !important; }
  .process-step { opacity: 1; transform: none; }
  .process-track-fill { width: 100%; height: 100%; }
}

/* =====================================================================
 * Cycle deck — typographic chapter index ("What Columba is"). NOT a
 * card. A single hairline-ruled tab row at the top (01 Train · 02
 * Certify · 03 Get discovered) with an animated underline that slides
 * to the active tab; the active step's content unfolds beneath it as
 * pure page typography (no border, no card, no enclosure). Hover any
 * tab to switch. Auto-cycle continues until the user hovers; resumes
 * when they leave. The numeric watermark and accent decorative pattern
 * sit as page-level background decoration behind the headline.
 * ===================================================================== */
.cycle-deck {
  --cycle-duration: 3500ms;
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Tab row — horizontal index. Hairline beneath, accent underline slides. */
.cycle-tabs {
  display: flex;
  align-items: baseline;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.cycle-tab {
  background: none;
  border: 0;
  padding: 6px 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-3);
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
  transition: color 0.3s ease;
}
.cycle-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -19px;
  height: 1.5px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(.65,.05,.30,1);
}
.cycle-tab.is-active { color: var(--accent-ink); }
.cycle-tab.is-active::after { transform: scaleX(1); }
.cycle-tab:hover { color: var(--accent-ink); }
.cycle-tab:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 6px;
  border-radius: 2px;
}
.cycle-tab-num {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  transition: color 0.3s ease;
}
.cycle-tab.is-active .cycle-tab-num,
.cycle-tab:hover .cycle-tab-num { color: var(--accent-ink); }
.cycle-tab-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Stage — overlapping panels, only the active one is visible. No border,
   no background. Min-height reserves space so the page doesn't reflow as
   panels swap. */
.cycle-stage {
  position: relative;
  min-height: clamp(220px, 22vw, 280px);
}
.cycle-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.5s cubic-bezier(.25,.7,.3,1),
    transform 0.5s cubic-bezier(.25,.7,.3,1);
}
.cycle-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cycle-panel-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 56ch;
  position: relative;
  z-index: 1;
}

/* Watermark numeral — page-level background decoration, not enclosed. */
.cycle-watermark {
  position: absolute;
  top: -50px;
  right: 0;
  font-size: clamp(220px, 24vw, 320px);
  line-height: 0.78;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--accent);
  opacity: 0.18;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* Accent decorative pattern — fills the right portion of the page area
   behind the headline. Masked to fade in from the right. */
.cycle-pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  pointer-events: none;
  opacity: 0.32;
  z-index: 0;
  color: var(--accent-ink);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);
}
[data-cycle-pattern="grid"] .cycle-pattern {
  background-image: radial-gradient(currentColor 1px, transparent 1.6px);
  background-size: 18px 18px;
}
[data-cycle-pattern="rings"] .cycle-pattern {
  background-image: repeating-radial-gradient(circle at 100% 50%,
    currentColor 0 1px,
    transparent 1px 28px);
}
[data-cycle-pattern="signal"] .cycle-pattern {
  background-image: repeating-conic-gradient(from 90deg at 100% 50%,
    currentColor 0deg 0.4deg,
    transparent 0.4deg 6deg);
}
.cycle-panel.is-active[data-cycle-pattern="grid"] .cycle-pattern {
  animation: cycleDriftGrid 18s linear infinite;
}
@keyframes cycleDriftGrid { to { background-position: -36px -36px; } }
.cycle-panel.is-active[data-cycle-pattern="rings"] .cycle-pattern {
  animation: cyclePulseRings 6s ease-in-out infinite;
}
@keyframes cyclePulseRings {
  0%, 100% { transform: scale(1); opacity: 0.32; }
  50%      { transform: scale(1.04); opacity: 0.40; }
}
.cycle-panel.is-active[data-cycle-pattern="signal"] .cycle-pattern {
  animation: cycleSweepSignal 22s linear infinite;
}
@keyframes cycleSweepSignal { to { transform: rotate(2deg); } }

/* Typography — pure editorial composition, no enclosure. */
.cycle-h {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0;
  max-width: 16ch;
  color: var(--ink);
}
.cycle-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}
.cycle-body strong { color: var(--ink); font-weight: 600; }

/* Mobile: tabs become a wrapping row; stage takes natural height. */
@media (max-width: 720px) {
  .cycle-tabs { gap: 22px; flex-wrap: wrap; padding-bottom: 14px; }
  .cycle-tab::after { bottom: -15px; }
  .cycle-stage { min-height: 260px; }
  .cycle-watermark { font-size: clamp(140px, 32vw, 220px); top: -30px; }
  .cycle-pattern { width: 50%; opacity: 0.22; }
  .cycle-panel-text { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-tab::after,
  .cycle-panel,
  .cycle-pattern { transition: none !important; animation: none !important; }
}
/* === BUILDER TRACK · below-banner redesign ===
   Direction: editorial blueprint / construction spec sheet.
   The Builder track is artifact-first and low-code wiring, so the page below
   the hero behaves like a dimensioned drawing set: hairline rules, mono
   section numerals (§ 02 / 06), dimension marks, isometric grid paper,
   marginalia. Mint ink draws on warm cream. All selectors scoped under
   .tk-page.tk-builder so it never bleeds into Professional / Developer.
   ============================================================ */

/* ---- Page-local tokens (Builder only) ---- */
.tk-page.tk-builder {
  --bd-rule:     oklch(0.42 0.08 160 / 0.32);   /* mint hairline */
  --bd-rule-2:   oklch(0.42 0.08 160 / 0.18);   /* fainter rule */
  --bd-grid:     oklch(0.42 0.08 160 / 0.10);   /* blueprint grid */
  --bd-grid-2:   oklch(0.42 0.08 160 / 0.05);
  --bd-paper:    #FBF6EA;                        /* warmer than --bg-2 */
  --bd-paper-2:  #F1E9D6;                        /* shaded paper */
  --bd-mono:     'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bd-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 16px 30px -22px oklch(0.30 0.06 160 / 0.18),
    0 4px 10px -6px oklch(0.18 0 0 / 0.06);
}

/* ---- Section frame: running header on each section ---- */
.tk-page.tk-builder .tk-section { position: relative; }
.tk-page.tk-builder .tk-section:not(.tk-section--strip) > .section-head {
  position: relative;
  margin-bottom: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--bd-rule);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.tk-page.tk-builder .tk-section:not(.tk-section--strip) > .section-head::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 56px; height: 3px;
  background: var(--mint-ink);
}
.tk-page.tk-builder .tk-section:not(.tk-section--strip) > .section-head::after {
  content: attr(data-spec);
  position: absolute;
  right: 0; top: -22px;
  font-family: var(--bd-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-ink);
}
/* fallback marginalia per-section: mono numerals + slug, generated via :nth-of-type
   so we don't need any markup change. We count .tk-section after .tk-section--strip. */
.tk-page.tk-builder .tk-section:nth-of-type(2)  > .section-head::after { content: 'SHEET 01 / 06  ·  CURRICULUM'; }
.tk-page.tk-builder .tk-section:nth-of-type(3)  > .section-head::after { content: 'SHEET 02 / 06  ·  ARTIFACTS'; }
.tk-page.tk-builder .tk-section:nth-of-type(4)  > .section-head::after { content: 'SHEET 03 / 06  ·  TOOLING'; }
.tk-page.tk-builder .tk-section:nth-of-type(5)  > .section-head::after { content: 'SHEET 04 / 06  ·  TIMELINE'; }
.tk-page.tk-builder .tk-section:nth-of-type(6)  > .section-head::after { content: 'SHEET 05 / 06  ·  AUDIENCE'; }
.tk-page.tk-builder .tk-section:nth-of-type(7)  > .section-head::after { content: 'SHEET 06 / 06  ·  COMPARISON'; }

/* eyebrow becomes a stamp */
.tk-page.tk-builder .tk-section .section-head .eyebrow {
  font-family: var(--bd-mono);
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--mint-ink);
  padding: 4px 10px;
  border: 1px solid var(--bd-rule);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: oklch(from var(--mint) l c h / 0.10);
  margin-bottom: 18px;
}
.tk-page.tk-builder .tk-section .section-head .eyebrow::before {
  content: ''; width: 6px; height: 6px;
  background: var(--mint-ink);
  border-radius: 0;
  transform: rotate(45deg);
  margin: 0;
}
.tk-page.tk-builder .tk-section .section-head h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
}

/* ---- 1. PATH STRIP · stacked layered cards on a draftsman's desk ---- */
.tk-page.tk-builder .tk-section--strip {
  padding-top: clamp(40px, 5vw, 72px);
}
.tk-page.tk-builder .tk-strip {
  position: relative;
  padding: 22px 22px 26px;
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--bd-grid-2) 0 1px, transparent 1px 24px),
    var(--bd-paper);
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  box-shadow: var(--bd-shadow);
  gap: 14px;
}
.tk-page.tk-builder .tk-strip::before {
  /* corner tick marks like a drawing border */
  content: '';
  position: absolute; inset: 8px;
  border: 1px dashed var(--bd-rule-2);
  border-radius: 2px;
  pointer-events: none;
}
.tk-page.tk-builder .tk-strip-cell {
  background: #fff;
  border: 1px solid var(--bd-rule-2);
  border-radius: 3px;
  padding: 18px 18px 16px;
  box-shadow:
    0 1px 0 oklch(0.18 0 0 / 0.04),
    0 8px 18px -12px oklch(0.30 0.06 160 / 0.18);
  transform: translateY(0) rotate(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
}
.tk-page.tk-builder .tk-strip-cell:nth-child(1) { transform: rotate(-0.4deg); }
.tk-page.tk-builder .tk-strip-cell:nth-child(2) { transform: rotate(0.25deg); }
.tk-page.tk-builder .tk-strip-cell:nth-child(3) { transform: rotate(-0.2deg); }
.tk-page.tk-builder .tk-strip-cell:hover {
  transform: translateY(-3px) rotate(0);
  border-color: var(--mint-ink);
  box-shadow:
    0 18px 32px -18px oklch(0.30 0.06 160 / 0.30),
    0 0 0 1px oklch(from var(--mint) l c h / 0.25);
}
.tk-page.tk-builder .tk-strip-cell.is-active {
  background:
    linear-gradient(180deg, oklch(from var(--mint) l c h / 0.16) 0%, #fff 60%),
    #fff;
  border-color: var(--mint-ink);
}
.tk-page.tk-builder .tk-strip-cell.is-active::before {
  content: 'CURRENT SHEET';
  position: absolute; top: 8px; right: 10px;
  font-family: var(--bd-mono);
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--mint-ink);
  background: transparent;
  width: auto; height: auto; border-radius: 0;
  padding: 0;
}
.tk-page.tk-builder .tk-strip-num {
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bd-rule-2);
  margin-bottom: 8px;
}
.tk-page.tk-builder .tk-strip-name {
  font-size: 18px;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.tk-page.tk-builder .tk-strip-line {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.tk-page.tk-builder .tk-strip-link {
  font-family: var(--bd-mono);
  font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--mint-ink);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--bd-rule-2);
  align-self: stretch;
}

/* ---- 2. WHAT YOU'LL LEARN · numbered drawing schedule ---- */
.tk-page.tk-builder .tk-learn-grid {
  border-top: 1px solid var(--bd-rule);
  border-left: 1px solid var(--bd-rule);
  background: var(--bd-paper);
  border-radius: 0;
  gap: 0;
  position: relative;
}
.tk-page.tk-builder .tk-learn-grid::after {
  /* Dimension line under the schedule: a single mint hairline with
     two short tick marks at each end (left + right witness lines). */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 12px;
  border-top: 1px solid var(--mint-ink);
  background-image:
    linear-gradient(180deg, var(--mint-ink) 0 12px, transparent 0),
    linear-gradient(180deg, var(--mint-ink) 0 12px, transparent 0);
  background-position: left top, right top;
  background-repeat: no-repeat, no-repeat;
  background-size: 1px 12px, 1px 12px;
  pointer-events: none;
}
.tk-page.tk-builder .tk-learn-cell {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--bd-rule);
  border-bottom: 1px solid var(--bd-rule);
  border-radius: 0;
  padding: 28px 26px 26px;
  min-height: 200px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.tk-page.tk-builder .tk-learn-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--bd-grid-2) 0 1px, transparent 1px 22px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.tk-page.tk-builder .tk-learn-cell:hover {
  background: #fff;
  transform: translateY(0);
  box-shadow: inset 0 0 0 2px var(--mint-ink);
}
.tk-page.tk-builder .tk-learn-cell:hover::before { opacity: 1; }
.tk-page.tk-builder .tk-learn-cell > * { position: relative; }
.tk-page.tk-builder .tk-learn-num {
  font-family: var(--bd-mono);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--mint-ink);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.tk-page.tk-builder .tk-learn-num::before {
  content: '§';
  font-size: 14px;
  color: var(--mint-ink);
  opacity: 0.6;
}
.tk-page.tk-builder .tk-learn-num::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--mint-ink);
  margin-left: 4px;
  transform: translateY(-6px);
}
.tk-page.tk-builder .tk-learn-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin-bottom: 4px;
}
.tk-page.tk-builder .tk-learn-body {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---- 3. WHAT YOU'LL BUILD · capstones as drawing plates ---- */
.tk-page.tk-builder .tk-build-grid { gap: 18px; }
.tk-page.tk-builder .tk-build-cell {
  background:
    linear-gradient(180deg, #fff 0%, var(--bd-paper) 100%);
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  padding: 0;
  box-shadow: var(--bd-shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  counter-increment: tk-build;
}
.tk-page.tk-builder .tk-build-grid { counter-reset: tk-build; }
.tk-page.tk-builder .tk-build-cell::before {
  /* title block, like an architect's drawing cartouche */
  content: 'PLATE 0' counter(tk-build) '  ·  ARTIFACT';
  display: block;
  padding: 10px 22px;
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  background: var(--bd-paper-2);
  border-bottom: 1px solid var(--bd-rule);
}
.tk-page.tk-builder .tk-build-cell:hover {
  border-color: var(--mint-ink);
  transform: translateY(-3px);
  box-shadow:
    0 24px 44px -22px oklch(0.30 0.06 160 / 0.32),
    0 0 0 1px oklch(from var(--mint) l c h / 0.30);
}
/* Body of the plate */
.tk-page.tk-builder .tk-build-cell .tk-build-tag,
.tk-page.tk-builder .tk-build-cell .tk-build-title,
.tk-page.tk-builder .tk-build-cell .tk-build-body {
  margin-left: 22px; margin-right: 22px;
}
.tk-page.tk-builder .tk-build-cell .tk-build-tag {
  margin-top: 22px;
  font-family: var(--bd-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--mint-ink);
}
.tk-page.tk-builder .tk-build-cell .tk-build-tag::before {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--mint-ink);
  border-radius: 0;
  background: transparent;
}
.tk-page.tk-builder .tk-build-cell .tk-build-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-top: 8px;
  line-height: 1.18;
}
.tk-page.tk-builder .tk-build-cell .tk-build-body {
  margin-top: 6px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* Preview footer = drawing tray */
.tk-page.tk-builder .tk-build-cell .tk-build-preview {
  margin-top: 0;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--bd-rule);
  border-bottom: 0;
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--bd-grid-2) 0 1px, transparent 1px 16px),
    #fff;
  position: relative;
}
.tk-page.tk-builder .tk-build-cell .tk-build-preview::before {
  content: 'DETAIL';
  position: absolute;
  top: 6px; right: 14px;
  font-family: var(--bd-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  opacity: 0.7;
}

/* ---- 4. TOOLS · spec-sheet bill-of-materials chips ---- */
.tk-page.tk-builder .tk-tools {
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px dashed var(--bd-rule);
  border-bottom: 1px dashed var(--bd-rule);
  padding: 18px 0;
  position: relative;
}
.tk-page.tk-builder .tk-tools::before {
  content: 'BILL OF TOOLS';
  position: absolute;
  top: -10px; left: 0;
  background: var(--bd-paper);
  padding: 0 12px 0 0;
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
}
.tk-page.tk-builder .tk-tools::after {
  content: 'QTY · TYPE';
  position: absolute;
  top: -10px; right: 0;
  background: var(--bd-paper);
  padding: 0 0 0 12px;
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  opacity: 0.6;
}
.tk-page.tk-builder .tk-chip {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 16px 6px 0;
  margin-right: 16px;
  font-family: var(--bd-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tk-page.tk-builder .tk-chip::before {
  content: '+';
  color: var(--mint-ink);
  font-weight: 600;
}
.tk-page.tk-builder .tk-chip:hover {
  background: transparent;
  color: var(--mint-ink);
}
.tk-page.tk-builder .tk-chip:hover::before { content: '×'; }
.tk-page.tk-builder .tk-chip--logo {
  padding: 4px 16px 4px 4px;
}
.tk-page.tk-builder .tk-chip--logo::before { content: '·'; }
.tk-page.tk-builder .tk-chip--logo img {
  width: 16px; height: 16px;
}

/* ---- 5. WEEK · Mon–Fri timeline / dimensioned strip ---- */
.tk-page.tk-builder .tk-week {
  gap: 0;
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--bd-paper) 0%, #fff 100%);
  position: relative;
}
.tk-page.tk-builder .tk-week::before {
  /* Top dimension rail: shaded paper band with a thin mint rule
     near the bottom — feels like the elevation line above a
     measured strip. */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background:
    linear-gradient(180deg,
      var(--bd-paper-2) 0 14px,
      var(--mint-ink) 14px 15px,
      var(--bd-paper-2) 15px 100%);
  border-bottom: 1px solid var(--bd-rule);
}
.tk-page.tk-builder .tk-week::after {
  content: '5 DAYS · 1 ARTIFACT · REAL REVIEW';
  position: absolute;
  top: 4px; left: 14px;
  font-family: var(--bd-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  z-index: 1;
}
.tk-page.tk-builder .tk-week-cell {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--bd-rule);
  border-radius: 0;
  padding: 36px 18px 22px;
  min-height: 180px;
}
.tk-page.tk-builder .tk-week-cell:last-child { border-right: 0; }
.tk-page.tk-builder .tk-week-cell::before {
  /* small mint marker at the top-left of each cell, replaces the full-width bar */
  content: '';
  position: absolute;
  left: 18px; top: 22px; right: auto;
  width: 8px; height: 8px;
  background: var(--mint-ink);
  border-radius: 0;
  transform: rotate(45deg);
}
.tk-page.tk-builder .tk-week-cell:hover {
  background: #fff;
  transform: translateY(0);
  box-shadow: inset 0 0 0 2px var(--mint-ink);
}
.tk-page.tk-builder .tk-week-day {
  font-family: var(--bd-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  margin-top: 4px;
  margin-bottom: 6px;
  padding-left: 18px;
}
.tk-page.tk-builder .tk-week-title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
}
.tk-page.tk-builder .tk-week-body {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 1000px) {
  .tk-page.tk-builder .tk-week-cell {
    border-right: 0;
    border-bottom: 1px solid var(--bd-rule);
  }
  .tk-page.tk-builder .tk-week-cell:last-child { border-bottom: 0; }
}

/* ---- 6. ROLES · bracketed stamps ---- */
.tk-page.tk-builder .tk-roles { gap: 10px; }
.tk-page.tk-builder .tk-role-pill {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 14px;
  font-family: var(--bd-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tk-page.tk-builder .tk-role-pill::before,
.tk-page.tk-builder .tk-role-pill::after {
  font-family: var(--bd-mono);
  color: var(--mint-ink);
  font-size: 16px;
  line-height: 1;
  position: relative;
  top: -1px;
  transition: transform .2s ease, color .2s ease;
}
.tk-page.tk-builder .tk-role-pill::before { content: '['; margin-right: 8px; }
.tk-page.tk-builder .tk-role-pill::after  { content: ']'; margin-left: 8px; }
.tk-page.tk-builder .tk-role-pill:hover {
  color: var(--mint-ink);
}
.tk-page.tk-builder .tk-role-pill:hover::before { transform: translateX(-3px); }
.tk-page.tk-builder .tk-role-pill:hover::after  { transform: translateX(3px); }

/* ---- 7. DIFF · two spec columns separated by a center hairline ---- */
.tk-page.tk-builder .tk-diff-grid {
  gap: 0;
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.tk-page.tk-builder .tk-diff-grid::before {
  content: '';
  position: absolute;
  left: 50%; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--bd-rule);
  transform: translateX(-0.5px);
}
@media (max-width: 800px) {
  .tk-page.tk-builder .tk-diff-grid::before { display: none; }
}
.tk-page.tk-builder .tk-diff-cell {
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 28px),
    #fff;
  border: 0;
  border-radius: 0;
  padding: 30px 30px 32px;
}
@media (max-width: 800px) {
  .tk-page.tk-builder .tk-diff-cell + .tk-diff-cell {
    border-top: 1px solid var(--bd-rule);
  }
}
.tk-page.tk-builder .tk-diff-cell::before {
  /* override the generic left-rail with a small mint corner mark */
  content: '';
  left: 22px;
  top: 22px;
  bottom: auto;
  width: 22px; height: 22px;
  background: transparent !important;
  border-left: 2px solid var(--mint-ink);
  border-top: 2px solid var(--mint-ink);
  opacity: 1 !important;
}
.tk-page.tk-builder .tk-diff-cell::after {
  content: 'A · B';
  position: absolute;
  top: 24px; right: 24px;
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
}
.tk-page.tk-builder .tk-diff-cell:nth-child(1)::after { content: 'COL · A'; }
.tk-page.tk-builder .tk-diff-cell:nth-child(2)::after { content: 'COL · B'; }
.tk-page.tk-builder .tk-diff-head {
  font-family: var(--bd-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  padding-top: 18px;
  margin-top: 18px;
  border-top: 0;
}
.tk-page.tk-builder .tk-diff-line {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.tk-page.tk-builder .tk-diff-list li {
  font-size: 13.5px;
  line-height: 1.6;
  padding-left: 22px;
  font-family: 'Geist', system-ui, sans-serif;
}
.tk-page.tk-builder .tk-diff-list li::before {
  width: 14px;
  height: 1px;
  top: 0.7em;
  background: var(--mint-ink);
}
.tk-page.tk-builder .tk-diff-list li::after {
  content: '';
  position: absolute;
  left: 12px; top: calc(0.7em - 2px);
  width: 5px; height: 5px;
  border-top: 1px solid var(--mint-ink);
  border-right: 1px solid var(--mint-ink);
  transform: rotate(45deg);
}

/* ---- 8. CTA BAND · stamped sign-off block ---- */
.tk-page.tk-builder .tk-section:last-of-type .cta-band {
  position: relative;
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--bd-grid-2) 0 1px, transparent 1px 28px),
    var(--bd-paper);
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  padding: 44px 44px 48px;
  box-shadow: var(--bd-shadow);
  overflow: hidden;
}
.tk-page.tk-builder .tk-section:last-of-type .cta-band::before {
  content: 'APPROVED · BUILDER TRACK';
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
  padding: 4px 10px;
  border: 1px solid var(--mint-ink);
  border-radius: 2px;
  transform: rotate(-3deg);
  transform-origin: right top;
}
.tk-page.tk-builder .tk-section:last-of-type .cta-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      var(--mint-ink) 0 14px,
      transparent 14px 28px);
}
.tk-page.tk-builder .tk-section:last-of-type .cta-band h3 {
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.03em;
  font-weight: 600;
  line-height: 1.1;
  max-width: 24ch;
}
.tk-page.tk-builder .tk-section:last-of-type .cta-band .eyebrow {
  font-family: var(--bd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mint-ink);
}

/* ---- Reveal-staggered drift-up keeps but more controlled ---- */
@media (prefers-reduced-motion: no-preference) {
  .tk-page.tk-builder .tk-learn-cell,
  .tk-page.tk-builder .tk-build-cell,
  .tk-page.tk-builder .tk-week-cell,
  .tk-page.tk-builder .tk-strip-cell {
    transition:
      transform .4s cubic-bezier(.2,.7,.2,1),
      box-shadow .35s ease,
      border-color .25s ease,
      background .3s ease;
  }
}

/* ---- Responsive trims ---- */
@media (max-width: 700px) {
  .tk-page.tk-builder .tk-section:not(.tk-section--strip) > .section-head::after {
    position: static;
    display: block;
    margin-bottom: 10px;
  }
  .tk-page.tk-builder .tk-section:last-of-type .cta-band {
    padding: 32px 22px 36px;
  }
  .tk-page.tk-builder .tk-section:last-of-type .cta-band::before {
    top: 12px; right: 12px;
    transform: none;
    font-size: 9px;
  }
}
/* === PROFESSIONAL TRACK · below-banner redesign ===
   Aesthetic: a printed equity-research note / financial prospectus.
   Bloomberg-meets-Stripe on cream paper. Running headers, hairline column
   rules, monospaced statblocks, footnote citation marks, a section spine
   that reads § I → § VII like a research report.
   Scoped strictly to .tk-page.tk-professional. Hero is untouched. */

/* --- 1. Page-level chrome: cream ground, ledger spine, prospectus margin --- */
.tk-page.tk-professional .page,
.tk-page.tk-professional { background: var(--bg-2); }

/* Reset any dark-tone tk-* vars below the hero so the prospectus feel
   reads as ink-on-cream regardless of what the .tk-page block sets. */
.tk-page.tk-professional .tk-section {
  --tk-ink:      var(--ink);
  --tk-ink-2:    var(--ink-2);
  --tk-ink-3:    var(--ink-3);
  --tk-hairline: var(--hairline);
  --tk-surface:  var(--bg-2);
  --pro-rule:    oklch(0.74 0.02 245);
  --pro-ink:     #0E1A2C;
  --pro-cite:    var(--sky-ink);
  --pro-paper:   oklch(0.985 0.006 90);
  color: var(--ink);
  position: relative;
}

/* Running header — sits above each below-banner section like a printed
   research-note kicker. Sections get a counter so they auto-number. */
.tk-page.tk-professional { counter-reset: pro-section; }
.tk-page.tk-professional .tk-section:not(.tk-section--strip) {
  counter-increment: pro-section;
  padding-top: clamp(64px, 7.5vw, 104px);
}
.tk-page.tk-professional .tk-section:not(.tk-section--strip)::before {
  content: "COLUMBA / PROFESSIONAL  ·  EQUITY-RESEARCH NOTE  ·  § "
           counter(pro-section, upper-roman)
           "  ·  PAGE " counter(pro-section, decimal-leading-zero) " OF 07";
  display: block;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 3.2vw, 44px);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.tk-page.tk-professional .tk-section:not(.tk-section--strip)::after {
  content: "";
  position: absolute;
  left: max(20px, calc((100vw - 1200px) / 2 - 24px));
  top: clamp(64px, 7.5vw, 104px);
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--hairline) 0%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 980px) {
  .tk-page.tk-professional .tk-section:not(.tk-section--strip)::after { display: none; }
  .tk-page.tk-professional .tk-section:not(.tk-section--strip)::before {
    font-size: 9px; letter-spacing: 0.12em;
  }
}

/* Section heads — clause numerals + serif-ish display weight on h2. */
.tk-page.tk-professional .tk-section .section-head--inline { position: relative; }
.tk-page.tk-professional .tk-section .eyebrow {
  color: var(--sky-ink);
  font-weight: 500;
  letter-spacing: 0.16em;
}
.tk-page.tk-professional .tk-section .eyebrow::before {
  background: var(--sky-ink);
  width: 8px; height: 8px;
  box-shadow: 0 0 0 4px oklch(from var(--sky) l c h / 0.22);
}
.tk-page.tk-professional .tk-section h2 {
  position: relative;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-feature-settings: 'ss01', 'liga';
  padding-left: 28px;
}
.tk-page.tk-professional .tk-section h2::before {
  content: "§ " counter(pro-section, upper-roman);
  position: absolute;
  left: 0; top: 0.55em;
  transform: translateY(-50%);
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--sky-ink);
  background: var(--bg-2);
  padding: 4px 0 4px 0;
  white-space: nowrap;
}

/* --- 2. Comparison strip: prospectus index / "table of contents" --- */
.tk-page.tk-professional .tk-section--strip { padding-top: clamp(36px, 4vw, 56px); }
.tk-page.tk-professional .tk-strip {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.tk-page.tk-professional .tk-strip::before {
  content: "INDEX OF PATHS  ·  THREE TRACKS, ONE WAITLIST";
  position: absolute;
  top: -10px; left: 0;
  background: var(--bg-2);
  padding-right: 12px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.tk-page.tk-professional .tk-strip-cell {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: 28px 22px 22px;
  position: relative;
  transition: background .25s ease;
}
.tk-page.tk-professional .tk-strip-cell:last-child { border-right: 0; }
.tk-page.tk-professional .tk-strip-cell:hover {
  background: oklch(from var(--sky) l c h / 0.10);
  transform: none;
  border-color: var(--hairline);
}
.tk-page.tk-professional .tk-strip-cell.is-active {
  background: oklch(from var(--sky) l c h / 0.16);
  box-shadow: inset 0 2px 0 0 var(--sky-ink);
}
.tk-page.tk-professional .tk-strip-cell.is-active::before { display: none; }
.tk-page.tk-professional .tk-strip-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}
.tk-page.tk-professional .tk-strip-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-top: 4px;
}
.tk-page.tk-professional .tk-strip-line {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 6px;
  max-width: 32ch;
}
.tk-page.tk-professional .tk-strip-link {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--sky-ink);
  margin-top: 14px;
}
@media (max-width: 800px) {
  .tk-page.tk-professional .tk-strip { grid-template-columns: 1fr; }
  .tk-page.tk-professional .tk-strip-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .tk-page.tk-professional .tk-strip-cell:last-child { border-bottom: 0; }
}

/* --- 3. "What you'll learn": column-ruled prospectus stat-rows --- */
.tk-page.tk-professional .tk-learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.tk-page.tk-professional .tk-learn-cell {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: 26px 28px 26px 64px;
  position: relative;
  transition: background .25s ease;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tk-page.tk-professional .tk-learn-cell:nth-child(2n) { border-right: 0; }
.tk-page.tk-professional .tk-learn-cell:nth-last-child(-n+2) { border-bottom: 0; }
.tk-page.tk-professional .tk-learn-cell:hover {
  background: oklch(from var(--sky) l c h / 0.08);
  transform: none;
  border-color: var(--hairline);
}
.tk-page.tk-professional .tk-learn-cell::after {
  content: "";
  position: absolute;
  left: 28px; top: 32px;
  width: 22px; height: 1px;
  background: var(--sky-ink);
}
.tk-page.tk-professional .tk-learn-num {
  position: absolute;
  left: 28px; top: 22px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sky-ink);
  font-weight: 500;
  background: transparent;
  width: auto; height: auto;
  border: 0;
  display: inline;
  padding-bottom: 14px;
}
.tk-page.tk-professional .tk-learn-num::before { content: "ITEM "; }
.tk-page.tk-professional .tk-learn-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.tk-page.tk-professional .tk-learn-title::after {
  content: "[" counter(pro-section) "." counters(item, ".") "]";
  display: none; /* placeholder for footnote — kept for parity, not rendered */
}
.tk-page.tk-professional .tk-learn-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}
@media (max-width: 760px) {
  .tk-page.tk-professional .tk-learn-grid { grid-template-columns: 1fr; }
  .tk-page.tk-professional .tk-learn-cell { border-right: 0; }
  .tk-page.tk-professional .tk-learn-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .tk-page.tk-professional .tk-learn-cell:last-child { border-bottom: 0; }
}

/* --- 4. "What you'll build": research-note tear-sheets --- */
.tk-page.tk-professional .tk-build-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.tk-page.tk-professional .tk-build-cell {
  background: var(--pro-paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 24px 24px 20px;
  position: relative;
  display: grid;
  gap: 14px;
  box-shadow:
    0 1px 0 0 oklch(0 0 0 / 0.02),
    0 18px 40px -28px oklch(0.30 0.04 245 / 0.18);
  overflow: hidden;
}
.tk-page.tk-professional .tk-build-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sky-ink) 0%, var(--sky) 60%, transparent 100%);
}
.tk-page.tk-professional .tk-build-cell::after {
  content: "RESEARCH NOTE";
  position: absolute;
  top: 14px; right: 18px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}
.tk-page.tk-professional .tk-build-cell:hover {
  border-color: var(--sky-ink);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 0 oklch(0 0 0 / 0.02),
    0 26px 60px -24px oklch(0.30 0.06 245 / 0.32);
}
.tk-page.tk-professional .tk-build-tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sky-ink);
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.tk-page.tk-professional .tk-build-tag::before {
  content: "PRO" counter(pro-section, decimal-leading-zero);
  background: var(--sky-ink);
  color: var(--bg);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.14em;
}
.tk-page.tk-professional .tk-build-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.15;
  position: relative;
  padding-right: 80px;
}
.tk-page.tk-professional .tk-build-title::after {
  content: "[" counter(pro-section) "]";
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--sky-ink);
  vertical-align: super;
  margin-left: 4px;
  letter-spacing: 0.05em;
}
.tk-page.tk-professional .tk-build-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.tk-page.tk-professional .tk-build-preview {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: oklch(0.97 0.005 245);
  border-top-style: solid;
}
@media (max-width: 800px) {
  .tk-page.tk-professional .tk-build-grid { grid-template-columns: 1fr; }
}

/* --- 5. Tools: registered-surfaces ledger --- */
.tk-page.tk-professional .tk-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--hairline);
}
.tk-page.tk-professional .tk-chip {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 14px 18px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  transition: background .2s ease;
}
.tk-page.tk-professional .tk-chip::after {
  content: "REG.";
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 500;
}
.tk-page.tk-professional .tk-chip:hover {
  background: oklch(from var(--sky) l c h / 0.10);
  border-color: var(--hairline);
  color: var(--ink);
}
.tk-page.tk-professional .tk-chip--logo img {
  width: 20px; height: 20px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  filter: none;
}

/* --- 6. Week: 5-day market-schedule grid --- */
.tk-page.tk-professional .tk-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--pro-paper);
}
.tk-page.tk-professional .tk-week-cell {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: 22px 18px 22px;
  display: grid;
  gap: 8px;
  position: relative;
  transition: background .2s ease;
}
.tk-page.tk-professional .tk-week-cell:last-child { border-right: 0; }
.tk-page.tk-professional .tk-week-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: oklch(from var(--sky) l c h / 0.55);
  opacity: 0;
  transition: opacity .25s ease;
}
.tk-page.tk-professional .tk-week-cell:hover {
  background: oklch(from var(--sky) l c h / 0.10);
  transform: none;
  border-color: var(--hairline);
}
.tk-page.tk-professional .tk-week-cell:hover::before { opacity: 1; }
.tk-page.tk-professional .tk-week-day {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--sky-ink);
  font-weight: 500;
  display: flex; align-items: baseline; gap: 6px;
}
.tk-page.tk-professional .tk-week-day::after {
  content: "0" counter(week-counter);
  counter-increment: week-counter;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-left: auto;
  font-size: 9px;
}
.tk-page.tk-professional .tk-week { counter-reset: week-counter; }
.tk-page.tk-professional .tk-week-title {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--hairline);
}
.tk-page.tk-professional .tk-week-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 980px) {
  .tk-page.tk-professional .tk-week { grid-template-columns: repeat(2, 1fr); }
  .tk-page.tk-professional .tk-week-cell {
    border-bottom: 1px solid var(--hairline);
  }
  .tk-page.tk-professional .tk-week-cell:nth-child(2n) { border-right: 0; }
  .tk-page.tk-professional .tk-week-cell:last-child { border-bottom: 0; }
}
@media (max-width: 520px) {
  .tk-page.tk-professional .tk-week { grid-template-columns: 1fr; }
  .tk-page.tk-professional .tk-week-cell { border-right: 0; }
}

/* --- 7. Roles: registered-holder line --- */
.tk-page.tk-professional .tk-roles {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
  gap: 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.tk-page.tk-professional .tk-roles::before {
  content: "REGISTERED HOLDERS / TARGET COHORT";
  position: absolute;
  top: -10px; left: 0;
  background: var(--bg-2);
  padding-right: 12px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.tk-page.tk-professional .tk-role-pill {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  position: relative;
}
.tk-page.tk-professional .tk-role-pill:first-child { padding-left: 0; }
.tk-page.tk-professional .tk-role-pill:last-child { border-right: 0; }
.tk-page.tk-professional .tk-role-pill::before {
  content: "·";
  display: none;
}
.tk-page.tk-professional .tk-role-pill:hover {
  background: transparent;
  color: var(--sky-ink);
  transform: none;
  border-color: var(--hairline);
}

/* --- 8. Diff: comparable-analysis two-column ledger --- */
.tk-page.tk-professional .tk-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--pro-paper);
  position: relative;
}
.tk-page.tk-professional .tk-diff-grid::before {
  content: "COMPARABLES ANALYSIS  ·  RELATIVE POSITIONING";
  position: absolute;
  top: -10px; left: 16px;
  background: var(--bg-2);
  padding: 0 12px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.tk-page.tk-professional .tk-diff-cell {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: 28px 28px 26px 36px;
  position: relative;
}
.tk-page.tk-professional .tk-diff-cell:last-child { border-right: 0; }
.tk-page.tk-professional .tk-diff-cell::before {
  width: 4px;
  left: 0; top: 0; bottom: 0;
  border-radius: 0;
  opacity: 1;
}
.tk-page.tk-professional .tk-diff-head {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sky-ink);
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 8px;
}
.tk-page.tk-professional .tk-diff-head::after {
  content: "REL.";
  margin-left: auto;
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: 0.22em;
}
.tk-page.tk-professional .tk-diff-line {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 14px;
  margin-bottom: 16px;
  max-width: 42ch;
}
.tk-page.tk-professional .tk-diff-list { gap: 10px; }
.tk-page.tk-professional .tk-diff-list li {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  padding-left: 24px;
  position: relative;
}
.tk-page.tk-professional .tk-diff-list li::before {
  content: counter(diff-line, decimal-leading-zero);
  counter-increment: diff-line;
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  background: transparent;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--sky-ink);
}
.tk-page.tk-professional .tk-diff-list { counter-reset: diff-line; }
@media (max-width: 800px) {
  .tk-page.tk-professional .tk-diff-grid { grid-template-columns: 1fr; }
  .tk-page.tk-professional .tk-diff-cell {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .tk-page.tk-professional .tk-diff-cell:last-child { border-bottom: 0; }
}

/* --- 9. CTA band: prospectus signature footer --- */
.tk-page.tk-professional .tk-section:has(> .cta-band) { padding-bottom: clamp(48px, 6vw, 88px); }
.tk-page.tk-professional .cta-band {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 0; border-right: 0;
  background: transparent;
  border-radius: 0;
  padding: 32px 0 28px;
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 32px;
  align-items: end;
}
.tk-page.tk-professional .cta-band::before {
  content: "EFFECTIVE  ·  CY2026  ·  WAITLIST OPEN  ·  SIGN BELOW";
  position: absolute;
  top: -10px; left: 0;
  background: var(--bg-2);
  padding-right: 14px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}
.tk-page.tk-professional .cta-band::after {
  content: "Sign your name on the work.";
  position: absolute;
  bottom: -22px; right: 0;
  font-family: 'Geist', system-ui, sans-serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.tk-page.tk-professional .cta-band .eyebrow { color: var(--sky-ink); }
.tk-page.tk-professional .cta-band .eyebrow::before { background: var(--sky-ink); }
.tk-page.tk-professional .cta-band h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
}
.tk-page.tk-professional .cta-band-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .tk-page.tk-professional .cta-band { grid-template-columns: 1fr; align-items: start; }
  .tk-page.tk-professional .cta-band::after { position: static; display: block; margin-top: 12px; text-align: left; }
}

/* --- 10. CSS-only reveal polish: stagger on tk-learn / tk-build / tk-week --- */
@media (prefers-reduced-motion: no-preference) {
  .tk-page.tk-professional .tk-learn-cell,
  .tk-page.tk-professional .tk-build-cell,
  .tk-page.tk-professional .tk-week-cell,
  .tk-page.tk-professional .tk-diff-cell,
  .tk-page.tk-professional .tk-strip-cell {
    transition:
      background .25s ease,
      border-color .25s ease,
      transform .35s cubic-bezier(.2,.8,.2,1),
      box-shadow .35s ease;
  }
  .tk-page.tk-professional .tk-build-cell::before {
    transform-origin: left center;
    animation: proRule 1.2s cubic-bezier(.2,.8,.2,1) both;
    animation-play-state: paused;
  }
  .tk-page.tk-professional .reveal.in .tk-build-cell::before,
  .tk-page.tk-professional .tk-build-cell.reveal.in::before,
  .tk-page.tk-professional .tk-build-cell::before {
    animation-play-state: running;
  }
  @keyframes proRule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}
/* === /PROFESSIONAL TRACK · below-banner redesign === */
/* === DEVELOPER TRACK · below-banner redesign ===
   Direction: carry the hero's dark surface (#0E0E10) DOWN through the entire
   below-banner. The Developer page becomes a single dark IDE/terminal surface,
   peach (#F4C8A0) used as the syntax-highlight accent. Sections read as file
   tabs / editor panes; learn cells get a left-gutter line-number column;
   chips and pills become dark with a peach focus-ring. All scoped under
   `.tk-page.tk-developer` so Builder/Professional pages remain untouched. */

/* ---------- 1. Page surface ---------- */
.tk-page.tk-developer {
  background: #0E0E10;
  color: #E8E6E2;
  /* faint dot-grid mimicking the hero's ASCII pattern, scaled way down */
  background-image:
    radial-gradient(circle at 1px 1px, oklch(from var(--peach) l c h / 0.05) 1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
}
.tk-page.tk-developer { --dev-line: oklch(from var(--peach) l c h / 0.18); }
.tk-page.tk-developer { --dev-line-soft: oklch(from var(--peach) l c h / 0.10); }
.tk-page.tk-developer { --dev-surf: #131316; }
.tk-page.tk-developer { --dev-surf-2: #18181C; }
.tk-page.tk-developer { --dev-ink: #E8E6E2; }
.tk-page.tk-developer { --dev-ink-2: oklch(0.78 0.005 90); }
.tk-page.tk-developer { --dev-ink-3: oklch(0.58 0.008 90); }

/* ---------- 2. Section spacing + file-tab style headers ---------- */
.tk-page.tk-developer .tk-section { padding-top: clamp(64px, 8vw, 112px); }
.tk-page.tk-developer .tk-section .section-head .eyebrow {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dev-ink-3);
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--dev-surf);
  border: 1px solid var(--dev-line-soft);
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
  position: relative;
  margin-bottom: 0;
}
.tk-page.tk-developer .tk-section .section-head .eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--peach);
  box-shadow: 0 0 0 3px oklch(from var(--peach) l c h / 0.15);
  margin: 0;
}
.tk-page.tk-developer .tk-section .section-head h2 {
  color: var(--dev-ink);
  font-weight: 500;
  letter-spacing: -0.025em;
  border-top: 1px solid var(--dev-line-soft);
  padding-top: 22px;
  position: relative;
}
.tk-page.tk-developer .tk-section .section-head h2::before {
  /* peach hairline that runs under the file-tab eyebrow, stitching them */
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 56px; height: 1px;
  background: var(--peach);
}
.tk-page.tk-developer .tk-section .section-head .lead,
.tk-page.tk-developer .tk-section > .lead {
  color: var(--dev-ink-2);
}

/* ---------- 3. Comparison strip · IDE buffer tabs ---------- */
.tk-page.tk-developer .tk-strip-cell {
  background: var(--dev-surf);
  border-color: var(--dev-line-soft);
  border-radius: 12px;
  color: var(--dev-ink-2);
  overflow: hidden;
  isolation: isolate;
}
.tk-page.tk-developer .tk-strip-cell::after {
  /* faint scanline texture, only visible on hover */
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    oklch(from var(--peach) l c h / 0.04) 0 1px,
    transparent 1px 3px
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 0;
}
.tk-page.tk-developer .tk-strip-cell > * { position: relative; z-index: 1; }
.tk-page.tk-developer .tk-strip-cell:hover {
  border-color: var(--peach);
  transform: translateY(-1px);
  background: var(--dev-surf-2);
}
.tk-page.tk-developer .tk-strip-cell:hover::after { opacity: 1; }
.tk-page.tk-developer .tk-strip-cell.is-active {
  border-color: var(--peach);
  background:
    linear-gradient(180deg, oklch(from var(--peach) l c h / 0.10) 0%, transparent 100%),
    var(--dev-surf);
  box-shadow:
    inset 3px 0 0 var(--peach),
    0 0 0 1px oklch(from var(--peach) l c h / 0.25);
}
.tk-page.tk-developer .tk-strip-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--peach);
  font-size: 10.5px;
}
.tk-page.tk-developer .tk-strip-name { color: var(--dev-ink); }
.tk-page.tk-developer .tk-strip-line { color: var(--dev-ink-2); }
.tk-page.tk-developer .tk-strip-link { color: var(--dev-ink-3); }
.tk-page.tk-developer .tk-strip-cell:hover .tk-strip-link { color: var(--peach); }

/* ---------- 4. "What you'll learn" · gutter-numbered code lines ---------- */
.tk-page.tk-developer .tk-learn-grid { gap: 1px; background: var(--dev-line-soft); border: 1px solid var(--dev-line-soft); border-radius: 14px; overflow: hidden; }
.tk-page.tk-developer .tk-learn-cell {
  background: var(--dev-surf);
  border: none;
  border-radius: 0;
  padding: 28px 26px 26px 64px;
  box-shadow: none;
  position: relative;
  min-height: 200px;
  transition: background .25s ease;
}
.tk-page.tk-developer .tk-learn-cell::before {
  /* line-number gutter — 01, 02, 03... — that an IDE would render */
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 30px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--dev-ink-3);
  background: oklch(from var(--peach) l c h / 0.04);
  border-right: 1px solid var(--dev-line-soft);
  letter-spacing: 0.04em;
}
.tk-page.tk-developer .tk-learn-grid { counter-reset: item; }
.tk-page.tk-developer .tk-learn-cell:hover {
  background: var(--dev-surf-2);
  border: none;
  transform: none;
  box-shadow:
    inset 2px 0 0 var(--peach),
    inset 0 0 0 1px oklch(from var(--peach) l c h / 0.18);
}
.tk-page.tk-developer .tk-learn-cell:hover::before {
  color: var(--peach);
  background: oklch(from var(--peach) l c h / 0.10);
}
.tk-page.tk-developer .tk-learn-num {
  display: none; /* replaced by the gutter counter */
}
.tk-page.tk-developer .tk-learn-title { color: var(--dev-ink); }
.tk-page.tk-developer .tk-learn-body { color: var(--dev-ink-2); }

/* ---------- 5. "What you'll build" · capstone files ---------- */
.tk-page.tk-developer .tk-build-cell {
  background:
    radial-gradient(140% 90% at 0% 0%, oklch(from var(--peach) l c h / 0.10) 0%, transparent 60%),
    var(--dev-surf);
  border: 1px solid var(--dev-line-soft);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 40px -28px #000;
}
.tk-page.tk-developer .tk-build-cell::before {
  /* file-bar header strip with traffic-light dots and a path */
  content: '';
  display: block;
  height: 32px;
  background: var(--dev-surf-2);
  border-bottom: 1px solid var(--dev-line-soft);
  background-image:
    radial-gradient(circle at 14px 16px, #FF5F57 4px, transparent 5px),
    radial-gradient(circle at 32px 16px, #FEBC2E 4px, transparent 5px),
    radial-gradient(circle at 50px 16px, #28C840 4px, transparent 5px);
}
.tk-page.tk-developer .tk-build-cell > .tk-build-tag,
.tk-page.tk-developer .tk-build-cell > .tk-build-title,
.tk-page.tk-developer .tk-build-cell > .tk-build-body,
.tk-page.tk-developer .tk-build-cell > .tk-build-preview {
  padding-left: 28px;
  padding-right: 28px;
}
.tk-page.tk-developer .tk-build-cell > .tk-build-tag { padding-top: 22px; }
.tk-page.tk-developer .tk-build-cell > .tk-build-preview { padding-bottom: 24px; padding-top: 18px; }
.tk-page.tk-developer .tk-build-cell:hover {
  border-color: var(--peach);
  transform: translateY(-3px);
  box-shadow:
    0 24px 48px -24px oklch(from var(--peach) l c h / 0.30),
    0 0 0 1px oklch(from var(--peach) l c h / 0.30);
}
.tk-page.tk-developer .tk-build-tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--peach);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tk-page.tk-developer .tk-build-title { color: var(--dev-ink); }
.tk-page.tk-developer .tk-build-body  { color: var(--dev-ink-2); }
.tk-page.tk-developer .tk-build-preview { border-top-color: var(--dev-line-soft); }
.tk-page.tk-developer .tk-prev-meta { color: var(--dev-ink-3); }

/* ---------- 6. Tools chips · dark ---------- */
.tk-page.tk-developer .tk-tools { gap: 8px; }
.tk-page.tk-developer .tk-chip {
  background: var(--dev-surf);
  border-color: var(--dev-line-soft);
  color: var(--dev-ink-2);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.tk-page.tk-developer .tk-chip:hover {
  border-color: var(--peach);
  color: var(--peach);
  background: var(--dev-surf-2);
  box-shadow: 0 0 0 1px oklch(from var(--peach) l c h / 0.20);
}

/* ---------- 7. "A week in this track" · timeline strip ---------- */
.tk-page.tk-developer .tk-week {
  position: relative;
  padding-top: 6px;
}
.tk-page.tk-developer .tk-week::before {
  /* a faint horizontal "rail" that the day cells sit on, IDE-timeline feel */
  content: '';
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--peach) 8%,
    var(--peach) 92%,
    transparent 100%);
  opacity: 0.35;
}
.tk-page.tk-developer .tk-week-cell {
  background: var(--dev-surf);
  border-color: var(--dev-line-soft);
  border-radius: 12px;
}
.tk-page.tk-developer .tk-week-cell::before {
  /* override the cream-version peach top bar with a slightly tighter one */
  background: var(--peach);
  height: 2px;
}
.tk-page.tk-developer .tk-week-cell:hover {
  border-color: var(--peach);
  background: var(--dev-surf-2);
}
.tk-page.tk-developer .tk-week-day {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--peach);
  font-size: 10.5px;
}
.tk-page.tk-developer .tk-week-title { color: var(--dev-ink); }
.tk-page.tk-developer .tk-week-body  { color: var(--dev-ink-2); }

/* ---------- 8. Roles pills ---------- */
.tk-page.tk-developer .tk-role-pill {
  background: var(--dev-surf);
  border-color: var(--dev-line-soft);
  color: var(--dev-ink-2);
}
.tk-page.tk-developer .tk-role-pill:hover {
  border-color: var(--peach);
  color: var(--peach);
  background: var(--dev-surf-2);
}

/* ---------- 9. "How this differs" diff cells ---------- */
.tk-page.tk-developer .tk-diff-cell {
  background:
    linear-gradient(180deg, oklch(from var(--peach) l c h / 0.04) 0%, transparent 60%),
    var(--dev-surf);
  border-color: var(--dev-line-soft);
  border-radius: 14px;
  padding: 32px 28px 28px 36px;
}
.tk-page.tk-developer .tk-diff-cell::before {
  /* keep the existing per-track color stripe but make it taller and edge-aligned */
  left: 0; top: 18px; bottom: 18px;
  width: 2px;
  border-radius: 0 2px 2px 0;
}
.tk-page.tk-developer .tk-diff-head {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--peach);
  letter-spacing: 0.06em;
}
.tk-page.tk-developer .tk-diff-line { color: var(--dev-ink); font-weight: 500; }
.tk-page.tk-developer .tk-diff-list li { color: var(--dev-ink-2); }
.tk-page.tk-developer .tk-diff-list li::before { background: var(--peach); }

/* ---------- 10. CTA band · dark, peach edge ---------- */
.tk-page.tk-developer .cta-band {
  background:
    radial-gradient(80% 140% at 100% 0%, oklch(from var(--peach) l c h / 0.14) 0%, transparent 60%),
    var(--dev-surf);
  border: 1px solid oklch(from var(--peach) l c h / 0.30);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.tk-page.tk-developer .cta-band::before {
  /* peach hairline at the top edge — like a syntax-highlight selection */
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: 0;
  height: 1px;
  background: var(--peach);
  opacity: 0.55;
}
.tk-page.tk-developer .cta-band h3 { color: var(--dev-ink); }
.tk-page.tk-developer .cta-band .eyebrow {
  /* override the file-tab eyebrow style so it doesn't re-use the section-head treatment */
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--peach);
  background: transparent;
  border: none;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
}
.tk-page.tk-developer .cta-band .eyebrow::before {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--peach);
  box-shadow: 0 0 0 3px oklch(from var(--peach) l c h / 0.20);
}
.tk-page.tk-developer .cta-band .btn-outline {
  color: var(--dev-ink);
  border-color: oklch(from var(--dev-ink) l c h / 0.40);
  background: transparent;
}
.tk-page.tk-developer .cta-band .btn-outline:hover {
  border-color: var(--peach);
  color: var(--peach);
  background: oklch(from var(--peach) l c h / 0.06);
}

/* ---------- 11. Last-section bottom padding now lives on the dark surface ---------- */
.tk-page.tk-developer .tk-section:last-child { padding-bottom: clamp(72px, 8vw, 120px); }

/* ---------- 12. Reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tk-page.tk-developer .tk-strip-cell,
  .tk-page.tk-developer .tk-learn-cell,
  .tk-page.tk-developer .tk-build-cell,
  .tk-page.tk-developer .tk-week-cell {
    transition: none;
  }
  .tk-page.tk-developer .tk-strip-cell:hover,
  .tk-page.tk-developer .tk-build-cell:hover,
  .tk-page.tk-developer .tk-week-cell:hover { transform: none; }
}

/* ---------- 13. Mobile tightening ---------- */
@media (max-width: 700px) {
  .tk-page.tk-developer .tk-learn-cell { padding-left: 56px; min-height: 170px; }
  .tk-page.tk-developer .tk-learn-cell::before { width: 38px; padding-top: 28px; }
  .tk-page.tk-developer .tk-build-cell > .tk-build-tag,
  .tk-page.tk-developer .tk-build-cell > .tk-build-title,
  .tk-page.tk-developer .tk-build-cell > .tk-build-body,
  .tk-page.tk-developer .tk-build-cell > .tk-build-preview {
    padding-left: 22px; padding-right: 22px;
  }
}

/* === Track polish · strip decorative running text + restore chip shape ===
 * Builder + Professional both layered editorial running headers, sheet
 * captions, "BILL OF TOOLS", "REG.", "§ I" headline prefixes, etc. These
 * came across as noise — wrong weight, wrong scale, wrong position. This
 * pass kills the tiny decorative text labels and restores readable chips.
 * Layout, hairlines, color, and structural typography stay untouched.
 */

/* --- BUILDER: kill running headers, sheet captions, decorative chip glyphs --- */
.tk-page.tk-builder .tk-section:not(.tk-section--strip) > .section-head::before,
.tk-page.tk-builder .tk-section:not(.tk-section--strip) > .section-head::after,
.tk-page.tk-builder .tk-strip::before,
.tk-page.tk-builder .tk-strip-cell.is-active::before,
.tk-page.tk-builder .tk-build-cell::before,
.tk-page.tk-builder .tk-build-preview::before,
.tk-page.tk-builder .tk-tools::before,
.tk-page.tk-builder .tk-tools::after,
.tk-page.tk-builder .tk-chip::before,
.tk-page.tk-builder .tk-chip:hover::before,
.tk-page.tk-builder .tk-chip--logo::before,
.tk-page.tk-builder .tk-week::before,
.tk-page.tk-builder .tk-week::after,
.tk-page.tk-builder .tk-diff-cell::after {
  content: none !important;
  display: none !important;
}

/* Builder chip — restore to a real readable pill */
.tk-page.tk-builder .tk-tools {
  border-top: 0;
  border-bottom: 0;
  padding: 0;
  gap: 10px;
}
.tk-page.tk-builder .tk-chip {
  background: var(--bd-paper, #FFFEFB);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.tk-page.tk-builder .tk-chip:hover {
  border-color: var(--mint-ink);
  color: var(--ink);
  background: oklch(from var(--mint) l c h / 0.18);
}
.tk-page.tk-builder .tk-chip--logo {
  padding: 6px 14px 6px 6px;
  gap: 8px;
}

/* Builder week — drop the dimension rail since the rail text is hidden */
.tk-page.tk-builder .tk-week-cell { padding-top: 22px; }

/* Builder diff — the stray "COL · A/B" corner stamp was the only decorative bit removed; nothing else to restore */

/* Builder section heads — let h2 breathe so capstones don't wrap to 4 lines */
.tk-page.tk-builder .tk-section .section-head h2 {
  max-width: none;
}

/* --- PROFESSIONAL: kill running headers, "§ I" h2 prefix, REG. chip stamps --- */
.tk-page.tk-professional .tk-section:not(.tk-section--strip)::before,
.tk-page.tk-professional .tk-section:not(.tk-section--strip)::after,
.tk-page.tk-professional .tk-section h2::before,
.tk-page.tk-professional .tk-strip::before,
.tk-page.tk-professional .tk-roles::before,
.tk-page.tk-professional .tk-diff-grid::before,
.tk-page.tk-professional .tk-diff-head::after,
.tk-page.tk-professional .tk-learn-num::before,
.tk-page.tk-professional .tk-learn-title::after,
.tk-page.tk-professional .tk-build-cell::after,
.tk-page.tk-professional .tk-build-tag::before,
.tk-page.tk-professional .tk-build-title::after,
.tk-page.tk-professional .tk-week-day::after,
.tk-page.tk-professional .tk-chip::after,
.tk-page.tk-professional .tk-diff-list li::before {
  content: none !important;
  display: none !important;
}

/* Pro section padding — running header used the top padding; collapse it back */
.tk-page.tk-professional .tk-section:not(.tk-section--strip) {
  padding-top: clamp(56px, 7vw, 96px);
}

/* Pro chips — drop the "REG." stamp and the right padding it required */
.tk-page.tk-professional .tk-chip {
  padding: 14px 18px;
}

/* Pro h2 — no §-numeral artifact, no width clamp from the prefix span */
.tk-page.tk-professional .tk-section h2 {
  padding-left: 0;
}

/* Pro diff list bullets restored to a simple disc */
.tk-page.tk-professional .tk-diff-list li {
  padding-left: 18px;
  position: relative;
}
.tk-page.tk-professional .tk-diff-list li::after {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--sky-ink);
}

/* === Builder polish v2 · flatten gradients on cards/buttons === */
.tk-page.tk-builder .tk-strip-cell.is-active {
  background: oklch(from var(--mint) l c h / 0.14) !important;
}
.tk-page.tk-builder .tk-build-cell {
  background: var(--bd-paper, #FFFEFB) !important;
}

/* =====================================================================
 * DARK MODE
 * Activated by <html data-theme="dark"> (set + persisted by an upstream
 * pre-paint script in app/layout.tsx). All overrides scope under
 * [data-theme="dark"] so the toggle is manual + opt-in, never @media.
 *
 * Strategy:
 *  1. Re-define every :root color token at [data-theme="dark"] so the
 *     entire `var(--bg|--ink|--hairline|...)` graph flips at once.
 *  2. Override every other CSS-var-defining selector in the codebase
 *     (banner-*, tk-*, tc-*, bd-*, pro-*, dev-*, --magic-spot-*, etc.)
 *     so each scoped surface gets a deliberate dark companion.
 *  3. Patch hardcoded hex/rgba literals in components that don't read
 *     from tokens (hero radial fade, marquee masks, bento.dark, hl
 *     markers, capstone "paper", etc.).
 *  4. Form fields, buttons, focus rings, scroll-progress, modals.
 *
 * Traffic-light dots (#FF5F57 / #FEBC2E / #28C840) are intentionally
 * kept as-is — they are macOS-window UI semantics, not brand colors.
 * ===================================================================== */

[data-theme="dark"] {
  /* Core surface stack: warm near-black → graded "elevated" panels.
     Slight warm bias (h ≈ 90) keeps the brand's cream-leaning feel. */
  --bg:        #0E0E10;
  --bg-2:      #16161A;
  --bg-3:      #1F1F24;

  /* Type scale: kept *slightly* warm, never pure white, so it pairs
     with the warm bg without harsh blue-shift. */
  --ink:       #F2EDE2;
  --ink-2:     oklch(0.84 0.008 90);
  --ink-3:     oklch(0.66 0.008 90);
  --ink-4:     oklch(0.46 0.008 90);

  --hairline:   oklch(1 0 0 / 0.10);
  --hairline-2: oklch(1 0 0 / 0.06);

  /* Accents — same hues, slightly bumped chroma so they pop on dark. */
  --mint:  #B9E5C9;
  --sky:   #B6D2F4;
  --peach: #F8D2AA;
  /* "ink ON accent" — when text sits on top of an accent fill, we want
     dark text against the (still pastel) accent for legibility. */
  --mint-ink:  oklch(0.32 0.10 160);
  --sky-ink:   oklch(0.34 0.12 245);
  --peach-ink: oklch(0.34 0.12 60);
}

/* Body bg/ink already use vars so no body override needed. Selection
   keeps a warm peach tint so it reads as a brand selection, not OS blue. */
[data-theme="dark"] ::selection {
  background: oklch(from var(--peach) l c h / 0.35);
  color: var(--ink);
}

/* ---- Nav: translucent panel matches the dark surface ---- */
[data-theme="dark"] .nav {
  background: oklch(0.13 0.005 90 / 0.78);
}
[data-theme="dark"] .nav.scrolled {
  border-color: var(--hairline);
}

/* ---- Hero radial fade — was hand-baked rgba(250,250,247,...).
   In dark mode the dot field needs to fade into the dark page bg. */
[data-theme="dark"] .hero-fade {
  background:
    linear-gradient(180deg, rgba(14,14,16,0) 0%, rgba(14,14,16,0) 70%, var(--bg) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(14,14,16,0) 40%, rgba(14,14,16,0.35) 85%, var(--bg) 100%);
}

/* ---- Marquee + flicker + cycle masks — flip #000 to var(--bg) ---- */
[data-theme="dark"] .marquee {
  mask-image: linear-gradient(90deg, transparent, var(--bg) 10%, var(--bg) 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 10%, var(--bg) 90%, transparent);
}
[data-theme="dark"] .flicker-bg--soft {
  -webkit-mask-image: radial-gradient(900px circle at 60% 50%, var(--bg) 0%, oklch(from var(--bg) l c h / 0.5) 55%, transparent 85%);
          mask-image: radial-gradient(900px circle at 60% 50%, var(--bg) 0%, oklch(from var(--bg) l c h / 0.5) 55%, transparent 85%);
}
[data-theme="dark"] .flicker-bg--circle {
  -webkit-mask-image: radial-gradient(circle, var(--bg) 60%, oklch(from var(--bg) l c h / 0.4) 70%, transparent 76%);
          mask-image: radial-gradient(circle, var(--bg) 60%, oklch(from var(--bg) l c h / 0.4) 70%, transparent 76%);
}
[data-theme="dark"] .cycle-pattern {
  mask-image: linear-gradient(90deg, transparent 0%, var(--bg) 38%, var(--bg) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--bg) 38%, var(--bg) 100%);
}

/* ---- Buttons: hollow pill style works on dark surface unchanged.
   --ink flips to near-white in dark mode so the border + label become
   a light pill on the dark background. ---- */
[data-theme="dark"] .btn-primary { background: transparent; color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .btn-primary:hover { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
[data-theme="dark"] .btn-outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- Hero promise / link / trust strip ---- */
[data-theme="dark"] .hero-link:hover {
  border-bottom-color: var(--ink-3);
}

/* ---- Bento dark cell: in light mode this is "deliberately ink-on-bg"
   to create contrast. In dark mode that flips to bg-on-bg, so we lift
   it onto an elevated panel surface. ---- */
[data-theme="dark"] .bento-cell.dark {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--hairline);
}
[data-theme="dark"] .bento-cell.dark .b-label,
[data-theme="dark"] .bento-cell.dark .b-body {
  color: var(--ink-2);
}
[data-theme="dark"] .bento-cell.dark h3 {
  color: var(--ink);
}
[data-theme="dark"] .bento-cell.dark .chip {
  background: oklch(1 0 0 / 0.06);
  color: var(--ink-2);
  border-color: var(--hairline);
}
[data-theme="dark"] .bento-cell.dark .img-ph {
  border-color: var(--hairline);
  background: repeating-linear-gradient(135deg, transparent 0 12px, oklch(1 0 0 / 0.04) 12px 13px);
}
[data-theme="dark"] .bento-cell.dark .img-ph .ph-tag,
[data-theme="dark"] .bento-cell.dark .img-ph .ph-prompt {
  color: var(--ink-3);
}
[data-theme="dark"] .bento-cell.dark { box-shadow: 0 14px 32px -18px oklch(0 0 0 / 0.7); }
[data-theme="dark"] .bento-cell.dark:hover { box-shadow: 0 24px 50px -22px oklch(0 0 0 / 0.85); }

/* ---- Card elevation pass: shadows scaled up for dark surface ---- */
[data-theme="dark"] .bento-cell,
[data-theme="dark"] .gap-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .tk-learn-cell,
[data-theme="dark"] .tk-build-cell,
[data-theme="dark"] .tk-week-cell,
[data-theme="dark"] .tk-diff-cell,
[data-theme="dark"] .tk-strip-cell {
  box-shadow:
    0 1px 0 oklch(0 0 0 / 0.30),
    0 10px 24px -16px oklch(0 0 0 / 0.55),
    0 4px 10px -6px oklch(0 0 0 / 0.40);
}
[data-theme="dark"] .bento-cell:hover,
[data-theme="dark"] .gap-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .tk-learn-cell:hover,
[data-theme="dark"] .tk-build-cell:hover,
[data-theme="dark"] .tk-week-cell:hover,
[data-theme="dark"] .tk-diff-cell:hover,
[data-theme="dark"] .tk-strip-cell:hover {
  box-shadow:
    0 1px 0 oklch(0 0 0 / 0.30),
    0 26px 50px -30px oklch(0 0 0 / 0.65),
    0 10px 22px -14px oklch(0 0 0 / 0.50);
}

/* ---- Quote block (was solid --ink — now it'd be solid white). Lift to
   elevated surface with a hairline so it still reads as a "feature". ---- */
[data-theme="dark"] .quote-block {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
[data-theme="dark"] .quote-block .src { color: var(--ink-3); }
[data-theme="dark"] .quote-block .src strong { color: var(--ink); }

/* ---- Alarm (urgency) panel: same lift to elevated surface ---- */
[data-theme="dark"] .alarm {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
[data-theme="dark"] .alarm-lead { color: var(--ink-2); }
[data-theme="dark"] .alarm-stats { border-top-color: var(--hairline); }
[data-theme="dark"] .stat-hero { border-right-color: var(--hairline); }
@media (max-width: 800px) {
  [data-theme="dark"] .stat-hero { border-bottom-color: var(--hairline); }
}
[data-theme="dark"] .stat-hero .lbl { color: var(--ink); }
[data-theme="dark"] .stat-hero .src { color: var(--ink-3); }
[data-theme="dark"] .stat-list li { border-bottom-color: var(--hairline); }
[data-theme="dark"] .stat-list .rl { color: var(--ink); }
[data-theme="dark"] .stat-list .rl em { color: var(--ink); }
[data-theme="dark"] .stat-list .rs { color: var(--ink-3); }
[data-theme="dark"] .stat-list .rn.bg { color: var(--ink); }
[data-theme="dark"] .divergence-chart .grid-base { stroke: oklch(1 0 0 / 0.12); }
[data-theme="dark"] .divergence-callout .cal-label { color: var(--ink); }
[data-theme="dark"] .divergence-callout .cal-source { color: var(--ink-3); }
[data-theme="dark"] .divergence-axis { color: var(--ink-3); }

/* alarm-more / alarm-stats--light fall under "light variant" naming but
   are technically class-applied; the --light variant is already light-bg
   so it lifts on dark too. */
[data-theme="dark"] .alarm-more > summary,
[data-theme="dark"] .alarm-more[open] > summary {
  border-color: var(--hairline);
  color: var(--ink-3);
}
[data-theme="dark"] .multiplier-card .m-tag { color: var(--ink-3); }
[data-theme="dark"] .multiplier-card details.m-more {
  border-top-color: var(--hairline);
}
[data-theme="dark"] .multiplier-card details.m-more summary {
  color: var(--ink-3);
}

/* ---- Pricing feat card (was --ink fill). Same lift treatment. ---- */
[data-theme="dark"] .price-card.feat {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--hairline);
}
[data-theme="dark"] .price-card.feat p,
[data-theme="dark"] .price-card.feat li { color: var(--ink-2); }
[data-theme="dark"] .price-card.feat h3 { color: var(--ink); }
[data-theme="dark"] .price-card.feat .num-sub,
[data-theme="dark"] .price-card.feat .num small { color: var(--ink-3); }
[data-theme="dark"] .price-card.feat ul { border-color: var(--hairline); }

/* ---- Multiplier card (used --ink as bg) ---- */
[data-theme="dark"] .multiplier-card {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--hairline);
}

/* ---- Compare table dark column ---- */
[data-theme="dark"] .compare th.col-us {
  background: var(--bg-3);
  color: var(--ink);
}
[data-theme="dark"] .compare td.col-us {
  background: oklch(1 0 0 / 0.04);
}

/* ---- Cohort board ---- */
[data-theme="dark"] .avatar { color: var(--ink); }

/* ---- Premium / compare-bars row.prior fill — was --bg-3 + --ink-4 border.
   The token flip handles both, but the `.row.prior .fill` text would
   inherit a too-faint color. Bump it. */
[data-theme="dark"] .compare-bars .row.prior .fill {
  background: var(--bg-3);
  color: var(--ink-3);
  border-color: var(--ink-4);
}

/* ---- Tag chips with status colors stay readable ---- */
[data-theme="dark"] .tag.green { background: oklch(0.32 0.1 160 / 0.4); color: oklch(0.88 0.10 160); }
[data-theme="dark"] .tag.amber { background: oklch(0.36 0.1 60 / 0.4);  color: oklch(0.88 0.10 60);  }
[data-theme="dark"] .tag.red   { background: oklch(0.36 0.13 25 / 0.4); color: oklch(0.86 0.10 25);  }

/* ---- Path banner per-track surface tokens ---- */
[data-theme="dark"] .path-banner {
  background: var(--bg-2);
  border-color: var(--hairline);
  --banner-ink: var(--ink);
  --banner-ink-2: var(--ink-2);
  --banner-ink-3: var(--ink-3);
  --banner-hairline: var(--hairline);
}
[data-theme="dark"] .path-banner.builder {
  /* Builder was always cream-on-cream. On dark, lift to a panel and tint
     the surface with a faint mint glow so the brand color reads. */
  background:
    radial-gradient(80% 60% at 0% 0%, oklch(from var(--mint) l c h / 0.10) 0%, transparent 60%),
    var(--bg-2);
  border-color: oklch(from var(--mint) l c h / 0.18);
  --banner-ink: var(--ink);
  --banner-ink-2: var(--ink-2);
  --banner-ink-3: var(--ink-3);
  --banner-accent: var(--mint);
  --banner-hairline: oklch(from var(--mint) l c h / 0.20);
}
[data-theme="dark"] .path-banner.professional {
  background: oklch(0.20 0.025 245);
  border-color: oklch(0.32 0.025 245);
  --banner-accent: var(--sky);
  --banner-ink: var(--ink);
  --banner-ink-2: oklch(0.88 0.02 245);
  --banner-ink-3: oklch(0.72 0.03 245);
  --banner-hairline: oklch(0.34 0.02 245);
}
[data-theme="dark"] .path-banner.developer {
  background: var(--bg-2);
  border-color: oklch(from var(--peach) l c h / 0.22);
  --banner-accent: var(--peach);
  --banner-ink: var(--ink);
  --banner-ink-2: var(--ink-2);
  --banner-ink-3: var(--ink-3);
  --banner-hairline: oklch(from var(--peach) l c h / 0.20);
}

/* ---- Type cards (waitlist step 1) ---- */
[data-theme="dark"] .type-card {
  background: var(--bg-2);
  border-color: var(--hairline);
  color: var(--ink);
  --tc-accent: var(--ink-3);
  --tc-accent-ink: var(--ink);
  --tc-ink: var(--ink);
  --tc-ink-2: var(--ink-2);
  --tc-ink-3: var(--ink-3);
  --tc-hairline: var(--hairline);
  --tc-mark-bg: var(--bg-3);
}
[data-theme="dark"] .type-card.t-student {
  background:
    radial-gradient(80% 60% at 0% 0%, oklch(from var(--mint) l c h / 0.10) 0%, transparent 60%),
    var(--bg-2);
  --tc-accent: var(--mint);
  /* Eyebrow + accent borders sit over the mint dithering art on the
     student card; bump the lightness so they read against it. */
  --tc-accent-ink: oklch(0.94 0.08 155);
}
[data-theme="dark"] .type-card.t-professional {
  background: oklch(0.20 0.025 245);
  border-color: oklch(0.32 0.025 245);
  color: var(--ink);
  --tc-accent: var(--sky);
  --tc-accent-ink: var(--sky);
  --tc-ink: var(--ink);
  --tc-ink-2: oklch(0.88 0.02 245);
  --tc-ink-3: oklch(0.72 0.03 245);
  --tc-hairline: oklch(0.34 0.02 245);
  --tc-mark-bg: oklch(0.18 0.005 245);
}
[data-theme="dark"] .type-card.t-enterprise {
  background: var(--bg-2);
  border-color: oklch(from var(--peach) l c h / 0.22);
  color: var(--ink);
  --tc-accent: var(--peach);
  --tc-accent-ink: var(--peach);
  --tc-ink: var(--ink);
  --tc-ink-2: var(--ink-2);
  --tc-ink-3: var(--ink-3);
  --tc-hairline: oklch(from var(--peach) l c h / 0.20);
  --tc-mark-bg: var(--bg-3);
}

/* ---- Track cards (developer art surface stays dark, mint/sky subtle) ---- */
[data-theme="dark"] .track-card.developer .tc-art {
  background: oklch(0 0 0 / 0.4);
}

/* ---- Waitlist shell + accents ---- */
[data-theme="dark"] .waitlist-shell {
  background: var(--bg-2);
  border-color: var(--hairline);
  --wl-accent: var(--ink-3);
  --wl-accent-ink: var(--ink);
  --wl-accent-soft: var(--bg-3);
}
[data-theme="dark"] .waitlist-shell.t-student {
  --wl-accent: var(--mint);
  --wl-accent-ink: var(--mint);
  --wl-accent-soft: oklch(from var(--mint) l c h / 0.14);
}
[data-theme="dark"] .waitlist-shell.t-professional {
  --wl-accent: var(--sky);
  --wl-accent-ink: var(--sky);
  --wl-accent-soft: oklch(from var(--sky) l c h / 0.14);
}
[data-theme="dark"] .waitlist-shell.t-enterprise {
  --wl-accent: var(--peach);
  --wl-accent-ink: var(--peach);
  --wl-accent-soft: oklch(from var(--peach) l c h / 0.14);
}
[data-theme="dark"] .waitlist-progress .wp-track {
  background: var(--bg-3);
}
[data-theme="dark"] [data-page="apply"] .waitlist-shell {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--wl-accent) 6%, var(--bg-2)) 0%, var(--bg-2) 30%);
  border-color: color-mix(in oklab, var(--wl-accent-ink) 28%, var(--hairline));
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.04) inset,
    0 30px 80px -50px oklch(0 0 0 / 0.7),
    0 8px 24px -16px oklch(0 0 0 / 0.5);
}
[data-theme="dark"] [data-page="apply"] .waitlist-progress .wp-track {
  background: color-mix(in oklab, var(--bg-3) 80%, var(--hairline));
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset;
}
[data-theme="dark"] [data-page="apply"] .waitlist-progress .wp-fill {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--wl-accent) 80%, var(--wl-accent-ink)) 0%,
    var(--wl-accent) 60%,
    color-mix(in oklab, var(--wl-accent) 70%, var(--ink)) 100%);
}
[data-theme="dark"] [data-page="apply"] .waitlist-progress .wp-fill::after {
  background: linear-gradient(90deg, transparent 0%, oklch(1 0 0 / 0.18) 50%, transparent 100%);
}
[data-theme="dark"] [data-page="apply"] .school-suggest {
  border-color: color-mix(in oklab, var(--wl-accent-ink) 30%, var(--hairline));
  box-shadow:
    0 22px 50px -28px oklch(0 0 0 / 0.7),
    0 1px 0 oklch(1 0 0 / 0.04) inset;
}

/* ---- Form fields ---- */
[data-theme="dark"] .field input[type="text"],
[data-theme="dark"] .field input[type="email"],
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--hairline);
}
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder { color: var(--ink-4); }
[data-theme="dark"] .field.invalid input,
[data-theme="dark"] .field.invalid select,
[data-theme="dark"] .field.invalid textarea {
  border-color: oklch(0.72 0.18 25);
}
[data-theme="dark"] .field .err { color: oklch(0.78 0.18 25); }

/* Chips, scale, school-row */
[data-theme="dark"] .wl-chip,
[data-theme="dark"] .scale-btn {
  background: var(--bg-3);
  border-color: var(--hairline);
  color: var(--ink-2);
}
[data-theme="dark"] .school-suggest {
  background: var(--bg-2);
  border-color: var(--hairline);
}
[data-theme="dark"] .school-row:hover,
[data-theme="dark"] .school-row.is-active {
  background: var(--bg-3);
}
[data-theme="dark"] .school-logo { background: var(--bg-3); color: var(--ink-3); }
[data-theme="dark"] .school-name { color: var(--ink); }
[data-theme="dark"] .school-selected .school-logo { background: var(--bg-2); }
[data-theme="dark"] .ws-actions .btn-back {
  background: var(--bg-3);
  border-color: var(--hairline);
}

/* ---- Modal / beta dialog ---- */
[data-theme="dark"] .beta-dialog {
  background: var(--bg-2);
  border-color: var(--hairline);
  box-shadow: 0 32px 80px -20px oklch(0 0 0 / 0.85);
}
[data-theme="dark"] .beta-close:hover { background: var(--bg-3); }
[data-theme="dark"] .beta-status.is-success {
  background: color-mix(in oklab, var(--mint) 14%, var(--bg-3));
  color: oklch(0.85 0.12 160);
  border-color: color-mix(in oklab, var(--mint) 30%, var(--hairline));
}
[data-theme="dark"] .beta-status.is-error {
  background: color-mix(in oklab, oklch(0.62 0.18 25) 14%, var(--bg-3));
  color: oklch(0.78 0.18 25);
  border-color: color-mix(in oklab, oklch(0.62 0.18 25) 35%, var(--hairline));
}

/* ---- Why-now hero (was a hand-painted dark pane). Already dark; just
   make sure the eyebrow and ink stay readable now that --bg/--ink flipped. ---- */
[data-theme="dark"] .page[data-page="why-now"] .page-hero {
  background: oklch(0.10 0 0);
}
[data-theme="dark"] .page[data-page="why-now"] .page-hero h1 {
  color: var(--ink);
}
[data-theme="dark"] .page[data-page="why-now"] .step--now {
  background: linear-gradient(180deg, oklch(from var(--peach) l c h / 0.10), transparent 65%);
}

/* ---- Tracks detail page · per-track scoped tokens ---- */
[data-theme="dark"] .tk-page.tk-builder {
  /* The builder hero used a #F5EFE2 cream surface. On dark, lift the
     surface to bg-2 with a faint mint wash. */
  --tk-accent: var(--mint);
  --tk-accent-ink: var(--mint);
  --tk-accent-soft: oklch(from var(--mint) l c h / 0.14);
  --tk-surface: oklch(from var(--mint) l c h / 0.06);
  --tk-ink: var(--ink);
  --tk-ink-2: var(--ink-2);
  --tk-ink-3: var(--ink-3);
  --tk-hairline: oklch(from var(--mint) l c h / 0.16);
}
[data-theme="dark"] .tk-page.tk-professional {
  --tk-accent: var(--sky);
  --tk-accent-ink: var(--sky);
  --tk-accent-soft: oklch(from var(--sky) l c h / 0.18);
  --tk-surface: oklch(0.20 0.025 245);
  --tk-ink: var(--ink);
  --tk-ink-2: var(--ink);
  --tk-ink-3: oklch(0.74 0.03 245);
  --tk-hairline: oklch(0.34 0.02 245);
}
[data-theme="dark"] .tk-page.tk-developer {
  --tk-accent: var(--peach);
  --tk-accent-ink: var(--peach);
  --tk-accent-soft: oklch(from var(--peach) l c h / 0.20);
  --tk-surface: var(--bg);
  --tk-ink: var(--ink);
  --tk-ink-2: var(--ink);
  --tk-ink-3: var(--ink-3);
  --tk-hairline: oklch(1 0 0 / 0.10);
}
[data-theme="dark"] .tk-page.tk-professional .tk-hero .lead,
[data-theme="dark"] .tk-page.tk-developer .tk-hero .lead {
  color: var(--ink);
  opacity: 0.92;
}
[data-theme="dark"] .tk-page.tk-builder .tk-hero .eyebrow {
  background: oklch(from var(--mint) l c h / 0.14);
  color: var(--mint);
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .tk-page.tk-builder .tk-hero .eyebrow::before {
  background: var(--mint);
}
/* Light-mode cream scrim sat on top of the dithering at 32% opacity.
   On the dark surface that reads as a gray haze across the whole banner.
   Replace it with the page-bg color at higher opacity so the dithering
   reads as a subtle texture against the same dark surface as the rest
   of the page (no more visible banner seam). */
[data-theme="dark"] .tk-page.tk-builder .tk-hero {
  background: var(--bg);
}
[data-theme="dark"] .tk-page.tk-builder .tk-hero-bg::after {
  background: oklch(from var(--bg) l c h / 0.55);
}

/* ---- Tracks builder below-banner (blueprint paper) ----
   Light blueprint had warm cream paper + mint hairlines on a #F5EFE2
   surface. Dark variant: deep blue-leaning panel with brighter mint
   ink and stronger gridlines. */
[data-theme="dark"] .tk-page.tk-builder {
  --bd-rule:   oklch(from var(--mint) l c h / 0.40);
  --bd-rule-2: oklch(from var(--mint) l c h / 0.20);
  --bd-grid:   oklch(from var(--mint) l c h / 0.12);
  --bd-grid-2: oklch(from var(--mint) l c h / 0.06);
  --bd-paper:  #14181A;
  --bd-paper-2:#1A1F22;
  --bd-shadow:
    0 1px 0 oklch(0 0 0 / 0.35),
    0 16px 30px -22px oklch(from var(--mint) l c h / 0.18),
    0 4px 10px -6px oklch(0 0 0 / 0.45);
}
/* Builder cells/strip-cells/preview that hand-coded `#fff` need a dark
   "drawing paper" instead. */
[data-theme="dark"] .tk-page.tk-builder .tk-strip-cell { background: var(--bd-paper); }
[data-theme="dark"] .tk-page.tk-builder .tk-strip-cell.is-active {
  background: oklch(from var(--mint) l c h / 0.16) !important;
  border-color: var(--mint);
}
[data-theme="dark"] .tk-page.tk-builder .tk-learn-cell:hover {
  background: var(--bd-paper-2);
  box-shadow: inset 0 0 0 2px var(--mint);
}
[data-theme="dark"] .tk-page.tk-builder .tk-build-cell {
  background: var(--bd-paper, #14181A) !important;
  border-color: var(--bd-rule);
}
[data-theme="dark"] .tk-page.tk-builder .tk-build-cell::before {
  background: var(--bd-paper-2);
  color: var(--mint);
  border-bottom-color: var(--bd-rule);
}
[data-theme="dark"] .tk-page.tk-builder .tk-build-cell .tk-build-preview {
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--bd-grid-2) 0 1px, transparent 1px 16px),
    var(--bd-paper);
}
[data-theme="dark"] .tk-page.tk-builder .tk-week {
  background: linear-gradient(180deg, var(--bd-paper) 0%, var(--bd-paper-2) 100%);
}
[data-theme="dark"] .tk-page.tk-builder .tk-week-cell:hover {
  background: var(--bd-paper-2);
  box-shadow: inset 0 0 0 2px var(--mint);
}
[data-theme="dark"] .tk-page.tk-builder .tk-diff-grid { background: var(--bd-paper); }
[data-theme="dark"] .tk-page.tk-builder .tk-diff-cell {
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 28px),
    var(--bd-paper);
}
[data-theme="dark"] .tk-page.tk-builder .tk-section:last-of-type .cta-band {
  background:
    repeating-linear-gradient(0deg, var(--bd-grid-2) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--bd-grid-2) 0 1px, transparent 1px 28px),
    var(--bd-paper);
  border-color: var(--bd-rule);
}
[data-theme="dark"] .tk-page.tk-builder .tk-chip {
  background: var(--bd-paper);
  border-color: var(--hairline);
  color: var(--ink-2);
}
[data-theme="dark"] .tk-page.tk-builder .tk-chip:hover {
  border-color: var(--mint);
  color: var(--ink);
  background: oklch(from var(--mint) l c h / 0.18);
}

/* ---- Tracks professional below-banner ---- */
[data-theme="dark"] .tk-page.tk-professional .page,
[data-theme="dark"] .tk-page.tk-professional { background: var(--bg); }
[data-theme="dark"] .tk-page.tk-professional .tk-section {
  --tk-ink:      var(--ink);
  --tk-ink-2:    var(--ink-2);
  --tk-ink-3:    var(--ink-3);
  --tk-hairline: var(--hairline);
  --tk-surface:  var(--bg-2);
  --pro-rule:    oklch(0.50 0.02 245);
  --pro-ink:     var(--ink);
  --pro-cite:    var(--sky);
  --pro-paper:   var(--bg-2);
  color: var(--ink);
}
[data-theme="dark"] .tk-page.tk-professional .tk-section:not(.tk-section--strip)::before {
  border-bottom-color: var(--hairline);
  background: transparent;
}
[data-theme="dark"] .tk-page.tk-professional .tk-section h2::before {
  background: var(--bg);
  color: var(--sky);
}
[data-theme="dark"] .tk-page.tk-professional .tk-strip {
  border-top-color: var(--ink-3);
  border-bottom-color: var(--hairline);
}
[data-theme="dark"] .tk-page.tk-professional .tk-strip::before { background: var(--bg); }
[data-theme="dark"] .tk-page.tk-professional .tk-strip-cell:hover {
  background: oklch(from var(--sky) l c h / 0.10);
}
[data-theme="dark"] .tk-page.tk-professional .tk-strip-cell.is-active {
  background: oklch(from var(--sky) l c h / 0.18);
  box-shadow: inset 0 2px 0 0 var(--sky);
}
[data-theme="dark"] .tk-page.tk-professional .tk-learn-grid { border-top-color: var(--ink-3); border-bottom-color: var(--hairline); }
[data-theme="dark"] .tk-page.tk-professional .tk-learn-cell:hover { background: oklch(from var(--sky) l c h / 0.08); }
[data-theme="dark"] .tk-page.tk-professional .tk-learn-num { color: var(--sky); }
[data-theme="dark"] .tk-page.tk-professional .tk-learn-cell::after { background: var(--sky); }
[data-theme="dark"] .tk-page.tk-professional .tk-build-cell {
  background: var(--bg-2);
  border-color: var(--hairline);
}
[data-theme="dark"] .tk-page.tk-professional .tk-build-cell:hover {
  border-color: var(--sky);
  box-shadow:
    0 1px 0 0 oklch(0 0 0 / 0.30),
    0 26px 60px -24px oklch(from var(--sky) l c h / 0.40);
}
[data-theme="dark"] .tk-page.tk-professional .tk-build-tag::before {
  background: var(--sky);
  color: var(--bg);
}
[data-theme="dark"] .tk-page.tk-professional .tk-build-preview {
  background: oklch(0.22 0.025 245);
  border-color: var(--hairline);
}
[data-theme="dark"] .tk-page.tk-professional .tk-tools {
  border-top-color: var(--ink-3);
  border-bottom-color: var(--ink-3);
}
[data-theme="dark"] .tk-page.tk-professional .tk-chip:hover {
  background: oklch(from var(--sky) l c h / 0.12);
  color: var(--ink);
}
[data-theme="dark"] .tk-page.tk-professional .tk-week { background: var(--bg-2); border-color: var(--ink-3); }
[data-theme="dark"] .tk-page.tk-professional .tk-week-cell:hover { background: oklch(from var(--sky) l c h / 0.10); }
[data-theme="dark"] .tk-page.tk-professional .tk-roles::before { background: var(--bg); }
[data-theme="dark"] .tk-page.tk-professional .tk-diff-grid { background: var(--bg-2); border-color: var(--ink-3); }
[data-theme="dark"] .tk-page.tk-professional .tk-diff-grid::before { background: var(--bg); }
[data-theme="dark"] .tk-page.tk-professional .cta-band {
  border-top-color: var(--ink);
  border-bottom-color: var(--ink-3);
}
[data-theme="dark"] .tk-page.tk-professional .cta-band::before { background: var(--bg); }

/* ---- Tracks developer (always-dark surface — already correct, but
   re-paint hairlines + the dot-grid to use brand tokens) ---- */
[data-theme="dark"] .tk-page.tk-developer {
  background: var(--bg);
  color: var(--ink);
  --dev-line:      oklch(from var(--peach) l c h / 0.22);
  --dev-line-soft: oklch(from var(--peach) l c h / 0.12);
  --dev-surf:      var(--bg-2);
  --dev-surf-2:    var(--bg-3);
  --dev-ink:       var(--ink);
  --dev-ink-2:     var(--ink-2);
  --dev-ink-3:     var(--ink-3);
}

/* ---- Tracks pro / dev hero outline button readable on dark ----
   The light-mode rule already targets these surfaces, but in dark mode
   we want the same look across all three tracks. The class is shared
   so the existing rule keeps working — we just refine the hover. */
[data-theme="dark"] .tk-page .tk-hero .btn-outline {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
[data-theme="dark"] .tk-page .tk-hero .btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ---- Shape art (developer tile)  ---- */
[data-theme="dark"] .shape-card-art--dark { background: oklch(0 0 0 / 0.35); border-bottom-color: var(--hairline); }
[data-theme="dark"] .art-terminal {
  background: linear-gradient(180deg, oklch(0.13 0 0) 0%, oklch(0.10 0.005 60) 100%);
  border-color: oklch(1 0 0 / 0.10);
}
[data-theme="dark"] .art-terminal-bar { background: oklch(0.16 0.005 60); border-bottom-color: oklch(1 0 0 / 0.08); }
[data-theme="dark"] .tk-hero-art .tk-terminal {
  background: linear-gradient(180deg, oklch(0.13 0 0) 0%, oklch(0.10 0.005 245) 100%);
  border-color: oklch(0.30 0.02 245);
}
[data-theme="dark"] .tk-terminal-bar { background: oklch(0.16 0.005 245); border-bottom-color: oklch(0.30 0.02 245); }

/* ---- Process flow nodes (idle node) ---- */
[data-theme="dark"] .process-node {
  background: var(--bg-2);
  border-color: var(--hairline);
  color: var(--ink-3);
}
[data-theme="dark"] .process-track { background: var(--hairline); }
[data-theme="dark"] .process-step.is-current .process-node {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---- Cards generally ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .explain-step,
[data-theme="dark"] .how-step,
[data-theme="dark"] .path-card,
[data-theme="dark"] .premium-hero,
[data-theme="dark"] .cohort-board {
  background: var(--bg-2);
  border-color: var(--hairline);
}
[data-theme="dark"] .card:hover { border-color: var(--ink-3); }
[data-theme="dark"] .path-card:hover { border-color: var(--accent-ink); }
[data-theme="dark"] .cohort-board .row.h { background: var(--bg-3); }

/* ---- Tabs panel ---- */
[data-theme="dark"] .tabs { background: var(--bg-2); border-color: var(--hairline); }
[data-theme="dark"] .tabs .tab.active,
[data-theme="dark"] .tabs .tab.is-active {
  background: var(--bg-3);
  color: var(--ink);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
}
[data-theme="dark"] .path-detail { background: var(--bg-2); border-color: var(--hairline); }

/* ---- Compare table cards ---- */
[data-theme="dark"] .compare { background: var(--bg-2); border-color: var(--hairline); }
[data-theme="dark"] .compare th { background: var(--bg-3); color: var(--ink-3); }

/* ---- "Most popular" badge on featured path-card ---- */
[data-theme="dark"] .path-card--featured::after {
  background: var(--bg-2);
  border-color: var(--hairline);
}

/* ---- Boxes-bg backdrop (paths-hero) ---- */
[data-theme="dark"] .boxes-bg { background: var(--bg-2); }

/* ---- Privacy processor cards (inline `background:#fff` in body.html;
   we cannot override an inline style from CSS without !important + an
   attribute selector. Use a low-specificity rule as a safety net.) ---- */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border-color: var(--hairline) !important;
}

/* ---- Scroll progress: same gradient (mint→sky→peach) reads fine on
   dark; the bar already lives over the dark page. No override needed. ---- */

/* ---- Disclosures / details ---- */
[data-theme="dark"] .disclosure { border-top-color: var(--hairline); }
[data-theme="dark"] details.reveal-disclose { border-top-color: var(--hairline); }

/* ---- Split cards ---- */
[data-theme="dark"] .split-card {
  background: var(--bg-2);
}
[data-theme="dark"] .split-card.down { background: oklch(from var(--peach) calc(l - 0.55) c h / 0.6); }
[data-theme="dark"] .split-card.up   { background: oklch(from var(--mint)  calc(l - 0.55) c h / 0.6); }

/* ---- Warp / orbit dark ---- */
[data-theme="dark"] .warp { background: var(--bg-2); border-color: var(--hairline); }
[data-theme="dark"] .warp-stage { --grid-color: oklch(1 0 0 / 0.08); }
[data-theme="dark"] .warp-stage::after {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, var(--bg-2) 90%);
}
[data-theme="dark"] .warp-info-card {
  background: var(--bg-3);
  border-color: var(--hairline);
  box-shadow:
    0 24px 60px -28px oklch(0 0 0 / 0.7),
    0 8px 22px -10px oklch(0 0 0 / 0.5);
}
[data-theme="dark"] .warp-info-card .warp-chip { background: var(--bg-2); color: var(--ink-2); border-color: var(--hairline); }

/* ---- Orbit ---- */
[data-theme="dark"] .orbit-card { background: var(--bg-2); border-color: var(--hairline); }
[data-theme="dark"] .orbit-path circle { stroke: oklch(1 0 0 / 0.10); }
[data-theme="dark"] .orbit-center {
  background: var(--bg-2);
  border-color: var(--hairline);
  box-shadow:
    0 0 0 8px oklch(from var(--bg) l c h / 1),
    0 18px 40px -22px oklch(0 0 0 / 0.6);
}
[data-theme="dark"] .orbit-item { background: var(--bg-2); border-color: var(--hairline); }
[data-theme="dark"] .orbit-item:hover {
  border-color: var(--ink-3);
  box-shadow: 0 12px 22px -14px oklch(0 0 0 / 0.7);
}
[data-theme="dark"] .orbit-item .orbit-label { background: var(--bg-2); border-color: var(--hairline); }

/* ---- Magic-card spot strength bumped on dark to keep the hover read.
   Light mode used 0.28 / 0.42-on-dark-bento. Dark default needs ~0.40. ---- */
[data-theme="dark"] .magic-card { --magic-spot-strength: 0.40; }
[data-theme="dark"] .bento-cell.dark.magic-card { --magic-spot-strength: 0.50; }

/* ---- Quote card (magicui) ---- */
[data-theme="dark"] .quote-card { background: var(--bg-2); }
[data-theme="dark"] .quote-card:hover { background: var(--bg-3); }
[data-theme="dark"] .quote-card .qc-meta { border-top-color: var(--hairline); }

/* ---- Mock UI bits ---- */
[data-theme="dark"] .mock { background: var(--bg-2); border-color: var(--hairline); color: var(--ink-2); }
[data-theme="dark"] .mock-bar { background: var(--bg-3); border-color: var(--hairline-2); }

/* ---- Path tag pill / path-name pill: accent backgrounds keep working
   because --accent / --accent-ink already dark-track via root. ---- */

/* ---- "Cycle deck" watermark (uses mix-blend-mode multiply — turns
   invisible on a dark bg). Switch to screen so it adds light. ---- */
[data-theme="dark"] .cycle-watermark { mix-blend-mode: screen; opacity: 0.10; }

/* ---- Pillar overview "tag.green/amber/red" inside enterprise pillar
   already has a generic dark color above; this is a no-op fallback. ---- */

/* ---- Faq disclosure body / dividers ---- */
[data-theme="dark"] .between-divider hr { border-top-color: var(--hairline); }
[data-theme="dark"] .divider { background: var(--hairline); }
[data-theme="dark"] .kbd { background: var(--bg-3); border-color: var(--hairline); color: var(--ink-2); }

/* ---- Shimmer gradient used inside [data-page="apply"] uses #fff hard
   stops in color-mix — bake those over with var(--ink). ---- */
[data-theme="dark"] [data-page="apply"] .waitlist-shell { /* covered above */ }

/* ---- Pricing feat list bullets / divider already overridden above;
   ensure the green check on non-feat cards still reads. ---- */
[data-theme="dark"] .price-card ul li::before { color: oklch(0.78 0.13 160); }
[data-theme="dark"] .compare .check { color: oklch(0.78 0.13 160); }
[data-theme="dark"] .compare .partial { color: oklch(0.82 0.10 60); }

/* ---- Why-now timeline highlight keeps a peach wash — already token-driven. ---- */

/* === END DARK MODE === */

/* ============================================================
   THEME TOGGLE BUTTON (light + dark)
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 10px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--bg-2);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.theme-toggle .theme-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
[data-theme="light"] .theme-toggle .theme-icon-sun,
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
[data-theme="light"] .theme-toggle .theme-icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-moon {
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
}
[data-theme="dark"] .theme-toggle .theme-icon-sun {
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
}
[data-theme="dark"] .theme-toggle .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
@media (max-width: 700px) {
  .theme-toggle { width: 32px; height: 32px; margin-right: 6px; }
  .theme-toggle .theme-icon { width: 16px; height: 16px; }
}

/* ============================================================
   "Intentionally dark" surface classes introduced by the body.html
   audit (replacing inline oklch hardcodes). Style for both themes.
   ============================================================ */

/* Dark card — was: style="background:var(--ink); color:var(--bg); border-color:var(--ink)".
   Light: stays dark-on-light. Dark: lift to elevated panel so it doesn't merge with bg. */
.card--dark {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="dark"] .card--dark {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--hairline);
}

/* Dark mock surface (e.g. "verified candidates" table mock). Was a very dark
   oklch(0.18 0 0) panel with light text. */
.mock--dark {
  background: oklch(0.18 0 0);
  border: 1px solid oklch(0.32 0 0);
  border-radius: 8px;
  color: var(--bg);
  padding: 14px 16px;
}
[data-theme="dark"] .mock--dark {
  background: var(--bg-3);
  border-color: var(--hairline);
  color: var(--ink);
}

.mock-dark-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid oklch(0.28 0 0);
  font-size: 13px;
}
.mock-dark-row:first-of-type { border-top: 0; }
.mock-dark-row--head {
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid oklch(0.28 0 0);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.6 0 0);
}
.mock-dark-row--last { border-bottom: 0; }
[data-theme="dark"] .mock-dark-row,
[data-theme="dark"] .mock-dark-row--head { border-color: var(--hairline); }
[data-theme="dark"] .mock-dark-row--head { color: var(--ink-3); }

/* Light text on dark surface (inside .card--dark / .bento-cell.dark / .mock--dark) */
.dark-heading { color: var(--bg); }
.dark-copy    { color: oklch(0.78 0 0); }
.dark-meta    { color: oklch(0.6 0 0); }
.dark-disclose { border-top-color: oklch(0.32 0 0); }
.dark-summary  { color: oklch(0.7 0 0); }
.dark-list     { color: oklch(0.78 0 0); }

/* Dark-mode flips: the surface lifts and ink is now near-white,
   so the "dark text-on-dark surface" classes need to invert. */
[data-theme="dark"] .dark-heading { color: var(--ink); }
[data-theme="dark"] .dark-copy    { color: var(--ink-2); }
[data-theme="dark"] .dark-meta    { color: var(--ink-3); }
[data-theme="dark"] .dark-disclose { border-top-color: var(--hairline); }
[data-theme="dark"] .dark-summary  { color: var(--ink-2); }
[data-theme="dark"] .dark-list     { color: var(--ink-2); }

/* Privacy processor cards (was inline background:#fff). */
.processor-card {
  background: var(--bg);
}
[data-theme="dark"] .processor-card {
  background: var(--bg-2);
  border-color: var(--hairline);
}

/* Inline code chip (privacy page, replaces inline style). */
.inline-code {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  background: oklch(from var(--ink) l c h / 0.06);
  padding: 2px 6px;
  border-radius: 3px;
}
[data-theme="dark"] .inline-code {
  background: oklch(from var(--ink) l c h / 0.10);
}

/* ============================================================
   Brand logo — invert in dark mode so the dark wordmark reads
   as cream-on-dark. Single-source PNG; no second asset needed.
   ============================================================ */
/* The PNG-era filter trick is no longer needed — the new
   .brand-logo--vector wordmark uses currentColor and the dots
   use CSS-var --mint/--sky/--peach which already adapt to dark
   mode. Disable the filter so it doesn't double-process. */
[data-theme="dark"] .brand-logo--vector { filter: none; }

/* Orbit-center fix — the columba_icon.svg is mint/sky/peach circles
   on a transparent bg. In dark mode the surrounding orbit-center bg
   is dark and the small accent dots can read as faint. Keep the icon
   itself unchanged but ensure the panel ring stays clean and the img
   isn't visually clipped. */
.orbit-center img {
  display: block;
}
[data-theme="dark"] .orbit-center img {
  filter: brightness(1.1) saturate(1.15);
}


/* ============================================================
   TRACK-DETAIL MOBILE POLISH (.tk-*)
   Scale the desktop hierarchy down for tablet (<=768px) and
   phone (<=480px) widths. We keep the same sections in the
   same order; we just shrink type, padding, gaps, and the
   hero art so the page still reads like a hero + sections
   on a phone -- not a wall of giant single-column cards.
   Only .tk-* selectors are touched here.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Hero ---- */
  .tk-hero {
    padding-top: clamp(40px, 8vw, 56px);
    padding-bottom: clamp(40px, 8vw, 56px);
  }
  .tk-hero-wrap { gap: 22px; }
  .tk-hero-text { gap: 14px; }
  .tk-hero h1 {
    font-size: clamp(40px, 8vw, 56px);
    line-height: 0.96;
    letter-spacing: -0.04em;
  }
  .tk-hero .lead { font-size: 15px; line-height: 1.5; }
  .tk-hero-art { max-height: 320px; }

  /* ---- Section spacing ---- */
  .tk-section { padding-top: 44px; }
  .tk-section:last-child { padding-bottom: 44px; }
  .tk-section--strip { padding-top: 28px; }

  /* ---- Track-specific section headlines (h2) ---- */
  .tk-page.tk-builder .tk-section .section-head h2,
  .tk-page.tk-professional .tk-section h2,
  .tk-page.tk-developer .tk-section .section-head h2 {
    font-size: 26px;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  /* ---- Comparison strip cells ---- */
  .tk-strip { gap: 8px; }
  .tk-strip-cell { padding: 14px 16px; gap: 4px; }
  .tk-strip-name { font-size: 15px; }
  .tk-strip-line { font-size: 12.5px; line-height: 1.4; }
  .tk-strip-num { font-size: 10px; }
  .tk-strip-link { font-size: 10.5px; }

  /* ---- Learn grid ---- */
  .tk-learn-grid { gap: 10px; }
  .tk-learn-cell {
    padding: 18px 18px 16px;
    min-height: 0;
    gap: 6px;
  }
  .tk-learn-title { font-size: 15px; line-height: 1.25; }
  .tk-learn-body  { font-size: 13px; line-height: 1.5; }
  .tk-learn-num   { font-size: 10.5px; margin-bottom: 4px; }

  /* ---- Build (capstones) grid ---- */
  .tk-build-grid { gap: 12px; }
  .tk-build-cell {
    padding: 20px 20px 18px;
    min-height: 0;
    gap: 8px;
  }
  .tk-build-tag   { font-size: 10px; }
  .tk-build-title { font-size: 17px; letter-spacing: -0.025em; }
  .tk-build-body  { font-size: 13px; line-height: 1.5; }
  .tk-build-preview { padding-top: 14px; font-size: 11.5px; }

  /* ---- Tools chips ---- */
  .tk-tools { gap: 6px; }
  .tk-chip { font-size: 11.5px; padding: 7px 12px; }
  .tk-chip--logo { padding: 5px 12px 5px 6px; }
  .tk-chip--logo img { width: 16px; height: 16px; }

  /* ---- Sample week ---- */
  .tk-week { gap: 8px; }
  .tk-week-cell {
    padding: 16px 14px 18px;
    min-height: 0;
    gap: 4px;
  }
  .tk-week-day   { font-size: 10px; margin-top: 4px; }
  .tk-week-title { font-size: 14px; }
  .tk-week-body  { font-size: 12px; line-height: 1.45; }

  /* ---- Roles pills ---- */
  .tk-roles { gap: 6px; }
  .tk-role-pill { font-size: 12px; padding: 6px 12px; }

  /* ---- Diff grid ---- */
  .tk-diff-grid { gap: 10px; }
  .tk-diff-cell { padding: 20px 20px 22px; gap: 10px; }
  .tk-diff-head { font-size: 10.5px; }
  .tk-diff-line { font-size: 16px; line-height: 1.3; }
  .tk-diff-list { gap: 6px; }
  .tk-diff-list li { font-size: 13px; line-height: 1.45; }

  /* ---- Track-specific tightening ----
     Mirror the new sizes on the per-track overrides so the
     specialized typography (Builder mono, Pro serif feel,
     Developer code-tab) does not override our shrink. */
  .tk-page.tk-builder .tk-strip-name   { font-size: 16px; }
  .tk-page.tk-builder .tk-strip-line   { font-size: 12px; }
  .tk-page.tk-builder .tk-learn-cell   { padding: 22px 20px 20px; min-height: 0; }
  .tk-page.tk-builder .tk-learn-num    { font-size: 22px; margin-bottom: 10px; }
  .tk-page.tk-builder .tk-learn-title  { font-size: 16px; }
  .tk-page.tk-builder .tk-learn-body   { font-size: 13px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-title { font-size: 18px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-body  { font-size: 13px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-tag,
  .tk-page.tk-builder .tk-build-cell .tk-build-title,
  .tk-page.tk-builder .tk-build-cell .tk-build-body { margin-left: 18px; margin-right: 18px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-tag   { margin-top: 18px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-body  { margin-bottom: 14px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-preview { padding: 14px 18px 16px; }
  .tk-page.tk-builder .tk-week-cell    { padding: 18px 14px 18px; min-height: 0; }
  .tk-page.tk-builder .tk-week-title   { font-size: 14px; }
  .tk-page.tk-builder .tk-week-body    { font-size: 12px; }
  .tk-page.tk-builder .tk-diff-cell    { padding: 22px 20px 24px; }
  .tk-page.tk-builder .tk-diff-line    { font-size: 16px; }
  .tk-page.tk-builder .tk-diff-list li { font-size: 13px; }
  .tk-page.tk-builder .tk-section:last-of-type .cta-band { padding: 28px 20px 32px; }

  .tk-page.tk-professional .tk-strip-name  { font-size: 16px; }
  .tk-page.tk-professional .tk-strip-line  { font-size: 12px; }
  .tk-page.tk-professional .tk-learn-title { font-size: 15px; }
  .tk-page.tk-professional .tk-learn-body  { font-size: 12.5px; }
  .tk-page.tk-professional .tk-build-title { font-size: 17px; }
  .tk-page.tk-professional .tk-build-body  { font-size: 13px; }
  .tk-page.tk-professional .tk-week-title  { font-size: 14px; }
  .tk-page.tk-professional .tk-week-body   { font-size: 12px; }
  .tk-page.tk-professional .tk-diff-line   { font-size: 16px; }

  .tk-page.tk-developer .tk-strip-name     { font-size: 16px; }
  .tk-page.tk-developer .tk-strip-line     { font-size: 12px; }
  .tk-page.tk-developer .tk-learn-title    { font-size: 15px; }
  .tk-page.tk-developer .tk-learn-body     { font-size: 12.5px; }
  .tk-page.tk-developer .tk-build-title    { font-size: 17px; }
  .tk-page.tk-developer .tk-build-body     { font-size: 13px; }
  .tk-page.tk-developer .tk-week-title     { font-size: 14px; }
  .tk-page.tk-developer .tk-week-body      { font-size: 12px; }
  .tk-page.tk-developer .tk-diff-line      { font-size: 16px; }
}

@media (max-width: 480px) {
  /* ---- Hero ---- */
  .tk-hero {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .tk-hero-wrap { gap: 18px; }
  .tk-hero-text { gap: 12px; }
  .tk-hero h1 {
    font-size: 38px;
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  .tk-hero .lead { font-size: 14px; line-height: 1.5; }
  .tk-hero-art { max-height: 240px; }

  /* ---- Section spacing ---- */
  .tk-section { padding-top: 36px; }
  .tk-section:last-child { padding-bottom: 36px; }
  .tk-section--strip { padding-top: 22px; }

  /* ---- Section headlines ---- */
  .tk-page.tk-builder .tk-section .section-head h2,
  .tk-page.tk-professional .tk-section h2,
  .tk-page.tk-developer .tk-section .section-head h2 {
    font-size: 22px;
    letter-spacing: -0.028em;
    line-height: 1.12;
  }

  /* ---- Strip cells ---- */
  .tk-strip-cell { padding: 12px 14px; }
  .tk-strip-name { font-size: 14.5px; }
  .tk-strip-line { font-size: 12px; }

  /* ---- Learn cells ---- */
  .tk-learn-cell { padding: 16px 16px 14px; }
  .tk-learn-title { font-size: 14.5px; }
  .tk-learn-body  { font-size: 12.5px; }

  /* ---- Build cells ---- */
  .tk-build-cell { padding: 16px 16px 14px; gap: 6px; }
  .tk-build-title { font-size: 16px; }
  .tk-build-body  { font-size: 12.5px; }
  .tk-build-preview { padding-top: 12px; font-size: 11px; }

  /* ---- Tools / chips ---- */
  .tk-chip { font-size: 11px; padding: 6px 10px; }
  .tk-chip--logo img { width: 14px; height: 14px; }

  /* ---- Week cells ---- */
  .tk-week-cell { padding: 14px 12px 14px; }
  .tk-week-title { font-size: 13.5px; }
  .tk-week-body  { font-size: 11.5px; }

  /* ---- Roles pills ---- */
  .tk-role-pill { font-size: 11.5px; padding: 5px 11px; }

  /* ---- Diff cells ---- */
  .tk-diff-cell { padding: 18px 16px 20px; }
  .tk-diff-line { font-size: 15px; }
  .tk-diff-list li { font-size: 12.5px; }

  /* ---- Track-specific extra trims at phone width ---- */
  .tk-page.tk-builder .tk-strip       { padding: 14px 14px 18px; gap: 10px; }
  .tk-page.tk-builder .tk-strip-cell  { padding: 14px 14px 12px; }
  .tk-page.tk-builder .tk-learn-cell  { padding: 18px 16px 16px; }
  .tk-page.tk-builder .tk-learn-num   { font-size: 18px; margin-bottom: 8px; }
  .tk-page.tk-builder .tk-learn-title { font-size: 14.5px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-title { font-size: 16px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-tag,
  .tk-page.tk-builder .tk-build-cell .tk-build-title,
  .tk-page.tk-builder .tk-build-cell .tk-build-body  { margin-left: 16px; margin-right: 16px; }
  .tk-page.tk-builder .tk-build-cell .tk-build-preview { padding: 12px 16px 14px; }
  .tk-page.tk-builder .tk-week-cell   { padding: 16px 12px 16px; }
  .tk-page.tk-builder .tk-week-day    { padding-left: 14px; }
  .tk-page.tk-builder .tk-week-cell::before { left: 14px; top: 18px; width: 6px; height: 6px; }
  .tk-page.tk-builder .tk-diff-cell   { padding: 20px 16px 22px; }
  .tk-page.tk-builder .tk-diff-line   { font-size: 15px; }

  .tk-page.tk-professional .tk-learn-title { font-size: 14px; }
  .tk-page.tk-professional .tk-build-title { font-size: 16px; }
  .tk-page.tk-professional .tk-week-title  { font-size: 13.5px; }
  .tk-page.tk-professional .tk-diff-line   { font-size: 15px; }

  .tk-page.tk-developer .tk-learn-title    { font-size: 14px; }
  .tk-page.tk-developer .tk-build-title    { font-size: 16px; }
  .tk-page.tk-developer .tk-week-title     { font-size: 13.5px; }
  .tk-page.tk-developer .tk-diff-line      { font-size: 15px; }
}

/* =====================================================================
   Mobile polish — chrome + enterprise/product/privacy
   Goal: SCALE DOWN the desktop format. Don't restructure, don't recolor.
   Touchpoints: nav, footer, btn, page-hero (base), hero-cta-row, lead,
   eyebrow, section-head, cta-band, wrap, card, base typography, plus
   a few page-unique selectors on enterprise/product/privacy.
   ===================================================================== */

@media (max-width: 768px) {
  /* ---------- Base typography ---------- */
  body { font-size: 15px; }
  h1 { font-size: clamp(40px, 8vw, 56px); letter-spacing: -0.04em; line-height: 0.98; }
  h2 { font-size: clamp(30px, 6vw, 42px); letter-spacing: -0.035em; line-height: 1.02; }
  h3 { font-size: 22px; letter-spacing: -0.022em; line-height: 1.15; }
  h4 { font-size: 16px; }
  p.lead { font-size: 16.5px; line-height: 1.5; }
  .eyebrow { font-size: 11px; }

  /* ---------- Nav / chrome ---------- */
  .nav-inner { height: 56px; }
  .nav .brand-logo { height: 32px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 6px 10px; font-size: 13px; }
  .nav-cta .btn { padding: 9px 14px; font-size: 13px; }
  .nav-cta .btn .arrow { display: inline; }

  /* ---------- Buttons ---------- */
  .btn { padding: 10px 16px; font-size: 13.5px; border-radius: 10px; gap: 6px; }
  .btn-lg { padding: 13px 20px; font-size: 14.5px; border-radius: 11px; }

  /* ---------- Hero CTA row ---------- */
  .hero-cta-row { gap: 10px; margin-top: 28px; }

  /* ---------- Page hero (base) ---------- */
  .page-hero { padding: clamp(36px, 7vw, 56px) 0 clamp(32px, 6vw, 48px); }
  .page-hero .eyebrow { margin-bottom: 16px; }
  .page-hero h1 {
    font-size: clamp(36px, 7.5vw, 52px);
    max-width: 22ch;
    margin-bottom: 18px;
  }
  .page-hero .lead { max-width: 60ch; }

  /* ---------- Section head (base) ---------- */
  .section-head { margin-bottom: 32px; gap: 18px; }
  .section-head .eyebrow { margin-bottom: 12px; }
  .section-head--inline { margin-bottom: 24px; }

  /* ---------- CTA band (base) ---------- */
  .cta-band { padding: 28px 22px; gap: 20px; }
  .cta-band h3 { font-size: 22px; }
  .cta-band-actions { gap: 10px; }
  .cta-band-actions .btn { width: 100%; justify-content: center; }

  /* ---------- Card (base) ---------- */
  .card { padding: 28px; }

  /* ---------- Footer ---------- */
  footer { padding: clamp(40px, 6vw, 56px) 0 clamp(28px, 4vw, 40px); }
  .footer-grid { gap: 24px; }
  .footer-grid h5 { margin-bottom: 12px; font-size: 11px; }
  .footer-grid li { font-size: 13px; padding: 5px 0; }
  .footer-bottom {
    margin-top: 32px;
    padding-top: 22px;
    font-size: 12px;
    gap: 10px;
  }

  /* ---------- Enterprise: hero promise + pillar card internals ---------- */
  .hero-promise { font-size: 10.5px; margin-top: 14px; }
  .paths-grid.paths-2x2 .card h3 { font-size: 21px; }
  .paths-grid.paths-2x2 .card p { font-size: 14.5px !important; }

  /* ---------- Product hero overrides (page-unique) ---------- */
  .product-hero { padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 6vw, 64px); }
}

@media (max-width: 480px) {
  /* ---------- Base typography (phone) ---------- */
  body { font-size: 14.5px; }
  h1 { font-size: 38px; letter-spacing: -0.04em; line-height: 0.98; }
  h2 { font-size: 28px; letter-spacing: -0.03em; line-height: 1.05; }
  h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.18; }
  h4 { font-size: 15px; }
  p.lead { font-size: 15.5px; line-height: 1.5; }
  .eyebrow { font-size: 10.5px; }

  /* ---------- Wrap gutter (modest tighten only) ---------- */
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* ---------- Nav ---------- */
  .nav-inner { height: 52px; padding-left: 18px; padding-right: 18px; }
  .nav .brand-logo { height: 28px; }
  .nav-links { display: none; }
  .nav-cta .btn { padding: 8px 12px; font-size: 12.5px; gap: 4px; }

  /* ---------- Buttons ---------- */
  .btn { padding: 9px 14px; font-size: 13px; }
  .btn-lg { padding: 12px 18px; font-size: 14px; }

  /* ---------- Hero CTA row: stack & full-width ---------- */
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }

  /* ---------- Page hero ---------- */
  .page-hero { padding: clamp(28px, 6vw, 40px) 0 clamp(24px, 5vw, 36px); }
  .page-hero h1 { font-size: 36px; max-width: none; margin-bottom: 14px; }
  .page-hero .eyebrow { margin-bottom: 12px; }

  /* ---------- Section head ---------- */
  .section-head { margin-bottom: 24px; gap: 14px; }

  /* ---------- CTA band ---------- */
  .cta-band { padding: 22px 18px; gap: 16px; border-radius: 16px; }
  .cta-band h3 { font-size: 20px; }
  .cta-band-actions { flex-direction: column; align-items: stretch; }
  .cta-band-actions .btn { width: 100%; justify-content: center; }

  /* ---------- Card ---------- */
  .card { padding: 22px; border-radius: 16px; }

  /* ---------- Footer ---------- */
  footer { padding: 40px 0 28px; }
  .footer-grid { gap: 22px; }
  .footer-grid li { font-size: 13px; }
  .footer-bottom { font-size: 11.5px; }
  .footer-bottom .mono { font-size: 10.5px; }

  /* ---------- Enterprise pillar cards (unique inner overrides) ---------- */
  .paths-grid.paths-2x2 .card { padding: 24px; }
  .paths-grid.paths-2x2 .card h3 { font-size: 19px; }
  .paths-grid.paths-2x2 .card p { font-size: 14px !important; }
  .paths-grid.paths-2x2 .card .mono { font-size: 11px; margin-bottom: 14px; }

  /* ---------- Product hero ---------- */
  .product-hero { padding: clamp(36px, 6vw, 56px) 0 clamp(32px, 5vw, 48px); }

  /* ---------- Privacy page-hero · already uses bg-2; tighten ---------- */
  /* (privacy uses base .page-hero rules — already covered above) */
}


/* =================================================================
   MOBILE POLISH · /paths + /apply
   Goal: scale the desktop layout DOWN at phone widths — preserve the
   visual hierarchy (banners stay banner-like, cards stay card-like)
   instead of ballooning into oversized single-column blocks.
   ================================================================= */

/* ---- /paths · tablet (≤768px) ----------------------------------- */
@media (max-width: 768px) {
  [data-page="paths"] .page-hero.paths-hero {
    padding: clamp(48px, 9vw, 72px) 0 clamp(36px, 6vw, 56px);
  }
  [data-page="paths"] .paths-hero h1 {
    font-size: clamp(36px, 7.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }
  [data-page="paths"] .paths-hero-meta { gap: 8px; margin-top: 16px; }
  [data-page="paths"] .paths-hero-chip {
    font-size: 10.5px;
    padding: 5px 10px 4px;
  }

  .paths-banners { gap: 16px; margin-top: 22px; }
  .path-banner {
    border-radius: 18px;
    min-height: 0;
  }
  .path-banner-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 22px;
  }
  .path-banner-head { gap: 10px; }
  .path-banner-head .path-num { font-size: 10.5px; }
  .path-mega {
    font-size: clamp(40px, 9vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.04em;
  }
  .path-tagline { font-size: 15px; line-height: 1.32; max-width: 28ch; }
  .path-banner-detail { gap: 14px; padding-top: 4px; }
  .path-banner-detail .path-lede { font-size: 14px; line-height: 1.5; }
  .path-banner-detail .path-list li {
    font-size: 12.75px;
    padding: 9px 0 9px 16px;
    line-height: 1.45;
  }
  .path-banner-detail .path-list li::before { top: 16px; width: 5px; height: 5px; }
  .path-banner-foot {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 0;
  }
  .path-banner .path-cta { font-size: 11.5px; letter-spacing: 0.07em; }
}

/* ---- /paths · phone (≤480px) ------------------------------------ */
@media (max-width: 480px) {
  [data-page="paths"] .paths-hero h1 { font-size: clamp(30px, 8.5vw, 40px); }
  [data-page="paths"] .paths-hero .lead { font-size: 15px; line-height: 1.5; }
  [data-page="paths"] .paths-hero-chip { font-size: 10px; padding: 4px 9px 3px; }

  .paths-banners { gap: 14px; }
  .path-banner { border-radius: 16px; }
  .path-banner-inner {
    padding: 20px 18px;
    gap: 14px;
  }
  .path-mega { font-size: clamp(34px, 10vw, 44px); }
  .path-tagline { font-size: 14px; }
  .path-banner-detail .path-lede { font-size: 13.5px; }
  .path-banner-detail .path-list li {
    font-size: 12.25px;
    padding: 8px 0 8px 14px;
  }
  .path-banner-detail .path-list li::before { top: 14px; }
}

/* ---- /apply · tablet (≤768px) ----------------------------------- */
@media (max-width: 768px) {
  [data-page="apply"] .page-hero.waitlist-hero {
    padding-top: clamp(40px, 7vw, 60px);
    padding-bottom: clamp(24px, 4vw, 36px);
  }
  [data-page="apply"] .waitlist-hero h1 {
    font-size: clamp(32px, 7vw, 44px);
    line-height: 1.05;
    margin-bottom: 14px;
  }
  [data-page="apply"] .waitlist-hero .lead { font-size: 15px; line-height: 1.5; }

  [data-page="apply"] .waitlist-section {
    padding-top: 24px !important;
    padding-bottom: clamp(56px, 9vw, 96px) !important;
  }
  [data-page="apply"] .waitlist-shell {
    padding: 22px 18px;
    border-radius: 18px;
  }

  [data-page="apply"] .waitlist-progress { gap: 12px; margin-bottom: 22px; }
  [data-page="apply"] .waitlist-progress .wp-track { height: 5px; }
  [data-page="apply"] .waitlist-progress .wp-label { font-size: 10.5px; }

  [data-page="apply"] .waitlist-stage { min-height: 260px; }
  [data-page="apply"] .ws-head { margin-bottom: 18px; }
  [data-page="apply"] .ws-eyebrow { font-size: 10.5px; margin-bottom: 8px; }
  [data-page="apply"] .ws-h { font-size: clamp(22px, 5vw, 26px); line-height: 1.15; }
  [data-page="apply"] .ws-sub { font-size: 14px; line-height: 1.5; }

  /* Type cards (step 1) – stack at 768 already via 900px rule, but tighten */
  [data-page="apply"] .type-grid { gap: 12px; }
  [data-page="apply"] .type-card { min-height: 0; border-radius: 16px; }
  [data-page="apply"] .type-card-inner { padding: 20px 18px; gap: 8px; }
  [data-page="apply"] .type-card-eyebrow { font-size: 10px; }
  [data-page="apply"] .type-card .type-name { font-size: clamp(24px, 5.5vw, 30px); margin: 2px 0 4px; }
  [data-page="apply"] .type-card .type-desc { font-size: 13px; line-height: 1.45; }
  [data-page="apply"] .type-card-mark {
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 7px;
  }

  /* Track cards (student step) */
  [data-page="apply"] .track-grid { gap: 12px; }
  [data-page="apply"] .track-card { border-radius: 14px; }
  [data-page="apply"] .track-card .tc-art { height: 72px; }
  [data-page="apply"] .track-card .tc-body { padding: 16px 18px 18px; gap: 8px; }
  [data-page="apply"] .track-card .tc-tag { font-size: 10.5px; }
  [data-page="apply"] .track-card .tc-h { font-size: 16px; }
  [data-page="apply"] .track-card .tc-d { font-size: 13px; line-height: 1.45; }
  [data-page="apply"] .track-card .tc-tools { padding-top: 11px; gap: 8px; }
  [data-page="apply"] .track-card .tc-tools img { width: 20px; height: 20px; }

  /* Form fields — IMPORTANT: keep input font-size ≥ 16px (iOS zoom guard)
     while tightening surrounding padding + label sizes. */
  [data-page="apply"] .field { gap: 5px; margin-bottom: 14px; }
  [data-page="apply"] .field label { font-size: 12.5px; margin-bottom: 4px; }
  [data-page="apply"] .field-row { gap: 12px; }
  [data-page="apply"] .field-hint { font-size: 11.5px; }
  [data-page="apply"] .field input[type="text"],
  [data-page="apply"] .field input[type="email"],
  [data-page="apply"] .field select,
  [data-page="apply"] .field textarea {
    font-size: 16px;          /* iOS zoom guard */
    padding: 11px 13px;
    border-radius: 10px;
  }
  [data-page="apply"] .field .err { font-size: 12px; min-height: 12px; }

  [data-page="apply"] .check-row { font-size: 13px; gap: 9px; }

  [data-page="apply"] .wl-chips { gap: 6px; }
  [data-page="apply"] .wl-chip { padding: 7px 12px; font-size: 12.5px; }

  [data-page="apply"] .scale { gap: 6px; }
  [data-page="apply"] .scale-btn { padding: 11px 0; font-size: 13px; border-radius: 10px; }
  [data-page="apply"] .scale-anchors { font-size: 10.5px; margin-top: 5px; }

  [data-page="apply"] .school-suggest {
    max-height: 260px;
    border-radius: 10px;
    padding: 3px;
  }
  [data-page="apply"] .school-row { padding: 9px 10px; gap: 10px; }
  [data-page="apply"] .school-logo { width: 24px; height: 24px; border-radius: 5px; }
  [data-page="apply"] .school-name { font-size: 13.5px; }
  [data-page="apply"] .school-country { font-size: 10.5px; }
  [data-page="apply"] .school-empty { padding: 12px; font-size: 12.5px; }
  [data-page="apply"] .school-selected { padding: 10px 12px; gap: 10px; border-radius: 10px; }

  [data-page="apply"] .track-explainer {
    margin-top: 12px;
    padding: 13px 14px;
    font-size: 12.5px;
    border-radius: 10px;
  }

  [data-page="apply"] .ws-actions {
    margin-top: 22px;
    padding-top: 16px;
    gap: 10px;
  }
  [data-page="apply"] .ws-actions .ws-hint { font-size: 10.5px; }
  [data-page="apply"] .ws-actions-right { gap: 8px; }
  [data-page="apply"] .ws-actions .btn-back { padding: 10px 14px; }

  [data-page="apply"] .waitlist-status {
    margin-top: 16px;
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  [data-page="apply"] .wl-review-row { padding: 13px 16px; font-size: 13.5px; }
  [data-page="apply"] .waitlist-success { padding: 24px 0; }
  [data-page="apply"] .waitlist-success .wl-headline { font-size: clamp(28px, 6.4vw, 36px); margin-bottom: 12px; }
  [data-page="apply"] .waitlist-success .wl-lede { font-size: 14.5px; margin-bottom: 26px; }
  [data-page="apply"] .waitlist-success .wl-dots { gap: 8px; margin-bottom: 20px; }
  [data-page="apply"] .waitlist-success .wl-dots span { width: 14px; height: 14px; }
  [data-page="apply"] .waitlist-success .wl-step {
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  [data-page="apply"] .waitlist-success .wl-step-num { font-size: 12px; }
  [data-page="apply"] .waitlist-success .wl-step-title { font-size: 14px; }
  [data-page="apply"] .waitlist-success .wl-step-desc { font-size: 12.5px; }
  [data-page="apply"] .waitlist-success .wl-receipt {
    font-size: 11px; padding: 8px 12px;
  }
}

/* ---- /apply · phone (≤480px) ------------------------------------ */
@media (max-width: 480px) {
  [data-page="apply"] .waitlist-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  [data-page="apply"] .waitlist-hero .lead { font-size: 14.5px; }

  [data-page="apply"] .waitlist-shell {
    padding: 18px 14px;
    border-radius: 16px;
  }
  [data-page="apply"] .waitlist-progress { margin-bottom: 18px; }
  [data-page="apply"] .waitlist-stage { min-height: 220px; }
  [data-page="apply"] .ws-head { margin-bottom: 14px; }
  [data-page="apply"] .ws-h { font-size: clamp(20px, 5.6vw, 24px); }
  [data-page="apply"] .ws-sub { font-size: 13.5px; }

  [data-page="apply"] .type-card-inner { padding: 18px 16px; }
  [data-page="apply"] .type-card .type-name { font-size: clamp(22px, 6.5vw, 26px); }
  [data-page="apply"] .type-card .type-desc { font-size: 12.5px; }

  [data-page="apply"] .track-card .tc-art { height: 60px; }
  [data-page="apply"] .track-card .tc-body { padding: 14px 16px 16px; }

  /* field-row already collapses to 1fr at 600px; tighten remaining vertical rhythm */
  [data-page="apply"] .field { margin-bottom: 12px; }
  [data-page="apply"] .field input[type="text"],
  [data-page="apply"] .field input[type="email"],
  [data-page="apply"] .field select,
  [data-page="apply"] .field textarea {
    padding: 10px 12px;
    /* Keep font-size at 16px to avoid iOS zoom — DO NOT shrink */
  }

  [data-page="apply"] .scale { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  [data-page="apply"] .scale-btn { padding: 10px 0; font-size: 12.5px; }

  [data-page="apply"] .ws-actions { margin-top: 18px; padding-top: 14px; }
  [data-page="apply"] .ws-actions .ws-hint { display: none; }

  [data-page="apply"] .wl-review-row { padding: 11px 14px; font-size: 13px; }
  [data-page="apply"] .waitlist-success .wl-step {
    grid-template-columns: 32px 1fr;
    padding: 12px 14px;
  }
}


/* ============================================================
   MOBILE POLISH · HOME PAGE
   Scaling the same desktop layout down — tighter padding,
   smaller type, capped illustrations. No restructuring.
   Only touches classes UNIQUE to #/ (page-home).
   ============================================================ */

/* ---- Tablet ≤ 768px ---------------------------------------- */
@media (max-width: 768px) {
  /* Hero — tighten vertical breathing, shrink rotator h1 */
  .page[data-page="home"] .hero {
    padding-top: clamp(56px, 10vw, 80px);
    padding-bottom: clamp(48px, 8vw, 72px);
  }
  .hero-rotator-h1 { max-width: 16ch; gap: 0.02em; }
  .hero-rotator-h1,
  .page[data-page="home"] .hero h1 {
    font-size: clamp(40px, 9vw, 64px);
    letter-spacing: -0.04em;
  }
  .hero-rotator-line { column-gap: 0.24em; }
  .hero-rotator-h1 .accent { padding-right: 1em; margin-right: -0.4em; }
  .hero-link { font-size: 12.5px; margin-top: 12px; }

  /* Cycle deck — looser tabs, watermark restrained */
  .cycle-deck { margin-top: clamp(24px, 5vw, 40px); }
  .cycle-tabs { gap: 22px; padding-bottom: 14px; margin-bottom: 32px; }
  .cycle-tab-label { font-size: 13px; }
  .cycle-tab-num { font-size: 11px; }
  .cycle-h { font-size: clamp(30px, 6vw, 44px); max-width: 100%; }
  .cycle-body { font-size: 15px; max-width: 100%; }
  .cycle-stage { min-height: 240px; }
  .cycle-watermark { font-size: clamp(160px, 28vw, 240px); top: -36px; opacity: 0.14; }
  .cycle-pattern { width: 50%; opacity: 0.22; }

  /* Enterprise strip — tighten, stack content cleanly */
  .enterprise-strip {
    padding: 22px 22px;
    margin-top: clamp(24px, 4vw, 36px);
  }
  .enterprise-strip-content { gap: 14px; }
  .enterprise-strip-text { gap: 10px; flex-direction: column; align-items: flex-start; }
  .enterprise-strip-title { font-size: 17px; }
  .enterprise-strip-sub { font-size: 13px; }

  /* Shift / split / numbers */
  .shift-head .shift-h2 { font-size: clamp(30px, 7vw, 44px); margin-bottom: 16px; }
  .shift-head .shift-lead { font-size: 16px; }
  .shift-split { gap: 14px; }
  .split-card { padding: 28px 24px; min-height: 0; }
  .split-card .split-num { font-size: clamp(56px, 14vw, 92px); margin-bottom: 10px; }
  .split-card .split-tag { margin-bottom: 14px; font-size: 10.5px; }
  .split-card .split-trend { font-size: 14px; }
  .split-card .split-src { font-size: 10px; }

  /* Premium grid */
  .premium-hero { padding: 28px 24px; }
  .premium-hero .h-eyebrow { margin-bottom: 18px; font-size: 10.5px; }
  .premium-hero .h-title { font-size: clamp(20px, 4.5vw, 26px); margin-bottom: 22px; }
  .compare-bars { gap: 14px; }
  .compare-bars .row { grid-template-columns: 60px 1fr 52px; gap: 12px; font-size: 12px; }
  .compare-bars .track { height: 24px; }
  .compare-bars .pct { font-size: 13px; }
  .multiplier-card { padding: 28px 24px; }
  .multiplier-card .m-eyebrow { margin-bottom: 18px; font-size: 10.5px; }
  .multiplier-card .m-num { font-size: clamp(64px, 14vw, 110px); }
  .multiplier-card .m-tag { font-size: 13px; }
  .multiplier-card .m-row { padding: 14px 0; font-size: 13px; }

  /* Gap row cards */
  .gap-card { padding: 22px; min-height: 0; }
  .gap-card .g-tag { margin-bottom: 14px; font-size: 10.5px; }
  .gap-card .g-headline { font-size: 16.5px; }
  .gap-card .g-body { font-size: 12.5px; }
  .donut { width: 76px; height: 76px; margin-bottom: 14px; }
  .donut .v { font-size: 19px; }
  .gbar { height: 32px; margin-bottom: 12px; }
  .gbar .fill { font-size: 11px; padding-left: 10px; }

  /* Process flow — already vertical at 760px; tighten further */
  .process-flow {
    --process-node: 48px;
    margin-top: clamp(28px, 4vw, 48px);
    padding: clamp(16px, 3vw, 24px) 0;
  }
  .process-step { gap: 14px; }
  .process-content { padding-top: 6px; max-width: none; }
  .process-title { font-size: 16.5px; margin-bottom: 6px; }
  .process-body { font-size: 13px; }
  .process-num { font-size: 9.5px; right: -44px; }

  /* Shape cards (paths) */
  .shape-grid { gap: 14px; }
  .shape-card-art { height: clamp(130px, 26vw, 170px); }
  .shape-card-art-glyph { width: 64px; height: 64px; }
  .shape-card-art-glyph svg { width: 36px; height: 36px; }
  .shape-card-body { padding: 22px 22px 22px; gap: 8px; }
  .shape-card-h { font-size: 19px; }
  .shape-card-body-p { font-size: 13.5px; }
  .shape-card-list { gap: 6px; }
  .shape-card-list li { font-size: 12.5px; }
  .shape-card-tools { padding: 12px 0; gap: 8px; }
  .shape-card-tools img { width: 20px; height: 20px; }

  /* Tools split / orbit */
  .tools-side h2 { margin-bottom: 18px; }
  .tools-side p { font-size: 15px; }

  /* Partners marquee */
  .partners { padding: 28px 0; }
  .marquee-track { gap: 56px; }
  .marquee-item { font-size: 18px; }

  /* Warp pipeline-coming-soon block */
  .warp { padding: clamp(40px, 8vw, 64px) clamp(22px, 5vw, 36px); border-radius: 20px; }
  .warp-info-card { padding: 28px 24px 26px; gap: 14px; }
  .warp-info-card h3 { font-size: clamp(22px, 5vw, 28px); }
  .warp-info-card .warp-body { font-size: 14px; }
  .warp-stage { perspective: 90px; }

  /* Voices marquee — tighter cards already handled at 600px */
  .voices-marquee { gap: 12px; }
  .voices-track { gap: 12px; }
  .quote-card .qc-body { font-size: 14px; }
  .quote-card .qc-name { font-size: 12.5px; }
  .quote-card .qc-role { font-size: 11px; }
  .quote-card .qc-src { font-size: 10px; margin-top: 4px; }

  /* Stat hero on alarm-stats (below-the-fold "92M") */
  .stat-hero { padding-bottom: 28px; }
  .stat-hero .num { margin-bottom: 14px; }
  .stat-hero .lbl { font-size: 17px; }
  .stat-list li { padding: 18px 0; gap: 18px; grid-template-columns: minmax(90px, max-content) 1fr; }
  .stat-list .rl { font-size: 13.5px; }
  .stat-list .rs { font-size: 9.5px; }
}

/* ---- Phone ≤ 480px ----------------------------------------- */
@media (max-width: 480px) {
  /* Hero — push down more, drop accent padding to avoid overflow */
  .page[data-page="home"] .hero {
    padding-top: clamp(40px, 11vw, 64px);
    padding-bottom: clamp(36px, 9vw, 56px);
  }
  .hero-rotator-h1,
  .page[data-page="home"] .hero h1 {
    font-size: clamp(34px, 11vw, 52px);
    letter-spacing: -0.038em;
  }
  .hero-rotator-h1 .accent { padding-right: 0.85em; margin-right: -0.32em; }

  /* Cycle deck — single column, smaller watermark */
  .cycle-tabs { gap: 16px; }
  .cycle-tab { gap: 10px; }
  .cycle-tab-label { font-size: 12px; letter-spacing: 0.015em; }
  .cycle-h { font-size: clamp(26px, 7vw, 36px); }
  .cycle-body { font-size: 14px; }
  .cycle-stage { min-height: 220px; }
  .cycle-watermark { font-size: clamp(120px, 36vw, 180px); top: -22px; }

  /* Enterprise strip */
  .enterprise-strip { padding: 18px 18px; border-radius: 14px; }
  .enterprise-strip-title { font-size: 15.5px; }
  .enterprise-strip-sub { font-size: 12.5px; }
  .enterprise-strip-eyebrow { font-size: 10px; padding: 3px 8px; }

  /* Shift split + numbers */
  .shift-head .shift-h2 { font-size: clamp(26px, 8vw, 36px); }
  .shift-head .shift-lead { font-size: 15px; }
  .split-card { padding: 22px 20px; }
  .split-card .split-num { font-size: clamp(48px, 16vw, 76px); }
  .split-card .split-tag { font-size: 10px; margin-bottom: 12px; }
  .split-card .split-trend { font-size: 13px; }

  /* Premium hero */
  .premium-hero { padding: 22px 20px; }
  .premium-hero .h-title { font-size: clamp(18px, 5vw, 22px); }
  .compare-bars .row { grid-template-columns: 50px 1fr 46px; gap: 10px; font-size: 11px; }
  .compare-bars .track { height: 20px; }
  .compare-bars .pct { font-size: 12px; }
  .multiplier-card { padding: 22px 20px; }
  .multiplier-card .m-num { font-size: clamp(56px, 16vw, 88px); }

  /* Gap cards — tighten, smaller donut */
  .gap-card { padding: 20px; }
  .gap-card .g-headline { font-size: 15.5px; }
  .gap-card .g-body { font-size: 12px; }
  .donut { width: 64px; height: 64px; }
  .donut::before { inset: 6px; }
  .donut .v { font-size: 16px; }
  .gbar { height: 28px; }
  .gbar .fill { font-size: 10.5px; padding-left: 8px; }

  /* Process flow — even tighter nodes, no number tag floats off-screen */
  .process-flow { --process-node: 42px; }
  .process-num { right: auto; left: 56px; top: 0; font-size: 9px; }
  .process-content { padding-top: 4px; }
  .process-title { font-size: 15.5px; }
  .process-body { font-size: 12.5px; }
  .process-step { gap: 12px; }

  /* Shape cards */
  .shape-card-art { height: clamp(110px, 30vw, 150px); }
  .shape-card-art-glyph { width: 56px; height: 56px; }
  .shape-card-art-glyph svg { width: 30px; height: 30px; }
  .shape-card-body { padding: 20px 20px 20px; }
  .shape-card-h { font-size: 17.5px; }
  .shape-card-body-p { font-size: 13px; }
  .shape-card-list li { font-size: 12px; padding-left: 14px; }
  .shape-card-list li::before { width: 5px; height: 5px; top: 7px; }
  .shape-card-tools img { width: 18px; height: 18px; }
  .shape-card-cta { font-size: 12.5px; }

  /* Tools split */
  .tools-side h2 { font-size: clamp(28px, 8vw, 38px); }
  .tools-side p { font-size: 14px; }

  /* Partners marquee */
  .partners { padding: 22px 0; }
  .marquee-track { gap: 40px; }
  .marquee-item { font-size: 16px; }

  /* Warp / pipeline-coming-soon */
  .warp { padding: 36px 18px; border-radius: 18px; }
  .warp-info-card { padding: 22px 20px 20px; border-radius: 14px; }
  .warp-info-card h3 { font-size: clamp(20px, 6vw, 26px); }
  .warp-info-card .warp-body { font-size: 13.5px; }

  /* Voices */
  .quote-card { padding: 18px 20px; gap: 12px; }
  .quote-card .qc-body { font-size: 13.5px; }

  /* Stat hero / list */
  .stat-hero .num { margin-bottom: 10px; }
  .stat-hero .lbl { font-size: 16px; }
  .stat-hero .src { font-size: 10px; margin-top: 14px; }
  .stat-list li { padding: 14px 0; gap: 14px; grid-template-columns: 1fr; }
  .stat-list .rl { font-size: 13px; }
}

/* ============================================================
   PRE-LAUNCH MOBILE AUDIT FIXES
   Targets the issues surfaced in the 2026-04-29 mobile audit:
   builder dark contrast, type-card eyebrow overlap, nav
   visibility on dark, path-banner copy contrast over textures,
   touch-target sizing, shape/quote-card sizing, plus the
   Student type-card dithering dark-mode bug.
   All additive, only ≤768/≤480 media queries. No desktop edits.
   ============================================================ */

/* -- Nav: ensure visibility on dark mobile + always-on hairline at phone */
@media (max-width: 768px) {
  .nav { border-bottom: 1px solid var(--hairline); }
  [data-theme="dark"] .nav { background: oklch(0.10 0.005 90 / 0.92); }
}

/* -- Touch targets: nav CTA + FAQ summary */
@media (max-width: 480px) {
  .nav .btn-primary,
  .nav-cta .btn-primary { padding: 12px 18px; min-height: 44px; }
  .faq-item { padding: 18px 0; }
  .faq-item summary { min-height: 44px; align-items: center; display: flex; }
}

/* -- Builder track DARK MODE: override --mint-ink (dark green ≈ L 0.32)
      where it's used as TEXT color or for thin marks against the dark
      surface. Promote to brighter --mint where reading is required. */
[data-theme="dark"] .tk-page.tk-builder .tk-section .section-head .eyebrow,
[data-theme="dark"] .tk-page.tk-builder .tk-strip-num,
[data-theme="dark"] .tk-page.tk-builder .tk-strip-link,
[data-theme="dark"] .tk-page.tk-builder .tk-learn-num,
[data-theme="dark"] .tk-page.tk-builder .tk-build-tag,
[data-theme="dark"] .tk-page.tk-builder .tk-week-day,
[data-theme="dark"] .tk-page.tk-builder .tk-chip,
[data-theme="dark"] .tk-page.tk-builder .tk-role-pill,
[data-theme="dark"] .tk-page.tk-builder .tk-diff-num {
  color: var(--mint);
}
[data-theme="dark"] .tk-page.tk-builder .tk-section .section-head .eyebrow::before,
[data-theme="dark"] .tk-page.tk-builder .tk-build-cell::before {
  background: var(--mint);
}
/* Body copy in builder cells: ensure ≥ AA on dark surface */
[data-theme="dark"] .tk-page.tk-builder .tk-learn-body,
[data-theme="dark"] .tk-page.tk-builder .tk-build-body,
[data-theme="dark"] .tk-page.tk-builder .tk-week-body {
  color: var(--ink);
}

/* -- Apply: Student type-card art renders broken in dark mode (cream slab
      over dark, hides headline). Hide the art on dark phone until the
      JS renderer picks up data-color-back-dark. */
@media (max-width: 480px) {
  [data-theme="dark"] .type-card.t-student .type-card-bg > * { display: none; }
}
[data-theme="dark"] .type-card.t-student .type-card-bg { opacity: 0.5; mix-blend-mode: screen; }

/* -- Apply: type-card eyebrow no longer slides under the .type-card-mark icon */
@media (max-width: 480px) {
  [data-page="apply"] .type-card-eyebrow,
  .type-card .type-card-eyebrow { padding-right: 44px; }
  .type-card .type-card-mark { top: 12px; right: 12px; width: 28px; height: 28px; }
}

/* -- Professional dark hero: subhead opacity bump on phone */
@media (max-width: 480px) {
  [data-theme="dark"] .tk-page.tk-professional .tk-hero .lead {
    opacity: 1;
    color: var(--ink);
    font-size: 14.5px;
  }
}

/* -- Paths: translucent backdrop behind banner copy so it doesn't fight
      the animated mint/sky/peach textures on phone */
@media (max-width: 480px) {
  .path-banner-detail {
    background: oklch(from var(--bg) l c h / 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 16px 18px;
    border-radius: 14px;
  }
  [data-theme="dark"] .path-banner-detail {
    background: oklch(from var(--bg) l c h / 0.74);
  }
}

/* -- Home: tighten shape-card on phone so 1-up stack isn't a wall */
@media (max-width: 480px) {
  .shape-card { border-radius: 18px; }
  .shape-card-body { padding: 18px 18px 16px; gap: 6px; }
  .shape-card-h { font-size: 17px; }
  .shape-card-body-p { font-size: 12.5px; line-height: 1.5; }
  .shape-card-list { gap: 4px; }
  .shape-card-list li { font-size: 11.5px; line-height: 1.4; }
  .shape-card-foot { padding-top: 10px; }
}

/* -- Home: voices-marquee compaction on phone (was eating ~573px height) */
@media (max-width: 480px) {
  .voices-marquee { gap: 8px; }
  .voices-marquee .quote-card { min-width: 240px; padding: 16px 18px; }
  .voices-marquee .quote-card .qc-body { font-size: 12.5px; -webkit-line-clamp: 5; }
}

/* -- Paths: trim trailing whitespace before footer on phone */
@media (max-width: 480px) {
  .page[data-page="paths"] { padding-bottom: 32px; }
}

/* =================================================================
   MOBILE NAV DROPDOWN
   Hamburger trigger (≤768px) + slide-down panel exposing the nav
   links that are display:none in the horizontal .nav-links bar at
   phone widths. Desktop nav untouched.
   ================================================================= */

/* Hamburger trigger — hidden on desktop. Shown ≤768px. */
.nav-hamburger {
  display: none;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .15s ease;
}
.nav-hamburger:hover { background: var(--bg-3); }
.nav-hamburger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.nav-hamburger-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nav-hamburger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.nav-hamburger-bar:nth-child(1) { top: 0; }
.nav-hamburger-bar:nth-child(2) { top: 5.25px; }
.nav-hamburger-bar:nth-child(3) { top: 10.5px; }

/* Open state — animate to X */
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1) {
  top: 5.25px;
  transform: rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3) {
  top: 5.25px;
  transform: rotate(-45deg);
}

/* Mobile menu panel — slides down from under the nav. */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: oklch(0.985 0.004 90 / 0.95);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
  z-index: 99;
}
[data-theme="dark"] .nav-mobile-menu {
  background: oklch(0.10 0.005 90 / 0.95);
  border-bottom-color: var(--hairline);
}

.nav-mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-mobile-menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transition: background .15s ease;
}
.nav-mobile-menu a:last-child { border-bottom: 0; }
.nav-mobile-menu a:hover { background: var(--bg-3); }

/* Active page indicator — small mint dot on the left edge. */
.nav-mobile-menu a.active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mint);
  transform: translateY(-50%);
}

/* Body scroll lock when open. */
body.nav-mobile-open {
  overflow: hidden;
  touch-action: none;
}

/* Show the hamburger + reveal the menu container at ≤768px.
   Also hide the horizontal nav-links bar so we don't show both at once
   in the 481–768px range (tablets / large phones in landscape). */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex; }
  .nav-mobile-menu { display: flex; }
}

/* =====================================================================
 * KILL COLORED-BAR-CARD PATTERN  (3 instances)
 *
 * The user has called out three places where a card-with-colored-top-bar
 * shape persists despite the editorial/brutalist direction. This block
 * replaces those treatments with a 4px left-edge rule + mono eyebrow,
 * removing card chrome (background fills, top bars, rounded corners).
 *
 *   1. Track-detail comparison strip (.tk-strip-cell)
 *   2. Enterprise Pillar 04 dark card (.card--left-rule)
 *   3. Why-now 2026 — NOW timeline step (.step--now)
 *
 * Scoped tightly so they override per-track / per-page rules above
 * without rippling into other sections.
 * ===================================================================== */

/* ---- 1. Track-detail comparison strip — left-edge rule, no card chrome ---- */
/* Base + per-track overrides (light + dark). The original cells had:
   border, border-radius, background fill, decorative ::before bars and
   builder paper textures. We collapse all of that to a single 4px left
   rule in the per-track accent color, with generous left padding. */
.tk-section--strip .tk-strip {
  /* Strip layout already comes from .tk-strip — we just neutralize any
     decorative outer panel that the per-track stylesheets layered on. */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tk-section--strip .tk-strip::before { display: none !important; }

.tk-section--strip .tk-strip-cell {
  /* Wipe card chrome. */
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--tk-accent-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 14px 8px 24px !important;
  transform: none !important;
  overflow: visible !important;
  isolation: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-section--strip .tk-strip-cell:hover {
  background: transparent !important;
  transform: translateY(-1px) !important;
  border-left-color: var(--tk-accent-ink) !important;
  box-shadow: none !important;
}
/* Kill the decorative ::before / ::after the per-track stylesheets used
   to draw colored top bars, scanlines, "CURRENT SHEET" tags, etc. */
.tk-section--strip .tk-strip-cell::before,
.tk-section--strip .tk-strip-cell::after {
  display: none !important;
  content: none !important;
}
/* Active cell: solid filled left bar (slightly stronger). */
.tk-section--strip .tk-strip-cell.is-active {
  background: transparent !important;
  border-left-width: 6px !important;
  border-left-color: var(--tk-accent-ink) !important;
}
.tk-section--strip .tk-strip-cell.is-active .tk-strip-num {
  color: var(--tk-accent-ink);
}

/* Per-track left-rule color — these match the page's accent so each
   page's "active" cell pops in its own hue. */
.tk-page.tk-builder      .tk-section--strip .tk-strip-cell { border-left-color: var(--mint-ink) !important; }
.tk-page.tk-professional .tk-section--strip .tk-strip-cell { border-left-color: var(--sky-ink) !important; }
.tk-page.tk-developer    .tk-section--strip .tk-strip-cell { border-left-color: var(--peach) !important; }

/* Each cell's own slug colors its left rule, so all three rules read as
   their own track even on a sibling page. Active cell uses the same
   color, just thicker. */
.tk-section--strip .tk-strip-cell[data-strip-slug="builder"]      { border-left-color: var(--mint-ink) !important; }
.tk-section--strip .tk-strip-cell[data-strip-slug="professional"] { border-left-color: var(--sky-ink)  !important; }
.tk-section--strip .tk-strip-cell[data-strip-slug="developer"]    { border-left-color: var(--peach)    !important; }

/* Eyebrow / name / line / link typography — keep editorial. */
.tk-section--strip .tk-strip-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tk-section--strip .tk-strip-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tk-section--strip .tk-strip-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 36ch;
}
.tk-section--strip .tk-strip-link {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  border: 0 !important;
  padding: 0 !important;
  margin-top: 4px !important;
  align-self: flex-start;
}
.tk-section--strip .tk-strip-cell:hover .tk-strip-link { color: var(--ink); }

/* Per-track active eyebrow color (mint/sky/peach ink). */
.tk-page.tk-builder      .tk-section--strip .tk-strip-cell.is-active .tk-strip-num,
.tk-page.tk-builder      .tk-section--strip .tk-strip-cell.is-active .tk-strip-link { color: var(--mint-ink); }
.tk-page.tk-professional .tk-section--strip .tk-strip-cell.is-active .tk-strip-num,
.tk-page.tk-professional .tk-section--strip .tk-strip-cell.is-active .tk-strip-link { color: var(--sky-ink); }
.tk-page.tk-developer    .tk-section--strip .tk-strip-cell.is-active .tk-strip-num,
.tk-page.tk-developer    .tk-section--strip .tk-strip-cell.is-active .tk-strip-link { color: var(--peach); }

/* Mobile: tighten left rule + padding, single column already inherited. */
@media (max-width: 600px) {
  .tk-section--strip .tk-strip { gap: 18px; }
  .tk-section--strip .tk-strip-cell {
    border-left-width: 3px !important;
    padding-left: 18px !important;
  }
  .tk-section--strip .tk-strip-cell.is-active { border-left-width: 4px !important; }
  .tk-section--strip .tk-strip-name { font-size: 16px; }
  .tk-section--strip .tk-strip-line { font-size: 12.5px; }
}

/* Dark mode: colors stay (mint/sky/peach are theme-stable accents). Just
   make sure no dark-mode background fill leaks through from earlier rules. */
[data-theme="dark"] .tk-section--strip .tk-strip-cell,
[data-theme="dark"] .tk-section--strip .tk-strip-cell:hover,
[data-theme="dark"] .tk-section--strip .tk-strip-cell.is-active {
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] .tk-section--strip .tk-strip-num   { color: var(--ink-3); }
[data-theme="dark"] .tk-section--strip .tk-strip-name  { color: var(--ink); }
[data-theme="dark"] .tk-section--strip .tk-strip-line  { color: var(--ink-2); }
[data-theme="dark"] .tk-section--strip .tk-strip-link  { color: var(--ink-3); }

/* Active eyebrow / link on each track — the light-mode rules above use
   --mint-ink / --sky-ink (≈ L 0.32) which read as dark green/blue and
   disappear on the dark surface. Promote to the brighter accent token. */
[data-theme="dark"] .tk-page.tk-builder      .tk-section--strip .tk-strip-cell.is-active .tk-strip-num,
[data-theme="dark"] .tk-page.tk-builder      .tk-section--strip .tk-strip-cell.is-active .tk-strip-link { color: var(--mint); }
[data-theme="dark"] .tk-page.tk-professional .tk-section--strip .tk-strip-cell.is-active .tk-strip-num,
[data-theme="dark"] .tk-page.tk-professional .tk-section--strip .tk-strip-cell.is-active .tk-strip-link { color: var(--sky); }
[data-theme="dark"] .tk-page.tk-developer    .tk-section--strip .tk-strip-cell.is-active .tk-strip-num,
[data-theme="dark"] .tk-page.tk-developer    .tk-section--strip .tk-strip-cell.is-active .tk-strip-link { color: var(--peach); }

/* Same fix for the per-cell left rule color: --mint-ink / --sky-ink lose
   contrast on the dark surface. Use the brighter mint/sky/peach. */
[data-theme="dark"] .tk-page.tk-builder      .tk-section--strip .tk-strip-cell,
[data-theme="dark"] .tk-section--strip .tk-strip-cell[data-strip-slug="builder"] { border-left-color: var(--mint) !important; }
[data-theme="dark"] .tk-page.tk-professional .tk-section--strip .tk-strip-cell,
[data-theme="dark"] .tk-section--strip .tk-strip-cell[data-strip-slug="professional"] { border-left-color: var(--sky) !important; }


/* ---- 2. Enterprise Pillar 04 — keep dark bg, kill colored eyebrow-as-bar.
   Add 4px peach left rule. The eyebrow stays in peach mono but no longer
   reads as a "top bar" because the rule + content flow now leads visually. */
.card.card--left-rule {
  position: relative;
  border-radius: 4px;        /* tone down from 18-24px card radius */
  padding-left: 28px;
}
.card.card--left-rule-peach {
  border-left: 4px solid var(--peach);
}
.card.card--left-rule .card-eyebrow-peach {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--peach);
  margin-bottom: 14px;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .card.card--left-rule {
    border-left-width: 3px;
    padding-left: 20px;
  }
}
[data-theme="dark"] .card.card--left-rule-peach {
  border-left-color: var(--peach);
}
[data-theme="dark"] .card.card--left-rule .card-eyebrow-peach {
  color: var(--peach);
}


/* ---- 3. Why-now 2026 — NOW step: 4px peach left rule + peach mono eyebrow.
   Removes the old top border-color bar. Keeps the same content. ---- */
.page[data-page="why-now"] .step.step--now {
  border-top: 0 !important;
  border-left: 4px solid var(--peach);
  padding: 4px 0 28px 24px;
  background: transparent;
}
.page[data-page="why-now"] .step.step--now .step-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--peach-ink);
  text-transform: uppercase;
  margin-bottom: 4px;
}
@media (max-width: 600px) {
  .page[data-page="why-now"] .step.step--now {
    border-left-width: 3px;
    padding-left: 18px;
  }
}
[data-theme="dark"] .page[data-page="why-now"] .step.step--now {
  background: transparent;     /* override the earlier peach gradient bg */
  border-left-color: var(--peach);
}
[data-theme="dark"] .page[data-page="why-now"] .step.step--now .step-eyebrow {
  color: var(--peach);
}

/* Black-glyph brand logos (OpenAI, Notion, GitHub) ship as black-on-transparent
 * SVGs and disappear against dark backgrounds. Invert them in dark mode so the
 * mark reads white. Colored logos (Anthropic, Gemini, Figma, Slack, Airtable)
 * are left alone. */
[data-theme="dark"] .tk-chip--logo img[src*="openai-icon"],
[data-theme="dark"] .tk-chip--logo img[src*="notion-icon"],
[data-theme="dark"] .tk-chip--logo img[src*="github-icon"],
[data-theme="dark"] .shape-card-tools img[src*="openai-icon"],
[data-theme="dark"] .shape-card-tools img[src*="notion-icon"],
[data-theme="dark"] .shape-card-tools img[src*="github-icon"],
[data-theme="dark"] .orbit-item img[src*="openai-icon"],
[data-theme="dark"] .orbit-item img[src*="notion-icon"],
[data-theme="dark"] .orbit-item img[src*="github-icon"] {
  filter: invert(1);
}

/* =====================================================================
 * REDUCED-MOTION RESPECT
 * Drop animation/transition durations to ~zero for users who request it.
 * Reveal-from-opacity animations would otherwise leave content invisible —
 * force them to their final state.
 * Keyframes and animation declarations remain in the stylesheet; only
 * users with this preference set get the reduced experience.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   MOBILE SWEEP — 2026-05-01
   Cleanup pass after the home structural reorder. Tightens:
     · global section padding on tablet/phone (was clamp 96–140 → halved)
     · bento-cell padding (was 34px desktop with no mobile override)
     · premium-hero compare-bars (the bar was getting squeezed at 320px)
     · orbit-stage scale on phone (200px radius items were cropping)
     · alarm-stats stat-list label spacing
   Additive only. Desktop unchanged. Builds on existing 768/480 blocks.
   ============================================================ */

/* ---- Tablet & below ≤ 768px ----------------------------------- */
@media (max-width: 768px) {
  /* Section breathing — desktop kept at clamp(96px, 10vw, 140px).
     Half that on tablet/phone so the page doesn't feel padded-out
     while content within sections is dense. */
  section { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
  section.tight { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); }

  /* Bento cells: 34px desktop padding wastes space on phone. */
  .bento-cell { padding: 24px; }
  .bento-cell .b-label { margin-bottom: 14px; font-size: 11px; }
  .bento-cell .b-body { margin-top: 12px; font-size: 13.5px; }
  .bento-cell .b-foot { padding-top: 18px; }
}

/* ---- Phone ≤ 480px -------------------------------------------- */
@media (max-width: 480px) {
  /* Even tighter section breathing on small phones. */
  section { padding-top: clamp(48px, 9vw, 72px); padding-bottom: clamp(48px, 9vw, 72px); }

  /* Bento cells — final tightening + sharper radius on small screens. */
  .bento-cell { padding: 20px; border-radius: 12px; }
  .bento-cell h3 { font-size: 17px; line-height: 1.2; }
  .bento-cell .b-label { margin-bottom: 10px; font-size: 10.5px; }
  .bento-cell .b-body { font-size: 13px; margin-top: 10px; }
  .bento-cell .b-foot { padding-top: 14px; }

  /* Compare-bars on premium-hero — the 50/46px label cols ate the
     bar at 320–360px viewports. Trim the label cols so the bar
     reads as a bar, not a sliver. */
  .compare-bars .row {
    grid-template-columns: 38px 1fr 42px;
    gap: 8px;
    font-size: 10.5px;
  }
  .compare-bars .pct { font-size: 11.5px; }

  /* Orbit (Tools section): radii are inline px (110/200) so the rings
     overflow a 320–400px viewport. Scale the whole stage proportionally
     and pull the surrounding card up to absorb the scaled-out gap. */
  .orbit-stage {
    transform: scale(0.74);
    transform-origin: top center;
    margin-bottom: -64px;
  }
  .orbit-card { padding: 14px 12px; }

  /* Alarm-stats list — keep the big numeral and trailing label readable
     when stat-list goes single-column. */
  .stat-list { gap: 4px; }
  .stat-list .rn { font-size: 26px; }
  .stat-list .rl { font-size: 13px; line-height: 1.45; }
  .stat-list .rt { gap: 4px; }
}

/* ============================================================
   MOBILE PROCESS-FLOW — left-aligned timeline (track on the side)
   Track runs down the LEFT, dots sit on the track, text reads
   to the RIGHT of each dot. Whole timeline centered on the page
   as a group via max-width + auto margins, but internally each
   step is a row (icon | text) so the track never crosses text.
   Overrides the row-rule at line 4915 by source order.
   ============================================================ */
@media (max-width: 760px) {
  /* Reset scroll behavior; size and center the timeline as a group */
  .process-flow {
    overflow: visible;
    margin-inline: auto;
    padding-inline: 0;
    padding-bottom: 0;
    max-width: min(440px, 100%);
    scroll-snap-type: none;
  }

  /* Vertical track on the LEFT, behind the dots */
  .process-track {
    display: block;
    left: calc(var(--process-node) / 2 - 1px);
    right: auto;
    transform: none;
    top: calc(clamp(16px, 3vw, 24px) + var(--process-node) / 2);
    bottom: clamp(16px, 3vw, 24px);
    width: 2px;
    height: auto;
  }
  .process-track-fill {
    background: linear-gradient(180deg,
      var(--mint) 0%, var(--mint) 33%,
      var(--sky)  33%, var(--sky)  66%,
      var(--peach) 66%, var(--peach) 100%);
    width: 100%;
    height: var(--process-progress);
    transition: height 0.7s cubic-bezier(.25,.7,.3,1);
  }

  /* Stack steps vertically; each step is row-layout */
  .process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
    width: auto;
  }
  .process-step {
    flex: initial;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: none;
  }
  .process-node { margin: 0; flex: 0 0 auto; }
  .process-content {
    padding-top: 6px;
    max-width: none;
    flex: 1 1 auto;
  }

  /* Step number tucked just below the node, centered under it
     (sits in the vertical track gutter — does NOT overlap text) */
  .process-num {
    bottom: -16px;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
}

/* ============================================================
   MOBILE NAV-TO-HERO GAP — close the 12px sliver between the
   bottom of the (52px) mobile nav and the page's 64px top
   padding. Match page padding-top to the nav-inner height so
   the hero begins flush under the nav.
   ============================================================ */
@media (max-width: 480px) {
  .page { padding-top: 52px; }
}

/* ============================================================
   FOCUS-PASS DARK-MODE & MATRIX FIXES — 2026-05-01
   Bundle: split-card brown wash, quote-block CTA invisible button,
   accent-ink labels going dark in dark mode, orbit centering, and
   a mobile-friendly card-stack version of the role proficiency
   matrix on the Enterprise page.
   ============================================================ */

/* ---- .split-card dark-mode: replace the brown/green oklch wash
        with a clean elevated surface. .down reads as RED (hue 18),
        .up reads as GREEN (hue 160). Hue 35 felt orangey, dropped
        to 18 for a cleaner red signal on the decline card. -------- */
[data-theme="dark"] .split-card.down {
  background: oklch(0.18 0.06 18);
  border-color: oklch(0.36 0.14 18);
}
[data-theme="dark"] .split-card.up {
  background: oklch(0.17 0.04 160);
  border-color: oklch(0.32 0.08 160);
}

/* ---- .quote-block (closing CTA on home + "Soon every job posting
        will say AI-Native preferred" block). The secondary "Compare
        paths" button has color:var(--bg) inline — in dark mode that
        renders as near-black on dark bg-2, invisible. Force readable
        cream text + flip the primary "Start learning" button so it
        stays high-contrast on the dark surface. ------------------- */
[data-theme="dark"] .quote-block .btn[style*="color:var(--bg)"],
[data-theme="dark"] .quote-block .btn[style*="color: var(--bg)"] {
  color: var(--ink) !important;
  border-color: var(--ink-3) !important;
}
[data-theme="dark"] .quote-block .btn[style*="background:var(--bg)"],
[data-theme="dark"] .quote-block .btn[style*="background: var(--bg)"] {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* ---- Accent-ink TEXT colors that go muddy-dark in dark mode.
        Promote these to the bright pastel --accent so labels and
        small marks read on the dark surface. ---------------------- */
[data-theme="dark"] .shape-card .shape-card-label,
[data-theme="dark"] .shape-card .shape-card-cta,
[data-theme="dark"] .path-card .path-num,
[data-theme="dark"] .path-banner .path-num {
  color: var(--accent);
}

/* ---- Orbit re-centering: assert the stage centers in its card and
        the center node sits at exact 50/50 even after the mobile
        scale transform. Belt-and-suspenders against any residual
        margin/transform-origin offsets. -------------------------- */
.orbit-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.orbit-stage { margin-left: auto; margin-right: auto; }
.orbit-center { will-change: transform; }

/* ---- Role proficiency matrix (Enterprise page) -------------------
   Desktop: 5-col grid (role · builder · pro · dev · bar)
   Mobile (≤768px): each role becomes a card-style stack with the
   role name as the headline and each track requirement as a
   labeled row. Hides the column header on mobile.
   ---------------------------------------------------------------- */
.role-matrix {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}
.role-matrix-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr;
  padding: 18px 24px;
  background: var(--bg-2);
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.role-matrix-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr;
  padding: 22px 24px;
  border-top: 1px solid var(--hairline);
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
}
.role-matrix-row .role-name { font-weight: 500; color: var(--ink); }
.role-matrix-row .role-bar { font-weight: 600; color: var(--ink); }
.role-matrix-row .role-cell-na { color: var(--ink-3); font-size: 13px; }

@media (max-width: 768px) {
  .role-matrix-head { display: none; }
  .role-matrix-row {
    display: block;
    padding: 18px 18px 16px;
    grid-template-columns: none;
  }
  .role-matrix-row .role-name {
    display: block;
    font-size: 16px;
    margin-bottom: 14px;
  }
  .role-matrix-row .role-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13.5px;
  }
  .role-matrix-row .role-cell::before {
    content: attr(data-label);
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    min-width: 96px;
  }
  .role-matrix-row .role-bar {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--hairline);
    font-size: 14px;
  }
  .role-matrix-row .role-bar::before {
    content: 'PROFICIENCY BAR · ';
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-right: 6px;
  }
}

/* ============================================================
   BRAND-LOGO VECTOR — wordmark "columba" + 3 colored dots
   stacked. Replaces the PNG (which baked light-mode colors and
   needed an ugly invert+hue-rotate filter to fake dark mode).
   Wordmark uses currentColor (var(--ink) cascades), dots use
   --mint/--sky/--peach so they auto-adapt per theme.
   ============================================================ */
.brand-logo--vector {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  height: auto !important;          /* override existing .brand-logo height */
  line-height: 1;
}
.brand-logo--vector .brand-text {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: block;
}
.brand-logo--vector .brand-dots {
  display: block;
  width: 36px;
  height: auto;
}
.nav .brand-logo--vector { height: auto !important; }
.nav .brand-logo--vector .brand-text { font-size: 28px; }
.nav .brand-logo--vector .brand-dots { width: 38px; }

/* Footer brand stays modest */
footer .brand-logo--vector .brand-text { font-size: 22px; }
footer .brand-logo--vector .brand-dots { width: 32px; }

@media (max-width: 768px) {
  .nav .brand-logo--vector .brand-text { font-size: 21px; }
  .nav .brand-logo--vector .brand-dots { width: 30px; }
}
@media (max-width: 480px) {
  .nav .brand-logo--vector .brand-text { font-size: 18px; }
  .nav .brand-logo--vector .brand-dots { width: 26px; }
}

/* Quote-block .dots SVG icon — in dark mode swap to the brighter
   pastel variant so the brand mark in the corner matches the rest
   of the page's dark-mode palette. */
[data-theme="dark"] .quote-block .dots {
  background-image: url('assets/columba_icon_dark.svg');
}