/* ------------------------------------------------------------------
   Virra 2.0 — virra.com home (artist-focused)
   System: warm-paper editorial. Fraunces display, General Sans body,
   JetBrains Mono metadata. One accent: Virra violet.
   Calibrated 2026-08-30 against godly.design features: Griffin (numbered
   linear flow for the mechanism), Deck (tabbed state toggle for the process),
   Lightspark (quantified proof placed directly under the hero).
------------------------------------------------------------------- */

/* ---------- self-hosted fonts (assets/fonts) ---------- */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the 92px h1 does not reflow when Fraunces swaps in. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --paper:   #FAF8F4;
  --surface: #F1EDE6;
  --ink:     #141210;
  --ink-dark-bg: #0E0D0B;
  --muted:   #524C46;   /* AAA on paper and surface; body copy lives here */
  --line:    rgba(20, 18, 16, 0.13);
  --line-soft: rgba(20, 18, 16, 0.07);

  /* Virra violet. --accent is the deepened, AA-safe version of the brand hue for
     light backgrounds; --accent-soft is the brand violet itself, for the dark band. */
  --accent:      #5B40E7;
  --accent-ink:  #4A32C9;
  --accent-text: #4A32C9;
  --accent-soft: #8F7CF2;
  --danger:      #A6402F;

  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --r-s: 8px;
  --r-m: 12px;

  /* One measure for the whole page. Every section, head and grid sits on it, and
     the 12-column grid is the only place widths come from. */
  --maxw: 1200px;
  --gutter: 32px;
  --col-gap: 32px;

  /* vertical rhythm: one section step, one head step */
  --s-section: 144px;
  --s-head: 64px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

html { background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; }
img { max-width: 100%; }

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

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 440;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(48px, 7.4vw, 104px); line-height: 0.98; font-variation-settings: "opsz" 144; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; font-variation-settings: "opsz" 72; }
h3 { font-size: 22px; line-height: 1.25; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
.hero h1 em { color: var(--accent-text); }
/* How far above the line the period appears before it falls. Declared here, not on .dot, because an
   em on .dot resolves against the period's own larger font-size. Bounded because the space above the
   headline is finite: measured clearance to the kicker is 59px at a 48px headline and 84px at 104px,
   so the drop tracks the headline but never reaches the kicker. */
.hero h1 { --dot-drop: clamp(46px, calc(0.43em + 29px), 76px); }

/* ---------- the signature moment: "Unignorable" ----------
   Rare/first-time tier (once per visit), purpose: delight in service of the word.
   Letters rise in on a 45ms stagger (transform + opacity only), a hand-drawn stroke
   draws itself underneath once they land, and every nine seconds one quiet wave runs
   through the letters. Reduced motion: no letter motion, the stroke is simply there. */
.hero h1 .dot {
  color: var(--accent-text);
  /* inline-block, not inline: transform has no effect on a non-replaced inline element, which is
     why the bounce below never moved anything. */
  display: inline-block;
  vertical-align: baseline;
}
.u { position: relative; display: inline-block; white-space: nowrap; }
.u .l { display: inline-block; vertical-align: top; --dir: 1; }
.u .l { position: relative; z-index: 1; }
.u .l i { display: inline-block; font-style: inherit; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  /* "Unignorable" appears a letter at a time. Each letter is switched on whole (steps(1)); it
     does not slide, fade or move, and "Become" above it is untouched. */
  .hero-reveal .u .l i { animation: u-strike 1ms steps(1, end) both; animation-delay: calc(140ms + var(--i) * 170ms); }
  @keyframes u-strike { from { opacity: 0; } to { opacity: 1; } }

  /* The period is hidden until the last letter of "Unignorable" has landed, then appears well above
     the line and drops from --dot-drop, which is bounded so it always clears the line without
     crossing the kicker above the headline. Real restitution, e = 0.75, so the apex after each impact is e^2 of the
     one before and the keyframe times are the true flight times rather than an even split. Exactly
     eight bounces, each lower than the last, ending where a period belongs. Falls use an
     accelerating curve, rises a decelerating one. Eight is visible at this restitution: the apexes
     run 45px down to under a pixel on a 160px headline. */
  .hero-reveal .hero h1 .dot { animation: dot-bounce 2112ms both; animation-delay: calc(140ms + var(--letters, 11) * 170ms); }
  @keyframes dot-bounce {
    0% { opacity: 0; transform: translateY(calc(var(--dot-drop) * -1)); }
    0.01% { opacity: 1; transform: translateY(calc(var(--dot-drop) * -1)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    15.63% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    27.35% { transform: translateY(calc(var(--dot-drop) * -0.562500)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    39.07% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    47.86% { transform: translateY(calc(var(--dot-drop) * -0.316406)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    56.65% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    63.24% { transform: translateY(calc(var(--dot-drop) * -0.177979)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    69.83% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    74.78% { transform: translateY(calc(var(--dot-drop) * -0.100113)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    79.72% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    83.43% { transform: translateY(calc(var(--dot-drop) * -0.056314)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    87.14% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    89.92% { transform: translateY(calc(var(--dot-drop) * -0.031676)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    92.70% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    94.79% { transform: translateY(calc(var(--dot-drop) * -0.017818)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    96.87% { transform: translateY(0em); animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
    98.44% { transform: translateY(calc(var(--dot-drop) * -0.010023)); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
    100% { transform: translateY(0em); }
  }



  /* at rest the line is still; the settled floor pins the word and the period */
  .hero-done .u .l i { animation: none; transform: none; opacity: 1; }
  .hero-settled .h1-b, .hero-settled .hero h1 .dot { animation: none; opacity: 1; transform: none; will-change: auto; }
  .hero-settled .u .l i { animation: none; opacity: 1; transform: none; }
}

p { margin: 0; text-wrap: pretty; }

.kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.mono-meta { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); max-width: 68ch; }

/* ---------- buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  padding: 17px 26px;
  border: 1px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-accent { background: var(--accent); color: #FFFFFF; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #2A2622; }
  .btn-accent:hover { background: var(--accent-ink); }
  .btn-ghost:hover { border-color: var(--ink); }
}

.text-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 180ms ease, color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- nav ---------- */

.nav { display: flex; align-items: center; gap: 40px; padding-top: 22px; padding-bottom: 22px; }
.brand { font-family: var(--font-display); font-size: 28px; font-weight: 520; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav-links a { font-size: 15px; font-weight: 480; text-decoration: none; color: var(--muted); transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); } }
/* One-line nav (brand + links + CTA) needs ~723px at the 28px gutter; wrap below that so the
   641-767px band never gets a horizontal scrollbar or a clipped CTA. */
@media (max-width: 767px) {
  .nav { flex-wrap: wrap; gap: 12px 16px; padding-top: 18px; padding-bottom: 14px; }
  .nav-cta { margin-left: auto; order: 2; }
  .nav-links { order: 3; flex: 1 1 100%; margin-left: 0; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-top: 1px solid var(--line-soft); padding-top: 10px; padding-bottom: 2px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 14px; white-space: nowrap; }
}
.nav .btn { padding: 12px 18px; font-size: 14.5px; }
.nav-cta { flex: none; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 5; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: var(--r-s); text-decoration: none; font-size: 14px; }
.skip:focus-visible { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ----------
   Typographic, not a two-column card layout. Kicker, one very large headline
   across the full measure, then a row: the lede on the left seven columns and
   the call to action on the right four, top-aligned. Provenance as a mono rule. */

.hero { padding-top: 44px; padding-bottom: 64px; }
.hero .kicker { margin-bottom: 22px; }
.hero h1 { max-width: none; margin-bottom: 26px; }
.h1-a { display: block; font-size: clamp(32px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.1em; }
.h1-b { display: block; font-size: clamp(64px, 11.4vw, 160px); line-height: 0.9; letter-spacing: -0.045em; white-space: nowrap; }
.hero-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 32px;
  align-items: start;
}
.hero-row .lede { grid-column: 1 / span 7; font-size: 22px; max-width: 34ch; }
.hero-row { row-gap: 22px; }
/* the call to action sits under the subhead in the left columns: desktop attention leans
   left (NN/g, Pernice 2017), and the note beneath the button is the line this reader keeps */
.hero-ctas { grid-column: 1 / span 4; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.hero-ctas .btn { padding: 16px 24px; width: 100%; }
.cta-note { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.cta-watch { align-self: flex-start; margin-top: 10px; font-size: 15.5px; }

.highlights {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px;
  margin-top: 64px;
}
.highlights li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.highlights .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); padding-top: 4px; font-variant-numeric: tabular-nums; }
.highlights p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.highlights strong { display: block; color: var(--ink); font-weight: 520; }

.hero-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hero-provenance span { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line-soft); }
.hero-provenance span:last-child { border-right: 0; padding-right: 0; margin-right: 0; }

/* ---------- sections ---------- */

.section { padding-top: var(--s-section); padding-bottom: 0; }
:where([id]) { scroll-margin-top: 40px; }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: end;
  margin-bottom: var(--s-head);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.section-head > div:first-child { grid-column: 1 / span 8; }
.section-head .lede { grid-column: 9 / span 4; max-width: none; font-size: 17px; }
.section-head h2 { max-width: 16ch; }

/* ---------- mechanism: a drawn loop, then letter tabs ---------- */

.loop-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: end;
  margin-bottom: 64px;
}
.loop-head .mech-name { grid-column: 1 / span 6; }
.loop-head .lede { grid-column: 8 / span 5; max-width: none; font-size: 17px; }
.mech-name { font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -0.025em; line-height: 1.02; font-weight: 440; margin: 0; text-wrap: balance; }
.mech-name em { font-style: italic; color: var(--accent-text); }
/* three stages show discovery, permission-based connection, and repeatable activation.
   The chapter numeral is the anchor of each stage: one loud element, two quiet ones.
   A single hairline threads through all three numerals; the stage name sits on it.
   Rows are a subgrid, so the three paragraphs start on one line whatever 03's heading does. */
.loop {
  --num: clamp(76px, 9vw, 128px);
  --rail-y: calc(var(--num) * 0.4);
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(28px, 4vw, 64px);
}
.loop li {
  position: relative; isolation: isolate; min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 0;
}
.loop li:not(:last-child)::before, .loop li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 0; top: var(--rail-y); width: calc(100% + clamp(28px, 4vw, 64px)); height: 1px; }
.loop li:not(:last-child)::before { background: var(--line); }
.loop li:not(:last-child)::after { background: var(--accent); transform-origin: left; }
.loop .n {
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 1;
  justify-self: start;
  padding: 0 10px 0 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--num);
  font-weight: 440;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.06em;
  line-height: 0.8;
}
.loop li:nth-child(2) .n { color: var(--accent-text); }
.loop-verb {
  position: relative; z-index: 2;
  grid-column: 2; grid-row: 1;
  align-self: start; justify-self: start;
  margin-top: calc(var(--rail-y) - 8px);
  padding: 0 12px 0 14px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase;
  white-space: nowrap;
}
.loop li:nth-child(2) .loop-verb { color: var(--accent-text); }
.loop strong { grid-column: 1 / -1; grid-row: 3; display: block; margin-top: 22px; max-width: 22ch; font-family: var(--font-display); font-size: clamp(19px, 1.65vw, 23px); font-weight: 440; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.loop small { grid-column: 1 / -1; grid-row: 4; display: block; max-width: 34ch; color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-top: 10px; }
/* 801-1000px: the column cannot hold a numeral and BRING THEM WITH YOU on one rail line,
   so every stage name drops under its numeral (all three the same) rather than wrapping. */
@media (min-width: 801px) and (max-width: 1000px) {
  .loop-verb { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; padding: 0; }
  .loop strong { margin-top: 14px; }
}


.mech-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 44px;
  padding-top: 0;
  border-top: 1px solid var(--ink);
  max-width: none;
}
.loop-proof { display: block; min-width: 0; padding: 22px 24px 2px 0; color: inherit; text-decoration: none; }
.loop-proof + .loop-proof { padding-left: 24px; border-left: 1px solid var(--line-soft); }
.loop-proof > span { display: block; margin-bottom: 10px; color: var(--accent-text); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.loop-proof strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 25px); font-weight: 460; letter-spacing: -0.015em; line-height: 1.15; transition: color 160ms ease; }
.loop-proof small { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .loop-proof:hover strong { color: var(--accent-text); } }
.loop-disclaimer { margin-top: 18px; color: var(--muted); font-size: 12.5px; }

/* The section's one authored moment (purpose: explanation). As the loop scrolls into view,
   01 prints, the hairline draws from it to 02, 02 prints, the line draws on to 03, 03 prints,
   then the carry-forward tick strikes in under the band: the loop runs again.
   Scroll-driven on one shared clock, the list's view timeline, scoped to the section so the
   tick can read it (each stage keeps its own clock below 800px). Browsers without scroll-driven
   animations get the same choreography once, on time, the first time the list is on screen
   (the script adds .loop-armed then .is-drawn to the section). Nothing moves once it has landed.
   Reduced motion, no script, or an inactive timeline: the drawn state is simply there. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes draw-line-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes print-num { from { clip-path: inset(-0.1em 100% -0.1em 0); } to { clip-path: inset(-0.1em 0 -0.1em 0); } }
  @keyframes print-num-down { from { clip-path: inset(-0.1em 0 100% 0); } to { clip-path: inset(-0.1em 0 -0.1em 0); } }
  @keyframes settle { from { opacity: 0; } to { opacity: 1; } }
  /* Scroll-scrubbed variant removed: the loop draws once, on first landing, in every browser
     (virra-design: nothing moves once it has landed). */

  @media all {
    .loop-armed .loop .n { clip-path: inset(-0.1em 100% -0.1em 0); }
    .loop-armed .loop li > :not(.n) { opacity: 0; }
    .loop-armed .loop li:not(:last-child)::after { transform: scaleX(0); }
    .is-drawn .loop .n { animation: print-num 520ms var(--ease-out) both; }
    .is-drawn .loop li > :not(.n) { animation: settle 420ms var(--ease-out) both; }
    .is-drawn .loop li:nth-child(2) .n, .is-drawn .loop li:nth-child(2) > :not(.n) { animation-delay: 820ms; }
    .is-drawn .loop li:nth-child(3) .n, .is-drawn .loop li:nth-child(3) > :not(.n) { animation-delay: 1640ms; }
    .is-drawn .loop li:not(:last-child)::after { animation: draw-line 640ms linear both; animation-delay: 360ms; }
    .is-drawn .loop li:nth-child(2)::after { animation-delay: 1180ms; }
    @media (max-width: 800px) {
      .loop-armed .loop .n { clip-path: inset(-0.1em 0 100% 0); }
      .loop-armed .loop li:not(:last-child)::after { transform: scaleY(0); }
      .is-drawn .loop .n { animation-name: print-num-down; }
      .is-drawn .loop li:not(:last-child)::after { animation-name: draw-line-down; }
    }
  }
}

/* T.R.A.C.K.: five letters as tabs, radio-driven so it works without script */
.track-tabs { margin-top: 0; }
.track-tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track-name { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.15; font-weight: 440; margin: 0 0 32px; }
.track-name em { font-style: normal; letter-spacing: 0.02em; color: var(--accent-text); }
.track-letters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  border-top: 1px solid var(--ink);
}
.track-letters label {
  display: block; cursor: pointer; position: relative;
  padding: 20px 0 22px;
  border-top: 2px solid transparent; margin-top: -1px;
  transition: color 180ms ease, border-color 180ms ease;
  color: var(--muted);
}
.track-letters label b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.03em; font-variation-settings: "opsz" 144; }
.track-letters label span { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .track-letters label:hover { color: var(--ink); } }
.track-panels { border-top: 1px solid var(--line); padding-top: 28px; }
.track-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.track-panel strong { grid-column: 1 / span 5; font-family: var(--font-display); font-weight: 440; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1.1; }
.track-panel p { grid-column: 7 / span 6; color: var(--muted); font-size: 17px; }
.track-panel + .track-panel { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
@supports selector(:has(a)) {
  .track-panel { display: none; }
  .track-panel + .track-panel { margin-top: 0; padding-top: 0; border-top: 0; }
  .track-tabs:has(#t1:checked) [data-for="t1"], .track-tabs:has(#t2:checked) [data-for="t2"], .track-tabs:has(#t3:checked) [data-for="t3"],
  .track-tabs:has(#t4:checked) [data-for="t4"], .track-tabs:has(#t5:checked) [data-for="t5"] { display: grid; }
  .track-tabs:has(#t1:checked) label[for="t1"], .track-tabs:has(#t2:checked) label[for="t2"], .track-tabs:has(#t3:checked) label[for="t3"],
  .track-tabs:has(#t4:checked) label[for="t4"], .track-tabs:has(#t5:checked) label[for="t5"] { color: var(--ink); border-top-color: var(--accent); }
  .track-tabs:has(#t1:checked) label[for="t1"] b, .track-tabs:has(#t2:checked) label[for="t2"] b, .track-tabs:has(#t3:checked) label[for="t3"] b,
  .track-tabs:has(#t4:checked) label[for="t4"] b, .track-tabs:has(#t5:checked) label[for="t5"] b { color: var(--accent-text); }
  /* while it advances on its own, the active letter's rule fills over the three seconds */
  .track-letters label::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
  .track-tabs.is-auto:has(#t1:checked) label[for="t1"], .track-tabs.is-auto:has(#t2:checked) label[for="t2"], .track-tabs.is-auto:has(#t3:checked) label[for="t3"],
  .track-tabs.is-auto:has(#t4:checked) label[for="t4"], .track-tabs.is-auto:has(#t5:checked) label[for="t5"] { border-top-color: var(--line); }
  .track-tabs.is-auto:has(#t1:checked) label[for="t1"]::after, .track-tabs.is-auto:has(#t2:checked) label[for="t2"]::after, .track-tabs.is-auto:has(#t3:checked) label[for="t3"]::after,
  .track-tabs.is-auto:has(#t4:checked) label[for="t4"]::after, .track-tabs.is-auto:has(#t5:checked) label[for="t5"]::after { animation: track-progress 3s linear both; }
  @keyframes track-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .track-tabs > input:focus-visible + input, .track-tabs:has(> input:focus-visible) .track-letters { outline: none; }
  .track-tabs:has(#t1:focus-visible) label[for="t1"], .track-tabs:has(#t2:focus-visible) label[for="t2"], .track-tabs:has(#t3:focus-visible) label[for="t3"],
  .track-tabs:has(#t4:focus-visible) label[for="t4"], .track-tabs:has(#t5:focus-visible) label[for="t5"] { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .track-panel { animation: faq-open 220ms var(--ease-out) both; }
  }
}

/* explainer video: caption left four columns, frame right eight */
.explainer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  align-items: end;
  margin-top: 96px;
}
.explainer > div:first-child { grid-column: 1 / span 4; }
.explainer .video-frame { grid-column: 5 / span 8; }
.explainer h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 14px; max-width: 16ch; }
.explainer p { color: var(--muted); }

.video-frame { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: var(--r-m); background: var(--surface); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- comparison table ---------- */

.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 22px 32px 22px 0; }
.compare th:last-child, .compare td:last-child { padding-right: 0; }
.compare thead th { padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.compare thead .col-old { color: var(--muted); }
.compare thead .col-virra { color: var(--accent-text); }
.compare tbody tr { border-bottom: 1px solid var(--line-soft); }
.compare tbody th { font-size: 15px; font-weight: 520; width: 25%; }
.compare td.old { color: var(--muted); font-size: 16px; width: 33%; }
.compare td.virra { color: var(--ink); font-size: 16px; }

/* ---------- receipts ---------- */

.shot { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: #FFFFFF; }
.shot-link { display: block; color: inherit; text-decoration: none; }
.shot img { display: block; width: 100%; height: auto; object-fit: contain; object-position: top center; }
figure.shot-block { margin: 0; }

.shot-cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 16px;
}
.shot-cap .who { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.shot-cap .who small { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); margin-top: 6px; }
.spotify-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid rgba(74, 50, 201, 0.35); padding-bottom: 1px; transition: border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .spotify-link:hover { border-bottom-color: var(--accent-text); } }
.shot-figures { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.shot-fig { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.shot-fig b { color: var(--ink); font-weight: 600; }

.shots-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--col-gap); align-items: start; }
.shots-wall .shot img { aspect-ratio: auto; }
.shots-wall .shot-cap .who { font-size: 17px; }
.shots-wall .shot-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line-soft);
}
.shots-wall .shot-featured .shot { grid-column: 1 / span 7; }
.shots-wall .shot-featured .shot-cap { grid-column: 8 / span 5; padding-top: 0; }
.shots-wall .shot-featured .shot-cap .who { font-size: clamp(24px, 2.6vw, 34px); }

.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--col-gap); margin-top: 96px; }
.videos { align-items: start; }
.vquote { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; margin-top: 16px; }

.ledger { margin-top: 96px; }
.ledger-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ledger-row .name { grid-column: 1 / span 4; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.ledger-row .name small { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--accent-text); margin-top: 8px; }
.ledger-row .result { grid-column: 5 / span 6; color: var(--muted); font-size: 16px; }
.ledger-row .result strong { color: var(--ink); font-weight: 520; font-variant-numeric: tabular-nums; }
.ledger-row .name small .spotify-link { font-size: inherit; letter-spacing: inherit; }
.ledger-row .tag { grid-column: 11 / span 2; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; }
.ledger .fine { margin-top: 20px; }

/* ---------- what stays yours: three across ---------- */

.keep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.keep-item { border-top: 1px solid var(--ink); padding-top: 22px; }
.keep-item h3 { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.keep-item p { color: var(--muted); font-size: 16px; }

/* ---------- guarantee band ---------- */

.guarantee { background: var(--ink-dark-bg); color: var(--paper); margin-top: var(--s-section); }
.guarantee .inner {
  padding-top: var(--s-section); padding-bottom: var(--s-section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 56px; align-items: start;
}
.g-lead { grid-column: 1 / span 6; }
.g-clause { grid-column: 8 / span 5; padding-top: 6px; }
.guarantee h2 { font-size: clamp(36px, 5vw, 68px); max-width: 16ch; margin-bottom: 28px; }
.guarantee h2 em { color: var(--accent-soft); }
.guarantee p { color: rgba(250, 248, 244, 0.7); font-size: 18px; max-width: 54ch; }
.guarantee h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--paper); margin: 0 0 18px; max-width: 22ch; }
.guarantee .cta-stack { margin-top: 36px; }
.guarantee .btn-accent { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .guarantee .btn-accent:hover { background: #FFFFFF; } }
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ---------- working with us ---------- */

.steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  grid-column: 1 / span 8;
  max-width: 760px;
}
.steps::before, .steps::after {
  content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px;
}
.steps::before { background: var(--line-soft); }
.steps::after { background: var(--accent); transform-origin: top; transform: scaleY(0); }
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  align-items: start;
  padding: 0 0 48px;
}
.steps li:last-child { padding-bottom: 0; }
.steps .n {
  position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ink); background: var(--paper);
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.steps strong { display: block; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 440; letter-spacing: -0.02em; line-height: 1.15; padding-top: 6px; }
.steps p { color: var(--muted); margin-top: 8px; max-width: 48ch; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .steps::after { animation: fill-line linear both; animation-timeline: view(); animation-range: entry 30% exit 70%; }
    @keyframes fill-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

.fit-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; margin-top: 112px; }
.fit-col { grid-column: span 6; }
.fit-col h3 { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.fit-col.is-yes h3 { color: var(--accent-text); }
.fit-col.is-no h3 { color: var(--muted); }
.fit-col ul { list-style: none; margin: 0; padding: 0; }
.fit-col li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.fit-col.is-no li { color: var(--muted); }
.process-note { margin-top: 32px; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 860px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 24px 0; font-size: 19px; font-weight: 500; transition: color 180ms ease; }
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover { color: var(--accent); } }
.faq-mark { font-family: var(--font-mono); font-size: 16px; color: var(--muted); transition: transform 200ms var(--ease-out), color 180ms ease; }
.faq-item[open] .faq-mark { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-open 220ms var(--ease-out) both; }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.faq-a { padding: 0 0 28px; color: var(--muted); max-width: 64ch; }

/* ---------- close ---------- */

.book { padding-top: var(--s-section); padding-bottom: 160px; }
.book-inner { border-top: 1px solid var(--ink); padding-top: 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: end; }
.book-inner > div:first-child { grid-column: 1 / span 8; }
.book-cta { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.book h2 { max-width: 14ch; margin-bottom: 28px; }
.book-p { color: var(--muted); max-width: 52ch; }
.book-p + .book-p { margin-top: 16px; }
.book-cta .mono-meta { font-size: 12.5px; }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); padding: 32px 0 40px; }
.foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.foot a { text-decoration: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink); } }
.foot-links { display: flex; gap: 24px; }

/* ---------- motion ----------
   One entrance (the hero settling once fonts are ready, only when the page opened
   at the top) and a quiet scroll reveal driven by the scroll position itself. */

@media (prefers-reduced-motion: no-preference) {
  /* before the split script runs the word is one text node; keep it out of sight so it never
     flashes, then the split makes each letter its own clipped box, hidden below its baseline */
  .hero-pending .u { visibility: hidden; }
  .hero-pending .u.is-split { visibility: visible; }
  .hero-pending .u .l i { opacity: 0; }
  .hero-pending .hero h1 .dot { opacity: 0; }

  @supports (animation-timeline: view()) {
    .reveal { animation: rise-in linear both; animation-timeline: view(); animation-range: entry calc(0% + var(--i, 0) * 4%) entry calc(30% + var(--i, 0) * 4%); }
    @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  }

  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .highlights { grid-template-columns: 1fr; }
  :root { --s-section: 112px; --s-head: 48px; --gutter: 28px; }
  .hero-row .lede { grid-column: 1 / span 8; }
  .hero-ctas { grid-column: 1 / span 12; }
  .section-head > div:first-child, .section-head .lede { grid-column: 1 / span 12; }
  .section-head { align-items: start; }
  .loop-head .mech-name, .loop-head .lede { grid-column: 1 / span 12; }
  .loop-head { align-items: start; margin-bottom: 48px; }
  .track-panel strong, .track-panel p { grid-column: 1 / span 12; }
  .track-panel p { margin-top: 10px; }
  .explainer > div:first-child, .explainer .video-frame { grid-column: 1 / span 12; }
  .keep { grid-template-columns: 1fr; }
  .g-lead, .g-clause { grid-column: 1 / span 12; }
  .book-inner > div:first-child, .book-cta { grid-column: 1 / span 12; }
  .ledger-row .name { grid-column: 1 / span 12; }
  .ledger-row .result { grid-column: 1 / span 10; }
  .ledger-row .tag { grid-column: 1 / span 12; text-align: left; }
  .ledger-row { row-gap: 8px; }
  .videos, .ledger { margin-top: 64px; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody th, .compare td.old { width: auto; }
  .compare tbody tr { padding: 20px 0; }
  .compare th, .compare td { padding: 0 0 6px; }
  .compare td::before { content: attr(data-label) ": "; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
  .compare td.virra::before { color: var(--accent-text); }
}

@media (min-width: 801px) and (max-width: 1180px) {
  .shots-wall .shot-featured .shot-figures { display: grid; grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 800px) {
  .loop { --num: clamp(56px, 17vw, 76px); --rail-x: calc(var(--num) * 0.56); grid-template-columns: 1fr; row-gap: 0; }
  .loop li { padding: 0 0 40px; }
  .loop li:last-child { padding-bottom: 0; }
  .loop li:not(:last-child)::before, .loop li:not(:last-child)::after { top: 0; left: var(--rail-x); width: 1px; height: 100%; }
  .loop li:not(:last-child)::after { transform-origin: top; }
  .loop .n { padding: 0 8px 8px 0; }
  .loop-verb { margin-left: 16px; padding: 0; }
  .loop strong { margin-top: 6px; padding-left: calc(var(--rail-x) + 22px); max-width: none; }
  .loop small { padding-left: calc(var(--rail-x) + 22px); max-width: none; }
  .mech-proof { grid-template-columns: 1fr; margin-top: 40px; }
  .loop-proof { padding: 20px 0; }
  .loop-proof + .loop-proof { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .loop-disclaimer { margin-top: 12px; }
  .shots-wall .shot-featured { display: block; padding-bottom: 52px; }
  .shots-wall .shot-featured .shot-cap { padding-top: 16px; }
}

@media (max-width: 640px) {
  :root { --s-section: 88px; --gutter: 20px; --col-gap: 20px; }
  body { font-size: 16px; }
  .nav { flex-wrap: wrap; gap: 12px 16px; padding-top: 18px; padding-bottom: 14px; }
  .nav-cta { margin-left: auto; order: 2; }
  .nav-links { order: 3; flex: 1 1 100%; margin-left: 0; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-top: 1px solid var(--line-soft); padding-top: 10px; padding-bottom: 2px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 14px; white-space: nowrap; }
  .foot-links { width: 100%; flex-wrap: wrap; gap: 12px 18px; }
  .hero { padding-top: 44px; padding-bottom: 48px; }
  .hero .kicker { margin-bottom: 24px; font-size: 11px; }
  .hero h1 { margin-bottom: 28px; }
  .h1-b { white-space: nowrap; font-size: clamp(52px, 15.2vw, 72px); }
  .highlights { grid-template-columns: 1fr; margin-top: 44px; }
  .hero-row .lede { font-size: 18px; }
  .hero-provenance { margin-top: 48px; flex-direction: column; gap: 8px; }
  .hero-provenance span { border-right: 0; padding-right: 0; margin-right: 0; }
  .shots-wall, .videos { grid-template-columns: 1fr; }
  .shot img, .shots-wall .shot img { aspect-ratio: auto; object-fit: contain; object-position: top center; }
  .fit-col { grid-column: 1 / span 12; }
  .steps li { gap: 16px; padding-bottom: 36px; }
  .shots-wall .shot-featured { padding-bottom: 44px; }
  .track-letters label b { font-size: 34px; }
  .track-letters label span { display: none; }
  .track-tabs { margin-top: 72px; }
  .book { padding-bottom: 96px; }
}

/* ---------- the review page (/review/) ---------- */

[hidden] { display: none !important; }
fieldset.field { margin: 0 0 22px; }
.field legend { padding: 0; margin-left: 0; }

.review { padding-top: 24px; padding-bottom: 120px; }
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
}
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: #FFFEFB;
  padding: 36px;
}
.stepbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.stepbar-track { display: block; height: 2px; background: var(--line-soft); border-radius: 1px; overflow: hidden; }
.stepbar-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0.5); transition: transform 480ms var(--ease-out); }
.form-title { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 10px; }
.form-lede { color: var(--muted); font-size: 17px; margin-bottom: 32px; max-width: 46ch; }
.step { }
.field { margin-bottom: 22px; border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label, .field legend {
  display: block; font-size: 14px; font-weight: 560; margin-bottom: 8px; padding: 0;
}
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="tel"], .field textarea, .more textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 13px 14px; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input:focus-visible, .more textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 64, 231, 0.18); }
.field.has-err input { border-color: var(--danger); }
.field-help { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.err { margin-top: 8px; font-size: 13.5px; color: var(--danger); }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-stack { flex-direction: column; }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-block; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-s);
  font-size: 15px; font-weight: 480; background: #FFFFFF; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.seg-stack span { display: block; }
.seg input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.artist-search { position: relative; }
.artist-results {
  position: absolute; z-index: 4; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 6px; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: var(--r-s); max-height: 260px; overflow: auto;
}
.artist-results li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.artist-results li:hover, .artist-results li:focus-visible { background: var(--surface); outline: none; }
.artist-results img, .artist-results .ph { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface); flex: none; }
.artist-pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: var(--r-s); background: #FFFFFF; font-weight: 560; }
.artist-pick img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.artist-pick .text-link { margin-left: auto; font-size: 13.5px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

.more { border-top: 1px solid var(--line-soft); padding: 14px 0; }
.more summary { cursor: pointer; font-size: 15px; font-weight: 520; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); }
.more[open] summary::after { content: "\2013"; }
.more > *:not(summary) { margin-top: 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.consent { margin: 18px 0 22px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-block { width: 100%; justify-content: center; padding: 16px 24px; font-size: 16.5px; }
.note-line { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.6; }
.note-line .text-link { color: inherit; }

.steps-aside { position: sticky; top: 32px; padding-top: 12px; }
.steps-aside .kicker { display: block; margin-bottom: 22px; }
.next-steps { list-style: none; margin: 0 0 26px; padding: 0; }
.next-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); font-size: 16.5px; }
.next-steps li:last-child { border-bottom: 1px solid var(--line-soft); }
.next-steps .n { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-text); padding-top: 4px; }
.steps-aside .fine { margin-top: 14px; }

.book-state { padding: 28px 0; color: var(--muted); }
.book-state h3 { font-family: var(--font-display); font-size: 28px; color: var(--ink); margin-bottom: 8px; }
.daychips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
.daychips::-webkit-scrollbar { display: none; }
.daychips button, .slotgrid button {
  font: inherit; font-size: 14.5px; color: var(--ink); background: #FFFFFF;
  border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 14px; cursor: pointer; white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.daychips button:active, .slotgrid button:active { transform: scale(0.97); }
.daychips button[aria-selected="true"], .slotgrid button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.slotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.slotgrid button { font-family: var(--font-mono); font-size: 13.5px; text-align: center; }

@media (max-width: 960px) {
  .review-grid { grid-template-columns: 1fr; gap: 40px; }
  .steps-aside { position: static; }
}
@media (max-width: 640px) {
  .form-card { padding: 24px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .slotgrid { grid-template-columns: repeat(2, 1fr); }
}



/* ---------- consent language on the review form ---------- */
.consent-check { margin: 18px 0 14px; }
.consent-check .consent-text { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0; }

/* ---------- chat: "Message us" bottom right ---------- */
.vchat { position: fixed; right: 20px; bottom: 20px; z-index: 40; font-family: var(--font-body); }
.vchat-launch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px 13px 16px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: var(--paper); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background-color 180ms ease, transform 160ms var(--ease-out);
}
.vchat-launch:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .vchat-launch:hover { background: #2A2622; } }
.vchat[data-state="open"] .vchat-launch { display: none; }
.vchat-panel {
  position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 40px)); height: min(560px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #FFFEFB; border: 1px solid var(--line); border-radius: 16px; color: var(--ink);
}
.vchat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.vchat-head strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.vchat-head small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vchat-close { font: inherit; font-size: 22px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.vchat-log { flex: 1 1 auto; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.vchat-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.vchat-msg.is-assistant { background: var(--surface); border-bottom-left-radius: 4px; align-self: flex-start; }
.vchat-msg.is-user { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; align-self: flex-end; }
.vchat-typing { display: flex; gap: 4px; padding: 12px 14px; }
.vchat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .vchat-typing i { animation: vchat-dot 900ms ease-in-out infinite; }
  .vchat-typing i:nth-child(2) { animation-delay: 150ms; } .vchat-typing i:nth-child(3) { animation-delay: 300ms; }
  @keyframes vchat-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
  .vchat-panel { animation: vchat-in 220ms var(--ease-out) both; }
  @keyframes vchat-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
}
.vchat-choices { display: flex; flex-direction: column; gap: 6px; padding: 4px 18px 12px; }
.vchat-choice { font: inherit; font-size: 14.5px; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); cursor: pointer; transition: border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .vchat-choice:hover { border-color: var(--ink); } }
.vchat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.vchat-form input { flex: 1 1 auto; font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; color: var(--ink); min-width: 0; }
.vchat-form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 64, 231, 0.18); }
.vchat-send { font: inherit; font-size: 18px; width: 42px; border-radius: 10px; border: 0; background: var(--accent); color: #FFFFFF; cursor: pointer; }
.vchat-foot { font-size: 12px; color: var(--muted); padding: 0 18px 12px; }
.vchat-foot a { color: inherit; }
@media (max-width: 640px) {
  .vchat { right: 12px; bottom: 12px; }
  .vchat-launch { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .vchat-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vchat-panel { width: calc(100vw - 24px); height: min(600px, calc(100vh - 24px)); }
}

/* open call times inside the chat log */
.vchat-slots { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; }
.vchat-slot { font-family: var(--font-mono); font-size: 12.5px; padding: 8px 10px; }

.foot-about { font-size: 14px; color: var(--muted); max-width: 64ch; margin-bottom: 20px; }
.shots-date { grid-column: 1 / -1; margin-top: -12px; }