/* ARC-103 mockup , token stylesheet v2.
   Single source of every color, size, space, motion. No hex outside this file. */

:root {
  --color-bg:          #0A0A0B;
  --color-bg-raised:   #131316;
  --color-bg-inset:    #0E0E10;
  --color-line:        rgba(255,255,255,0.08);
  --color-line-strong: rgba(255,255,255,0.16);
  --color-ink:         #F5F5F6;
  --color-ink-body:    #C9C9CE;
  --color-ink-muted:   #8E8E95;
  --color-accent:      #3B82F6;
  --color-accent-soft: rgba(59,130,246,0.12);

  --text-display: clamp(3rem, 2rem + 5vw, 6.5rem);
  --text-h2:      clamp(2.25rem, 1.75rem + 2.2vw, 3.75rem);
  --text-h3:      clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --text-lead:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-body:    clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --text-sm:      1rem;
  --text-label:   0.875rem;

  --space-section: clamp(5rem, 3rem + 7vw, 11rem);
  --container-max: 1280px;
  --gutter: 24px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 26px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms; --dur-reveal: 900ms;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-ink-body);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (min-width: 1100px) { body { line-height: 1.72; } }
h1,h2,h3 { color: var(--color-ink); margin: 0; font-weight: 700; }
h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: var(--text-h3); line-height: 1.15; letter-spacing: -0.01em; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Gravity margin rule: content gets 80% of the viewport with 10% either side;
   90/5/5 for the wide, data-dense bands (showcases, plan grids, catalogs).
   No max-width on the wrap and none on a paragraph. Readability is bought back
   with line-height below, never with width. */
.container { width: 100%; margin-inline: 0; padding-inline: 10%; }
.wide { padding-inline: 5%; }
@media (max-width: 700px) { .container, .wide { padding-inline: 6vw; } }
.section { padding-block: var(--space-section); position: relative; }
.lede { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-body); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-label); line-height: 1.5;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 22px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content:""; width: 28px; height: 1px; background: var(--color-accent); flex: none; }

/* ---------- Arc lockup ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.wordmark img { height: 30px; width: auto; }
.wordmark-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-ink); }
.wordmark-by { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 19px 30px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.975); }
.btn-primary { background: var(--color-ink); color: var(--color-bg); }
.btn-primary:hover { background: #FFFFFF; transform: translateY(-2px); }
.btn-ghost { color: var(--color-ink); border-color: var(--color-line-strong); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

/* ---------- Header ---------- */
.header { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding-block: 22px; transition: background-color 300ms var(--ease-out); }
.header.stuck { background: rgba(10,10,11,0.72); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--color-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-body); }
.nav a:hover { color: var(--color-ink); }
.nav .btn { padding: 13px 24px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-block: 200px var(--space-section); overflow: hidden; }
.hero-media { position: absolute; inset: -6% 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 26s var(--ease-out) infinite alternate; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.16) translate3d(-1.5%,-1.5%,0); } }
/* ONE scrim. Left to right. Nothing stacked on top of it.

   The stops are Colaska's 84/68/28/8/24, ported rather than re-derived. The
   previous version here stacked a horizontal ramp under a vertical one, which
   multiplied: the right edge of the frame, where the subject lives, rendered at
   (1-0.30) x (1-0.55) = 0.315 effective visibility. Two layers doing one job,
   and the photograph paid for it.

   Contrast now lives on the glyphs instead. The ramp seats the frame and is
   transparent before the subject; .hero-copy carries a two-stop text-shadow
   that holds the copy without touching the picture. The tight stop is the
   contrast edge doing the legibility work; the wide soft one is a halo that
   lifts the word off a busy background so the type does not shimmer.

   The seam into the page below is a shallow strip on .hero::after, sized to the
   join. It is not a second dimmer over the image. */
.hero-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(10,10,11,0.84) 0%,
    rgba(10,10,11,0.68) 28%,
    rgba(10,10,11,0.28) 58%,
    rgba(10,10,11,0.08) 78%,
    rgba(10,10,11,0.24) 100%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; z-index: 1;
  background: linear-gradient(0deg, var(--color-bg) 6%, rgba(10,10,11,0)); pointer-events: none; }
.hero-copy { text-shadow: 0 1px 2px rgba(6,8,10,0.92), 0 2px 14px rgba(6,8,10,0.68); }
/* Narrow viewports put the copy over the subject, so the ramp turns vertical. */
@media (max-width: 1023px) {
  .hero-scrim { background: linear-gradient(0deg, rgba(10,10,11,0.88) 12%, rgba(10,10,11,0.62) 55%, rgba(10,10,11,0.34) 100%); }
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 60%; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 30px; }

.line { display: block; overflow: hidden; }
.line > span { display: block; transform: translateY(105%); animation: lineUp 1100ms var(--ease-out) forwards; }
.line:nth-child(2) > span { animation-delay: 110ms; }
.line:nth-child(3) > span { animation-delay: 220ms; }
@keyframes lineUp { to { transform: translateY(0); } }
.fade-up { opacity: 0; transform: translateY(22px); animation: fadeUp 900ms var(--ease-out) forwards; }
.d1 { animation-delay: 480ms; } .d2 { animation-delay: 640ms; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.scroll-hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); }
.scroll-hint::after { content:""; display: block; width: 1px; height: 40px; margin: 12px auto 0; background: linear-gradient(var(--color-ink-muted), transparent); animation: drop 2.2s var(--ease-out) infinite; transform-origin: top; }
@keyframes drop { 0%{transform:scaleY(0);opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* ---------- Scroll reveal ---------- */
/* Body copy is visible with no JavaScript at all. The hidden resting state is
   opt-in: the inline head script stamps .js on <html> before first paint, so a
   failed script, a crawler that does not execute, or a blocked bundle all leave
   the page fully readable instead of transparent. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 90ms; } .reveal[data-d="2"] { transition-delay: 180ms; }
.reveal[data-d="3"] { transition-delay: 270ms; } .reveal[data-d="4"] { transition-delay: 360ms; }
.reveal[data-d="5"] { transition-delay: 450ms; } .reveal[data-d="6"] { transition-delay: 540ms; }

/* ---------- Platform showcase ---------- */
.showcase { position: relative; }
.showcase-frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-line);
  box-shadow: 0 60px 140px -40px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(255,255,255,0.03);
  transform: perspective(2200px) rotateX(9deg) scale(0.95); transform-origin: 50% 0%;
  transition: transform 1400ms var(--ease-out);
}
.showcase-frame.in { transform: perspective(2200px) rotateX(0deg) scale(1); }
.glow { position: absolute; inset: 6% 16% auto; height: 360px; z-index: 0; filter: blur(90px); pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, var(--color-accent-soft), transparent 70%); }

/* ---------- Course catalog ---------- */
.courses { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .courses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .courses { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.course { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-raised);
  border: 1px solid var(--color-line); transition: transform 500ms var(--ease-out), border-color 300ms var(--ease-out); }
.course:hover { transform: translateY(-6px); border-color: var(--color-accent); }
.course-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.course-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); filter: saturate(0.82) contrast(1.05); }
.course:hover .course-media img { transform: scale(1.07); }
.course-media::after { content:""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,0.92) 4%, rgba(10,10,11,0.10) 62%); }
.course-tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-mono);
  font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink);
  background: rgba(10,10,11,0.66); backdrop-filter: blur(10px); border: 1px solid var(--color-line-strong);
  padding: 7px 12px; border-radius: 999px; }
.course-body { padding: 22px 24px 26px; }
.course-body h3 { font-size: 1.375rem; margin-bottom: 8px; }
.course-meta { display: flex; gap: 16px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-muted); letter-spacing: 0.06em; }
.bar { height: 3px; border-radius: 999px; background: var(--color-line); margin-top: 20px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--color-accent); width: 0; transition: width 1400ms var(--ease-out); }

/* ---------- Progress ring ---------- */
.ring { display: grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--color-line); }
.ring .fill { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 402; stroke-dashoffset: 402; transition: stroke-dashoffset 1800ms var(--ease-out); }
.ring.in .fill { stroke-dashoffset: 141; }
.ring-num { position: absolute; font-size: 2.5rem; font-weight: 700; color: var(--color-ink); letter-spacing: -0.03em; }

/* ---------- Split / cards ---------- */
.split { display: grid; gap: 56px; align-items: start; }
.split-center { align-items: center; }
@media (min-width: 1024px) { .split-2 { grid-template-columns: 1fr 1fr; gap: 88px; } .split-40-60 { grid-template-columns: 5fr 7fr; gap: 88px; } }
.card { background: var(--color-bg-raised); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 40px; }
.card h3 { margin-bottom: 14px; }
.rows { display: flex; flex-direction: column; }
.row { padding-block: 34px; border-top: 1px solid var(--color-line); }
.row:last-child { border-bottom: 1px solid var(--color-line); }
.row-index { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-accent); letter-spacing: 0.14em; margin-bottom: 14px; }
.row h3 { margin-bottom: 10px; }
.row p { line-height: 1.7; }

.fork { display: grid; gap: 24px; }
@media (min-width: 1024px) { .fork { grid-template-columns: 1fr 1fr; } }
.fork-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line);
  min-height: 440px; display: flex; align-items: flex-end; transition: transform 500ms var(--ease-out), border-color 300ms var(--ease-out); }
.fork-card:hover { transform: translateY(-6px); border-color: var(--color-accent); }
.fork-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); filter: saturate(0.8); }
.fork-card:hover img { transform: scale(1.06); }
.fork-card::after { content:""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,0.95) 12%, rgba(10,10,11,0.35) 70%); }
.fork-body { position: relative; z-index: 2; padding: 40px; }
.fork-body h3 { margin-bottom: 12px; }
.fork-arrow { display: inline-block; margin-top: 24px; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.fork-card:hover .fork-arrow { color: var(--color-accent); }

.statement { text-align: center; }
.statement p { font-size: var(--text-h3); color: var(--color-ink); line-height: 1.3; letter-spacing: -0.015em; }

.footer { border-top: 1px solid var(--color-line); padding-block: 72px; }
.footer-inner { display: grid; gap: 40px; }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 64px; } }
.footer p, .footer a { font-size: var(--text-sm); color: var(--color-ink-muted); }
.footer a { display: block; margin-bottom: 14px; }
.footer a:hover { color: var(--color-ink); }
/* .footer a{display:block} was flattening the footer lockup, so the mark, the
   name and the descriptor stacked and overlapped. The lockup keeps its own row. */
.footer .wordmark { display: inline-flex; }
.footer-links-title { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; }

/* ---------- Form / tier / steps ---------- */
.field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.field label { font-size: var(--text-sm); color: var(--color-ink-body); font-weight: 500; }
.input { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-ink); background: var(--color-bg-inset);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); padding: 16px 18px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.input::placeholder { color: var(--color-ink-muted); }
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
textarea.input { min-height: 120px; resize: vertical; }
.tier { max-width: 500px; margin-inline: auto; background: var(--color-bg-raised); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 46px; }
.tier-name { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 22px; }
.tier-priceline { font-size: var(--text-body); color: var(--color-ink); padding-block: 24px; border-block: 1px solid var(--color-line); margin-bottom: 26px; }
.tier-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tier-list li { display: flex; gap: 12px; font-size: var(--text-sm); color: var(--color-ink-body); }
.tier-list li::before { content: "\00B7"; color: var(--color-ink-muted); }
.steps { display: grid; gap: 32px; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.step { border-top: 1px solid var(--color-line); padding-top: 28px; }
.step-num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 16px; }
.step h3 { margin-bottom: 10px; }

@media (max-width: 1023px) {
  .hero-copy { max-width: 100%; }
  .nav-hide { display: none; }
  .nav { gap: 18px; }
}
/* The "by Gravity" lockup and the one CTA collide in a 375px header. The CTA is
   the act and it stays; the descriptor steps aside. */
@media (max-width: 560px) { .wordmark-by { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .line > span, .fade-up { transform: none; opacity: 1; }
  .showcase-frame { transform: none; }
}

/* ==========================================================================
   ARC-104 extension. Additive only. Nothing above this line is modified.
   Adds: interaction feedback, the pricing block, the editorial band,
   the art row, the Course Studio card and the centered closer.
   ========================================================================== */

/* In-page anchors must land clear of the fixed header. */
section[id], [id].section { scroll-margin-top: 104px; }

/* ---------- Interaction feedback (no stuck UI) ---------- */
.pagebar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100;
  background: var(--color-accent); opacity: 0; pointer-events: none;
  transition: width 300ms var(--ease-out), opacity 200ms linear;
}
.pagebar.on   { width: 74%; opacity: 1; }
.pagebar.done { width: 100%; opacity: 0; }

.nav a { transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.nav a:active { opacity: 0.62; }
.nav a:focus-visible,
.wordmark:focus-visible,
.course:focus-visible,
.fork-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }

.course:active, .fork-card:active { transform: translateY(-2px) scale(0.995); }

/* <button> CTAs must match the anchor CTAs exactly: the UA supplies a
   ButtonFace background and its own font, which neither .btn nor .btn-ghost
   overrode. Scoped to button so the anchor variants above are untouched. */
.btn { font-family: var(--font-sans); -webkit-appearance: none; appearance: none; }
button.btn { background: transparent; color: var(--color-ink); }
button.btn.btn-primary { background: var(--color-ink); color: var(--color-bg); }
button.btn.btn-primary:hover { background: #FFFFFF; }

.btn.is-busy { pointer-events: none; opacity: 0.72; }
.btn.is-busy::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: arcspin 680ms linear infinite;
}
@keyframes arcspin { to { transform: rotate(360deg); } }

/* ---------- Long hero headline (more measure, never smaller body) ---------- */
.hero h1.h1-long { font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4.75rem); line-height: 1.04; max-width: 20ch; }

/* The scroll hint collides with the hero CTAs once they wrap. */
@media (max-width: 767px) { .scroll-hint { display: none; } }

/* ---------- Centered closer ---------- */
.closer { text-align: center; }
.closer h2 { max-width: 22ch; margin-inline: auto; }  /* heading measure, not a paragraph */
.closer .lede { margin-inline: auto; margin-top: 26px; }
.closer .cta-row { justify-content: center; }

/* ---------- Editorial band ---------- */
.band { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 560px; padding-block: var(--space-section); }
.band-media { position: absolute; inset: 0; z-index: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) contrast(1.12) brightness(0.82); }
.band-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(10,10,11,0.84) 0%,
    rgba(10,10,11,0.68) 28%,
    rgba(10,10,11,0.28) 58%,
    rgba(10,10,11,0.08) 78%,
    rgba(10,10,11,0.24) 100%);
}
.band > .container > * { text-shadow: 0 1px 2px rgba(6,8,10,0.92), 0 2px 14px rgba(6,8,10,0.68); }
/* Narrow viewports put the subject behind the copy, so the scrim goes flat. */
@media (max-width: 900px) {
  .band-scrim {
    background: linear-gradient(0deg, var(--color-bg) 1%, rgba(10,10,11,0.86) 52%, rgba(10,10,11,0.66) 100%);
  }
}
.band > .container { position: relative; z-index: 2; }
.band .lede { line-height: 1.55; }

/* academy-catalog.jpg carries a half-cut tab label along its top edge.
   Trim it rather than show a clipped word. */
.trim-top { width: 100%; aspect-ratio: 2200 / 1150; object-fit: cover; object-position: 50% 100%; }

/* ---------- Art row ---------- */
.artrow { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .artrow { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.artrow figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); }
.artrow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.8) contrast(1.04); }

/* ---------- Course Studio card ---------- */
.studio {
  border: 1px solid var(--color-accent); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--color-accent-soft), rgba(19,19,22,0) 46%), var(--color-bg-raised);
  padding: clamp(30px, 1.5rem + 2.6vw, 64px);
}
.studio p { line-height: 1.7; }
.studio-note {
  margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--color-line);
  font-size: var(--text-body); color: var(--color-ink-body); line-height: 1.7;
}
.studio-note b { color: var(--color-ink); font-weight: 600; }

/* ---------- Pricing plans ---------- */
.plans { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 920px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } }
.plan {
  display: flex; flex-direction: column;
  background: var(--color-bg-raised); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  transition: border-color 300ms var(--ease-out), transform 500ms var(--ease-out);
}
.plan:hover { border-color: var(--color-line-strong); }
.plan-featured {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, var(--color-accent-soft), rgba(19,19,22,0) 40%), var(--color-bg-raised);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.95);
}
/* Elevation by padding, never by transform: .reveal.in resets transform and
   would silently cancel it. */
@media (min-width: 920px) { .plan-featured { padding: 48px 34px 40px; } }
.plan-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.plan-for { margin-top: 10px; font-size: var(--text-sm); color: var(--color-ink-muted); }
/* Three rungs whose positioning lines run to three lines each: without a
   common floor the prices sit at three different heights and read as three
   unrelated cards. */
@media (min-width: 920px) { .plan-for { min-height: 4.8em; } }
.plan-price {
  margin-top: 26px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: clamp(2.75rem, 2.1rem + 1.7vw, 3.5rem); line-height: 1; font-weight: 700;
  letter-spacing: -0.03em; color: var(--color-ink);
}
.plan-per { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-ink-muted); }
.plan-alt { margin-top: 12px; font-size: var(--text-sm); color: var(--color-ink-body); }
.plan-list { list-style: none; margin: 28px 0 0; padding: 0; }
.plan-list li { font-size: var(--text-sm); color: var(--color-ink-body); padding-block: 12px; border-top: 1px solid var(--color-line); }
.plan-list li:first-child { border-top: 0; }
.plan-list b { color: var(--color-ink); font-weight: 600; }
.plan-foot { margin-top: auto; padding-top: 30px; }
.plan-foot .btn { width: 100%; }
.plans-note { margin-top: 52px; font-size: var(--text-body); line-height: 1.7; color: var(--color-ink-body); }
.plans-note b { color: var(--color-ink); font-weight: 600; }

/* ==========================================================================
   ARC-325 extension. Additive only.
   Adds: the email-capture act, the certainty strip, the named enemy, the
   objection card, the numbered mechanism, the outcome grid, the named
   promise, the questions grid, the two-rung plan grid, the course-build
   rate table and the routing doors with their price anchors.
   ========================================================================== */

/* ---------- Beat 2 and beat 11: the act. One label, one target. ---------- */
/* The field is labelled in view rather than by a placeholder attribute. Specimen
   text inside a box reads as a form somebody already answered, and half of those
   get submitted that way. */
.capture-label {
  display: block; margin-top: 34px; font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-body);
}
.capture-label + .capture { margin-top: 14px; }
.closer .capture-label { text-align: center; }
.capture { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; align-items: stretch; }
.capture .input {
  flex: 1 1 300px; min-width: 0; font-size: var(--text-sm);
  padding: 15px 18px; border-radius: var(--radius-md);
}
.capture .btn { flex: 0 0 auto; }
.capture-note { margin-top: 16px; font-size: var(--text-sm); color: var(--color-ink-muted); }

/* The honeypot that sits inside every waitlist form. Hidden from every visitor
   and from assistive technology, left in the DOM because a script that fills
   every input it finds will fill this one and be refused.

   Hidden by the CLIP pattern rather than by an off-screen coordinate: a
   negative offset on an absolutely positioned child is one stylesheet change
   away from widening a page, and this site is held to zero horizontal overflow
   at 1280, 768 and 375. A 1px clipped box cannot widen anything. */
.hp {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.hero .capture-note { color: var(--color-ink-body); }
.capture-said { margin-top: 18px; font-size: var(--text-body); color: var(--color-ink); font-weight: 600; }
.capture-said a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.capture-said[hidden] { display: none; }

/* The certainty strip that sits beside the act. */
.certainty { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding: 0; list-style: none; }
.certainty li {
  font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-ink-body); display: flex; align-items: center; gap: 10px;
}
.certainty li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); flex: none; }

/* ---------- Beat 3: the objection, named ---------- */
.objection {
  margin-top: 56px; background: var(--color-bg-raised); border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-lg);
  padding: clamp(28px, 1.4rem + 2.2vw, 52px);
}
.objection-said { font-size: var(--text-h3); color: var(--color-ink); line-height: 1.25; letter-spacing: -0.015em; }
.objection-answer { margin-top: 24px; font-size: var(--text-body); line-height: 1.7; color: var(--color-ink-body); }

/* ---------- Beat 5: how it works ---------- */
.steps { display: grid; gap: 28px; margin-top: 60px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.step-card { border-top: 1px solid var(--color-line-strong); padding-top: 26px; }
.step-card h3 { font-size: var(--text-h3); margin-bottom: 14px; }
.step-card p { font-size: var(--text-body); line-height: 1.7; color: var(--color-ink-body); }

/* ---------- Beat 4 and 6: outcomes ---------- */
.outcomes { display: grid; gap: 20px; margin-top: 60px; }
@media (min-width: 760px)  { .outcomes { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1200px) { .outcomes { grid-template-columns: repeat(4, 1fr); } }
.outcome {
  background: var(--color-bg-raised); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: 34px 30px;
}
.outcome h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.outcome p { font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-body); }

/* ---------- Beat 8: the promise with a name ---------- */
.promise {
  margin-top: 0; background: var(--color-bg-raised); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xl); padding: clamp(32px, 1.6rem + 2.8vw, 64px);
}
.promise-name { font-size: var(--text-h3); color: var(--color-ink); letter-spacing: -0.02em; margin-bottom: 20px; font-weight: 700; }
.promise p { font-size: var(--text-body); line-height: 1.7; color: var(--color-ink-body); }
.promise p + p { margin-top: 18px; }

/* ---------- Beat 10: the questions. Every answer visible. ---------- */
.questions { display: grid; gap: 34px; margin-top: 60px; }
@media (min-width: 900px) { .questions { grid-template-columns: repeat(2, 1fr); gap: 44px 56px; } }
.question h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.question p { font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-body); }

/* ---------- The plan grid at two rungs ---------- */
@media (min-width: 920px) { .plans-2 { grid-template-columns: repeat(2, 1fr); } }
.plan-group { margin-top: 12px; font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.plan-record { margin-top: 26px; padding: 18px 0; border-block: 1px solid var(--color-line);
  font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-body); }
.plan-record b { display: block; font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 8px; font-weight: 500; }
.plan-quote { margin-top: 28px; padding: 30px 34px; background: var(--color-bg-raised);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; }
.plan-quote b { color: var(--color-ink); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.plan-quote span { font-size: var(--text-sm); color: var(--color-ink-body); line-height: 1.6; }

/* ---------- The course-build rate table ---------- */
.rates { margin-top: 52px; width: 100%; border-collapse: collapse; text-align: left; }
.rates caption { text-align: left; font-size: var(--text-body); line-height: 1.7; color: var(--color-ink-body); padding-bottom: 28px; }
.rates th, .rates td { padding: 20px 20px 20px 0; border-top: 1px solid var(--color-line); vertical-align: top; }
.rates thead th {
  border-top: 0; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); padding-top: 0;
}
.rates tbody th { font-size: var(--text-body); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.rates td { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-body); }
.rates td.rate { font-family: var(--font-mono); font-size: var(--text-body); color: var(--color-ink); white-space: nowrap; font-weight: 500; }
.rates-wrap { overflow-x: auto; }
/* Three columns of prose do not fit a 375px phone: the rate column clipped and
   the description wrapped one word per line. Below 700px each course becomes a
   block, name and rate on one line, the description under it. */
@media (max-width: 700px) {
  .rates, .rates caption, .rates tbody, .rates tr, .rates th, .rates td { display: block; width: 100%; }
  .rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rates tr { border-top: 1px solid var(--color-line); padding-block: 22px; }
  .rates tr:first-child { border-top: 0; }
  .rates th, .rates td { border-top: 0; padding: 0; }
  .rates tbody th { font-size: var(--text-h3); letter-spacing: -0.01em; white-space: normal; }
  .rates td.rate { font-size: var(--text-lead); margin-top: 6px; }
  .rates td { margin-top: 10px; }
}

/* ---------- Routing doors carry the entry figure ---------- */
.fork-price { display: block; margin-top: 16px; font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--color-ink); letter-spacing: 0.02em; }

/* ---------- Waitlist page ---------- */
.standalone { min-height: 72vh; display: flex; align-items: center; padding-block: clamp(6rem, 4rem + 8vw, 12rem); }
.standalone .capture { max-width: 640px; }
.standalone .certainty { margin-top: 44px; }

/* A label a screen reader reads and a sighted visitor does not need, on a
   single-field form whose button already says what it does. Never display:none,
   which removes it from the accessibility tree along with the pixels. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}