/* 2nd Brain Consulting v2 — white ground, committed lavender, engineered-warm.
   Tokens per DESIGN.md. OKLCH with hex fallbacks where broad support matters. */

/* METRIC-MATCHED FALLBACKS, 2026-09-19 (the CRO pass). The three web fonts arrive with display=swap, so
   every cold load painted in Arial and then reflowed the whole page when Archivo landed: a 0.087
   layout shift on /shop at 1440 with the header already settled, read off the Performance API.
   These faces make the fallback the same width and height as the real font (size-adjust from a
   measured 4686 vs 4608 px run of text; ascent and descent from the fonts' own metrics), so the
   swap changes glyph shapes and nothing moves. */
@font-face { font-family: "Archivo Fallback"; font-weight: 100 550; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 98.6%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 551 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); size-adjust: 102.6%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "Bangers Fallback"; src: local("Impact"), local("Arial Narrow"); size-adjust: 92%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --bg: #ffffff;
  --ink: oklch(0.24 0.02 300);
  --ink-soft: oklch(0.45 0.03 300);
  --lav: oklch(0.54 0.12 300);
  --lav-deep: oklch(0.38 0.12 300);
  --lav-bright: oklch(0.62 0.13 300);
  --lav-tint: oklch(0.965 0.012 300);
  --lav-line: oklch(0.88 0.03 300);
  --gold: oklch(0.78 0.08 75);
  --on-lav: #ffffff;
  --on-lav-soft: oklch(0.86 0.045 300);

  --font-body: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace;

  --size-display: clamp(2.7rem, 6.4vw, 5.1rem);
  --size-h2: clamp(1.9rem, 3.6vw, 2.85rem);
  --size-h3: 1.35rem;
  --size-body: 1.0625rem;
  --size-label: 0.8125rem;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4.5rem, 9vw, 7.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-nav: 40;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; line-height: 1.06; margin: 0 0 1.1rem; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: var(--lav); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lav);
}

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklch, #fff 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lav-line);
}
.nav .wrap {
  display: flex; align-items: center; gap: 2.25rem;
  padding-block: 0.8rem;
}
.nav__brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; margin-right: auto;
}
.nav__brand svg { width: 46px; height: 40px; flex: none; }
.nav__brand span {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 0.86rem; letter-spacing: 0.3em; color: var(--lav);
}
.nav__links { display: flex; align-items: center; gap: 1.7rem; }
.nav__links a {
  font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--ink);
}
.nav__links a:hover { color: var(--lav); }
.nav__toggle { display: none; }

.btn {
  display: inline-block;
  background: var(--lav); color: #fff;
  font-weight: 600; font-size: 1rem;
  padding: 0.85rem 1.7rem; border-radius: 10px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { background: var(--lav-deep); transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--lav); }
.btn--ghost { background: transparent; color: var(--lav); box-shadow: inset 0 0 0 1.5px var(--lav); }
.btn--ghost:hover { background: var(--lav-tint); color: var(--lav-deep); box-shadow: inset 0 0 0 1.5px var(--lav-deep); }
.btn--mono { font-family: var(--font-mono); letter-spacing: 0.14em; font-size: 0.9rem; text-transform: uppercase; }
.btn--onlav { background: #fff; color: var(--lav-deep); }
.btn--onlav:hover { background: var(--lav-tint); box-shadow: 0 10px 24px -12px oklch(0.2 0.05 300); }

/* ---------- hero ---------- */
.hero { overflow-x: hidden; overflow-x: clip; overflow-y: visible; padding-bottom: 0.5rem; }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 6.5vw, 5.5rem) 0;
}
.hero h1 {
  font-size: var(--size-display);
  font-weight: 900;
  font-stretch: 112%; font-variation-settings: "wdth" 112;
  letter-spacing: -0.025em;
  line-height: 0.98;
}
.hero h1 em { font-style: normal; color: var(--lav); }
.hero__lede { font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
/* origin credential: the assembly line, stated once, high on the page */
.hero__cred {
  background: transparent; color: var(--ink);
  max-width: 46ch; margin: 0 0 1.7rem;
  font-size: 1.05rem; font-weight: 600; line-height: 1.5;
}
.hero__cred b { background: transparent; color: var(--lav-deep); font-weight: 600; }
.hero__when {
  font-family: var(--font-mono); font-weight: 600; font-size: 1rem;
  color: var(--ink); margin: 0 0 0.35rem;
}
.hero__where { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0; }
.hero__cta { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.7rem; flex-wrap: wrap; }
.hero__free {
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink-soft);
}
.hero__free s { color: var(--ink-soft); opacity: 0.55; margin-right: 0.5em; }
.hero__free strong { color: var(--lav); font-weight: 600; letter-spacing: 0.08em; }

/* ⚠️ TOP-ANCHORED, NOT BOTTOM. Changed 2026-08-25 on Adam's report of "big old
   white space" top right, minutes before a live stream with the site on screen.
   This read `align-self: end`, which was correct when the left column was
   headline plus lede. Today's announce work added the LIVE TONIGHT card and the
   free-session card into that column, which made it roughly 1200px tall, and an
   end-anchored portrait in a 1200px row sits below the fold. The photo was
   never missing. It was pushed off screen by a change to the OTHER column.
   The field inside still anchors to the bottom of this box, so the composition
   is unchanged, it just sits beside the headline where it belongs. */
.hero__art { position: relative; align-self: start; min-height: clamp(340px, 42vw, 560px); }
.hero__field {
  position: absolute; inset: auto 0 0 0; height: 86%;
  background: linear-gradient(160deg, var(--lav) 0%, var(--lav-deep) 100%);
  border-radius: 26px 26px 0 0;
}
.hero__field::after {
  /* ghosted mark watermark */
  content: ""; position: absolute; inset: 0;
  background: url("/assets/mark-white.svg") no-repeat right -14% top 8% / 62%;
  opacity: 0.14;
}
.hero__portrait {
  position: relative; z-index: 1; display: block;
  width: min(88%, 430px); margin-inline: auto;
  filter: drop-shadow(0 24px 38px oklch(0.3 0.08 300 / 0.35));
}

/* countdown */
.count { display: flex; gap: 1.4rem; margin-top: 1.4rem; }
.count div { text-align: left; }
.count b {
  display: block; font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count span {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em;
  color: var(--ink-soft); text-transform: uppercase;
}

/* ---------- path picker ---------- */
.paths { padding-block: var(--band); }
.paths h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.paths__intro { color: var(--ink-soft); margin-bottom: 2.6rem; }
.path {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.4rem); align-items: center;
  padding: 1.55rem 0.4rem;
  border-top: 1px solid var(--lav-line);
  text-decoration: none; color: inherit;
  transition: background 0.18s var(--ease);
}
.path:last-of-type { border-bottom: 1px solid var(--lav-line); }
.path:hover { background: var(--lav-tint); }
.path__q {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.1em; color: var(--lav); white-space: nowrap;
}
.path h3 { margin: 0 0 0.2rem; font-weight: 700; font-size: 1.22rem; }
.path p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.path__go {
  font-family: var(--font-mono); font-weight: 600; color: var(--lav);
  font-size: 1.4rem; transition: transform 0.18s var(--ease);
}
.path:hover .path__go { transform: translateX(6px); }

/* ---------- drench band (mission) ---------- */
.mission { background: linear-gradient(170deg, var(--lav-deep), oklch(0.32 0.11 300)); color: var(--on-lav); padding-block: var(--band); }
.mission .label { color: var(--gold); }
.mission h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 900; font-stretch: 110%; font-variation-settings: "wdth" 110;
  letter-spacing: -0.02em; max-width: 21ch;
}
.mission p { color: var(--on-lav-soft); font-size: 1.15rem; }
.mission__lives {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); margin-top: 3rem;
}
.mission__lives h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.mission__lives p { font-size: 0.98rem; margin: 0; }
.mission__tag {
  margin-top: 3rem; font-family: var(--font-mono); font-weight: 600;
  letter-spacing: 0.14em; color: #fff; font-size: 1.02rem;
}

/* ---------- work ---------- */
.work { padding-block: var(--band); }
.work__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); }
.work h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; position: sticky; top: 90px; }
.work__item { padding: 1.6rem 0; border-top: 1px solid var(--lav-line); }
.work__item:last-child { border-bottom: 1px solid var(--lav-line); }
.work__item h3 { font-weight: 700; margin-bottom: 0.35rem; }
.work__item h3 small {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--lav);
  letter-spacing: 0.12em; margin-left: 0.6rem; vertical-align: middle;
}
.work__item p { color: var(--ink-soft); margin: 0; }

/* ---------- proof / case ---------- */
.proof { background: var(--lav-tint); padding-block: var(--band); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.proof h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.proof__quotecard {
  background: #fff; border: 1px solid var(--lav-line); border-radius: 16px;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: 0 22px 44px -30px oklch(0.4 0.08 300 / 0.55);
}
.proof__quotecard p { font-size: 1.06rem; }
.proof__meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.08em; }
.proof__promise { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--lav-line); font-size: 0.98rem; color: var(--ink-soft); }
.proof__promise strong { color: var(--ink); }

/* ---------- live + social ---------- */
.live { padding-block: var(--band); }
.live__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); }
.live h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.sched { border: 1px solid var(--lav-line); border-radius: 16px; overflow: hidden; }
.sched__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2rem; align-items: center;
  padding: 1.05rem 1.3rem; border-top: 1px solid var(--lav-line);
  background: #fff;
}
.sched__row:first-child { border-top: 0; }
.sched__row--hot { background: var(--lav-tint); }
.sched__when { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; color: var(--lav); white-space: nowrap; }
.sched__row h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.sched__row p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.sched__act { font-size: 0.9rem; font-weight: 600; color: var(--lav); text-decoration: none; white-space: nowrap; }
.sched__act:hover { text-decoration: underline; }
.socials p { color: var(--ink-soft); }
.socials__row { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.3rem; }
.socials__row a, .socials__row span {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.92rem; text-decoration: none;
  color: var(--ink); padding: 0.65rem 0; border-bottom: 1px solid var(--lav-line);
}
.socials__row a b { color: var(--lav); font-weight: 600; }
.socials__row .soon { color: var(--ink-soft); }
.socials__row .soon em { font-style: normal; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; }
.live__runline { margin-top: 2rem; font-size: 0.95rem; color: var(--ink-soft); }
.live__runline strong { color: var(--ink); }

/* ---------- faq ---------- */
.faq { background: var(--lav-tint); padding-block: var(--band); }
.faq h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; margin-bottom: 2.2rem; }
.faq details { border-top: 1px solid var(--lav-line); }
.faq details:last-of-type { border-bottom: 1px solid var(--lav-line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0.2rem; font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--lav); font-size: 1.2rem; transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); margin: 0 0 1.2rem; padding-inline: 0.2rem; }

/* ---------- final cta ---------- */
.final { padding-block: var(--band); text-align: center; }
.final h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 900; font-stretch: 110%; font-variation-settings: "wdth" 110; letter-spacing: -0.02em; margin-inline: auto; max-width: 18ch; }
.final p { margin-inline: auto; color: var(--ink-soft); }
.final .hero__when { margin-top: 1.4rem; }
.final .btn { margin-top: 1.6rem; }

/* ---------- signup ---------- */
.signup { background: var(--lav-deep); color: var(--on-lav); padding-block: var(--band); }
.signup h2 { font-size: var(--size-h2); font-weight: 800; }
.signup p { color: var(--on-lav-soft); }
.signup form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; max-width: 620px; margin-top: 2rem; }
.signup label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-lav-soft); margin-bottom: 0.4rem; }
.signup .field--full { grid-column: 1 / -1; }
.signup input, .signup textarea {
  width: 100%; padding: 0.85rem 1rem; border-radius: 10px; border: 1.5px solid oklch(0.55 0.08 300);
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.signup input:focus, .signup textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.signup .btn { grid-column: 1 / -1; justify-self: start; }
.signup__note { font-family: var(--font-mono); font-size: 0.8rem; color: var(--on-lav-soft); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--lav-line); padding-block: 3rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.footer__brand { display: flex; align-items: center; gap: 0.7rem; }
.footer__brand svg { width: 40px; height: 35px; }
.footer__brand div span { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.28em; color: var(--lav); }
.footer__brand div small { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink-soft); }
.footer__meta { font-size: 0.85rem; color: var(--ink-soft); text-align: right; }
.footer__meta a { color: var(--ink-soft); }

/* ---------- motion ---------- */
.rise { opacity: 1; transform: none; }
.js .pre { opacity: 0; transform: translateY(26px); }
.js .in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .hero .pre { transform: translateY(18px); }
.js .hero__art.pre { transform: translateY(34px); }
.js .in.d1 { transition-delay: 0.08s; } .js .in.d2 { transition-delay: 0.16s; }
.js .in.d3 { transition-delay: 0.24s; } .js .in.d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .pre { opacity: 1; transform: none; }
  .js .in { transition: none; }
  .btn { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 2.2rem; }
  .hero__art { order: -1; min-height: 300px; max-width: 420px; }
  .work__grid, .proof__grid, .live__grid { grid-template-columns: 1fr; }
  .work h2 { position: static; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--lav-line);
    padding: 1.2rem var(--gutter) 1.5rem; gap: 1.1rem;
  }
  .nav__toggle {
    display: block; background: none; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em;
    color: var(--lav); padding: 0.5rem;
  }
  .signup form { grid-template-columns: 1fr; }
  .path { grid-template-columns: minmax(0, 1fr) auto; }
  .path__q { display: none; }
  .count { gap: 1rem; }
  .sched__row { grid-template-columns: 1fr; gap: 0.45rem; padding: 1.1rem 1.1rem; }
  .sched__when { order: -1; }
  .sched__act { justify-self: start; }
  .footer__meta { text-align: left; }
}

/* ---------- subpage components ---------- */
.slotboard { border: 1px solid var(--lav-line); border-radius: 18px; padding: clamp(1.6rem, 4vw, 2.6rem); background: #fff; box-shadow: 0 26px 50px -38px oklch(0.4 0.08 300 / 0.6); }
.slotboard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.slotboard__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.6rem 0; }
.slot { border: 1.5px solid var(--lav-line); border-radius: 14px; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.slot__n { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--ink-soft); }
.slot__s { font-family: var(--font-mono); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.1em; color: var(--lav); }
.slot--taken { background: var(--lav-tint); }
.slot--taken .slot__s { color: var(--ink-soft); text-decoration: line-through; }
.slotboard__note { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 1.6rem; }

.pricecard { border: 1.5px solid var(--lav); border-radius: 18px; padding: clamp(1.6rem, 4vw, 2.4rem); background: #fff; position: sticky; top: 100px; }
.pricecard__price { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.4rem); color: var(--ink); margin: 0.4rem 0 0.2rem; }
.pricecard__note { color: var(--ink-soft); margin-top: 0; }
.pricecard__fine { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; }

/* min() on the track floor, because a bare 280px minimum plus card padding
   pushes past a 320px viewport and the whole ladder scrolls sideways. Measured
   at 390, 360 and 320: clean at all three with this, overflowing at 320 without. */
.gocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.4rem; }
.gocard { border: 1px solid var(--lav-line); border-radius: 18px; padding: clamp(1.5rem, 3.5vw, 2.2rem); background: #fff; display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.gocard h2 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.gocard p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.gocard .btn { margin-top: auto; }
.gocard--lead { border: 2px solid var(--lav); background: linear-gradient(170deg, #fff, var(--lav-tint)); box-shadow: 0 26px 50px -34px var(--lav); }
.gocard__fine { font-size: 0.82rem; }
/* A rung that does not belong to this room. `.gocard` sets display:flex, which
   OUT-SPECIFIES the user-agent [hidden]{display:none}, so without this every
   rung renders in every room and the hiding silently does nothing. */
.gocard[hidden] { display: none !important; }
.gocard__when { font-size: 0.92rem; color: var(--ink); font-weight: 600; }
.gocard__when b { font-weight: 800; }
/* The ratified in-session promo. Only ever rendered while a room is live, so
   it should read as something being offered right now, not as page furniture. */
.gocard__promo { font-size: 0.92rem; font-weight: 700; color: var(--ink);
  background: var(--lav-tint); border-left: 3px solid var(--lav);
  padding: 0.6rem 0.8rem; border-radius: 0 8px 8px 0; }

.replay-empty { border: 1.5px dashed var(--lav-line); border-radius: 18px; padding: clamp(2rem, 5vw, 3.2rem); text-align: center; display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
@media (max-width: 720px) { .slotboard__slots { grid-template-columns: 1fr; } .pricecard { position: static; } }

/* ---------- gate fixes ---------- */
@keyframes tickpop { 0% { transform: translateY(-0.14em); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.count b.tick { animation: tickpop 0.35s var(--ease); }
@keyframes drift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
.mission { background: linear-gradient(170deg, var(--lav-deep), oklch(0.32 0.11 300), var(--lav-deep)); background-size: 220% 220%; animation: drift 18s ease-in-out infinite alternate; }
.path { will-change: transform; }
.path:hover { transform: translateX(4px); }
.gocard, .proof__quotecard, .slot { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.gocard:hover, .slot:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px oklch(0.4 0.1 300 / 0.6); }
@media (prefers-reduced-motion: reduce) { .mission { animation: none; } .count b.tick { animation: none; } .path:hover { transform: none; } .gocard:hover, .slot:hover { transform: none; } }

/* offer block: the strike device, sized like it means it */
.offer { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.6rem; }
.offer s { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink-soft); opacity: 0.6; }
.offer strong { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--lav); letter-spacing: 0.06em; }
.offer span { flex-basis: 100%; font-size: 0.95rem; color: var(--ink-soft); }

/* hero art: more weight on desktop */
@media (min-width: 941px) {
  .hero .wrap { grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr); }
  .hero__portrait { width: min(94%, 500px); }
  .hero__art { min-height: clamp(380px, 46vw, 620px); }
}

/* interior page art panel */
.pagehero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.artpanel { position: relative; border-radius: 22px; min-height: 320px; background: linear-gradient(160deg, var(--lav) 0%, var(--lav-deep) 100%); overflow: hidden; }
.artpanel::after { content: ""; position: absolute; inset: 0; background: url("/assets/mark-white.svg") no-repeat center 40% / 70%; opacity: 0.2; }
.artpanel--photo img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.artpanel__cap { position: absolute; z-index: 2; left: 1.2rem; bottom: 1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: #fff; opacity: 0.85; text-transform: uppercase; }
@media (max-width: 940px) { .pagehero { grid-template-columns: 1fr; } .artpanel { min-height: 220px; } }

/* tighter closing CTA on subpages */
.final--sub { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* replay pending cards */
.replaycards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.3rem; margin-top: 2rem; }
.replaycard { border: 1px solid var(--lav-line); border-radius: 16px; padding: 1.4rem; background: #fff; }
.replaycard--pending { opacity: 0.72; }
.replaycard .label { display: block; margin-bottom: 0.5rem; }
.replaycard h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.replaycard p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.replay-includes { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.6rem; }
.replay-includes div { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--lav); text-transform: uppercase; }

/* go page centering */
.gohero .label { display: block; text-align: center; }
.gohero h1 { max-width: 22ch !important; }

/* ---------- residual polish ---------- */
.artpanel--build::after { background-position: left -10% bottom -6%; background-size: 85%; opacity: 0.16; }
.artpanel--build { background: linear-gradient(135deg, var(--lav-deep), var(--lav) 70%, oklch(0.6 0.11 300)); }
.artpanel--market { background: linear-gradient(150deg, var(--lav) 10%, var(--lav-deep) 55%, oklch(0.5 0.09 75)); }
.artpanel--market::after { background-position: center 20%; background-size: 52%; opacity: 0.22; }
.artpanel__cap { background: linear-gradient(transparent, oklch(0.2 0.06 300 / 0.75)); left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem 1rem; }
.gohero .label { text-indent: 0.18em; }
.replaycard__thumb { height: 84px; border-radius: 10px; background: linear-gradient(150deg, var(--lav-tint), var(--lav-line)); position: relative; margin-bottom: 0.9rem; overflow: hidden; }
.replaycard__thumb::after { content: ""; position: absolute; inset: 0; background: url("/assets/mark.svg") no-repeat center / 34%; opacity: 0.5; }
.thanks-count .count b { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.go-count { justify-content: center; margin: 1.4rem auto 0; display: flex; }

/* ---------- image library system ---------- */
.artpanel--photo { background: var(--lav-tint); }
.artpanel--photo img { transition: transform 0.5s var(--ease); }
.artpanel--photo:hover img { transform: scale(1.03); }

/* the operator: humanity photo cluster */
.operator { padding-block: var(--band); }
.operator__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.operator h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.operator p { color: var(--ink-soft); }
.cluster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cluster figure { margin: 0; border-radius: 16px; overflow: hidden; position: relative; }
.cluster figure:nth-child(1) { transform: rotate(-1.6deg); }
.cluster figure:nth-child(2) { transform: rotate(1.1deg) translateY(10px); }
.cluster figure:nth-child(3) { transform: rotate(-0.8deg); }
.cluster img { display: block; width: 100%; height: 240px; object-fit: cover; transition: transform 0.5s var(--ease); }
.cluster figure:hover img { transform: scale(1.05); }
.cluster figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.8rem 0.6rem; background: linear-gradient(transparent, oklch(0.2 0.06 300 / 0.8)); color: #fff; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* free net: the giveaway card */
.freenet { background: var(--lav-tint); padding-block: var(--band); }
.freenet__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.freenet h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.freenet p { color: var(--ink-soft); }
.freecard { background: #fff; border: 1.5px solid var(--lav); border-radius: 18px; padding: clamp(1.5rem, 3.5vw, 2.2rem); box-shadow: 0 26px 50px -34px var(--lav); }
.freecard .label { display: block; margin-bottom: 0.5rem; }
.freecard h3 { margin: 0 0 0.5rem; font-weight: 800; font-size: 1.4rem; }
.freecard p { font-size: 0.98rem; margin-bottom: 1.2rem; }
.freecard small { display: block; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-soft); }

/* field notes: the connective tissue strip */
.fieldnotes { padding-block: var(--band); }
.fieldnotes h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.fieldnotes__intro { color: var(--ink-soft); margin-bottom: 2rem; }
.note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2rem); align-items: baseline; padding: 1.1rem 0.3rem; border-top: 1px solid var(--lav-line); text-decoration: none; color: inherit; transition: background 0.18s var(--ease); }
.note:last-of-type { border-bottom: 1px solid var(--lav-line); }
.note:hover { background: var(--lav-tint); }
.note__date { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--lav); white-space: nowrap; }
.note h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.note p { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.note__go { font-family: var(--font-mono); color: var(--lav); }

/* motion: felt, not implied (cascade-safe: .in must win over .pre) */
.js .pre:not(.in) { opacity: 0; transform: translateY(30px); }
.js .in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.btn { min-height: 48px; }
.path { padding-block: 1.6rem; }
@media (max-width: 720px) {
  .operator__grid, .freenet__grid { grid-template-columns: 1fr; }
  .cluster { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .cluster img { height: 130px; }
  .nav .btn { padding: 0.7rem 1.1rem; font-size: 0.8rem; }
}

/* ---------- craft pass ---------- */
/* hero: sticker treatment, contained on every viewport */
.hero__art { overflow: visible; }
.hero__portrait { filter: none; }
@media (max-width: 940px) {
  .hero__art { min-height: 0; max-width: 340px; margin-inline: auto; }
  .hero__portrait { width: 100%; max-height: 54vh; object-fit: contain; }
  .hero__field { height: 78%; }
}
/* animated mark badge living on the hero field */
.hero__badge { position: absolute; z-index: 2; left: -1.2rem; bottom: 1.2rem; width: clamp(90px, 9vw, 130px); height: auto; filter: drop-shadow(0 10px 22px oklch(0.3 0.08 300 / 0.4)); }
@media (max-width: 940px) { .hero__badge { left: -0.6rem; bottom: 0.8rem; width: 84px; } }

/* focal-point classes for face-safe crops */
.cluster img, .artpanel--photo img { object-position: center 22%; }
.focal-low img { object-position: center 40%; }

/* buttons: never clip */
.btn { line-height: 1.25; }

/* whitespace discipline */
.paths { padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
.mission, .proof, .operator, .freenet, .fieldnotes, .live, .faq { padding-block: clamp(3.6rem, 7.5vw, 6rem); }
.final { padding-block: clamp(3.2rem, 6.5vw, 5rem); }

/* smile editorial card in operator section */
.operator__grid { align-items: start; }
.editorial { border-radius: 18px; overflow: hidden; position: relative; margin-top: 1rem; }
.editorial img { display: block; width: 100%; height: auto; }
.editorial figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem 1rem 0.7rem; background: linear-gradient(transparent, oklch(0.2 0.06 300 / 0.8)); color: #fff; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- the originals: full-width carousel ---------- */
.originals { padding-block: clamp(3.6rem, 7.5vw, 6rem) 0; overflow: hidden; overflow: clip; }
.originals h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.originals__intro { color: var(--ink-soft); margin-bottom: 2.4rem; }
.marquee { display: flex; gap: 1.2rem; width: max-content; padding-block: 1rem 3.5rem; animation: marquee 42s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; width: clamp(210px, 24vw, 320px); flex: none; box-shadow: 0 18px 36px -24px oklch(0.35 0.08 300 / 0.6); }
.marquee figure:nth-child(odd) { transform: rotate(-1deg) translateY(6px); }
.marquee figure:nth-child(even) { transform: rotate(0.8deg); }
.marquee img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center 25%; }
.marquee figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.8rem 0.6rem; background: linear-gradient(transparent, oklch(0.2 0.06 300 / 0.8)); color: #fff; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; } }

/* ---------- resources ---------- */
.rescards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.rescard { border: 1px solid var(--lav-line); border-radius: 18px; padding: clamp(1.4rem, 3vw, 2rem); background: #fff; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.rescard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px oklch(0.4 0.1 300 / 0.6); }
.rescard h3 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.rescard p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.rescard .btn { margin-top: auto; }
.rescard--soon { opacity: 0.75; }

/* ---------- the crew ---------- */
.crew { background: var(--lav-tint); padding-block: clamp(3.6rem, 7.5vw, 6rem); }
.crew h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.crew__intro { color: var(--ink-soft); margin-bottom: 2.2rem; max-width: 58ch; }
.crew__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.crewman { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1rem 0.2rem; border-top: 1px solid var(--lav-line); }
.crewman b { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--lav); white-space: nowrap; }
.crewman span { font-size: 0.95rem; color: var(--ink-soft); }
.crewman span strong { color: var(--ink); font-weight: 700; display: block; font-size: 1.02rem; }
.crew__truth { margin-top: 2rem; font-size: 0.98rem; }
.crew__truth strong { color: var(--ink); }

/* ---------- chat vignettes ---------- */
.vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.chat { background: oklch(0.99 0.004 300 / 0.14); border: 1px solid oklch(1 0 0 / 0.22); border-radius: 16px; padding: 1.2rem 1.3rem; }
.chat p { margin: 0 0 0.7rem; font-size: 0.92rem; line-height: 1.5; max-width: none; }
.chat .who { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; margin-bottom: 0.2rem; color: var(--gold); }
.chat .you { color: #fff; font-weight: 600; }
.chat .brain { color: var(--on-lav-soft); }

/* ---------- why me ---------- */
.whyme { padding-block: clamp(3.6rem, 7.5vw, 6rem); }
.whyme__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.whyme h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.whyme__photo { position: relative; }
.whyme__photo img { width: 100%; height: auto; border-radius: 20px; }
.cred { padding: 1.15rem 0.2rem; border-top: 1px solid var(--lav-line); }
.cred:last-of-type { border-bottom: 1px solid var(--lav-line); }
.cred h3 { margin: 0 0 0.25rem; font-size: 1.08rem; font-weight: 700; }
.cred p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- prompt shelf ---------- */
.promptcards { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
.promptcard { border: 1px solid var(--lav-line); border-radius: 18px; background: #fff; overflow: hidden; }
.promptcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.2rem 1.4rem 0.6rem; flex-wrap: wrap; }
.promptcard h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.promptcard__use { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--lav); text-transform: uppercase; }
.promptcard > p { padding: 0 1.4rem; margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.93rem; }
.promptcard pre { margin: 0; background: var(--lav-tint); padding: 1.2rem 1.4rem; font-family: var(--font-mono); font-size: 0.83rem; line-height: 1.55; white-space: pre-wrap; color: var(--ink); border-top: 1px solid var(--lav-line); }
.promptcard__bar { display: flex; justify-content: flex-end; padding: 0.7rem 1rem; background: var(--lav-tint); }
.copybtn { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; border: 1.5px solid var(--lav); color: var(--lav); background: #fff; border-radius: 8px; padding: 0.45rem 0.9rem; cursor: pointer; }
.copybtn:hover { background: var(--lav); color: #fff; }
@media (max-width: 720px) { .whyme__grid { grid-template-columns: 1fr; } }

/* ---------- r3 fixes ---------- */
/* hero cutout carries the fold at desktop */
@media (min-width: 941px) {
  .hero .wrap { grid-template-columns: minmax(0, 5.8fr) minmax(0, 6.2fr); }
  .hero__portrait { width: min(100%, 560px); }
  .hero__art { min-height: clamp(420px, 50vw, 680px); }
}
/* countdown clarity */
.count__label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ink-soft); text-transform: uppercase; margin-top: 1.4rem; }
.count { margin-top: 0.5rem; }
/* mission tagline anchored, vignettes top-aligned */
.vignettes { align-items: start; }
.chat { height: auto; }
.mission__tag { border-top: 1px solid oklch(1 0 0 / 0.25); padding-top: 1.4rem; margin-top: 2.2rem; }
/* friday nights tile focal nudge */
.cluster figure:nth-child(3) img { object-position: 62% 20%; }
/* signup two-column on desktop */
@media (min-width: 941px) {
  .signup__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
}
.signup__side { background: oklch(0.99 0.004 300 / 0.12); border: 1px solid oklch(1 0 0 / 0.2); border-radius: 16px; padding: 1.4rem 1.5rem; }
.signup__side h3 { margin: 0 0 0.8rem; font-size: 1.05rem; color: #fff; }
.signup__side .srow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid oklch(1 0 0 / 0.14); font-size: 0.9rem; color: var(--on-lav-soft); }
.signup__side .srow b { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--gold); white-space: nowrap; }
/* resources grid rebalance */
.rescards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .rescards { grid-template-columns: 1fr; } }
/* prompts page brand mark */
.pagemark { width: 120px; height: 105px; margin-bottom: 1rem; }

/* ---------- channel ticker ---------- */
.ticker { background: var(--lav-deep); overflow: hidden; overflow: clip; position: relative; z-index: calc(var(--z-nav) + 1); }
.ticker__track { display: flex; gap: 2.6rem; width: max-content; padding: 0.44rem 0; animation: marquee 36s linear infinite; }
.ticker__track:hover { animation-play-state: paused; }
.ticker a, .ticker span.t-item { display: inline-flex; align-items: baseline; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: #fff; text-decoration: none; white-space: nowrap; }
.ticker a:hover { color: var(--gold); }
.ticker .t-status { font-size: 0.58rem; letter-spacing: 0.12em; padding: 0.1rem 0.4rem; border-radius: 99px; }
.ticker .t-live { background: var(--gold); color: oklch(0.3 0.08 75); }
.ticker .t-launching { background: oklch(1 0 0 / 0.18); color: var(--on-lav-soft); }
.ticker .t-soon { background: oklch(1 0 0 / 0.1); color: var(--on-lav-soft); }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; } }

/* THE TICKER IS OFF ON DESKTOP TOO. FUNNEL DESK, 2026-09-03. Rationale in _source-notes/site.css.notes.md */
.ticker { display: none; }

/* ---------- the cape: superpowers, tastefully ---------- */
.hero__cape { position: absolute; z-index: 0; left: -22%; bottom: -3%; width: 128%; height: 110%; pointer-events: none; }
.cape-sway { transform-origin: 62% 22%; animation: capesway 3.4s ease-in-out infinite alternate; }
@keyframes capesway { from { transform: rotate(-3.2deg) translateX(-10px); } to { transform: rotate(3.6deg) translateX(12px); } }
.hero__portrait { position: relative; z-index: 1; }
.hero__badge { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cape-sway { animation: none; } .hero__cape animate { display: none; } }

/* ---------- final hero: smile, right-anchored, field-contained ---------- */
.hero__field { overflow: hidden; }
.hero__field::after { content: none; }
.hero__cape { left: -2%; bottom: -8%; width: 96%; height: 104%; transform: rotate(-6deg); }
.hero__portrait2 { position: absolute; right: -1%; bottom: -3%; height: 96%; width: auto; max-width: none; z-index: 1; }
@media (max-width: 940px) {
  .hero__art { max-width: 100%; min-height: 340px; }
  .hero__field { height: 100%; border-radius: 26px; }
  .hero__portrait2 { height: 94%; right: -1%; }
}
/* button: text can never ride the edge */
.btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- red cape v2 ---------- */
.hero__cape { left: -8%; bottom: -12%; width: 88%; height: 108%; transform: rotate(-5deg); }
.hero__knot { position: absolute; left: 33%; bottom: 2.5%; width: 17%; z-index: 2; filter: drop-shadow(0 4px 10px oklch(0.2 0.05 300 / 0.35)); }
.hero__portrait2 { height: 103%; bottom: -5%; }
@media (max-width: 940px) {
  .hero__cape { left: -6%; width: 84%; }
  .hero__knot { left: 30%; bottom: 2%; }
  .hero__portrait2 { height: 96%; bottom: -3%; }
}
@media (prefers-reduced-motion: reduce) { .hero__cape animate, .hero__knot animate { display: none; } }

/* ---------- hero final tune ---------- */
.hero__cape { left: -16%; bottom: -8%; width: 110%; height: 114%; transform: rotate(-9deg); }
.hero__knot { left: 36%; bottom: 8.5%; width: 15%; }
.hero__portrait2 { height: 106%; bottom: -6%; right: -3%; }
@media (max-width: 940px) {
  .hero__cape { left: -12%; width: 104%; }
  .hero__knot { left: 33%; bottom: 7%; }
  .hero__portrait2 { height: 98%; bottom: -3%; right: -2%; }
}

/* knot at the throat, head breathing room */
.hero__knot { left: 58%; bottom: 3%; width: 16.5%; }
.hero__portrait2 { height: 102%; bottom: -4%; right: -2.5%; }
@media (max-width: 940px) {
  .hero__knot { left: 56%; bottom: 2.5%; }
  .hero__portrait2 { height: 95%; bottom: -2%; }
}

.hero__knot { left: 57.5%; bottom: 7%; width: 15.5%; }
@media (max-width: 940px) { .hero__knot { left: 55.5%; bottom: 6%; } }

.hero__knot { left: 57%; bottom: 4.5%; width: 15%; }
@media (max-width: 940px) { .hero__knot { left: 55%; bottom: 3.5%; } }

/* mobile hero: art must stretch (auto margins + no in-flow content collapsed it to 0) */
@media (max-width: 940px) {
  .hero__art { width: 100%; max-width: 100%; margin-inline: 0; }
}

/* mobile: photo tiles big enough to read faces */
@media (max-width: 940px) {
  .cluster img { height: 170px; }
}

/* ---------- NO-CAPES! burst (cape retired by owner order 2026-08-06) ---------- */
.hero__cape, .hero__knot { display: none; }
.hero__burst { position: absolute; left: -2%; top: 2%; width: 42%; z-index: 0; filter: drop-shadow(0 10px 24px oklch(0.25 0.08 300 / 0.45)); }
.burst-pop { transform-origin: 50% 48%; animation: burstpop 2.6s ease-in-out infinite; }
@keyframes burstpop {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  12% { transform: rotate(-1deg) scale(1.07); }
  24% { transform: rotate(-3.5deg) scale(0.99); }
  60% { transform: rotate(-2deg) scale(1.02); }
}
@media (max-width: 940px) { .hero__burst { left: 1%; top: 8%; width: 52%; } }
@media (prefers-reduced-motion: reduce) { .burst-pop { animation: none; } }

/* comic print: Ben-Day dots on the field */
.hero__field::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image:
    radial-gradient(circle, oklch(0.98 0.01 300 / 0.16) 2.6px, transparent 3px),
    radial-gradient(circle, oklch(0.30 0.09 300 / 0.35) 2.6px, transparent 3px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
  pointer-events: none;
}

/* ---------- comic panel frame ---------- */
.hero__field { border-radius: 12px; border: 5px solid #1D1430; box-shadow: 8px 8px 0 0 #1D1430; }
.panel-cap {
  position: absolute; top: -14px; right: 14px; z-index: 3;
  background: #FFEFA8; color: #1D1430; border: 4px solid #1D1430;
  box-shadow: 4px 4px 0 0 #1D1430;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em;
  padding: 0.4rem 0.7rem; transform: rotate(1.2deg);
  white-space: nowrap;
}
@media (max-width: 940px) {
  .hero__field { border-width: 4px; box-shadow: 6px 6px 0 0 #1D1430; border-radius: 10px; }
  .panel-cap { font-size: 0.6rem; right: 8px; top: -12px; border-width: 3px; }
  .hero__art { padding-top: 10px; }
}
.hero__art { padding-top: 12px; padding-right: 10px; }

/* ---------- comic language, one step wider ---------- */
.cluster figure, .editorial, .marquee figure {
  border: 4px solid #1D1430; box-shadow: 6px 6px 0 0 #1D1430; border-radius: 10px;
}
.cluster figcaption, .editorial figcaption, .marquee figcaption {
  background: #FFEFA8; color: #1D1430; border: 3px solid #1D1430;
  font-weight: 700; text-shadow: none;
  left: -3px; bottom: -3px; right: auto; border-radius: 0 8px 0 6px;
  padding: 0.3rem 0.6rem;
}
.panel-cap--static {
  position: static; display: inline-block; margin-bottom: 1.2rem;
  transform: rotate(-1.2deg);
}
@media (max-width: 940px) { .panel-cap--static { font-size: 0.62rem; } }

.cluster figure:nth-child(2) img { object-position: 40% 60%; }

/* ---------- comic nav ---------- */
.nav__links a {
  font-family: 'Bangers', 'Bangers Fallback', 'Archivo', sans-serif;
  font-size: 1.18rem; letter-spacing: 0.09em; font-weight: 400;
  color: #1D1430;
}
.nav__links a:hover {
  color: #1D1430; background: #FFEFA8;
  box-shadow: 2px 2px 0 0 #1D1430; outline: 2px solid #1D1430;
  padding-inline: 0.35rem; transform: rotate(-1.5deg);
}
.nav .btn {
  font-family: 'Bangers', 'Bangers Fallback', sans-serif; letter-spacing: 0.1em; font-size: 1.1rem;
  border: 3px solid #1D1430; border-radius: 10px; box-shadow: 4px 4px 0 0 #1D1430;
}
.nav .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #1D1430; background: var(--lav-deep); }
.nav__toggle { font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.05rem; letter-spacing: 0.09em; }
/* landscape phone: nav CTA off, hero carries it */
@media (max-width: 940px) { .nav .btn { display: none; } }

.nav__links a, .nav .btn { white-space: nowrap; }

/* ---------- nav: comic but subordinate to the brand ---------- */
.nav__links a {
  font-family: 'Bangers', 'Bangers Fallback', 'Archivo', sans-serif;
  font-size: 0.98rem; letter-spacing: 0.13em; line-height: 1;
  color: oklch(0.35 0.05 300);
  padding: 0.3rem 0.15rem;
}
.nav__links a:hover {
  background: #FFEFA8; color: #1D1430;
  box-shadow: none; outline: none; transform: none;
  padding: 0.3rem 0.4rem; border-radius: 4px;
}
.nav__links { gap: 1.4rem; }
.nav .btn {
  font-size: 0.95rem; letter-spacing: 0.12em; padding: 0.65rem 1.15rem;
  border-width: 2.5px; box-shadow: 3px 3px 0 0 #1D1430;
}
/* small phones collapse to MENU; landscape keeps quiet links */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--lav-line);
    padding: 1.2rem var(--gutter) 1.5rem; gap: 1.1rem;
  }
  .nav__toggle {
    display: block; background: none; border: 0; cursor: pointer;
    font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 0.95rem; letter-spacing: 0.12em;
    color: var(--lav); padding: 0.5rem;
  }
}

/* landscape band: links visible but clearly under the logo's weight */
@media (min-width: 721px) and (max-width: 940px) {
  .nav__links { display: flex; gap: 0.95rem; }
  .nav__links a { font-size: 0.78rem; letter-spacing: 0.1em; }
  .nav__toggle { display: none; }
}

/* ---------- the vault ---------- */
.promptcard--locked { background: oklch(0.97 0.01 300); position: relative; }
.promptcard--locked::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, transparent 0 18px, oklch(0.54 0.12 300 / 0.05) 18px 36px); pointer-events: none; }
.vault-lock { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--lav-deep); background: #FFEFA8; border: 2px solid #1D1430; padding: 0.25rem 0.55rem; border-radius: 6px; }
.vaultbox { margin-top: clamp(2.5rem, 5vw, 4rem); border: 4px solid #1D1430; border-radius: 14px; box-shadow: 7px 7px 0 0 #1D1430; padding: clamp(1.4rem, 3vw, 2.2rem); background: linear-gradient(160deg, var(--lav) 0%, var(--lav-deep) 100%); color: #fff; }
.vaultbox h2 { margin: 0 0 1.2rem; color: #fff; }
.vaultbox__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.vaultbox__grid b { display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--gold, #FFC933); margin-bottom: 0.4rem; }
.vaultbox__grid span { color: oklch(0.95 0.02 300); font-size: 0.95rem; }
.vaultcta { margin-top: clamp(2.5rem, 5vw, 4rem); }
.vaultcta h2 { margin-bottom: 1rem; }
.vaultwait__row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.vaultwait__row input { flex: 1 1 180px; padding: 0.8rem 1rem; border: 2px solid #1D1430; border-radius: 10px; font: inherit; }
.vaultwait__note, .vaultwait__done { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.8rem; }

[hidden] { display: none !important; }

/* ---------- the seat line, silent until the room is nearly full ----------
   Added 2026-08-25. One element, four pages, no page-specific copy. It carries
   [hidden] in the markup and site.js only unhides it in "scarce" or "gone"
   mode, so above the disclosure floor these rules never paint anything.

   The gold is deliberate and it is rationed. It is the site's scarcity colour
   and nothing else uses it on these pages, so the day this line appears it
   reads as new information rather than more decoration. */
[data-seats-line] { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; margin-top: 0.5rem; }
[data-seats-line][data-seats-mode="scarce"] { color: var(--gold); }
[data-seats-line][data-seats-mode="gone"] { color: var(--ink-soft); font-weight: 600; }

/* ---------- farm-to-table: the whole pitch, drenched ---------- */
.fttable { background: linear-gradient(165deg, #FFC933 0%, #F5A623 100%); border-block: 5px solid #1D1430; padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; overflow: hidden; overflow: clip; }
.fttable::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, oklch(0.35 0.08 60 / 0.14) 2.4px, transparent 3px); background-size: 24px 24px; pointer-events: none; }
.fttable .wrap { position: relative; }
.fttable__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fttable__title { font-family: 'Bangers', 'Bangers Fallback', 'Archivo', sans-serif; font-weight: 400; font-size: clamp(3rem, 7vw, 5.6rem); letter-spacing: 0.02em; line-height: 0.95; color: #1D1430; margin: 0.6rem 0 1.2rem; text-shadow: 4px 4px 0 #FFFFFF, 7px 7px 0 oklch(0.35 0.08 60 / 0.35); }
.fttable__quote { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; color: #1D1430; max-width: 34ch; line-height: 1.45; margin-bottom: 1.4rem; }
.fttable__chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.6rem; }
.fttable__chips span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; background: #FFFFFF; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; padding: 0.4rem 0.7rem; border-radius: 8px; color: #1D1430; font-weight: 700; }
.fttable__connect { color: oklch(0.28 0.06 60); max-width: 52ch; margin-bottom: 1.6rem; }
.fttable__cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.fttable__cta .btn { border: 3px solid #1D1430; box-shadow: 4px 4px 0 0 #1D1430; }
.fttable__alt { font-family: var(--font-mono); font-size: 0.88rem; color: #1D1430; font-weight: 700; }
.fttable__photo { margin: 0; border: 4px solid #1D1430; box-shadow: 8px 8px 0 0 #1D1430; border-radius: 12px; overflow: hidden; position: relative; transform: rotate(1.6deg); }
.fttable__photo img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.fttable__photo figcaption { position: absolute; left: -3px; bottom: -3px; background: #FFEFA8; color: #1D1430; border: 3px solid #1D1430; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; padding: 0.3rem 0.6rem; border-radius: 0 8px 0 6px; }
@media (max-width: 940px) {
  .fttable__grid { grid-template-columns: 1fr; }
  .fttable__photo { transform: rotate(1.2deg); max-width: 460px; }
  .fttable__photo img { min-height: 240px; }
}

/* ---------- ticker platform branding ---------- */
.t-ico { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 5px; vertical-align: -4px; margin-right: 0.45em; }
.t-ico svg { width: 13px; height: 13px; display: block; }
.t-ico--linkedin { background: #0A66C2; }
.t-ico--tiktok { background: #010101; box-shadow: -1px 0 0 0 #25F4EE, 1px 1px 0 0 #FE2C55; }
.t-ico--instagram { background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.t-ico--youtube { background: #FF0000; }
.t-ico--live { background: #C42A20; }
.t-ico--stream { background: oklch(0.54 0.12 300); }
.t-ico--market { background: #2E7D32; }
.t-ico--replay { background: oklch(0.42 0.1 300); }

/* ---------- origin issue ---------- */
.origin { padding-block: clamp(3.5rem, 7vw, 6rem); background: oklch(0.97 0.008 300); border-block: 1px solid var(--lav-line); }
.origin h2 { margin: 0.8rem 0 1rem; }
.origin__lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; margin-bottom: 2.2rem; }
.origin__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-bottom: 2.4rem; }
.origin__panel { background: #fff; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; padding: 1.3rem 1.4rem; }
.origin__num { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; background: #FFEFA8; border: 2px solid #1D1430; padding: 0.22rem 0.5rem; border-radius: 6px; margin-bottom: 0.8rem; }
.origin__panel p { margin: 0; font-size: 0.98rem; color: var(--ink); }
.origin__quote { margin: 0 0 2rem; font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 110%; font-variation-settings: "wdth" 110; font-size: clamp(1.5rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--lav-deep); max-width: 26ch; border: 0; padding: 0; }
.origin__credit { max-width: 62ch; color: var(--ink-soft); margin-bottom: 1rem; }
.origin__follow { max-width: 62ch; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft); }
.origin__follow a { font-weight: 700; }

/* header tagline + origin teaser */
.nav__tag { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: #1D1430; background: #FFEFA8; border: 2px solid #1D1430; border-radius: 6px; padding: 0.28rem 0.55rem; margin-left: 0.9rem; white-space: nowrap; align-self: center; transform: rotate(-1deg); }
@media (max-width: 1180px) { .nav__tag { display: none; } }
.originteaser { border-block: 1px solid var(--lav-line); background: oklch(0.97 0.008 300); }
.originteaser__row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding-block: 1.4rem; }
.originteaser__row p { margin: 0; font-weight: 600; color: var(--ink); flex: 1 1 320px; }

/* ---------- delivery log ---------- */
.builtcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.builtcard { background: #fff; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; padding: 1.4rem 1.5rem; }
.builtcard__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.builtcard__head h3 { margin: 0; font-size: 1.12rem; }
.builtcard p { margin: 0; font-size: 0.96rem; color: var(--ink-soft); }

.footer__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-bottom: 1.6rem; }
.footer__nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; }
.footer__nav a:hover { color: var(--lav-deep); }

.builtcard__you { margin-top: 0.8rem !important; padding-top: 0.7rem; border-top: 2px dashed var(--lav-line); font-family: var(--font-mono); font-size: 0.78rem !important; letter-spacing: 0.03em; color: var(--lav-deep) !important; }
.builtcard--pattern { background: oklch(0.98 0.008 300); }
.t-status.t-soon { background: oklch(0.9 0.02 300); color: var(--lav-deep); }

/* ---------- find the table ---------- */
.tracker { padding-block: clamp(1rem, 3vw, 2rem) 0; }
.tracker__panel { border: 5px solid #1D1430; border-radius: 14px; box-shadow: 8px 8px 0 0 #1D1430; background: linear-gradient(160deg, var(--lav) 0%, var(--lav-deep) 100%); color: #fff; padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; position: relative; overflow: hidden; }
.tracker__panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, oklch(1 0 0 / 0.1) 2.4px, transparent 3px); background-size: 22px 22px; pointer-events: none; }
.tracker__now { position: relative; }
.tracker__label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--gold, #FFC933); margin-bottom: 0.5rem; }
.tracker__now strong { display: block; font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: 0.03em; line-height: 1.05; color: #fff; margin-bottom: 0.8rem; }
.tracker__now p { color: oklch(0.94 0.02 300); font-size: 0.95rem; margin: 0; }
.tracker__stops { position: relative; display: grid; gap: 0.8rem; }
.tracker__empty { border: 2px dashed oklch(1 0 0 / 0.4); border-radius: 10px; padding: 1rem 1.1rem; font-family: var(--font-mono); font-size: 0.82rem; color: oklch(0.92 0.02 300); }
.stopcard { background: #fff; border: 3px solid #1D1430; border-radius: 10px; box-shadow: 4px 4px 0 0 #1D1430; padding: 0.8rem 1rem; }
.stopcard b { display: block; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em; color: var(--lav-deep); }
.stopcard span { display: block; font-weight: 700; color: var(--ink); }
.stopcard em { display: block; font-style: normal; font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.2rem; }
.huntgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; margin: 1.6rem 0 0; }
.huntstep { background: #fff; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; padding: 1.2rem 1.3rem; }
.huntstep p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.goldenbox { margin-top: clamp(2.5rem,5vw,3.5rem); background: linear-gradient(165deg, #FFC933 0%, #F5A623 100%); border: 5px solid #1D1430; border-radius: 14px; box-shadow: 8px 8px 0 0 #1D1430; padding: clamp(1.5rem,3vw,2.4rem); }
.goldenbox h2 { margin: 0 0 0.8rem; color: #1D1430; }
.goldenbox p { color: oklch(0.28 0.06 60); max-width: 58ch; }
.goldenbox__fine { font-family: var(--font-mono); font-size: 0.84rem; }
.roadgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.3rem; margin-top: 1.4rem; }
.roadstage { background: #fff; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; padding: 1.3rem 1.4rem; }
.roadstage h3 { margin: 0.6rem 0 0.5rem; }
.roadstage p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.roadstage--now { background: oklch(0.98 0.02 300); }
@media (max-width: 940px) { .tracker__panel { grid-template-columns: 1fr; } }

.stopcard--mystery { background: linear-gradient(160deg, #1D1430 0%, #2E2350 100%); border-color: #FFC933; box-shadow: 4px 4px 0 0 #FFC933; }
.stopcard--mystery b { color: #FFC933; }
.stopcard--mystery span { color: #fff; font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.06em; }
.stopcard--mystery em { color: oklch(0.85 0.03 300); }

/* ---------- header: brand owns the bar ---------- */
.nav-mark { width: clamp(46px, 4.4vw, 62px) !important; height: auto !important; }
.nav__brand { gap: 0.7rem !important; }
.nav__brand span, .nav__wordmark { font-size: clamp(0.95rem, 1.5vw, 1.25rem) !important; letter-spacing: 0.34em !important; font-weight: 600 !important; }
.nav__links a { font-size: 0.9rem; letter-spacing: 0.1em; color: oklch(0.42 0.04 300); }
.nav__links { gap: 1.15rem; }
@media (min-width: 721px) and (max-width: 1080px) { .nav__links a { font-size: 0.74rem; letter-spacing: 0.07em; } .nav__links { gap: 0.8rem; } }

/* ---------- iconed lists ---------- */
.iconlist { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.9rem; }
.iconlist li { display: grid; grid-template-columns: 34px 1fr; gap: 0.9rem; align-items: start; }
.iconlist .li-ico { width: 34px; height: 34px; border-radius: 9px; border: 2.5px solid #1D1430; background: #FFEFA8; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 0 #1D1430; }
.iconlist .li-ico svg { width: 17px; height: 17px; }

/* ---------- product logo lockups ---------- */
.prodlogo { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.prodlogo img { width: 46px; height: 46px; border-radius: 10px; border: 2.5px solid #1D1430; background: #fff; box-shadow: 2px 2px 0 0 #1D1430; }
.prodlogo b { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--lav-deep); }

/* ---------- revenue line on build cards ---------- */
.builtcard__rev { margin-top: 0.7rem !important; padding-top: 0.65rem; border-top: 2px solid #1D1430; font-size: 0.86rem !important; color: var(--ink) !important; }
.builtcard__rev b { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; display: block; color: #1D1430; margin-bottom: 0.2rem; }

/* section kicker used for real categories */
.sectionkick { display: inline-block; font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.5rem; letter-spacing: 0.05em; color: #1D1430; background: #FFC933; border: 3px solid #1D1430; box-shadow: 4px 4px 0 0 #1D1430; padding: 0.3rem 0.8rem; border-radius: 8px; transform: rotate(-1deg); margin-bottom: 1rem; }

/* ---------- crew: icon cards, not a text list ---------- */
.crewgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.crewcard { background: #fff; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; padding: 1.2rem 1.3rem; }
.crewcard__ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; margin-bottom: 0.9rem; }
.crewcard__ico svg { width: 24px; height: 24px; }
.crewcard b { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--lav-deep); margin-bottom: 0.35rem; }
.crewcard strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 0.4rem; }
.crewcard p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- the hail: arrival capture, comic panel ---------- */
.hail { position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.6rem); z-index: 60; max-width: min(94vw, 380px); animation: hailin 420ms cubic-bezier(0.16,1,0.3,1) both; }
@keyframes hailin { from { opacity: 0; transform: translateY(26px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
.hail__panel { position: relative; background: #fff; border: 4px solid #1D1430; border-radius: 14px; box-shadow: 8px 8px 0 0 #1D1430; padding: 1.2rem 1.3rem 1.3rem; }
.hail__panel::after { content: ""; position: absolute; left: 34px; bottom: -18px; width: 0; height: 0; border: 14px solid transparent; border-top-color: #1D1430; border-bottom: 0; }
.hail__cap { display: inline-block; font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.15rem; letter-spacing: 0.06em; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; padding: 0.1rem 0.55rem; border-radius: 7px; transform: rotate(-2deg); margin-bottom: 0.7rem; }
.hail h3 { margin: 0 0 0.5rem; font-size: 1.15rem; line-height: 1.2; }
.hail__lede { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--ink-soft); }
.hail form { display: grid; gap: 0.6rem; }
.hail input[type="text"], .hail input[type="tel"] { padding: 0.7rem 0.85rem; border: 2.5px solid #1D1430; border-radius: 9px; font: inherit; font-size: 0.92rem; }
.hail__trap { position: absolute; left: -9999px; }
.hail__consent { display: grid; grid-template-columns: 20px 1fr; gap: 0.55rem; align-items: start; font-size: 0.68rem; line-height: 1.42; color: var(--ink-soft); }
.hail__consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lav); }
.hail .btn { width: 100%; min-height: 46px; border: 3px solid #1D1430; box-shadow: 4px 4px 0 0 #1D1430; }
.hail__fine { margin: 0; font-size: 0.68rem; color: var(--ink-soft); }
.hail__done { margin: 0.6rem 0 0; font-family: var(--font-mono); font-size: 0.88rem; color: var(--lav-deep); }
.hail__x { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0.2rem 0.4rem; min-height: 44px; min-width: 44px; }
@media (max-width: 560px) { .hail { left: 0.7rem; right: 0.7rem; max-width: none; bottom: 0.7rem; } .hail__panel { padding: 1rem 1.05rem 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .hail { animation: none; } }
/* THE YIELD RULE. Found in production 2026-08-25 at 390px on /seat: the hail is
   a fixed panel and on a phone it spans the full width and about 60% of the
   viewport height, so it sat directly on top of the $350 "Book my seat" button.
   Every sample point across that button returned the panel's own heading, which
   means a phone buyer tapping checkout hit the capture form instead. The panel
   is on 26 pages, so this was every mobile CTA rather than one page.
   The panel yields to money: it hides while a pay CTA or the lead form is on
   screen and comes back when neither is. Capture is preserved everywhere else. */
.hail--yield { display: none !important; }

/* THE SEAT HAIL, 2026-10-07 lead path fix. Name and email for the Friday Bootcamp, replacing the
   SMS ask. Built small: on a 390x844 phone the panel stays under 40% of the screen. */
.hail--seat .hail__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hail--seat input[type="email"] { padding: 0.7rem 0.85rem; border: 2.5px solid #1D1430; border-radius: 9px; font: inherit; font-size: 0.92rem; min-width: 0; }
.hail--seat input[type="text"] { min-width: 0; }
.hail--seat form { grid-template-columns: 1fr 1.4fr; gap: 0.5rem; }
.hail--seat form .btn { grid-column: 1 / -1; }
.hail--seat h3 { padding-right: 2rem; }
@media (max-width: 560px) {
  .hail--seat .hail__panel { padding: 0.8rem 0.9rem 0.9rem; box-shadow: 5px 5px 0 0 #1D1430; }
  .hail--seat .hail__panel::after { display: none; }
  .hail--seat .hail__cap { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .hail--seat h3 { font-size: 1rem; margin-bottom: 0.3rem; }
  .hail--seat .hail__lede { font-size: 0.8rem; margin-bottom: 0.55rem; line-height: 1.35; }
  .hail--seat input[type="text"], .hail--seat input[type="email"] { padding: 0.55rem 0.7rem; font-size: 16px; }
  .hail--seat .btn { min-height: 44px; }
}

/* ---------- today's harvest: wireframe produce ---------- */
.fttable__grid { align-items: start; }
.crate { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 3rem); background: #FFFDF4; border: 4px solid #1D1430; border-radius: 14px; box-shadow: 8px 8px 0 0 #1D1430; padding: clamp(1.3rem, 3vw, 2rem); }
.crate__head { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.crate__stamp { font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.35rem; letter-spacing: 0.06em; color: #1D1430; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; padding: 0.15rem 0.6rem; border-radius: 7px; transform: rotate(-1.5deg); white-space: nowrap; }
.crate__head p { margin: 0; flex: 1 1 260px; font-size: 0.95rem; color: oklch(0.3 0.05 60); }
.crate__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
.crate__item { display: block; background: #fff; border: 3px solid #1D1430; border-radius: 11px; box-shadow: 4px 4px 0 0 #1D1430; padding: 0.9rem 0.9rem 1rem; text-decoration: none; transition: transform 160ms cubic-bezier(0.16,1,0.3,1), box-shadow 160ms; }
.crate__item:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #1D1430; background: #FFEFA8; }
.crate__art { display: block; width: 54px; height: 54px; margin-bottom: 0.6rem; }
.crate__art svg { width: 100%; height: 100%; }
.crate__item b { display: block; font-size: 0.98rem; color: var(--ink); margin-bottom: 0.15rem; }
.crate__sub { display: block; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--ink-soft); }
.crate__cta { display: inline-block; margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; color: #1D1430; border-bottom: 2.5px solid #1D1430; }
@media (prefers-reduced-motion: reduce) { .crate__item { transition: none; } }

/* harvest: bigger, bolder produce */
.crate { grid-column: auto; }
.crate__art { width: 76px; height: 76px; margin-bottom: 0.7rem; }
.crate__art svg [stroke="#1D1430"] { stroke-width: 3.2; }
.crate__art svg [stroke="#7A5FA6"] { stroke-width: 1.8; opacity: 0.7; }
.crate__grid { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 1rem; }
.crate__item { padding: 1.05rem 1rem 1.15rem; }
.crate__item b { font-size: 1.04rem; }
.crate__sub { font-size: 0.74rem; }

/* harvest crate sits full width under the pitch */
.crate { grid-column: auto; margin-top: clamp(2rem, 4vw, 3rem); }
.crate__art { width: 78px; height: 78px; }
.crate__grid { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 1rem; }
.crate__item { padding: 1.05rem 1rem 1.15rem; }
.crate__item b { font-size: 1.04rem; }
.crate__sub { font-size: 0.74rem; }

/* harvest: even rows of three, no orphan tile */
.crate__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .crate__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .crate__grid { grid-template-columns: 1fr; } }

/* ---------- the field report ---------- */
.fr__stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.fr__stats div { background: #fff; border: 3px solid #1D1430; border-radius: 11px; box-shadow: 4px 4px 0 0 #1D1430; padding: 0.8rem 1.1rem; min-width: 130px; }
.fr__stats b { display: block; font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 2rem; letter-spacing: 0.04em; color: var(--lav-deep); line-height: 1; }
.fr__stats span { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--ink-soft); margin-top: 0.25rem; }
.fr { display: grid; gap: 1.1rem; }
.fr__day { background: #fff; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; padding: 1.1rem 1.3rem 1.2rem; }
.fr__date { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; background: #FFEFA8; border: 2.5px solid #1D1430; box-shadow: 2px 2px 0 0 #1D1430; padding: 0.22rem 0.55rem; border-radius: 6px; margin-bottom: 0.9rem; }
.fr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fr__list li { display: grid; grid-template-columns: 78px 1fr; gap: 0.8rem; align-items: start; font-size: 0.95rem; color: var(--ink); }
.fr__kind { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; padding: 0.2rem 0.35rem; border-radius: 5px; text-align: center; border: 2px solid #1D1430; }
.fr__kind--shipped { background: oklch(0.9 0.06 150); }
.fr__kind--planned { background: #FFC933; }
@media (max-width: 560px) { .fr__list li { grid-template-columns: 1fr; gap: 0.25rem; } .fr__kind { justify-self: start; } }

/* ---------- audit p0: header must never overflow or clip its CTA ---------- */
.nav .wrap { display: flex; align-items: center; gap: 0.9rem; flex-wrap: nowrap; max-width: 100%; }

/* NAV CENTRING, 2026-09-12. Adam, on a 2560px monitor: "home page nav needs to
   be fixed as it justifies left on a 4k monitor that appears broken."

   HE WAS RIGHT AND THE CAUSE WAS TWO RULES MEETING. `.nav__brand` is display:none
   on the homepage, because the big mark sits in the band directly below and
   showing it twice is worse. But the brand carries `margin-right: auto`, and that
   auto margin was the ONLY thing pushing the links off the left edge. With the
   brand not rendered there is no auto margin, so on a 2544px bar the links
   measured 48px to 761px and left 1783px of dead space.

   ONE RULE FIXES BOTH CASES, because an auto margin beats justify-content for
   free space. Brand rendered: its margin-right:auto still eats the slack, so
   brand left and links right, exactly as before, untouched. Brand hidden: there
   is no auto margin, so justify-content centres the links.

   CENTRED RATHER THAN ALIGNED TO THE 1200px TEXT COLUMN, which was the call Adam
   left to me. The mark, the phone number and the OCTOBER badge in the band
   directly below are already centred as a masthead, so a nav pinned to the text
   column would sit visibly off-centre against the thing under it. */
.nav .wrap { justify-content: center; }
.nav__links { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.nav__brand { flex: 0 0 auto; }
.nav .btn { flex: 0 0 auto; }
html, body { overflow-x: hidden; overflow-x: clip; }
@media (min-width: 941px) and (max-width: 1240px) {
  .nav__links { gap: 0.72rem; }
  .nav__links a:not(.btn) { font-size: 0.76rem; letter-spacing: 0.06em; }
}
/* between the mono breakpoint and desktop the links must yield to the CTA */
@media (min-width: 721px) and (max-width: 940px) {
  .nav__links a:not(.btn) { font-size: 0.7rem; letter-spacing: 0.04em; }
  .nav__links { gap: 0.6rem; }
}
/* mobile menu keeps the primary CTA */
@media (max-width: 720px) {
  .nav__links.open .btn { display: inline-flex; width: 100%; justify-content: center; margin-top: 0.4rem; }
}

/* ---------- audit p0: the brand owns the bar, for real ---------- */
.nav-mark { width: clamp(54px, 5.2vw, 72px) !important; height: auto !important; }
.nav__brand { gap: 0.8rem !important; align-items: center; }
.nav__wordmark { display: flex; flex-direction: column; line-height: 1.04; font-family: var(--font-mono); font-size: clamp(0.58rem, 0.75vw, 0.68rem) !important; letter-spacing: 0.32em !important; font-weight: 600 !important; color: var(--lav); }
.nav__wordmark b { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: 0.005em; color: #1D1430; margin-bottom: 0.1rem; }
/* the CTA is never hidden on a viewport that shows links */
@media (min-width: 721px) and (max-width: 940px) {
  .nav .btn { display: inline-flex !important; padding: 0.55rem 0.8rem; font-size: 0.72rem; }
  .nav__links a:not(.btn) { font-size: 0.68rem; }
  .nav__links { gap: 0.55rem; }
}
/* footer spells the brand too */
.footer__brand span { font-weight: 700; }

/* ---------- audit: vault comparison ---------- */
.compare { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 1.3rem; margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.compare__col { border: 4px solid #1D1430; border-radius: 13px; padding: 1.3rem 1.4rem 1.5rem; background: #fff; box-shadow: 6px 6px 0 0 #1D1430; }
.compare__col--paid { background: linear-gradient(165deg, #FFC933 0%, #F5A623 100%); }
.compare__tag { display: inline-block; font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.3rem; letter-spacing: 0.06em; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; padding: 0.15rem 0.6rem; border-radius: 7px; transform: rotate(-1.5deg); margin-bottom: 1rem; }
.compare__tag--free { background: #fff; color: var(--ink-soft); }
.compare__tag--paid { background: #1D1430; color: #FFC933; }
.compare__col .iconlist { margin-top: 0; }
.compare__col--paid .li-ico { background: #fff; }
.li-ico--yes { background: oklch(0.88 0.09 150) !important; }
.compare__col li span:last-child { font-size: 0.94rem; line-height: 1.45; }
.compare__link { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; border-bottom: 2.5px solid currentColor; }
.compare__price { margin: 1.2rem 0 0; padding-top: 0.9rem; border-top: 3px solid #1D1430; font-family: var(--font-mono); font-size: 0.92rem; color: #1D1430; }
.compare__price b { font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 2rem; letter-spacing: 0.04em; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }

/* ---------- audit: recipe number chips ---------- */
.recipenum { font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.5rem; letter-spacing: 0.04em; color: #1D1430; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex: none; }
.promptcard { border: 4px solid #1D1430; box-shadow: 6px 6px 0 0 #1D1430; border-radius: 12px; }
.promptcard__head { display: flex; align-items: center; gap: 0.9rem; }
.promptcard--locked { position: relative; }
.vault-lock { display: inline-block; }

/* ---------- audit: card icons ---------- */
.cardico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430; flex: none; }
.cardico svg { width: 22px; height: 22px; }
.builtcard__head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.builtcard__head h3 { flex: 1 1 auto; min-width: 0; }
.builtcard__head .t-status { flex: none; }
.path h3 .cardico, .path strong .cardico { margin-right: 0.6rem; vertical-align: middle; }
/* status pills need a base style outside the ticker */
.t-status { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; padding: 0.24rem 0.45rem; border-radius: 6px; border: 2px solid #1D1430; background: oklch(0.9 0.06 150); color: #1D1430; }
.t-status.t-launching { background: #FFC933; }
.t-status.t-soon { background: oklch(0.9 0.02 300); }
.ticker .t-status { border: 0; }
/* Ticker badges own their own colour pairs, at (0,3,0), LAST.
   The card-chip block above (.t-status / .t-status.t-launching) was written for
   the built-card chips and leaked into the ticker: it repainted LAUNCHING gold
   while .ticker .t-launching still won on colour with near-white lavender,
   leaving gold-on-near-white at roughly 1.7:1. Unreadable on a phone, reported
   by Adam 2026-08-07. Never set a ticker background without setting its ink in
   the same rule. */
.ticker .t-status.t-live { background: var(--gold); color: #1D1430; }
.ticker .t-status.t-launching { background: oklch(1 0 0 / 0.18); color: var(--on-lav-soft); }
/* A one-off night. Gold like LIVE because it is the loudest thing on the
   strip, but it reads TONIGHT, so it can never be mistaken for the Thursday
   room two lanes down. */
.ticker .t-status.t-tonight { background: var(--gold); color: #1D1430; font-weight: 600; }
.ticker .t-status.t-soon { background: oklch(1 0 0 / 0.1); color: var(--on-lav-soft); }
/* the four doors keep their routing label on mobile */
@media (max-width: 720px) { .path__q { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--lav-deep); margin-bottom: 0.2rem; } }
.footer__nav a { padding: 0.15rem 0; }

/* ---------- logo restored: the mark spells "2nd" and IS the brain. No text redundancy. ---------- */
/* Weight comes from scale, not from repeating the name. */
.nav-mark { width: clamp(58px, 6vw, 82px) !important; height: auto !important; }
.nav__brand { gap: 0.85rem !important; }
.nav__wordmark { display: block; font-family: var(--font-mono); font-weight: 600 !important; color: var(--lav);
  font-size: clamp(0.85rem, 1.4vw, 1.15rem) !important; letter-spacing: 0.36em !important; text-indent: 0.36em; }
.nav__wordmark b { display: none; }
/* mobile: the mark is the brand, so it gets bigger, not smaller */
@media (max-width: 720px) {
  .nav-mark { width: 62px !important; }
  .nav__wordmark { font-size: 0.82rem !important; letter-spacing: 0.3em !important; }
  .nav .wrap { gap: 0.6rem; }
}
@media (max-width: 420px) {
  .nav-mark { width: 54px !important; }
  .nav__wordmark { font-size: 0.7rem !important; letter-spacing: 0.24em !important; }
}

/* ---------- mobile: comic system holds at phone width ---------- */
@media (max-width: 560px) {
  /* offset shadows shrink so cards never push past the gutter */
  .builtcard, .crewcard, .huntstep, .roadstage, .origin__panel, .crate, .promptcard,
  .compare__col, .fr__day, .hero__field, .cluster figure, .editorial, .marquee figure {
    box-shadow: 4px 4px 0 0 #1D1430;
  }
  .crate__item { box-shadow: 3px 3px 0 0 #1D1430; }
  /* long mono blocks must wrap, not scroll the page */
  .promptcard pre { white-space: pre-wrap; word-break: break-word; font-size: 0.78rem; }
  /* price line reads as one statement */
  .vault-price-line { display: block; }
  /* comic chips never exceed the column */
  .panel-cap, .panel-cap--static, .sectionkick, .crate__stamp, .compare__tag, .hail__cap {
    max-width: 100%; white-space: normal; line-height: 1.25;
  }
  /* card heads stack so status never collides with the title */
  .builtcard__head { gap: 0.55rem; }
  .builtcard__head h3 { flex: 1 1 100%; }
  .cardico { width: 38px; height: 38px; }
  .cardico svg { width: 20px; height: 20px; }
}
/* nothing may push the document sideways on any phone */
@media (max-width: 720px) {
  /* FIXED 2026-08-09, found by Adam on a real phone: the homepage rendered
     already scrolled down, with the nav and ticker cut off above the fold.
     Cause: `overflow-x: hidden` alone. Per spec, setting one axis to hidden
     forces the OTHER axis from `visible` to `auto`, so this line quietly turned
     BODY into a scroll container instead of the viewport. On iOS that produces
     exactly the reported symptom, and it also breaks `position: sticky` on the
     nav, because sticky then resolves against the body box rather than the
     screen. Line 1066 already got this right; this rule came later, was
     mobile-only, and silently undid it. Which is why desktop measured perfectly
     clean while his phone did not.
     `clip` does NOT force the other axis, so it stops sideways scroll without
     creating a scroll container. `hidden` stays first as the old-browser
     fallback. */
  body { overflow-x: hidden; overflow-x: clip; }
  .wrap { max-width: 100%; }
  img, svg, pre, table { max-width: 100%; }
}

/* ---------- audit: one design language, comic everywhere ---------- */
.artpanel { border: 4px solid #1D1430; box-shadow: 8px 8px 0 0 #1D1430; border-radius: 13px; }
.artpanel__cap { background: #FFEFA8; color: #1D1430; border: 3px solid #1D1430; border-radius: 0 8px 0 6px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.09em; padding: 0.3rem 0.6rem;
  left: -3px; bottom: -3px; right: auto; text-shadow: none; }
.slotboard, .pricecard, .rescard, .replaycard, .gocard, .sched {
  border: 4px solid #1D1430 !important; box-shadow: 6px 6px 0 0 #1D1430 !important; border-radius: 12px !important;
}
.slot { border: 3px solid #1D1430 !important; border-radius: 9px !important; background: #fff !important; }
.slot--open { background: oklch(0.94 0.05 150) !important; }
.signup__side { border: 4px solid #1D1430; box-shadow: 6px 6px 0 0 #1D1430; }
@media (max-width: 560px) {
  .artpanel { box-shadow: 5px 5px 0 0 #1D1430; }
  .slotboard, .pricecard, .rescard, .replaycard, .gocard, .sched { box-shadow: 4px 4px 0 0 #1D1430 !important; }
}

/* ---------- TONIGHT: the one-off night, above the weekly ticket ----------
   Same comic construction as the ticket card below it, INVERTED. The weekly
   free session is a white ticket; a one-off night is a dark card with a gold
   stamp. They sit one on top of the other on purpose, and the only reason
   that works is that they do not look alike. */
.tonight {
  position: relative; margin-top: 1.8rem; background: #1D1430; color: #FFFDF7;
  border: 4px solid #1D1430; border-radius: 13px; box-shadow: 7px 7px 0 0 #FFC933;
  padding: 1.6rem 1.4rem 1.3rem;
}
.tonight__stamp {
  position: absolute; top: -16px; left: 18px;
  font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.25rem; letter-spacing: 0.07em; line-height: 1;
  color: #1D1430; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430;
  padding: 0.3rem 0.7rem 0.22rem; border-radius: 8px; transform: rotate(-2deg); white-space: nowrap;
}
.tonight__when { display: block; font-size: clamp(1.25rem, 4.4vw, 1.7rem); line-height: 1.1; font-weight: 900; letter-spacing: -0.01em; }
.tonight__body { margin-top: 0.5rem; font-size: 0.98rem; line-height: 1.5; color: #EDE6FA; }
/* The disambiguator. Small, quiet, and the single most useful line on the
   card, because the only way this goes wrong is somebody reading it as
   Thursday and turning up on the wrong night. */
.tonight__vs {
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 2px dashed #563F82;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C7B6E8;
}
.tonight__foot { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.05rem; }
.tonight__go { background: #FFC933; color: #1D1430; border-color: #FFC933; }
.tonight__go:hover { background: #ffd75c; color: #1D1430; }
.tonight__clock {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; color: #FFC933;
}

/* ---------- hero ticket: the details stop being a wall of text ---------- */
/* ---- THE HERO CAPTURE ---------------------------------------------------
   Built 2026-08-30, replacing the ticket card above the fold. It inherits the
   ticket card's exact visual language on purpose: the 4px ink border, the 7px
   hard shadow and the rotated gold stamp are this site's signature, and a
   capture in a different style would read as an ad dropped on the page rather
   than as part of it.

   The step-two row is [hidden] until the task is in, and display is guarded on
   the attribute: this is a flex row, and flex on a container beats the
   browser's own [hidden] rule, so the field would show through without it. */
.taskcap {
  position: relative; margin-top: 1.8rem; background: #fff;
  border: 4px solid #1D1430; border-radius: 13px; box-shadow: 7px 7px 0 0 #1D1430;
  padding: 1.6rem 1.4rem 1.3rem; display: block;
}
.taskcap__stamp {
  position: absolute; top: -16px; left: 18px;
  font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.1rem; letter-spacing: 0.07em; line-height: 1;
  color: #1D1430; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430;
  padding: 0.3rem 0.7rem 0.22rem; border-radius: 8px; transform: rotate(-2deg); white-space: nowrap;
}
.taskcap__q {
  display: block; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem); margin: 1.3rem 0 1rem; text-wrap: balance;
}
.taskcap__row { display: flex; gap: 0.6rem; align-items: stretch; margin-bottom: 0.6rem; }
.taskcap__row[hidden] { display: none; }
.taskcap__row input {
  flex-grow: 1; min-width: 0; font-family: var(--font-body); font-size: 1rem;
  padding: 0.85rem 0.95rem; border: 2px solid #1D1430; border-radius: 8px;
  background: #fff; color: var(--ink); min-height: 52px;
}
.taskcap__row input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.taskcap__row input:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; }
.taskcap__row button { flex: none; min-height: 52px; white-space: nowrap; }
.taskcap__note {
  margin: 0.7rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty;
}
/* The button sits under the field on a phone rather than squeezing beside it:
   a 52px target next to an input on a 390px screen leaves neither usable. */
@media (max-width: 560px) {
  .taskcap__row { flex-direction: column; }
  .taskcap__row button { width: 100%; }
}

.ticketcard {
  position: relative; margin-top: 1.8rem; background: #fff;
  border: 4px solid #1D1430; border-radius: 13px; box-shadow: 7px 7px 0 0 #1D1430;
  padding: 1.5rem 1.4rem 0;
}
.ticketcard__stamp {
  position: absolute; top: -16px; left: 18px;
  font-family: 'Bangers', 'Bangers Fallback', sans-serif; font-size: 1.25rem; letter-spacing: 0.07em; line-height: 1;
  color: #1D1430; background: #FFC933; border: 3px solid #1D1430; box-shadow: 3px 3px 0 0 #1D1430;
  padding: 0.3rem 0.7rem 0.22rem; border-radius: 8px; transform: rotate(-2deg); white-space: nowrap;
}
.ticketcard__row {
  display: grid; grid-template-columns: 62px 1fr; gap: 0.9rem; align-items: start;
  padding: 0.85rem 0; border-top: 2px dashed var(--lav-line);
}
.ticketcard__row:first-of-type { border-top: 0; padding-top: 0.6rem; }
.ticketcard__k {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; font-weight: 700;
  color: #fff; background: var(--lav-deep); border-radius: 5px; padding: 0.28rem 0; text-align: center;
}
.ticketcard__v { font-size: 0.96rem; line-height: 1.45; color: var(--ink); }
.ticketcard__row:first-of-type .ticketcard__v { font-weight: 800; font-size: 1.02rem; }
/* the perforated stub carries the countdown */
.ticketcard__perf {
  margin: 0.4rem -1.4rem 0; padding: 1.1rem 1.4rem 1.3rem;
  border-top: 3px dashed #1D1430; background: oklch(0.97 0.012 300);
  border-radius: 0 0 9px 9px; position: relative;
}
.ticketcard__perf::before, .ticketcard__perf::after {
  content: ""; position: absolute; top: -13px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg, #fff); border: 4px solid #1D1430;
}
.ticketcard__perf::before { left: -15px; -webkit-clip-path: inset(0 0 0 50%); clip-path: inset(0 0 0 50%); }
.ticketcard__perf::after { right: -15px; -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); }
.ticketcard__perf .count__label { margin-top: 0; color: var(--ink-soft); }
.ticketcard__perf .count { margin-top: 0.6rem; gap: 0.6rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.ticketcard__perf .count div {
  background: #fff; border: 2.5px solid #1D1430; border-radius: 8px; padding: 0.45rem 0.2rem 0.35rem;
  text-align: center; box-shadow: 2px 2px 0 0 #1D1430;
}
.ticketcard__perf .count b { font-size: clamp(1.35rem, 5vw, 1.9rem); display: block; line-height: 1; }
.ticketcard__perf .count span { font-size: 0.56rem; letter-spacing: 0.1em; }
.hero__cta { margin-top: 1.6rem; }
.hero__cta .btn { border: 3px solid #1D1430; box-shadow: 5px 5px 0 0 #1D1430; min-height: 54px; padding-inline: 1.6rem; }
@media (max-width: 560px) {
  .ticketcard { box-shadow: 5px 5px 0 0 #1D1430; padding: 1.6rem 1.1rem 0; }
  .ticketcard__stamp { font-size: 1.1rem; left: 12px; }
  .ticketcard__row { grid-template-columns: 54px 1fr; gap: 0.7rem; }
  .ticketcard__perf { margin-inline: -1.1rem; padding-inline: 1.1rem; }
  .hero__cta .btn { width: 100%; }
}

/* ================= sitewide separation pass ================= */

/* Panels: any grouped facts get an ink frame, everywhere. */
.signup__side, .promptcard, .rescard, .replaycard, .gocard, .sched,
.origin__panel, .huntstep, .roadstage, .crewcard, .builtcard, .crate,
.compare__col, .fr__day, .stopcard, .vaultcta form, .faq {
  border-radius: 12px;
}

/* Key chips: the ticketcard pattern, reusable. */
.keychip {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; font-weight: 700;
  color: #fff; background: var(--lav-deep); border-radius: 5px; padding: 0.28rem 0.5rem;
  display: inline-block; text-align: center;
}

/* Dashed internal rules replace invisible spacing on every stacked list. */
.signup__side .srow { border-top: 2px dashed var(--lav-line); }
.signup__side .srow:first-of-type { border-top: 0; }
.signup__side .srow b { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: #fff; background: var(--lav-deep); border-radius: 5px; padding: 0.28rem 0.5rem; align-self: start; }

/* FAQ: rows become separated cards instead of a hairline wall. */
.faq__item, .faq details, details.faq__q {
  border: 3px solid #1D1430 !important; border-radius: 10px !important; background: #fff;
  box-shadow: 4px 4px 0 0 #1D1430; margin-bottom: 0.8rem; padding: 0.9rem 1.1rem;
}
.faq__item summary, .faq summary { cursor: pointer; font-weight: 800; }

/* Field notes / schedule rows: key chip + dashed separation. */
.sched__row, .note__row, .fieldnote {
  border-top: 2px dashed var(--lav-line) !important;
}
.sched__when, .note__date {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; font-weight: 700;
  color: #fff; background: var(--lav-deep); border-radius: 5px; padding: 0.28rem 0.5rem;
  display: inline-block; align-self: start; white-space: nowrap;
}

/* Numbers and statuses always get a tile. */
.count div, .fr__stats div, .slot {
  border: 2.5px solid #1D1430; border-radius: 8px; box-shadow: 2px 2px 0 0 #1D1430; background: #fff;
}
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.count div { text-align: center; padding: 0.45rem 0.2rem 0.35rem; }
.count b { display: block; line-height: 1; }
.count span { font-size: 0.56rem; letter-spacing: 0.1em; }

/* Section boundaries: kicker, heading, body, in that order, with air. */
.paths + .paths, section + section { position: relative; }
.sectionkick + h2, .panel-cap--static + h2, .panel-cap--static + h1 { margin-top: 0.6rem; }

/* Mission personas and three-forms: bare columns become panels. */
.mission__who > div, .forms__item, .whyme__row {
  background: oklch(1 0 0 / 0.08); border: 2px solid oklch(1 0 0 / 0.3); border-radius: 10px;
  padding: 1rem 1.1rem;
}
.whyme__row { background: #fff; border: 3px solid #1D1430; box-shadow: 4px 4px 0 0 #1D1430; margin-bottom: 0.8rem; }

/* Never let two panels touch without a gap. */
.builtcards, .crewgrid, .huntgrid, .roadgrid, .crate__grid, .promptcards { row-gap: 1.2rem; }

@media (max-width: 560px) {
  .faq__item, .faq details, details.faq__q, .whyme__row { box-shadow: 3px 3px 0 0 #1D1430; }
  .count { gap: 0.45rem; }
  .count b { font-size: 1.35rem; }
}

/* mission personas: panels on the drench, not loose text */
.mission__lives { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 1.8rem; }
.mission__lives > div {
  background: oklch(1 0 0 / 0.1); border: 2.5px solid oklch(1 0 0 / 0.42); border-radius: 11px;
  padding: 1.1rem 1.2rem; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mission__lives h3 { margin: 0 0 0.45rem; font-size: 1.02rem; color: #fff; }
.mission__lives p { margin: 0; font-size: 0.93rem; color: oklch(0.93 0.02 300); }
/* chat vignettes get the ink language too */
.chat { border: 2.5px solid oklch(1 0 0 / 0.42) !important; border-radius: 11px !important; }
/* three-forms and credential rows */
.forms > div, .work__grid > div, .proof__grid > div {
  border: 3px solid #1D1430; border-radius: 11px; box-shadow: 4px 4px 0 0 #1D1430; background: #fff; padding: 1.1rem 1.2rem;
}
@media (max-width: 560px) { .forms > div, .work__grid > div, .proof__grid > div { box-shadow: 3px 3px 0 0 #1D1430; } }

/* ================= Safari hardening ================= */
/* Fallback colour layer: if oklch() is unsupported the declaration is dropped,
   so a plain hex lands first and the page never renders colourless. */
:root {
  --ink: #1D1430; --ink-soft: #4a4360; --lav: #7A5FA6; --lav-deep: #563F82;
  --lav-tint: #F1ECF8; --lav-line: #D9CFEA; --gold: #FFC933;
}
@supports (color: oklch(0.5 0.1 300)) {
  :root {
    --ink: oklch(0.22 0.045 300); --ink-soft: oklch(0.44 0.03 300);
    --lav: oklch(0.54 0.12 300); --lav-deep: oklch(0.42 0.11 300);
    --lav-tint: oklch(0.96 0.02 300); --lav-line: oklch(0.88 0.03 300);
  }
}
/* Safari needs an explicit height chain for absolutely positioned SVG art. */
.hero__art { position: relative; }
.hero__field { -webkit-transform: translateZ(0); transform: translateZ(0); }
/* Inline SVG must not be squashed by flex in Safari. */
.cardico svg, .crate__art svg, .li-ico svg, .crewcard__ico svg, .t-ico svg { flex: none; }
.cardico, .li-ico, .crewcard__ico, .t-ico { -webkit-flex: none; flex: none; }
/* Safari applies stroke-width from attribute selectors inconsistently; force it. */
.crate__art svg path, .crate__art svg circle, .crate__art svg ellipse { vector-effect: non-scaling-stroke; }
/* Sticky headings inside overflow containers break in Safari; disable there. */
@supports (-webkit-touch-callout: none) {
  .work h2 { position: static; }
}

/* ---------- four doors: rebuilt so nothing collides ----------
   Desktop column alignment is owned by the @media (min-width: 861px) block
   further down, which pins column 1 to a fixed width. Do not add a second
   alignment mechanism here; it will be silently overridden by that block. */
.path {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.4vw, 1.8rem);
  align-items: center;
}
.path .cardico { align-self: center; }
.path__q { align-self: center; }
@media (max-width: 860px) {
  .path {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "q q q" "ico body go";
    row-gap: 0.7rem; column-gap: 0.9rem;
    padding-block: 1.4rem;
    align-items: start;
  }
  .path__q {
    grid-area: q; display: inline-block; justify-self: start; white-space: nowrap;

    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
    color: #1D1430; background: #FFEFA8; border: 2px solid #1D1430; border-radius: 5px;
    padding: 0.22rem 0.5rem; margin: 0;
  }
  .path .cardico { grid-area: ico; align-self: start; }
  .path > span:not(.path__q):not(.cardico):not(.path__go) { grid-area: body; }
  .path__go { grid-area: go; align-self: center; }
  .path h3 { font-size: 1.1rem; line-height: 1.25; }
}

.nopay-note { margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.45; color: var(--ink-soft); max-width: 46ch; }

/* ---------- four doors: fixed columns so nothing ranks ragged ---------- */
@media (min-width: 861px) {
  .path {
    grid-template-columns: 15rem 62px minmax(0, 1fr) 2rem;
    align-items: center;
    column-gap: 1.4rem;
    padding-block: 1.5rem;
  }
  /* the routing label is a right-aligned column of its own, so every icon,
     title and arrow lands on the same vertical line down the whole list */
  .path__q {
    justify-self: end; text-align: right; white-space: nowrap;
    font-size: 0.78rem; letter-spacing: 0.1em;
  }
  .path .cardico { justify-self: center; }
  .path h3 { margin-bottom: 0.25rem; }
  .path p { max-width: 62ch; }
  .path__go { justify-self: end; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .path { grid-template-columns: 12.5rem 56px minmax(0, 1fr) 1.6rem; }
  .path__q { font-size: 0.72rem; letter-spacing: 0.07em; }
}

/* the second brain, photographed rather than described */
.sammshot { margin: 1rem 0 0; border: 4px solid #1D1430; border-radius: 12px; box-shadow: 6px 6px 0 0 #1D1430; overflow: hidden; background: #0b0a14; }
.sammshot img { display: block; width: 100%; height: auto; }
.sammshot figcaption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #1D1430; background: #FFEFA8; border-top: 3px solid #1D1430; padding: 0.5rem 0.7rem; }
@media (max-width: 560px) { .sammshot { box-shadow: 4px 4px 0 0 #1D1430; } }

/* ================= contrast pairs, 2026-08-07 =================
   Every block below declares a surface and the ink that sits on it in one
   place, adjacent, and last. Splitting a background into one rule and its
   ink into another is what put white digits on white tiles; keep them
   together so the cascade cannot separate them again. */

/* Countdown tiles. The tile turned white ("numbers always get a tile") while
   the drench-band rule still painted the digits white: 1.00:1, invisible.
   White tile, ink ink, soft-ink label: 17.5:1 and 7.5:1. */
.count div,
.signup .count div { background: #fff; }
.count div b,
.signup .count div b { color: var(--ink); }
.count div span,
.signup .count div span { color: var(--ink-soft); }

/* Ticker status chips on the deep lavender bar. --on-lav-soft over an 18% and
   a 10% white wash measured 3.54:1 and 4.42:1; white ink gives 5.5:1 and 6.8:1. */
.ticker .t-status.t-launching { background: oklch(1 0 0 / 0.18); color: #fff; }
.ticker .t-status.t-soon { background: oklch(1 0 0 / 0.1); color: #fff; }

/* Table tracker panel. #FFC933 on the lavender gradient measured 3.65:1.
   #FFEFA8 is the cream already used by the panel captions: 4.6:1 worst case
   against the lightest end of the gradient. */
.tracker__panel {
  background: linear-gradient(160deg, var(--lav) 0%, var(--lav-deep) 100%);
  color: #fff;
}
.tracker__panel .tracker__label { color: #FFEFA8; }

/* The lavender upsell prompt card, same gold-on-lavender pair (3.82:1). */
.promptcard.promptcard--onlav {
  background: linear-gradient(160deg, var(--lav) 0%, var(--lav-deep) 100%);
  color: #fff;
}
.promptcard.promptcard--onlav .promptcard__head h3 { color: #fff; }
.promptcard.promptcard--onlav .promptcard__use { color: #FFEFA8; }
/* UI/UX desk 2026-09-14: the bar sat on lav-tint under a lavender card, a white strip with a white button. */
.promptcard.promptcard--onlav .promptcard__bar { background: transparent; padding-top: 0; }


/* ── THE MAP (homepage scope grid) ───────────────────────────────────
   Built mobile-first on purpose: the phone case is the one that was
   broken. Two columns at phone width is the widest that keeps the
   label on one line at 402px, and fourteen tiles then land in roughly
   one thumb-flick, which is the density that reads as depth. */
.scope { padding-block: var(--band); }
.scope h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%;
  font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.scope__intro { color: var(--ink-soft); margin-bottom: 1.8rem; }
.scope__grid {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scopetile {
  display: block; text-decoration: none; border-radius: 12px;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, canvas 92%, transparent);
  transition: transform .16s ease, border-color .16s ease;
}
.scopetile b {
  display: block; font-weight: 800; font-size: 0.98rem; line-height: 1.2;
  letter-spacing: -0.01em;
}
.scopetile span {
  display: block; margin-top: 0.22rem; font-size: 0.8rem; line-height: 1.3;
  color: var(--ink-soft);
}
.scopetile:hover { transform: translateY(-2px); border-color: currentColor; }
/* Free things are marked, because "five of them cost nothing" is a
   claim the eye should be able to verify without counting. */
.scopetile--free { border-color: color-mix(in srgb, var(--accent, #7A5FA6) 55%, transparent); }
.scopetile--free b::after {
  content: "FREE"; float: right; font-size: 0.58rem; letter-spacing: .08em;
  font-weight: 700; opacity: .85; transform: translateY(2px);
}
.scopetile--quiet { opacity: .82; }

@media (min-width: 721px) { .scope__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } }
@media (min-width: 941px) { .scope__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .scopetile:hover { transform: none; } }


/* ── THE TEXT LINE ───────────────────────────────────────────────────────
   Sticky because the ask was "findable at all times". A number in the footer
   is filed, not findable. Bottom on phones so it sits under the thumb and
   never covers the nav; it hides itself entirely when no number is set. */
.textline {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.6rem;
  max-width: min(94vw, 30rem);
  padding: 0.6rem 1rem 0.6rem 0.75rem;
  border-radius: 999px; text-decoration: none;
  background: #1D1430; color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.textline:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.34); }
.textline__ico {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 999px;
  background: #7A5FA6; color: #fff;
}
.textline__txt { display: block; min-width: 0; line-height: 1.15; }
.textline__txt b {
  display: block; font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em;
  white-space: nowrap;
}
.textline__txt em {
  display: block; font-style: normal; font-size: 0.76rem; opacity: .82;
  margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .textline:hover { transform: translateX(-50%); } }


/* ── LIVE BAR ────────────────────────────────────────────────────────────
   Above everything, on every page. Loud on purpose: the whole point is that
   a visitor who lands mid-stream cannot miss it. */
.livebar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem clamp(0.9rem, 3vw, 2rem);
  background: #E1173F; color: #fff; text-decoration: none;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em;
}
.livebar:hover { background: #C7102F; }
.livebar__dot {
  width: 9px; height: 9px; border-radius: 999px; background: #fff; flex: none;
  animation: livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.livebar__now { font-weight: 900; letter-spacing: .08em; }
.livebar__txt { opacity: .95; font-weight: 600; }
.livebar__go { margin-left: auto; font-weight: 900; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .livebar__dot { animation: none; } }

/* THE BEFORE STATE. Same bar, deliberately NOT the same colour.
   Red is reserved for "this is happening right now, click it". A night that
   has not started yet gets the deep lavender with a gold rule, so a returning
   visitor can tell the two apart from the corner of their eye without reading
   a word. Getting this wrong costs more than it looks: a red bar that is not
   actually live teaches people to ignore the red bar. */
.livebar--soon { background: var(--lav-deep, #1D1430); color: #FFFDF7; box-shadow: inset 0 -2px 0 var(--gold, #FFC933); }
.livebar--soon:hover { background: #2A1D45; }
.livebar--soon .livebar__dot { background: var(--gold, #FFC933); }
.livebar--soon .livebar__now,
.livebar--soon .livebar__go { color: var(--gold, #FFC933); }
.livebar__in {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; opacity: 0.82; white-space: nowrap;
}
/* On a phone the bar wraps to two lines; the countdown is the first thing to
   give up its place, since the time is already in the title. */
@media (max-width: 480px) { .livebar__in { display: none; } }
/* 2026-09-16 FUNNEL, off the VISITORS read (hn-mu2wgaav): six phone visitors
   stopped on / with no door. On a phone the "soon" bar plus the menu plus the
   header pushed the seat button to the bottom of the first screen, and the
   bar itself is an exit to YouTube sitting above the door. The before-state
   bar gives up the phone; the LIVE bar (red, no --soon) still shows. */
@media (max-width: 620px) { .livebar--soon { display: none; } }


/* ── ECOSYSTEM FEED ──────────────────────────────────────────────────────
   Social-shaped, but curated from config. Two columns on a phone so several
   items are visible at once; density is what makes it read as a feed. */
.ecofeed { padding-block: var(--band); }
.ecofeed h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%;
  font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.ecofeed__intro { color: var(--ink-soft); margin-bottom: 1.6rem; }
.ecofeed__grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ecocard {
  display: block; text-decoration: none; border-radius: 14px; padding: 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, canvas 94%, transparent);
  transition: transform .16s ease, border-color .16s ease;
}
.ecocard:hover { transform: translateY(-2px); border-color: currentColor; }
.ecocard__k {
  display: inline-block; font-size: 0.6rem; font-weight: 900; letter-spacing: .09em;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.ecocard__w { float: right; font-size: 0.72rem; opacity: .7; font-weight: 700; }
.ecocard b { display: block; margin-top: 0.5rem; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.ecocard em { display: block; margin-top: 0.25rem; font-style: normal; font-size: 0.82rem;
  line-height: 1.35; color: var(--ink-soft); }
.ecocard--live { border-color: #E1173F; }
.ecocard--live .ecocard__k { background: #E1173F; color: #fff; }
.ecofeed__follow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.3rem; }
.ecofeed__fl { font-size: 0.82rem; font-weight: 800; opacity: .75; }
.ecopill {
  display: inline-block; text-decoration: none; font-size: 0.74rem; font-weight: 800;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.ecopill:hover { border-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .ecocard:hover { transform: none; } }


/* ── NAV PHONE ───────────────────────────────────────────────────────────
   Was a sticky bar at the BOTTOM of the page. Adam could barely find it, which
   is fatal for the one element whose whole job is being findable. Top right of
   the nav is where a person looks for a way to make contact. */
.navphone {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.8rem; border-radius: 999px; text-decoration: none;
  background: #1D1430; color: #fff; white-space: nowrap;
  border: 2px solid #1D1430;
  box-shadow: 3px 3px 0 #7A5FA6;
  transition: transform .12s ease, box-shadow .12s ease;
}
.navphone b { font-size: 0.86rem; font-weight: 900; letter-spacing: -0.01em; }
.navphone:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #7A5FA6; }
@media (max-width: 940px) { .navphone b { font-size: 0.8rem; } .navphone { padding: 0.36rem 0.6rem; } }
@media (prefers-reduced-motion: reduce) { .navphone:hover { transform: none; } }

/* ── THE WIRE ────────────────────────────────────────────────────────────
   Comic-panel news strip, directly under the nav so it is above the fold on
   every device. Horizontal scroll rather than wrap: a wire that grows taller
   pushes the hero off the screen, which is the problem this is solving. */
.wire {
  background: #FFD84D;
  border-block: 3px solid #1D1430;
  overflow: hidden;
}
.wire__inner { display: flex; align-items: stretch; }
.wire__flag {
  flex: none; display: grid; place-items: center; text-align: center;
  padding: 0 0.7rem; background: #E1173F; color: #fff;
  font-weight: 900; font-size: 0.62rem; line-height: 1.05; letter-spacing: .06em;
  border-right: 3px solid #1D1430;
}
.wire__rail {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wire__rail::-webkit-scrollbar { display: none; }
.wcard {
  flex: none; scroll-snap-align: start;
  width: min(72vw, 15rem);
  padding: 0.6rem 0.85rem;
  border-right: 2px solid rgba(29,20,48,.28);
  text-decoration: none; color: #1D1430;
  transition: background .12s ease;
}
.wcard:hover { background: rgba(255,255,255,.55); }
.wcard__w {
  display: block; font-size: 0.58rem; font-weight: 900; letter-spacing: .1em;
  opacity: .72;
}
.wcard b {
  display: block; margin-top: 0.12rem; font-size: 0.9rem; font-weight: 900;
  letter-spacing: -0.01em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wcard em {
  display: block; font-style: normal; font-size: 0.72rem; line-height: 1.2;
  opacity: .78; margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wcard--live { background: #E1173F; color: #fff; }
.wcard--live:hover { background: #C7102F; }
.wcard--live .wcard__w { opacity: 1; }
.wcard--follow b { font-size: 0.78rem; }

/* Scroll affordance. A strip that scrolls but does not LOOK like it scrolls is
   a strip whose second card nobody ever sees. The fade only appears where the
   rail actually overflows, which on a phone is always. */
.wire__inner { position: relative; }
.wire__inner::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2.2rem;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,216,77,0), #FFD84D 78%);
}
@media (min-width: 1100px) { .wire__inner::after { display: none; } }


/* ════════════════════════════════════════════════════════════════════════
   TOP CHROME REPAIR, 2026-08-08. Three problems Adam caught by eye, all
   confirmed by measuring the live page.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. THE INVISIBLE BUTTON. Measured contrast ratio: 1.00. Not "low", gone.
      `.nav__links a` is specificity 0,2,1 and `.btn` is 0,1,0, so every button
      inside the nav lost its white text to the nav link colour and rendered
      dark-on-lavender at identical luminance. The primary call to action in
      the header has been unreadable. This restores it and raises the surface
      so the pair clears AA comfortably rather than scraping it. */
.nav__links a.btn { color: #fff; background: var(--lav-deep); }
.nav__links a.btn:hover { color: #fff; background: var(--ink); }

/* 2. THE SQUINT. Nav links were computing to 14.4px at weight 400. Contrast
      was fine at 6.79, so this was never a colour problem, it was size and
      weight. */
.nav__links a { font-size: 1rem; font-weight: 650; letter-spacing: -0.005em; }
.nav__links { gap: 1.35rem; }

/* 3. THE WIRE, RE-THEMED. It shipped on raw hex (#FFD84D, #E1173F) picked
      outside the design system, which is exactly why it read as bolted on.
      Everything below now runs on the same tokens as the rest of the site. */
.wire { background: var(--gold); border-block: 2px solid var(--ink); }
.wire__flag {
  background: var(--lav-deep); color: var(--on-lav);
  border-right: 2px solid var(--ink);
  font-family: var(--font-mono); letter-spacing: .1em;
}
.wcard { color: var(--ink); border-right: 1px solid color-mix(in oklch, var(--ink) 22%, transparent); }
.wcard:hover { background: color-mix(in oklch, #fff 55%, transparent); }
.wcard__w { font-family: var(--font-mono); letter-spacing: .12em; opacity: .78; }
.wcard--live { background: var(--lav-deep); color: var(--on-lav); }
.wcard--live:hover { background: var(--ink); }
.wire__inner::after { background: linear-gradient(90deg, transparent, var(--gold) 78%); }

/* ── HOTLINE PILL ────────────────────────────────────────────────────────
   Same floating treatment Adam liked, on tokens, at the top. */
.hotline {
  position: sticky; top: var(--navh, 60px); z-index: 55;
  display: flex; justify-content: center;
  padding: 0.55rem clamp(0.7rem, 3vw, 2rem) 0;
  pointer-events: none;                       /* the band never eats a click */
}
.hotline__pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0.6rem;
  max-width: min(96vw, 26rem);
  padding: 0.5rem 1.05rem 0.5rem 0.6rem;
  border-radius: 999px; text-decoration: none;
  background: var(--ink); color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--gold), 0 10px 26px -14px var(--ink);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.hotline__pill:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--gold), 0 14px 30px -14px var(--ink);
}
.hotline__ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--lav); color: #fff;
}
.hotline__txt { min-width: 0; line-height: 1.12; }
.hotline__txt b { display: block; font-weight: 900; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; }
.hotline__txt em {
  display: block; font-style: normal; font-size: 0.73rem; opacity: .86;
  margin-top: 0.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Wide screens: tuck it right so it never sits over the headline. */
@media (min-width: 1100px) { .hotline { justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .hotline__pill:hover { transform: none; } }

/* The compact nav number is redundant once the pill sits directly beneath it
   on a narrow screen, so it stands down rather than crowding the menu. */
@media (max-width: 900px) { .navphone { display: none; } }
.navphone { background: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--gold); }
.navphone:hover { box-shadow: 5px 5px 0 var(--gold); }


/* ════════════════════════════════════════════════════════════════════════
   TOP CHROME, ROUND TWO — 2026-08-09. Adam lived with the 8/8 build and
   pushed back on five things. Four are placement and weight; one reverses a
   call I made against his taste, which is his call to reverse.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. THE PILL GOES LEFT. On wide screens it was tucked RIGHT, which parked it
      directly beneath the compact nav number: the same phone number twice, in
      one corner, 150px apart. That reads as a bug rather than a pair. Left
      side puts it in clear air and leaves the corner to the nav number, so
      each one is doing a different job in a different place. */
@media (min-width: 1100px) { .hotline { justify-content: flex-start; } }

/* 2. THE TICKER IS BACK. I REMOVED IT ON 8/8 ARGUING THE WIRE . Rationale in _source-notes/site.css.notes.md */

/* 3. NAV LINKS TAKE MORE EMPHASIS. 8/8 fixed the squint by going 14.4px→16px
      at the size the links could be read. This is the separate question of how
      loud they should be, and the answer is louder: full ink rather than the
      muted lavender, which also lifts contrast rather than spending it. */
.nav__links a { font-size: 1.14rem; letter-spacing: 0.01em; color: var(--ink); }

/* 4. THE LOCKUP. Adam's read: mark sits low, CONSULTING drifts too far from it,
      and the weight is off — which he diagnosed as the wrong font, correctly.
      CONSULTING was IBM Plex Mono 600 at 0.34em: a typewriter face, lightly
      weighted, held far apart, next to a mark that is dense, rounded and
      solid. Nothing was going to balance that at any size. Archivo 800 is the
      body family already loaded, so this costs no request, and at the SAME
      font size it matches the mark's density instead of apologising to it.
      Tracking closes 0.34em→0.19em and the gap 0.7rem→0.3rem, so the word
      reads as part of the mark rather than a caption parked beside it. */
.nav__brand { gap: 0.3rem !important; }
.nav__brand span, .nav__wordmark {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: 0.19em !important;
  color: var(--lav-deep);
}
/* The mark rides slightly high of the optical centre. Centred on the cap
   height of a wide-tracked word, it read as sunk. */
.nav-mark { transform: translateY(-3px); }


/* ── MOBILE: THE PILL VERSUS THE OPEN MENU ───────────────────────────────
   Found by Adam on a real phone, 2026-08-09, which is the render neither the
   8/8 session nor the 8/9 session could produce: resize_window reported
   success both times while innerWidth never actually changed, so every mobile
   claim to this point was CSS reasoning rather than a render. This one was
   only ever going to be caught by a human holding a phone.

   THE BUG: .hotline sits at z-index 55 and .nav at var(--z-nav), which is 40.
   The mobile menu panel is absolutely positioned INSIDE the nav, so it
   inherits the nav's stacking context and lost to the pill. The pill landed on
   top of BUILD WITH ME and covered a nav row completely, meaning a phone user
   could not reach that page from the menu at all.

   Two fixes rather than one, because they fail differently. Raising the nav
   fixes the stacking even if :has() is unavailable. Hiding the pill fixes the
   overlap even if a future change reshuffles z-index again. Neither depends on
   JavaScript running. */
@media (max-width: 720px) {
  .nav { z-index: 60; }
  header.nav:has(.nav__links.open) ~ .hotline,
  header.nav:has(.nav__toggle[aria-expanded="true"]) ~ .hotline { display: none; }
}


/* THE LOCKUP, ROUND THREE ────────────────────────────────────. Rationale in _source-notes/site.css.notes.md */
.nav__brand span, .nav__wordmark {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--lav-deep);
}


/* ── THE BENCH ───────────────────────────────────────────────────────────
   Adam's idea, 2026-08-09. The homepage has always claimed "I build the
   systems live, in public, every week" and nothing on the property proved it.
   That was the largest unbacked sentence on the site. This makes it literally
   true using work he is already doing.

   It is also the only honest answer to the objection the Plugged In Standard
   names: the prospect is not asking whether it works, they are asking whether
   they will be left holding something they do not understand. You cannot argue
   anyone out of that scar. You can show the work and hand over the actual
   prompt, which is exactly what the vendor who burned them would never do. */
.bench {
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--lav-deep);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.bench__head {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  background: var(--ink); color: #fff;
  padding: 0.6rem 1rem;
}
.bench__dot {
  width: 9px; height: 9px; border-radius: 999px; background: #E1173F; flex: none;
  box-shadow: 0 0 0 0 rgba(225,23,63,.7); animation: benchpulse 2.2s infinite;
}
@keyframes benchpulse {
  0% { box-shadow: 0 0 0 0 rgba(225,23,63,.65); }
  70% { box-shadow: 0 0 0 9px rgba(225,23,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,23,63,0); }
}
@media (prefers-reduced-motion: reduce) { .bench__dot { animation: none; } }
.bench__kicker { font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; }
.bench__since { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; opacity: 0.7; margin-left: auto; }
.bench__body { padding: 1.15rem 1.15rem 1.3rem; }
.bench__problem { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.2; margin: 0 0 0.7rem; }
.bench__meta { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
.bench__meta div { display: flex; gap: 0.55rem; align-items: baseline; font-size: 0.9rem; }
.bench__meta b {
  flex: none; font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.14em; color: var(--lav); min-width: 5.4rem;
}
.bench__solve { border-top: 2px dashed var(--lav-line); padding-top: 0.9rem; }
.bench__solve h4 { margin: 0 0 0.4rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--lav); }
.bench__prompt {
  background: var(--lav-tint); border-left: 3px solid var(--lav);
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5;
  padding: 0.75rem 0.85rem; margin: 0.5rem 0 0; white-space: pre-wrap;
}
.bench__past { margin-top: 1rem; border-top: 2px solid var(--ink); padding-top: 0.85rem; }
.bench__past h4 { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--lav); }
.bench__past li { font-size: 0.88rem; margin-bottom: 0.45rem; line-height: 1.35; }
.bench__past li span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--lav); letter-spacing: 0.06em; }
.bench__past ul { margin: 0; padding-left: 1.05rem; }

/* the bench ladder: lane chip, stars, and the two locked states */
.bench__lane { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; background: rgba(255,255,255,.16); padding: 0.12rem 0.45rem; border-radius: 3px; }
.bench__stars { margin-left: 0.5rem; letter-spacing: 0.06em; }
.bench__stars i { font-style: normal; color: var(--lav-line); font-size: 0.82rem; }
.bench__stars i.on { color: var(--gold); }
.bench__open { font-size: 0.86rem; color: var(--ink-soft); font-style: italic; margin: 0.2rem 0 0; }
.bench__solvedq { font-weight: 800; margin: 0 0 0.2rem; }
.bench__outcome { margin: 0 0 0.7rem; }
.bench__take { font-size: 0.78rem; color: var(--ink-soft); margin: 0.45rem 0 0; }
.bench__locked {
  border: 2px dashed var(--lav); background: var(--lav-tint);
  padding: 0.85rem 0.95rem; border-radius: 6px; margin-top: 0.5rem;
}
.bench__locked--vault { border-style: solid; border-color: var(--ink); background: var(--lav-deep); color: #fff; }
.bench__locked b { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--lav); margin-bottom: 0.35rem; }
.bench__locked--vault b { color: var(--gold); }
.bench__locked p { margin: 0 0 0.7rem; font-size: 0.92rem; }
.bench__hint { display: block; font-size: 0.72rem; opacity: 0.75; margin-top: 0.5rem; }

/* the loop closer: the audience supplies the next bench entry */
.bench__submit { margin-top: 1.1rem; border-top: 2px solid var(--ink); padding-top: 0.95rem; }
.bench__submit b { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--lav); margin-bottom: 0.4rem; }
.bench__submit p { margin: 0 0 0.75rem; font-size: 0.95rem; }
.bench__qstat { font-size: .86rem; color: var(--lav-deep); margin: 0 0 .75rem; }
.bench__qstat strong { font-family: var(--font-mono); font-weight: 700; }
/* REAL DEPTH, added 2026-08-25 with BRAIN_QUEUE. Deliberately quieter than the
   throughput line above it: what got FINISHED is the proof, what is waiting is
   context. Styling depth louder than throughput would be the visual version of
   the mistake the seeded count made. Both rules hide themselves when there is
   nothing real to say, so neither ever renders an empty shell. */
.bench__qdepth { font-size: .86rem; color: var(--lav-deep); margin: 0 0 .5rem; }
.bench__qdepth strong { font-family: var(--font-mono); font-weight: 700; }
.bench__qlist { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; gap: .3rem; }
.bench__qlist li { font-size: .86rem; line-height: 1.4; padding-left: .9rem; position: relative; }
.bench__qlist li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: .34rem; height: .34rem; border-radius: 50%; background: var(--lav); }
.bench__qlist li span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
/* the brand's mark rides with the entry while it is on the bench */
.bench__logo { height: 22px; width: auto; max-width: 110px; object-fit: contain; background: #fff; padding: 2px 5px; border-radius: 4px; flex: none; }


/* ══════════════════════════════════════════════════════════════════════
   THE FIGHT CARD. /challenge
   Vintage boxing promo, built on the tokens the rest of the site already
   uses. This is not a costume change: the system is already Bangers, hard
   shadows and gold, so a fight bill is that voice with the gain up.
   ══════════════════════════════════════════════════════════════════════ */
.fc { background: var(--ink); color: #fff; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.fc__presents { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); text-align: center; }
.fc__title {
  font-family: 'Bangers', cursive; text-align: center; line-height: .86;
  font-size: clamp(3rem, 12vw, 7.5rem); letter-spacing: .02em; margin: .5rem 0 0;
  color: #fff; text-shadow: 5px 5px 0 var(--lav-deep);
}
.fc__title span { color: var(--gold); }
.fc__tag { text-align: center; font-size: clamp(.95rem, 1.8vw, 1.2rem); line-height: 1.5; margin: 1.1rem auto 0; max-width: 34rem; opacity: .92; }
.fc__tag b { color: var(--gold); }

.fc__card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; margin: clamp(1.8rem,4vw,3rem) 0 0; }
.fc__corner { border: 3px solid #fff; padding: 1.1rem 1.2rem 1.4rem; background: rgba(255,255,255,.04); }
.fc__corner--red { border-color: #E1173F; box-shadow: inset 0 0 0 6px rgba(225,23,63,.14); }
.fc__corner--blue { border-color: var(--gold); box-shadow: inset 0 0 0 6px rgba(255,201,51,.12); }
.fc__cnr { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .24em; opacity: .7; }
.fc__name { font-family: 'Bangers', cursive; font-size: clamp(1.8rem, 4.4vw, 3.1rem); line-height: .92; letter-spacing: .03em; margin: .35rem 0 .2rem; }
.fc__name--open { color: var(--gold); }
.fc__rec { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; opacity: .6; }
.fc__tape { list-style: none; padding: 0; margin: .9rem 0 0; border-top: 1px solid rgba(255,255,255,.18); }
.fc__tape li { font-size: .84rem; padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.1); line-height: 1.35; }
.fc__tape b { color: var(--gold); }
.fc__accept { margin-top: .9rem; }
.fc__vs { display: grid; place-items: center; padding: 0 clamp(.5rem,2vw,1.4rem); }
.fc__vs span {
  font-family: 'Bangers', cursive; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--ink);
  background: var(--gold); border: 3px solid #fff; border-radius: 50%;
  width: clamp(3.2rem,7vw,5rem); height: clamp(3.2rem,7vw,5rem); display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--ink), 5px 5px 0 6px rgba(0,0,0,.35);
}
.fc__bill {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; align-items: center;
  font-family: var(--font-mono); font-size: clamp(.62rem,1.3vw,.8rem); letter-spacing: .22em;
  text-transform: uppercase; margin-top: 1.4rem; color: var(--gold);
  border-block: 2px solid var(--gold); padding: .6rem 0;
}
.fc__bill i { opacity: .5; font-style: normal; }

.fc__rules { margin-top: clamp(2.2rem,5vw,3.5rem); max-width: 46rem; }
.fc__rules h2 { font-family: 'Bangers', cursive; font-size: clamp(1.5rem,3.4vw,2.3rem); letter-spacing: .03em; color: var(--gold); margin: 0 0 .8rem; }
.fc__rules ol { padding-left: 1.15rem; margin: 0; }
.fc__rules li { margin-bottom: .7rem; line-height: 1.5; font-size: .96rem; }
.fc__rules li b { color: #fff; }
.fc__why { margin-top: 1rem; padding-left: .9rem; border-left: 3px solid var(--gold); opacity: .88; font-size: .93rem; line-height: 1.55; }

.fc__cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1rem; margin-top: clamp(2rem,4vw,3rem); }
.fc__ctabox { border: 2px solid var(--gold); padding: 1.1rem 1.15rem 1.3rem; background: rgba(255,201,51,.07); }
.fc__ctabox--alt { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.fc__ctabox b { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; color: var(--gold); margin-bottom: .5rem; }
.fc__ctabox--alt b { color: #fff; }
.fc__ctabox p { font-size: .88rem; line-height: 1.5; opacity: .9; margin: 0 0 .9rem; }

/* Phones: the two corners stack and VS becomes the divider between them,
   which is how every real fight poster handles a narrow format anyway. */
@media (max-width: 760px) {
  .fc__card { grid-template-columns: 1fr; }
  .fc__vs { padding: .6rem 0; }
  .fc__corner--red { border-bottom: 0; }
  .fc__corner--blue { border-top: 0; }
}


/* ══════════════════════════════════════════════════════════════════════
   THE LONG WAY ROUND. /origin
   Scroll-driven 3D on CSS `animation-timeline: view()`. No library, no
   scroll listener, no jank, and it runs on the compositor.
   PROGRESSIVE BY CONSTRUCTION: every panel is fully readable with the
   animation stripped out, so a browser without scroll-timeline gets a
   clean static timeline rather than a broken one or a blank one.
   ══════════════════════════════════════════════════════════════════════ */
.lw { position: relative; background: var(--ink); color: #fff; overflow: clip; padding-bottom: clamp(3rem,7vw,6rem); }
.lw__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent); opacity: .28; }
@media (max-width: 860px) { .lw__rail { left: 18px; } }

.lw__intro { padding-block: clamp(3rem,9vw,7rem) clamp(2rem,6vw,4rem); position: relative; }
.lw__kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.lw__h1 { font-family: 'Bangers', cursive; font-size: clamp(2.6rem,8vw,6rem); line-height: .92; letter-spacing: .02em; margin: .6rem 0 0; text-shadow: 4px 4px 0 var(--lav-deep); }
.lw__h1 span { color: var(--gold); }
.lw__lede { max-width: 40rem; font-size: clamp(1rem,1.7vw,1.18rem); line-height: 1.6; opacity: .9; margin-top: 1.2rem; }
.lw__scrollcue { margin-top: 2rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; opacity: .5; display: flex; align-items: center; gap: .6rem; }
.lw__scrollcue span { width: 1px; height: 34px; background: var(--gold); animation: lwcue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes lwcue { 0%,100% { transform: scaleY(.3); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* The 3D stage. Perspective lives on the track so panels share one vanishing
   point rather than each getting their own, which is what makes a scroll feel
   like a single space instead of a stack of unrelated cards. */
.lw__track { perspective: 1100px; perspective-origin: 50% 40%; }

.lw__panel {
  position: relative; display: grid; grid-template-columns: 7rem 1fr 12rem;
  gap: clamp(1rem,3vw,2.5rem); align-items: center;
  padding: clamp(2.5rem,7vw,6rem) 0; transform-style: preserve-3d;
}
.lw__panel--alt { grid-template-columns: 7rem 1fr 12rem; }
.lw__yr { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); align-self: start; padding-top: .4rem; }
.lw__body h2 { font-family: 'Bangers', cursive; font-size: clamp(1.9rem,4.6vw,3.2rem); letter-spacing: .03em; margin: 0 0 .3rem; line-height: 1; }
.lw__where { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--gold); opacity: .85; margin: 0 0 .9rem; }
.lw__body p { line-height: 1.62; margin: 0 0 .8rem; opacity: .92; }
.lw__pull { border-left: 3px solid var(--gold); padding-left: .95rem; font-size: 1.02rem; opacity: 1 !important; }

.lw__creds { list-style: none; padding: 0; margin: 0 0 1rem; }
.lw__creds li { padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.lw__creds b { display: block; font-family: 'Bangers', cursive; font-size: 1.15rem; letter-spacing: .04em; color: var(--gold); }
.lw__creds span { font-size: .9rem; line-height: 1.5; opacity: .85; }

.lw__fig { display: grid; place-items: center; }
.lw__sil { width: clamp(74px,9vw,120px); fill: var(--gold); filter: drop-shadow(6px 6px 0 rgba(0,0,0,.45)); }
.lw__mark { width: clamp(74px,9vw,120px); }
.lw__fig--stack { display: flex; flex-direction: column; gap: .4rem; }
.lw__spine {
  font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em;
  background: var(--gold); color: var(--ink); padding: .5rem .4rem; border-radius: 2px;
  writing-mode: vertical-rl; text-orientation: mixed; height: 8.5rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.lw__fig--stack { flex-direction: row; }
.lw__grow { display: grid; grid-template-columns: repeat(4, 10px); gap: 5px; }
.lw__grow i { width: 10px; height: 10px; background: var(--gold); border-radius: 2px; opacity: .25; }
.lw__growl { display: block; margin-top: .6rem; font-family: 'Bangers', cursive; font-size: 1.3rem; color: var(--gold); letter-spacing: .05em; }

.lw__end { text-align: center; padding-block: clamp(2.5rem,6vw,5rem) 0; }
.lw__end h2 { font-family: 'Bangers', cursive; font-size: clamp(2rem,5vw,3.4rem); letter-spacing: .03em; margin: 0 0 .6rem; }
.lw__end p { opacity: .9; margin: 0 auto 1.4rem; max-width: 34rem; }

/* ── THE SCROLL CHOREOGRAPHY ─────────────────────────────────────────
   Guarded on @supports so the fallback is the static timeline above, not
   a page of invisible panels. That guard is the whole reason this is safe
   to ship: the failure mode of a scroll animation done carelessly is a
   blank page, which is worse than no animation at all. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lw__panel {
      animation: lwrise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
    @keyframes lwrise {
      from { opacity: 0; transform: translateY(70px) translateZ(-220px) rotateX(9deg); }
      to   { opacity: 1; transform: none; }
    }
    .lw__panel--alt { animation-name: lwrise-alt; }
    @keyframes lwrise-alt {
      from { opacity: 0; transform: translateY(70px) translateZ(-220px) rotateX(-9deg) rotateY(6deg); }
      to   { opacity: 1; transform: none; }
    }
    .lw__sil, .lw__mark { animation: lwfig linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes lwfig { from { transform: scale(.6) rotateY(-28deg); opacity: .2 } to { transform: none; opacity: 1 } }
    .lw__spine { animation: lwspine linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
    @keyframes lwspine { from { transform: translateY(26px) rotateZ(-6deg); opacity: 0 } to { transform: none; opacity: 1 } }
    /* the 10 -> 120 dots fill as you scroll, which is the growth, animated */
    .lw__grow i { animation: lwdot linear both; animation-timeline: view(); animation-range: entry 12% cover 60%; animation-delay: calc(var(--d) * -0.04s); }
    @keyframes lwdot { from { opacity: .18; transform: scale(.7) } to { opacity: 1; transform: none } }
  }
}

@media (max-width: 860px) {
  .lw__panel, .lw__panel--alt { grid-template-columns: 1fr; padding-left: 44px; }
  .lw__fig { justify-items: start; margin-top: 1.2rem; }
  .lw__fig--stack { justify-content: flex-start; }
}


/* The qualification gate. Adam's refinement, and it is the real hero of the
   page now: being told you must APPLY is the provocation that makes a
   confident builder click, and it turns a one-off event into a format that
   can run again. */
.fc__gate { border: 3px solid var(--gold); background: rgba(255,201,51,.06); padding: clamp(1.2rem,3vw,2rem); margin-top: clamp(1.6rem,4vw,2.6rem); }
.fc__gatelabel { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.fc__gate h2 { font-family: 'Bangers', cursive; font-size: clamp(1.9rem,5vw,3.2rem); letter-spacing: .03em; margin: .3rem 0 .5rem; }
.fc__gatehead p { max-width: 42rem; opacity: .9; line-height: 1.55; margin: 0 0 1.2rem; }
.fc__qual { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.fc__qual li { position: relative; padding: .75rem 0 .75rem 2.4rem; border-top: 1px solid rgba(255,255,255,.16); }
.fc__qual li::before {
  counter-increment: q; content: counter(q);
  position: absolute; left: 0; top: .8rem; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; border: 2px solid var(--gold); color: var(--gold);
  font-family: var(--font-mono); font-size: .7rem; border-radius: 3px;
}
.fc__qual b { display: block; font-size: 1rem; line-height: 1.35; }
.fc__qual span { display: block; font-size: .86rem; opacity: .75; line-height: 1.45; margin-top: .2rem; }
.fc__apply { margin-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.fc__hint { font-size: .74rem; opacity: .65; }
/* The apply form (2026-09-17). It borrows .signup for the field grid and the
   /api/lead wiring, but it sits inside a gate on the dark field, so it keeps the
   gate's grammar: the gate's tint and padding (was an inline style), the sister
   card's lead colour, the same lavender button as its three siblings on the page
   (btn--onlav is white, for the lavender band), and one footnote size (.fc__hint). */
.fc__gate.signup { color: inherit; background: rgba(255,201,51,.06); padding-block: clamp(1.2rem,3vw,2rem); }
.fc__gate.signup .fc__gatehead p { color: inherit; }
.fc__gate.signup form { max-width: 42rem; margin-top: 1.3rem; }
.fc__gate.signup .signup__note { font-family: inherit; font-size: .74rem; color: inherit; opacity: .65; }


/* REAL ARTWORK ON /ORIGIN: BOOK COVERS AND THE VISTAGE MARK. A. Rationale in _source-notes/site.css.notes.md */
.lw__fig--covers { display: flex; gap: .5rem; align-items: flex-end; }
.lw__fig--covers img {
  width: clamp(48px, 5.5vw, 76px); height: auto; border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18);
}
.lw__fig--covers img:nth-child(2) { transform: translateY(-10px) rotate(-3deg); }
.lw__fig--covers img:nth-child(3) { transform: translateY(4px) rotate(2.5deg); }
.lw__fig--vistage { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lw__fig--vistage img {
  width: clamp(96px, 11vw, 150px); height: auto;
  background: #fff; padding: .5rem .7rem; border-radius: 3px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lw__fig--covers img { animation: lwcover linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
    @keyframes lwcover { from { opacity: 0; transform: translateY(28px) rotate(-8deg) } }
    .lw__fig--covers img:nth-child(2) { animation-delay: -.05s }
    .lw__fig--covers img:nth-child(3) { animation-delay: -.1s }
  }
}


/* ══════════════════════════════════════════════════════════════════════
   /next — the homepage rebuilt against measurement.
   Voice, palette and comic system untouched. What changed is ORDER and
   VOLUME: 2,556 words to 816, nineteen sections to eight, two menus to one,
   and the Bench moved from position four to position two.
   MOBILE FIRST because 88% of traffic is mobile and 71% of it bounces. The
   ticker is suppressed under 720px, which takes the chrome above the fold
   from 259px down to about 170px and buys back a third of the first screen.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) { .nx-page .ticker { display: none; } }

/* LOGO B, the stamp. Chosen on the brief that it must gain trust, be
   memorable, and stand up off the website. It is the only direction tested
   that SAYS THE NAME, which is what memorability needs before brand equity
   exists, and it survives one colour and small sizes. */
.nav__stamp { display: inline-flex; flex-direction: column; line-height: 1; }
.nav__stamp b {
  font-family: 'Bangers', cursive; font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  letter-spacing: .05em; color: var(--ink);
}
.nav__stamp i { display: block; height: 3px; background: var(--gold); margin: .16rem 0 .12rem; }
.nav__stamp em {
  font-style: normal; font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.42rem, .9vw, .56rem); letter-spacing: .34em; color: var(--lav);
}

.nx-hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.6rem, 4vw, 3rem); }
.nx-eyebrow { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lav); margin: 0 0 .6rem; }
.nx-h1 {
  font-size: clamp(2.4rem, 8.5vw, 4.6rem); line-height: .98; letter-spacing: -.025em;
  font-weight: 800; margin: 0 0 1rem; text-wrap: balance;
}
.nx-h1 span { color: var(--lav); }
/* The plain sentence. This is the fix for "I could not tell what this is."
   It sits ABOVE every choice on the page and uses no insider vocabulary:
   no second brain, no AI, no systems. Just the week it describes. */
.nx-plain { font-size: clamp(1.02rem, 2.1vw, 1.28rem); line-height: 1.55; max-width: 33rem; margin: 0 0 1.4rem; }
.nx-plain b { display: inline-block; margin-top: .5rem; }
.nx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; }
.nx-tel { font-family: var(--font-mono); font-size: .82rem; color: var(--lav-deep); text-decoration: none; border-bottom: 2px solid var(--gold); }
.nx-under { font-size: .84rem; color: var(--ink-soft); margin: .9rem 0 0; }
/* The one paid line in the hero. Deliberately quieter than the free CTA and
   sized to sit under it without competing: same measure as .nx-plain, a rule
   above it so it reads as a separate thought rather than more microcopy. */
.nx-paid { font-size: .9rem; line-height: 1.5; color: var(--ink); max-width: 33rem;
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--lav-line); }
.nx-paid a { color: var(--lav-deep); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--gold); }
.nx-paid b { font-weight: 800; }

.nx-h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .7rem; text-wrap: balance; }
.nx-lede { font-size: clamp(.98rem, 1.8vw, 1.1rem); line-height: 1.6; max-width: 36rem; margin: 0 0 1rem; }

.nx-bench { background: var(--lav-tint); padding-block: clamp(2rem, 5vw, 3.4rem); border-block: 2px solid var(--ink); }
.nx-cost, .nx-how, .nx-proof, .nx-free, .nx-faq, .nx-end { padding-block: clamp(2rem, 5vw, 3.4rem); }

.nx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin: 1.2rem 0 1rem; }
.nx-grid div { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--lav-deep); padding: .85rem .95rem; background: #fff; }
.nx-grid b { display: block; font-size: .98rem; margin-bottom: .2rem; }
.nx-grid span { font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.nx-note { border-left: 3px solid var(--gold); padding-left: .9rem; font-size: .95rem; line-height: 1.55; max-width: 36rem; }
.nx-note--strong { border-left-color: var(--lav); font-weight: 600; }

.nx-steps { list-style: none; counter-reset: s; padding: 0; margin: 1.2rem 0; }
.nx-steps li { position: relative; padding: .7rem 0 .7rem 2.6rem; border-top: 1px solid var(--lav-line); }
.nx-steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: .75rem; width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center; background: var(--gold); border: 2px solid var(--ink);
  font-family: 'Bangers', cursive; font-size: 1rem;
}
.nx-steps b { display: block; font-size: 1.02rem; }
.nx-steps span { display: block; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; margin-top: .15rem; }

.nx-proof { background: var(--ink); color: #fff; }
.nx-proof .nx-lede { opacity: .92; }
.nx-more { display: inline-block; margin-top: .4rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: var(--gold); text-decoration: none; border-bottom: 2px solid var(--gold); }

.nx-faq details { border-top: 1px solid var(--lav-line); padding: .7rem 0; }
.nx-faq summary { cursor: pointer; font-weight: 700; font-size: 1rem; }
.nx-faq p { margin: .5rem 0 0; font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }

.nx-end { background: var(--lav-tint); border-top: 2px solid var(--ink); }
.nx-end.signup { background: var(--lav-deep); color: var(--on-lav); border-top: 0; }
.nx-end.signup .nx-under { color: var(--on-lav-soft); }
.nx-end.signup .nx-under a { color: var(--gold); }
.nx-end .nx-under a { color: var(--lav-deep); font-weight: 700; }


/* THE LOCKUP, FINAL: THE MARK STANDS ALONE ───────────────────. Rationale in _source-notes/site.css.notes.md */

/* Belt and braces: if any page or future template emits the wordmark again,
   it stays invisible instead of quietly reappearing in the nav. */
.nav__brand .nav__wordmark,
.nav__brand > span,
.nav__stamp { display: none !important; }

/* The mark carries the bar by itself, so it gets bigger at every width. */
.nav-mark {
  width: clamp(88px, 8.4vw, 124px) !important;
  height: auto !important;
  /* the -3px optical lift existed to centre the mark against a wide-tracked
     word. With no word, it just sits high. */
  transform: none;
}
.nav__brand { gap: 0 !important; }

/* 940–721 is the tight band where the links and the CTA are already fighting
   for room, so the mark holds at its clamp floor there rather than growing.
   Below 720 the links collapse into the menu and the mark can take the space. */
@media (max-width: 720px) { .nav-mark { width: 70px !important; } }
@media (max-width: 420px) { .nav-mark { width: 62px !important; } }

/* Footer: the domain line is now the only text in the lockup, so it owns the
   block it used to share. */
.footer__brand div small { display: block; letter-spacing: 0.13em; }

/* THE WIRE FITS THE DESKTOP VIEWPORT, 2026-08-25. Rationale in _source-notes/site.css.notes.md */

/* A single-axis rail. `overflow-x: auto` alone computed overflow-y to auto,
   which made the strip a needless vertical scroll container. */
.wire__rail { overflow-y: hidden; }

@media (min-width: 1100px) {
  /* the rail takes the width the flag leaves it, so the cards divide the whole
     strip instead of stopping short and leaving a bare gold tail on the right */
  .wire__rail { flex: 1 1 auto; min-width: 0; }
  .wire__rail .wcard { flex: 1 1 0; width: auto; min-width: 0; }
  /* The last VISIBLE card sits against the viewport edge, so its divider is
     noise. `:last-child` would hit a hidden FOLLOW card, so this targets the
     card the hidden ones follow. Worst case in an engine without `:has` is a
     1px line at the extreme right edge. */
  .wire__rail .wcard:has(+ .wcard--follow),
  .wire__rail .wcard:last-child { border-right: 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   TWO PHONE PILLS, ONE HEADLINE. 2026-08-25, found by Adam on his own
   screen at 1536 x 864, which is the render every wider test missed.

   Two separate elements, not a duplicate and not a stuck hover state:
   `a.navphone` lives in the nav row, `.hotline__pill` floats under the wire.
   Each had its own failure and they are fixed separately.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. THE NAV IS OVER BUDGET, AND THE CTA IS WHAT PAYS.
      Measured on the live page at 1536: `.nav__links` needs 1180px of content
      and flex hands it 1145. It is `flex: 0 1 auto` with `overflow: visible`,
      so it does not clip, it SPILLS: the last child, the "Save my seat" CTA at
      `flex-shrink: 0`, ran from x1203 to x1334 while its own container ended
      at x1299. `a.navphone` starts at x1314 and is later in the DOM, so it
      painted 20px over the primary call to action and ate the click. Nudging
      either element moves the collision; the row has to fit.

      Solved for WIDTH in two moves, because the earlier 1240px band was
      already being overridden: the `.nav__links` gap rule that block set is
      specificity 0,1,0 and the unconditional `gap: 1.35rem` further down the
      file is the same, so the later one won at every width. These rules sit at
      the end of the file on purpose. */

/* Twelve links plus a CTA do not fit beside a phone pill on any laptop. The
   number is not lost: `.hotline__pill` carries it on every page at every
   width, and the 2026-08-09 note in this file already called the same number
   twice in one corner "a bug rather than a pair". So the pill stands down
   until the row genuinely has room for it, rather than parking on the CTA. */
@media (max-width: 1679px) { .navphone { display: none; } }

/* The links row still has to fit on its own once the pill is gone. Measured
   budget, client width minus 48 gutter, 92 brand, 14 gap, 48 gutter:
   1265 available at 1280, 1223 at 1440, 1319 at 1536. Content need falls to
   ~1010 and ~1090 in the two bands below, so every one clears with slack. */
@media (min-width: 941px) and (max-width: 1360px) {
  .nav__links { gap: 0.95rem; }
  .nav__links a:not(.btn) { font-size: 1rem; letter-spacing: 0; }
}
@media (min-width: 1361px) and (max-width: 1679px) {
  .nav__links { gap: 1.15rem; }
  .nav__links a:not(.btn) { font-size: 1.06rem; letter-spacing: 0; }
}

/* 2. THE FLOATING PILL WAS PINNED OVER THE HEADLINE.
      `.hotline` was `position: sticky; top: var(--navh)`, so once the page
      scrolled it detached and held station at y116 while the page ran under
      it. On wide screens it is justified left, x32 to x275, and every hero H1
      on this site starts at x208. Measured on /seat at scrollY 420: pill
      x32-275 y116-168, H1 x208-824 y-8-327, overlapping. The first word of
      the headline sat behind a phone number.

      A z-index or an offset only moves which element loses. In flow it cannot
      cover anything, at any width, at any scroll position, on any page. It is
      still the first thing under the wire and still fully visible on load. */
.hotline { position: relative; top: auto; }

/* 3. THE PILL'S BAND HAS A GROUND. Found on desktop 2026-09-14 (Adam: "weird css
      layering things happening on desktop"). In flow, the pill row is a 57px
      strip between the purple wire and a dark hero, and it had no background,
      so on every inner page a white gutter appeared under the wire with one
      pill floating in it, half over the hero's top edge. It read as a broken
      layer. The strip now carries the wire's own field and its ink rule, so
      the wire and the pill are one two-row band, and the hero starts clean
      beneath it. Home hides the pill entirely (campaign.css), unchanged. */
.wire + .hotline,
#wire + .hotline {
  background: var(--lav-deep, #563F82);
  border-bottom: 3px solid var(--ink, #1D1430);
  padding-bottom: 0.55rem;
  margin-top: -3px;                          /* sits on the wire's bottom rule */
}


/* ════════════════════════════════════════════════════════════════════════
   ONE BRAND, TWO SURFACES — TIER 1: THE SHARED FIELD DEVICE
   2026-08-25, Brand Ambassador desk, on Adam's brief: "more synergy between
   our banners on YouTube and our layout on the website ... slightly less
   comic booky, a little bit more professional ... meet in the middle."

   THE EVIDENCE, not a preference. The live YouTube banner was downloaded and
   measured. Its field is three layers and nothing else:
     1. a deep purple diagonal gradient, lav-deep -> mid -> ink
     2. one soft light bloom, upper right
     3. a faint white square grid at 96px
   The site had none of them. Its equivalent surface, .hero__field, carried
   Ben-Day halftone dots at 22px, which is the comic-book counterpart of the
   same idea. THAT IS THE ONE DEVICE THAT MAKES THE TWO READ AS ONE BRAND, so
   it is defined once here as tokens and reused, rather than re-typed per band.

   The grid is 96px because that is the banner's own measurement. Do not
   "round it to 100" — the number is the point of contact between the two
   surfaces. Same for the bloom's 72% / 22% origin.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* the banner's own measurements, carried across verbatim */
  --grid-size: 96px;
  --grid-on-dark: rgba(255, 255, 255, 0.045);
  --grid-on-light: oklch(0.54 0.12 300 / 0.055);
  --bloom-x: 72%;
  --bloom-y: 22%;
}

/* The field, as the banner builds it. Any band that wants to read as the
   banner sets this class (or borrows the two custom properties). */
.brandfield {
  position: relative;
  background:
    radial-gradient(1500px 1000px at var(--bloom-x) var(--bloom-y),
                    var(--lav) 0%, transparent 62%),
    linear-gradient(155deg, var(--lav-deep) 0%, oklch(0.30 0.09 300) 55%, var(--ink) 100%);
  color: #fff;
}
/* The grid rides on a pseudo-element so a band can keep its own background
   and still wear the grid, which is how .wire and .fttable adopt it in T3. */
.brandfield::before,
.has-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-on-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* ---- the hero panel adopts it, replacing the Ben-Day dots ----
   The dots were the loudest single "comic book" signal above the fold and
   they are the exact element the banner answers with a grid. Swapping them is
   the whole brief in one rule: the panel keeps its shape and its personality,
   and stops being a different brand from the channel art. */
.hero__field {
  background:
    radial-gradient(1200px 800px at var(--bloom-x) var(--bloom-y),
                    var(--lav-bright) 0%, transparent 62%),
    linear-gradient(155deg, var(--lav-deep) 0%, oklch(0.30 0.09 300) 55%, var(--ink) 100%);
}
.hero__field::before {
  background-image:
    linear-gradient(var(--grid-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-on-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0, 0 0;
}


/* TIER 2: TWO FACES, AND WHERE EACH ONE IS ALLOWED. Rationale in _source-notes/site.css.notes.md */

/* ---- navigation returns to the grotesque ---- */
.nav__links a,
.nav__links a:not(.btn),
.nav .btn,
.nav__toggle {
  font-family: var(--font-body);
}
.nav__links a:not(.btn) {
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* the hover was a rotated yellow chip with a block shadow */
.nav__links a:not(.btn):hover {
  background: var(--lav-tint);
  color: var(--lav-deep);
  transform: none;
  outline: none;
  box-shadow: none;
  border-radius: 6px;
}
/* the primary call to action: a button, not a sticker */
.nav .btn {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  border: 0;
  border-radius: 9px;
  box-shadow: 0 6px 18px -8px oklch(0.3 0.09 300 / 0.55);
}
.nav .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px oklch(0.3 0.09 300 / 0.65);
}
.nav__toggle { font-family: var(--font-mono); font-weight: 600; }

/* ---- the accent line: the banner's device, on both grounds ----
   .hail__cap is on 26 pages, so this single rule is most of the visible
   change. The others are its siblings under other names. */
.hail__cap,
.sectionkick,
.crate__stamp,
.ticketcard__stamp,
.compare__tag,
.panel-cap,
.panel-cap--static {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lav-deep);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  border-radius: 0;
  padding: 0;
}
/* the kicker sits on its own line with air under it, the way the banner's
   gold line sits under the headline rather than on top of a plate */
.hail__cap,
.sectionkick {
  display: block;
  margin-bottom: 0.9rem;
}
.sectionkick { font-size: 0.74rem; }

/* the two that live on a dark field take the banner's gold instead */
.panel-cap,
.panel-cap--static,
.ticketcard__stamp {
  color: var(--gold);
}
/* the panel caption was a rotated cream slab hanging off the frame corner.
   In flow at the top of the panel it reads as the banner's strip. */
.panel-cap {
  position: absolute;
  top: 14px;
  right: 18px;
  left: auto;
  z-index: 3;
}
.ticketcard__stamp { top: 14px; left: 18px; }

/* ---- data reads as data, not as a shout ---- */
.tracker__now strong,
.stopcard--mystery span,
.compare__price b,
.fr__stats b,
.recipenum {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.recipenum {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  background: var(--lav-tint);
  color: var(--lav-deep);
  border: 0;
  box-shadow: none;
}

/* ---- the one place the display face is still doing real work ----
   .fttable__title is the largest line on its band and the band is the whole
   pitch in one breath. It keeps Bangers. What it loses is the double drop
   shadow, which is the comic-print tell rather than the face itself. */
.fttable__title { text-shadow: none; }


/* TIER 3: RATION THE YELLOW. Rationale in _source-notes/site.css.notes.md */

/* ---- THE WIRE: the banner's field, gold reserved for what is live ---- */
.wire {
  position: relative;
  background:
    radial-gradient(900px 300px at var(--bloom-x) var(--bloom-y),
                    var(--lav) 0%, transparent 66%),
    linear-gradient(155deg, var(--lav-deep) 0%, oklch(0.30 0.09 300) 60%, var(--ink) 100%);
  border-block: 1px solid oklch(0.30 0.09 300);
  color: #fff;
}
.wire::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-on-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.wire__inner { position: relative; z-index: 1; }

/* the flag is the one saturated gold block on the page, and it is 60px wide */
.wire__flag {
  background: var(--gold);
  color: var(--ink);
  border-right: 1px solid oklch(0.30 0.09 300);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.wcard {
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.wcard:hover { background: rgba(255, 255, 255, 0.07); }
.wcard__w { color: var(--on-lav-soft); opacity: 1; }
.wcard b { color: #fff; }
.wcard em { color: var(--on-lav-soft); opacity: 0.9; }
/* LIVE inverts to gold. It is the only card that ever does, so gold now
   means "this one is happening" instead of meaning "this is a strip". */
.wcard--live { background: var(--gold); color: var(--ink); }
.wcard--live:hover { background: oklch(0.83 0.09 78); }
.wcard--live .wcard__w,
.wcard--live b,
.wcard--live em { color: var(--ink); opacity: 1; }
.wcard--live em { opacity: 0.78; }
/* the overflow fade has to match the new field, not the retired yellow */
.wire__inner::after {
  background: linear-gradient(90deg, oklch(0.30 0.09 300 / 0), oklch(0.26 0.08 300) 82%);
}

/* ---- THE PITCH BAND: drenched, but in the brand's own colour ---- */
.fttable {
  background:
    radial-gradient(1400px 900px at var(--bloom-x) var(--bloom-y),
                    var(--lav) 0%, transparent 62%),
    linear-gradient(155deg, var(--lav-deep) 0%, oklch(0.30 0.09 300) 55%, var(--ink) 100%);
  border-block: 1px solid oklch(0.32 0.09 300);
  color: #fff;
}
/* was a halftone dot field; now the banner's grid */
.fttable::before {
  background-image:
    linear-gradient(var(--grid-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-on-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.fttable__title { color: #fff; }
.fttable__quote { color: #fff; }
.fttable__connect { color: var(--on-lav-soft); }
.fttable__alt { color: var(--on-lav-soft); font-weight: 600; }
/* the chips were white plates with 3px ink borders and block shadows */
.fttable__chips span {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  font-weight: 600;
}
.fttable__cta .btn { border: 0; box-shadow: 0 8px 22px -10px oklch(0.18 0.06 300 / 0.7); }
.fttable__cta .btn--onlav { background: #fff; color: var(--lav-deep); }
.fttable__photo figcaption {
  background: oklch(0.24 0.07 300 / 0.92);
  color: var(--gold);
  border: 0;
  border-radius: 0 8px 0 0;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ---- the remaining yellow slabs, same treatment ---- */
.goldenbox,
.compare__col--paid {
  background:
    radial-gradient(700px 500px at var(--bloom-x) var(--bloom-y),
                    var(--lav) 0%, transparent 64%),
    linear-gradient(155deg, var(--lav-deep) 0%, var(--ink) 100%);
  color: #fff;
  border: 1px solid oklch(0.34 0.09 300);
  box-shadow: 0 18px 40px -24px oklch(0.2 0.07 300 / 0.8);
}
.goldenbox h2, .goldenbox h3, .goldenbox b,
.compare__col--paid h2, .compare__col--paid h3 { color: #fff; }
.goldenbox p, .compare__col--paid p, .compare__col--paid li { color: var(--on-lav-soft); }
.compare__tag--paid { background: transparent; color: var(--gold); }
.fr__kind--planned { background: var(--gold); }
.t-status.t-launching { background: var(--gold); color: var(--ink); }


/* TIER 4: RETIRE THE STICKER OUTLINE, KEEP THE DEPTH. Rationale in _source-notes/site.css.notes.md */

:root {
  --hair: oklch(0.86 0.035 300);
  --hair-strong: oklch(0.74 0.06 300);
  --depth-1: 0 1px 2px oklch(0.3 0.09 300 / 0.06),
             0 6px 16px -8px oklch(0.3 0.09 300 / 0.22);
  --depth-2: 0 2px 4px oklch(0.3 0.09 300 / 0.07),
             0 16px 36px -18px oklch(0.3 0.09 300 / 0.32);
}

/* ---- the panels and cards ---- */
.hero__field {
  border: 1px solid oklch(0.42 0.10 300);
  border-radius: 18px;
  box-shadow: var(--depth-2);
}
.vaultbox {
  border: 1px solid oklch(0.42 0.10 300);
  border-radius: 16px;
  box-shadow: var(--depth-2);
}
.cluster figure,
.editorial,
.marquee figure,
.fttable__photo {
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--depth-1);
}
.fttable__photo { border-color: oklch(0.42 0.10 300); box-shadow: var(--depth-2); }

.bench,
.crate,
.crewcard,
.gocard,
.hail__panel,
.sched,
.ticketcard,
.signup__side,
.stopcard {
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--depth-1);
}
.gocard--lead { border-color: var(--hair-strong); box-shadow: var(--depth-2); }

/* ---- the small plates: chips, icons, locks ---- */
.crewcard__ico,
.cardico {
  background: var(--lav-tint);
  border: 1px solid var(--hair);
  box-shadow: none;
  color: var(--lav-deep);
}
.vault-lock {
  background: var(--lav-tint);
  border: 1px solid var(--hair);
  color: var(--lav-deep);
}
.vaultwait__row input { border: 1.5px solid var(--hair); }

/* ---- buttons: depth, not a slab ---- */
.btn--mono,
.btn--ghost.btn--mono {
  border-width: 0;
  box-shadow: 0 6px 18px -8px oklch(0.3 0.09 300 / 0.5);
}
.btn--ghost,
.btn--ghost.btn--mono {
  box-shadow: inset 0 0 0 1.5px var(--lav);
}
.btn--ghost:hover,
.btn--ghost.btn--mono:hover {
  box-shadow: inset 0 0 0 1.5px var(--lav-deep);
}
.fttable__cta .btn--ghost { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); color: #fff; }
.fttable__cta .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,.08); }

/* the contact pill: a pill, not a sticker */
.navphone {
  border: 0;
  box-shadow: var(--depth-1);
}
.navphone:hover { transform: translateY(-1px); box-shadow: var(--depth-2); }

/* ---- the caption plates keep their shape and lose the keyline ---- */
.cluster figcaption,
.editorial figcaption,
.marquee figcaption {
  background: oklch(0.24 0.07 300 / 0.9);
  color: #fff;
  border: 0;
  left: 0;
  bottom: 0;
  border-radius: 0 8px 0 0;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ---- the burst: kept, calmed ----
   The NO-CAPES burst is Adam's own line and it stays. What goes is the
   infinite pulse. A loop that never resolves is the carnival urgency
   PRODUCT.md bans, and it was the only motion on the page that never ended.
   Smaller and still means it reads as a stamp on the panel rather than the
   loudest thing above the fold. */
.burst-pop { animation: none; transform: rotate(-3deg); }
.hero__burst { width: 32%; left: 1%; top: 4%; opacity: 0.95;
  filter: drop-shadow(0 8px 18px oklch(0.25 0.08 300 / 0.4)); }
@media (max-width: 940px) { .hero__burst { width: 40%; left: 2%; top: 7%; } }

/* the wire's bloom was tuned for a 1440px-tall banner; on a 60px strip the
   same radius put a visible bright patch under one card and it read as a
   hover state. Flattened so the field is even across the rail. */
.wire {
  background:
    radial-gradient(1600px 220px at 62% 40%, var(--lav) 0%, transparent 72%),
    linear-gradient(155deg, var(--lav-deep) 0%, oklch(0.30 0.09 300) 60%, var(--ink) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .navphone:hover, .nav .btn:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   TIER 4b: THE SWEEP, because the register was a house style
   2026-08-25.

   Tier 4 named the panels by hand and the detector still found five hard
   shadows and four thick borders left. THE REASON IS WORTH RECORDING: this
   file contains a block headed "audit: one design language, comic everywhere"
   which sets `border: 4px solid #1D1430 !important` and a 6px block shadow
   across six card classes at once. The sticker look was not applied
   per-component, it was INSTALLED AS THE HOUSE STYLE, so undoing it one
   component at a time will always leave some behind.

   So the selector list below was not typed from memory. It was extracted from
   this stylesheet by parsing every rule and collecting each one that sets a
   zero-blur box-shadow with an offset of 2px or more, or a border of 2.5px or
   more in #1D1430. Forty-seven rules matched. That is the real size of the
   register, and it is why the site read comic even on pages carrying no
   yellow and no display face.

   SPECIFICITY, and why it is done this way rather than with a wall of
   !important: the source block uses !important on exactly three selector
   groups. Those three are answered in kind, below, and everything else is
   raised by one element with an `html` prefix, which beats a bare class
   without escalating. If this stylesheet is ever consolidated, THIS BLOCK AND
   THE "comic everywhere" BLOCK DELETE TOGETHER. They are one decision.

   Deliberately NOT swept: .fc__* and .lw__* . Those belong to the challenge
   and origin campaign pages, which are their own themed pieces rather than
   the site's default surface, and Adam's brief was about the site's layout
   against the channel art. Changing a campaign's costume was not asked for.
   ════════════════════════════════════════════════════════════════════════ */

/* --- panels and cards on the light ground --- */
html .artpanel,
html .bench,
html .builtcard,
html .compare__col,
html .crate,
html .crate__item,
html .crewcard,
html .faq__item,
html .faq details,
html details.faq__q,
html .whyme__row,
html .forms > div,
html .work__grid > div,
html .proof__grid > div,
html .fr__day,
html .hail__panel,
html .huntstep,
html .nx-grid div,
html .origin__panel,
html .promptcard,
html .roadstage,
html .sammshot,
html .signup__side,
html .stopcard,
html .ticketcard {
  border: 1px solid var(--hair);
  box-shadow: var(--depth-1);
}
html .artpanel,
html .hail__panel,
html .ticketcard,
html .sammshot { box-shadow: var(--depth-2); }

html .crate__item:hover {
  transform: translateY(-2px);
  background: var(--lav-tint);
  box-shadow: var(--depth-2);
}

/* the three the source block set with !important, answered in kind */
html .slotboard,
html .pricecard,
html .rescard,
html .replaycard,
html .gocard,
html .sched {
  border: 1px solid var(--hair) !important;
  box-shadow: var(--depth-1) !important;
}
html .slot {
  border: 1px solid var(--hair) !important;
  background: #fff !important;
}
html .faq__item,
html .faq details,
html details.faq__q {
  border: 1px solid var(--hair) !important;
  box-shadow: var(--depth-1) !important;
}

/* --- the dark fields take a purple hairline, never a black keyline --- */
html .tracker__panel,
html .stopcard--mystery {
  border: 1px solid oklch(0.42 0.10 300);
  box-shadow: var(--depth-2);
}
html .stopcard--mystery { border-color: oklch(0.55 0.10 85); }

/* --- small tiles: numbers, statuses, logos, list icons --- */
html .count div,
html .fr__stats div,
html .ticketcard__perf .count div,
html .compare__price,
html .prodlogo img,
html .iconlist .li-ico {
  border: 1px solid var(--hair);
  box-shadow: none;
}
html .iconlist .li-ico { background: var(--lav-tint); color: var(--lav-deep); }
html .prodlogo img { background: #fff; }

/* --- caption and chip plates: the shape stays, the keyline goes --- */
html .artpanel__cap,
html .sammshot figcaption {
  background: oklch(0.24 0.07 300 / 0.9);
  color: #fff;
  border: 0;
  border-radius: 0 8px 0 0;
  left: 0;
  bottom: 0;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0.14em;
}
html .fr__date {
  background: var(--lav-tint);
  color: var(--lav-deep);
  border: 1px solid var(--hair);
  box-shadow: none;
}

/* --- buttons, inputs, the contact pill --- */
html .hero__cta .btn,
html .hail .btn {
  border: 0;
  box-shadow: 0 6px 18px -8px oklch(0.3 0.09 300 / 0.5);
}
html .hero__cta .btn--ghost,
html .hail .btn--ghost {
  box-shadow: inset 0 0 0 1.5px var(--lav);
}
html .hail input[type="text"],
html .hail input[type="tel"],
html .hail input[type="email"] {
  border: 1.5px solid var(--hair);
  box-shadow: none;
}
html .hotline__pill {
  border: 0;
  box-shadow: var(--depth-1);
}
html .hotline__pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--depth-2);
}

/* the ticket perforation notches were drawn with block shadows */
html .ticketcard__perf::before,
html .ticketcard__perf::after {
  box-shadow: none;
  border: 1px solid var(--hair);
}

@media (prefers-reduced-motion: reduce) {
  html .crate__item:hover,
  html .hotline__pill:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   TIER 4c: THREE CONTRAST FAILURES THIS PASS INTRODUCED, MEASURED AND FIXED
   2026-08-25.

   Recorded rather than quietly patched, because all three come from the same
   mistake and it is a mistake worth naming: TIER 2 SPLIT THE ACCENT BY GROUND,
   GOLD ON DARK AND LAVENDER ON LIGHT, AND THEN ASSIGNED THE COLOURS BY
   ASSUMING WHICH GROUND EACH ELEMENT SAT ON INSTEAD OF CHECKING.

   Measured with a real oklch to sRGB conversion, not estimated:
     .ticketcard__stamp   gold on white           2.01:1   needed 4.5
     .panel-cap           gold on the bloom peak  1.91:1   needed 4.5
     .wcard__w / em       soft lav on bloom peak  3.42:1   needed 4.5

   The second and third have a shared cause that the first does not, and it is
   the interesting one: A GRADIENT HAS NO SINGLE BACKGROUND COLOUR. The bloom
   is brightest at 72% / 22%, which on the hero panel is exactly where the
   caption sits, and on the wire is exactly where the middle cards sit. Text
   checked against a field's average passes and then fails against its peak.
   So the fix is not a darker text colour, it is to stop letting the peak
   reach the type: the caption gets its own plate, so its ground is a constant
   regardless of what the gradient does behind it, and the wire's bloom peak
   is lowered to L=0.42 where the soft lavender clears at 5.76:1.

   The rule that comes out of it, for the record in the brand doc: ON A
   GRADIENT, CHECK THE TYPE AGAINST THE LIGHTEST STOP, OR PUT A PLATE UNDER IT.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. the ticket card is white, so its stamp takes the light-ground accent */
.ticketcard__stamp { color: var(--lav-deep); }

/* 2. the panel caption gets a plate, making its ground independent of the
      bloom. 8.31:1, and it holds wherever the gradient puts its peak. */
.panel-cap,
.panel-cap--static {
  background: oklch(0.24 0.07 300 / 0.9);
  color: var(--gold);
  padding: 0.34rem 0.6rem;
  border-radius: 7px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.panel-cap--static { position: static; display: inline-block; margin-bottom: 1.1rem; }

/* 3. the wire's bloom peak comes down from L=0.54 to L=0.42, which lifts the
      secondary card text from 3.42:1 to 5.76:1 and the headings to 8.91:1 */
.wire {
  background:
    radial-gradient(1600px 220px at 62% 40%, oklch(0.42 0.11 300) 0%, transparent 72%),
    linear-gradient(155deg, var(--lav-deep) 0%, oklch(0.30 0.09 300) 60%, var(--ink) 100%);
}

/* ---- and one composition defect from Tier 4, not a contrast one ----
   Resizing the burst moved its lower-right lobe across Adam's hairline. Root
   5c has his face as proof rather than decoration, and the imagery rules for
   this vault already say no frame edge or overlay crosses his face. Pulled
   into the corner and taken down to 26% so it clears his head at every width. */
.hero__burst { width: 26%; left: -2%; top: 1.5%; }
@media (max-width: 940px) { .hero__burst { width: 34%; left: -1%; top: 5%; } }


/* ════════════════════════════════════════════════════════════════════════
   TIER 4d: THE LAST OF IT, the chips the 4px detector could not see
   2026-08-25.

   The Tier 4b sweep keyed on borders of 2.5px or more, which is where the
   card frames lived. It therefore missed a second, smaller population: chips
   and labels wearing a 2px ink keyline over #FFEFA8 cream. Eleven cream
   plates and twenty-three thin keylines, none of them individually loud, all
   of them the same costume. .path__q is the one that showed it: on a phone
   the routing label "BUILT FOR ME" becomes a cream sticker with a 2px black
   outline, and it sat directly under a hero that no longer had any of that in
   it.

   WORTH RECORDING AS A METHOD NOTE, because it is the reason this needed a
   fourth pass rather than a better first one: A THRESHOLD DETECTOR ONLY EVER
   FINDS THE POPULATION ABOVE ITS THRESHOLD. The 4px scan proved the frames
   were gone and said nothing at all about the chips. Re-running the same
   parse at 2px is what found them, and the honest read of a green detector is
   "the thing I measured is clean", never "the page is clean".

   The cream survives in exactly one role, the caption plates over photographs
   on the dark ground, where it is a warm off-white on ink and reads as a
   caption rather than a sticker. Everywhere else it becomes the lavender
   tint, which is the same idea in the brand's own colour.
   ════════════════════════════════════════════════════════════════════════ */

html .path__q,
html .nav__tag,
html .origin__num,
html .fr__kind,
html .fr__date,
html .iconlist .li-ico,
html .builtcard__rev,
html .compare__price,
html .t-status,
html .crate__item,
html .prodlogo img,
html .promptcard.promptcard--onlav .promptcard__use {
  background: var(--lav-tint);
  color: var(--lav-deep);
  border: 1px solid var(--hair);
  box-shadow: none;
  text-shadow: none;
}
/* these two live on a dark field, so they keep a light-on-dark relationship */
html .promptcard.promptcard--onlav .promptcard__use {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
html .tracker__panel .tracker__label { color: var(--on-lav-soft); }
html .t-status { background: var(--lav-tint); color: var(--lav-deep); }
html .t-status.t-launching { background: var(--gold); color: var(--ink); border-color: transparent; }

html .crate__item:hover { background: var(--lav-tint); }
html .vaultwait__row input { border: 1.5px solid var(--hair); }
html .navphone { border: 0; }
html .nav .btn { border: 0; }

/* the caption plates over photography: the one place the warm plate stays,
   as ink-and-cream rather than cream-and-ink */
html .cluster figcaption,
html .editorial figcaption,
html .marquee figcaption,
html .artpanel__cap,
html .sammshot figcaption {
  background: oklch(0.24 0.07 300 / 0.9);
  color: #fff;
  border: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   TIER 4e: THE STAR RATING, the one thing the rendered scan caught that the
   static scan could not
   2026-08-25.

   A full-page contrast scan over every leaf text node found exactly two real
   failures on a solid ground once the gradient bands were separated out, and
   both were the same element: the .bench__stars rating. Filled stars were
   --gold on white at 1.54:1 and empty stars were --lav-line at 1.45:1. Ten
   instances on the home page.

   THIS IS PRE-EXISTING, NOT SOMETHING THIS PASS BROKE, and it is fixed here
   anyway because Tier 2 wrote down "never gold on white" as a rule and a rule
   that leaves the case in front of it unfixed is a comment. A rating carries
   information, so it has to be perceivable: WCAG puts the graphical bar at
   3:1 and these were less than half of it. A visitor who cannot tell four
   stars from two is reading a decoration, not a rating.

   Filled goes to oklch(0.58 0.13 72), the same gold hue held down in
   lightness, measuring 4.38:1 on white, which clears the text bar and not
   just the graphical one. Empty goes to oklch(0.60 0.03 300) at 4.00:1, so
   the difference between on and off is still obvious at 13px.

   THE HONEST LIMIT, said out loud rather than left implied: a colour-only
   rating is still colour-only. Making it readable to a screen reader needs a
   text equivalent in the markup, which is an HTML change on a page another
   seat is editing right now, so it is named and not attempted.
   ════════════════════════════════════════════════════════════════════════ */

html .bench__stars i { color: oklch(0.55 0.03 300); }      /* 4.90:1 on white */
html .bench__stars i.on { color: oklch(0.55 0.13 72); }   /* 4.97:1 on white */

/* .slot kept a 2px block shadow that the Tier 4b rule did not name, because
   that rule set .slot's border and background and forgot its shadow. */
html .slot { box-shadow: none !important; }


/* THE NAVIGATION, DECIDED. INSTRUMENT — IBM PLEX MONO. Rationale in _source-notes/site.css.notes.md */

/* ---- 1. the inline bar: only where it measurably fits ---- */
@media (min-width: 1440px) {
  .nav__toggle { display: none !important; }

  .nav__links {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    /* 14.0px floor, 15.04px ceiling, reaching the ceiling near 1516px */
    font-size: clamp(0.875rem, 1.28vw - 4.3px, 0.94rem);
    gap: 0.85em;
  }

  .nav__links a:not(.btn) {
    position: relative;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1em;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    padding: 0.38rem 0.15rem;
    color: oklch(0.36 0.04 300);
    background: none;
    border-radius: 0;
    transition: color 0.18s var(--ease);
  }

  /* The hover was a filled tint chip. A chip needs horizontal padding, and
     horizontal padding is the one thing this row cannot spend: a quarter rem
     a side costs 35px and eats the whole slack. A hairline under the word
     costs nothing, and a ruled index entry is what a monospaced bar wants to
     be anyway. */
  .nav__links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0.15rem; right: 0.15rem; bottom: 0.12rem;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s var(--ease);
  }
  .nav__links a:not(.btn):hover,
  .nav__links a:not(.btn):focus-visible,
  .nav__links a:not(.btn).is-src {
    color: var(--lav-deep);
    background: none;
    box-shadow: none;
    outline: none;
    transform: none;
  }
  .nav__links a:not(.btn):hover::after,
  .nav__links a:not(.btn):focus-visible::after,
  .nav__links a:not(.btn).is-src::after { transform: scaleX(1); }

  .navpv__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links a:not(.btn)::after { transition: none; }
}

/* ---- 2. below 1440 the row becomes the drawer it always needed to be ---- */
@media (max-width: 1439.98px) {
  .nav__links { display: none; }

  .nav__toggle {
    display: block;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lav-deep);
    padding: 0.5rem 0.1rem;
  }

  .nav__links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--lav-line);
    box-shadow: 0 24px 44px -26px oklch(0.20 0.06 300 / 0.5);
    padding: 0.4rem var(--gutter) 1.15rem;
    gap: 0;
    /* JS sets this from the header's real bottom; the fallback keeps twelve
       items plus their descriptions scrollable if the script never runs */
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__links.open a:not(.btn) {
    display: block;
    width: 100%;
    padding: 0.66rem 0 0.7rem;
    border-bottom: 1px solid var(--lav-line);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    color: var(--ink);
    background: none;
    box-shadow: none;
    transform: none;
    border-radius: 0;
  }
  .nav__links.open a:not(.btn)::after { display: none; }
  .nav__links.open a:not(.btn):hover,
  .nav__links.open a:not(.btn):active {
    background: none;
    color: var(--lav-deep);
  }

  .nav__links.open .btn {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin-top: 0.85rem;
  }

  .navpv { display: none !important; }

  /* SCOPED TO .open, 2026-09-04. This rule read "no hover exists here, so the
     sentence is simply always on", which was true while everything under 1440
     was a drawer. It is not any more: 941 to 1439 is a ROW again, and an
     always-on sentence under every label turned the header into a 576px block
     with the H1 pushed below the fold. Inside the open drawer it is still
     right, and inside a dropdown the rule at "min-width: 941px" covers it. */
  .nav__links.open .navpv__sub {
    display: block;
    margin-top: 0.24rem;
    font-family: var(--font-body);
    font-variation-settings: "wdth" 100, "wght" 400;
    font-weight: 400;
    font-size: 0.83rem;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
    white-space: normal;
  }
}


/* 2B. THE CALL TO ACTION DOES NOT GO IN THE DRAWER WITH THE RE. Rationale in _source-notes/site.css.notes.md */
@media (min-width: 941px) and (max-width: 1439.98px) {
  .nav__links {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  .nav__links > a:not(.btn) { display: none; }
  .nav__links > .btn { display: inline-flex; }
  /* the toggle sits inboard of the CTA: the rightmost corner is the one that
     converts, and MENU is the secondary of the two */
  .nav__toggle { order: 1; }
  .nav__links { order: 2; }
}

/* ---- 3. the hover panel: one object that tracks the cursor ----
   It reuses the site's own reveal rather than inventing a second motion
   vocabulary: translate-and-fade on --ease, the curve .pre/.in and hailin
   already run, at hover speed. */
.navpv {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 5;
  max-width: min(34rem, calc(100vw - 3rem));
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--lav-line);
  border-radius: 10px;
  padding: 0.58rem 0.95rem;
  box-shadow: 0 18px 40px -18px oklch(0.20 0.06 300 / 0.55),
              0 3px 10px -4px oklch(0.20 0.06 300 / 0.30);
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
              left 0.26s var(--ease);
}
.navpv.is-on { opacity: 1; transform: none; }
.navpv::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--notch, 14px);
  width: 9px; height: 9px;
  background: #fff;
  border-left: 1px solid var(--lav-line);
  border-top: 1px solid var(--lav-line);
  transform: rotate(45deg);
  border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .navpv, .navpv.is-on { transform: none; transition: opacity 0.12s linear; }
}
.navpv-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- 4. the phone pill budget, restated ----
   .navphone returns at 1680 and takes about 90px out of the row, which is
   why 1680 overflowed by 95px before this block. The clamp ceiling of
   0.94rem is set so the bar still clears at 1680 with the pill present. */

/* ==========================================================================
   HERO: STACK UNTIL 1200, ADDED 2026-08-25 FROM A SCREENSHOT OF ADAM'S OWN
   SCREEN RATHER THAN A HEADLESS RENDER.

   THE DEFECT: the hero goes two-column at 941px. Between 941 and roughly 1400
   the left column is about 570px and the word "superpowers." is wider than
   that, so it ran under the hero art in the next column and read
   "superpower". Every headless check I ran was at 1440 or 2000, where it fits,
   which is exactly why I kept reporting it fixed while he was looking at it
   broken. A render at one width is not a verification.

   WHY THIS IS AN ADDITIVE BLOCK AT THE END rather than an edit to the
   breakpoints above: `@media (min-width: 941px)` appears seven times in this
   file and governs more than the hero. Moving all seven to fix one component
   is how a layout fix becomes a site-wide regression at 23:00 with him live.
   This block is last, so it wins, and it touches only .hero.
   ========================================================================== */
/* 1440, NOT 1200. First cut used 1199.98 and his window is about 1267, so the
   rule never applied and he was still looking at a clipped headline. The
   two-column hero is only safe at 1440 and up, which is the one width the
   headless checks happened to use. */
@media (max-width: 1439.98px) {
  .hero .wrap { grid-template-columns: 1fr; }

  /* ⚠️ REWRITTEN 2026-08-27. ADAM: WHAT THE FUCK IS GOING ON WIT. Rationale in _source-notes/site.css.notes.md */
  .hero__art { order: 0; align-self: auto; max-width: 100%; min-height: 0; }
  .hero .wrap { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; gap: clamp(1.6rem, 3vw, 2.4rem); }
  .hero h1 { max-width: 100%; }

}

/* THE TWO-COLUMN PROOF CARD, 941 to 1439 ONLY, and the range is the fix.
   The first cut wrote these inside max-width:1439.98 and they lost between
   700 and 940 to `@media (max-width: 940px) { .proofcard { max-width: 26rem } }`
   further down this file, which is later in source order and therefore wins.
   The result was a 416px card marooned in an 800px column, which is the exact
   defect this block exists to remove.
   Below 941 that older rule is CORRECT and stays: on a phone the card wants
   to be one column, centred, portrait on top. */
@media (min-width: 941px) and (max-width: 1439.98px) {
  .proofcard {
    max-width: 100%;
    margin-inline: 0;
    grid-template-rows: auto;
    grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.6fr);
    align-items: center;
    column-gap: clamp(1rem, 2.4vw, 2rem);
  }
  .proofcard__face { max-width: 100%; align-self: end; }
  .proofcard__body { padding-right: clamp(1rem, 2.4vw, 1.75rem); }
}

/* THE HEADLINE SIZES OFF THE VIEWPORT BUT LIVES IN A COLUMN, WHICH IS THE
   WHOLE BUG. font-size used 6.4vw. At 1440 that is 92px, and "superpowers."
   at 92px is about 640px wide in a column that is about 600px, so it ran
   under the hero art. It looked fine at 2000 because the column grew faster
   than the word. Every headless check I ran was at 2000 or 1440 and I read
   1440 as passing when it was not.
   4.2vw keeps the longest word inside the narrowest two-column case with room
   to spare. Do not raise it without rendering "superpowers." at 1440. */
.hero h1 { font-size: clamp(2.4rem, 4.2vw, 4.4rem); }

/* ===========================================================================
   MOBILE, FIXED 2026-08-26. Adam opened the site on his phone: "This looks
   horrible. Ask marketing wtf."

   Measured at 390px before the fix: the H1 sat at 698px on an 844px screen.
   The first thing a stranger got was two scrolling bars cut off mid-word, a
   phone number, and a mostly empty purple card. The pitch was below the fold.

   THREE CAUSES, and the first one was a deliberate line:

   1. `.hero__art { order: -1 }` at 940px put the decorative card ABOVE the
      headline. On a tablet that reads as art-led. On a phone it costs 300px
      and buries the only sentence that sells anything.
   2. The social ticker is 4652px of marquee in a 375px window, so on a phone
      it is permanently a sentence sliced at both ends. The events strip below
      it already carries the free session and the workshop, so hiding it on
      mobile loses no funnel.
   3. Stacked chrome: ticker 36px plus nav 81px before any content.

   Desktop is untouched. All of this is scoped to phones.
   ========================================================================= */
@media (max-width: 720px) {
  /* THE HEADLINE COMES FIRST. This overrides the order:-1 above. */
  .hero__art { order: 0; margin-top: 1.4rem; }
  .hero .wrap { padding-top: 1.4rem; }

  /* A marquee that can never show a whole line is noise, not information. */
  .ticker { display: none; }
}

/* ===========================================================================
   THE PROOF CARD, 2026-08-26. Replaces the hero comic burst.

   The old panel was a red-and-cyan starburst reading NO-CAPES under a caption
   "MEANWHILE, IN PONTE VEDRA". PRODUCT.md bans "carnival urgency" and
   "startup energy" by name, commits to lavender as the one brand colour with
   gold used at most once per viewport, and states the register plainly: the
   site IS the proof of competence. The burst argued against all three, and it
   spent the hero's most valuable rectangle on a joke.

   Design principle 2 keeps the portrait: Adam is visible, and his face is part
   of the trust architecture. Only the surround changed.

   The action here is deliberately a LINK, not a button. Principle 4 gives the
   page exactly one action, and that belongs to the hero's own CTA. A second
   button competes; a quiet way in does not.
   ========================================================================= */
.proofcard {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 14px;
  background: var(--lav-deep);
  color: #fff;
  overflow: hidden;
  /* Real elevation: offset and blur, tinted from the brand hue rather than
     a neutral drop or a zero-offset halo. */
  box-shadow: 0 18px 40px -18px oklch(0.38 0.12 300 / 0.55);
}

.proofcard__face {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  justify-self: end;
  margin: 0.4rem 1rem -0.5rem 0;
}

.proofcard__body {
  padding: 0 1.4rem 1.35rem;
}

.proofcard__facts { margin: 0; display: grid; gap: 0; }
.proofcard__facts > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgb(255 255 255 / 0.18);
}
.proofcard__facts > div:first-child { border-top: 0; padding-top: 0.2rem; }

.proofcard__facts dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Tinted from the surface hue, never gray on a coloured ground. */
  color: oklch(0.86 0.05 300);
}
.proofcard__facts dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.42;
  color: rgb(255 255 255 / 0.93);
}

.proofcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid oklch(0.86 0.05 300 / 0.55);
  padding-bottom: 0.15rem;
  transition: border-color 0.15s ease, gap 0.15s ease;
}
.proofcard__link svg { width: 1.05em; height: 1.05em; flex: none; }
.proofcard__link:hover { border-bottom-color: #fff; gap: 0.7rem; }
.proofcard__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .proofcard__link { transition: none; }
}

/* On a phone the card sits below the fold and has the full column, so the
   portrait stops competing with the text and simply tops it. */
@media (max-width: 940px) {
  .proofcard { max-width: 26rem; margin-inline: auto; }
  .proofcard__face { max-width: 210px; }
}

/* THE WIRE ON A PHONE, 2026-08-26. ADAM, LOOKING AT IT ON HIS . Rationale in _source-notes/site.css.notes.md */
@media (max-width: 720px) {
  .wire__rail { scroll-snap-type: x mandatory; scroll-padding-left: 0; }

  .wcard {
    width: min(78vw, 17rem);
    padding-block: 0.7rem;
  }

  /* Room to read, still bounded. */
  .wcard b,
  .wcard em {
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wcard b { -webkit-line-clamp: 2; }
  .wcard em { -webkit-line-clamp: 2; }
}

/* HERO-MOBILE-ORDER-2026-08-31, CORRECTED 2026-09-01.

   THE DEFECT THIS FIXES, measured against production at 390x844 on 2026-09-01:
   the capture card rendered ABOVE the eyebrow and the headline. A phone visitor
   met an input box with no promise and no positioning on it, and found the
   headline underneath. The capture was at document top 150, the eyebrow at 505,
   the H1 at 587.

   THE CAUSE IS ONE MISSING LINE, and it is the standing hazard of `order`.
   `display: contents` flattens the copy column into the hero grid, so every
   child becomes a grid item and `order` decides the sequence. Six of the seven
   children were given an order below. .taskcap was not, so it kept the initial
   value of 0 and sorted ahead of all of them.

   THE RULE: when a container orders any of its children, it orders ALL of
   them. An unordered sibling does not stay put, it goes to the front. */
@media (max-width: 720px) {
  .hero .wrap > div:first-child { display: contents; }
  .hero .label  { order: 1; }
  .hero h1      { order: 2; }
  .hero .taskcap { order: 3; }
  .hero__art    { order: 4 !important; margin-top: 1.1rem; }
  .hero__lede   { order: 5; }
  .hero__cred   { order: 6; }
  .hero__cta    { order: 7; }
}

/* HERO: TWO COLUMNS FROM 1100 UP, AND A TIGHTER TOP. 2026-09-0. Rationale in _source-notes/site.css.notes.md */
@media (min-width: 1100px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
    align-items: start;
    padding-block: 1.5rem 0;
    gap: clamp(1.6rem, 2.6vw, 2.6rem);
  }

  /* Back beside the copy instead of under it. `align-self: start` tops the
     card off against the eyebrow rather than centring it in a column it can
     never fill. */
  .hero__art { order: 0; align-self: start; max-width: 100%; padding-top: 0; }

  /* The rhythm. 1.6rem under the headline is not arbitrary: .taskcap__stamp is
     absolutely positioned at top:-16px and overhangs the card, so anything
     under about 1.5rem puts the gold stamp on the headline's descenders. */
  .hero h1       { margin-bottom: 1.6rem; }
  .hero .taskcap { margin-block: 0 1.2rem; }
  .hero__lede    { margin-bottom: 1.1rem; }
  .hero__cred    { margin-bottom: 1.1rem; }
  .hero__cta     { margin-top: 1.1rem; }

  /* The two-column card belongs to the STACKED hero, where the card spanned a
     full-width column and would otherwise have been an orphan in it. In a
     narrow side column it is wrong again, so the base one-column card comes
     back: portrait on top, facts under it. */
  .proofcard {
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
    column-gap: 0;
    align-items: stretch;
  }
  .proofcard__face { max-width: 260px; align-self: auto; justify-self: end; }
  .proofcard__body { padding: 0 1.4rem 1.35rem; }
}


/* ════════════════════════════════════════════════════════════════════════
   THE WIRE COMES BACK UNDER THE HEADER, and the first screen pays for it
   out of padding rather than out of Adam's events strip.
   2026-09-01, on his instruction: "I want my purple banner thing back
   under header. I want it properly designed."

   WHAT WENT WRONG YESTERDAY, because the fix only makes sense against it.
   He sent a screenshot of the top of his own homepage and said there was
   too much dead space. The session read that as "the wire is in the way"
   and moved the strip below the hero. Two costs, both live for a day:

   1. The homepage lost the only surface carrying the free session, the
      workshop and the challenge from the first screen. Every other page
      in this site still had it directly under the header.
   2. Landing below the hero, the purple rail ran straight across the
      bottom of the proof card and cut his portrait off at the shoulders.
      Purple strip on purple panel, so it read as one confused mass rather
      than two components. Root 5c has his face as proof, not decoration.

   THE ACTUAL COMPLAINT WAS VERTICAL SPEND, NOT THIS COMPONENT. So the
   space comes back from where it was actually being wasted: the hero wrap
   opened with up to 88px of top padding on a viewport that only has 674px
   to give. Cut to 40px at desktop and 20px on a phone. The wire is 70px
   and earns it; the empty band above the eyebrow did not.

   Net first screen after this: the strip is visible under the header, and
   the headline still clears the fold.
   ════════════════════════════════════════════════════════════════════════ */

.hero .wrap { padding-block: clamp(1.25rem, 3vw, 2.5rem) 0; }

/* The strip is structural, not a hover surface. Hold it to one clean band
   under the header: a hairline above so it reads as separated from the nav,
   and a firm edge below so the hero starts on a line rather than a fade. */
.wire {
  border-top: 1px solid oklch(1 0 0 / 0.10);
  box-shadow: 0 1px 0 oklch(0.30 0.09 300 / 0.55);
}

/* On a phone the flag and the rail were competing for a 390px line. The flag
   is a label, so it gives up width first and the cards keep it. */
@media (max-width: 560px) {
  .wire__flag { font-size: 0.58rem; padding-inline: 0.5rem; letter-spacing: 0.06em; }
  .hero .wrap { padding-block: 1.25rem 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   A WHITE BUTTON ON A WHITE CARD, 2026-09-01. Found by the QC site watch on
   its first run, measured rather than eyeballed.

   `.btn--onlav` means "on lavender": white fill, lavender-deep label, no
   border, because the lavender panel behind it supplies the edge. Two of the
   three uses on the homepage are no longer on lavender.

     SHOW ME              inside `.taskcap`, background #fff. Contrast between
                          the button surface and the card behind it: 1.00 : 1.
     SEE THE NEXT WORKSHOP  inside `.fttable__cta`, on the page ground. 1.00 : 1.
     SAVE MY SEAT         still on the lavender lead panel. 6.79 : 1. Correct,
                          and deliberately untouched.

   The first of those is the front door of the funnel. It is the submit control
   on the hero capture, it sits directly under an input that carries a
   `2px solid #1D1430` border, and it had no edge of any kind. Only a 50%
   opacity drop shadow separated it from the card, which is not a boundary.

   HOW IT GOT HERE, because the class is not wrong in general: the hero capture
   was moved into the purple column on 2026-08-31 (`a000b9bf`) and moved back
   out to the white left column the same afternoon (`b6d2de66`). The move back
   returned the card to white and left the button dressed for lavender.

   THE FIX MATCHES THE INPUT BESIDE IT rather than inventing a treatment: the
   same ink border and the same hard offset shadow the rest of the card system
   already uses. Colour, label and size are unchanged, so this restores the
   edge without making a new design decision.

   Scoped to the two containers that are actually white. `.btn--onlav` on a
   lavender panel keeps its borderless form, which is why this is not written
   against the bare class.

   FALSIFIABLE: at 390x844 and at 1280x674, the computed contrast between
   `.taskcap__row button` and `.taskcap` must be greater than 1.00 : 1, and
   `getComputedStyle(button).borderTopWidth` must not be `0px`.
   ════════════════════════════════════════════════════════════════════════ */
.taskcap__row button.btn--onlav,
.fttable__cta .btn--onlav {
  border: 2px solid #1D1430;
  box-shadow: 3px 3px 0 0 #1D1430;
}
.taskcap__row button.btn--onlav:hover,
.fttable__cta .btn--onlav:hover {
  background: var(--lav-tint);
  box-shadow: 4px 4px 0 0 #1D1430;
}

/* ════════════════════════════════════════════════════════════════════════
   2026-09-01. THE MESSAGE SPINE ON THE FIRST SCREEN, AND THE WIRE
   REDESIGNED. Two requirements: the home page and the print one-pager
   have to carry the same material and reinforce each other,
   and the purple strip has to be a designed object at both desktop and phone
   widths rather than one that merely works.

   Part one is copy and lives in index.html. Part two is this block.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- 1. NEW HERO ELEMENTS ------------------------------------------------
   `.hero__promise` and `.hero__offer` are new class names, so they inherit
   nothing. The mobile hero orders its children explicitly and the rule above
   this block spells out why that matters: when a container orders ANY child
   it orders ALL of them, and an unordered sibling jumps to the front. Both
   new elements are ordered below or they land above the headline on a phone. */

.hero__promise {
  max-width: 46ch;
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* THE OFFER. One call to action on the first screen, which is the binding
   rule the message spine carries: one offer, one link. It is a link and not
   a filled button on purpose. The filled button on this screen belongs to
   SHOW ME, the capture, and two filled buttons stacked is the three-CTA fold
   the 08-28 funnel probe already found and demoted once. */
.hero__offer {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 0 0 0.5rem;
}
.hero__offer-go {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  color: var(--lav-deep); text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
.hero__offer-go:hover { color: var(--ink); border-bottom-color: var(--ink); }
.hero__offer-meta {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.hero__offer-meta b { color: var(--ink); font-weight: 700; }

/* The free session survives as ONE secondary sentence with no button, which
   is the other half of the same rule. A free call to action competing with a
   paid one is how a week of traffic produced no checkout sessions. */
.hero__free { margin: 0 0 1.4rem; font-size: 0.92rem; color: var(--ink-soft); }
.hero__free a { color: var(--lav-deep); font-weight: 650; }

/* WHAT THE BOX SAYS WHEN IT HAS WORKED. Added 2026-09-01. It used to say it by
   navigating to /thanks, a page headed SEAT SAVED, for a form that saves no
   seat. It answers in place now, so nobody is moved to a page about a thing
   they did not ask for. */
.taskcap__done {
  margin: 0.7rem 0 0;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}
.taskcap__done[hidden] { display: none; }
.taskcap__aside {
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.taskcap__aside a { color: var(--lav-deep); font-weight: 650; }
/* The step-two row carries its own button, so it lays out exactly like the
   step-one row: field then action, never action then field. */
.taskcap__step2 button[hidden] { display: none; }

@media (max-width: 720px) {
  .hero h1         { order: 2; }
  .hero__lede      { order: 3 !important; font-size: 1.05rem; margin-bottom: 1.2rem; }
  .hero .taskcap   { order: 4; }
  .hero__offer     { order: 5; }
  .hero__free      { order: 6; }
  .hero__art       { order: 7 !important; }
  .hero__promise   { order: 8; }
  .hero__cred      { order: 9 !important; }
  .hero .tonight   { order: 10; }
}

/* ---- 2. THE OBJECTION BAND ----------------------------------------------
   Replaced the six-agent crew roster. Set as one paragraph at reading size
   rather than as a grid of cards: the objection is a sentence somebody is
   already saying in their head, and breaking it into six tiles would turn it
   back into the product slide it replaced. */
.objection { padding-block: var(--band); border-top: 1px solid var(--lav-line); }
.objection h2 { max-width: 22ch; margin-bottom: 1.4rem; }
.objection__body {
  max-width: 62ch; font-size: 1.14rem; line-height: 1.6; color: var(--ink);
}
.objection__proof {
  max-width: 62ch; margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 2px solid var(--gold);
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
}
.objection__proof strong { color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   3. THE WIRE, REDESIGNED. 2026-09-01.

   WHAT WAS WRONG, measured on production at 1280x674 and 390x844 before a
   line of this was written:

   DESKTOP. Four full-bleed bands stacked in the first 227 pixels: the dark
   ticker at 36, the white nav at 121, the purple wire at 70, then the hero.
   The wire read as a SECOND NAVIGATION because it was built like one: full
   bleed, bordered top and bottom as an independent band, and seven cells of
   identical width, weight and type divided by hairlines. A row of equal cells
   is a table, and a table under a nav is a menu bar. On top of that the strip
   introduced a third left edge: the nav brand starts at x=80, the H1 at x=80,
   and the wire's first card at x=58.

   MOBILE. The rail scrolled 2,720px inside a 327px window and the only thing
   saying so was a 35px gradient. That gradient sat ON TOP of a real card, so
   the one visible clue that the strip continued was a curtain drawn over the
   evidence. Cards butted edge to edge on shared borders, so the second card
   did not read as a second card. It read as the first one being cut off by
   the screen.

   THE FLAG. A permanently saturated yellow block reading RIGHT NOW. A colour
   worn at all times carries no information, and yellow worn at all times in a
   left-hand block is the visual grammar of a warning label. This file already
   argues the principle in the Tier 3 note above: gold on the live item is
   information, gold as a field is decoration.

   WHAT THIS DOES ABOUT IT, in four decisions.
   ════════════════════════════════════════════════════════════════════════ */

/* ── DECISION 1: the wire is the underside of the header, not a band beneath
   it. The top edge goes, so the white nav and the purple strip read as one
   two-tier chrome object instead of two competing bands. The bottom takes a
   2px gold seam, which is this site's own device, so the band closes on a
   deliberate line and hands off to the white hero rather than fading into it.
   The height is NOT reduced. The brief was designed, not smaller, and a
   shorter version of a badly structured band is a badly structured band. */
.wire {
  position: relative;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}
.wire::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold);
  z-index: 3;
  pointer-events: none;
}

/* ── DECISION 2: the strip sits on the page column. Its left edge now lands
   on the same gutter as the nav brand and the H1, so the top of the page has
   one left edge instead of three. This is the single largest "somebody
   designed this" signal available on a 70px band. */
.wire__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: stretch;
  min-height: 70px;
}

/* The gradient curtain is retired. It is replaced by a real affordance
   further down: a progress rail that says how much more there is and where
   you are, which is the honest version of the same job. */
.wire__inner::after { display: none !important; }

/* ── DECISION 3: the flag is a NAMEPLATE, and gold becomes conditional.
   Default state: gold TYPE on the field, no fill, divided from the rail by a
   hairline. It names the strip instead of alarming about it. It takes the
   gold FILL, and a live dot, only when something is genuinely live, so the
   day the colour appears it means something. The words change with the state
   too, set in site.js: WHAT'S ON normally, RIGHT NOW when live, because a
   nameplate reading RIGHT NOW above an October event is a small lie the page
   tells every other day of the month. */
.wire__flag {
  background: transparent;
  color: var(--gold);
  border-right: 1px solid oklch(1 0 0 / 0.16);
  border-left: 0;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; text-align: left;
  padding: 0 clamp(0.8rem, 1.6vw, 1.15rem) 0 0;
  margin-right: clamp(0.8rem, 1.6vw, 1.15rem);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.56rem; line-height: 1.3; letter-spacing: 0.16em;
  white-space: nowrap;
}
.wire--live .wire__flag {
  background: var(--gold);
  color: var(--ink);
  padding-inline: clamp(0.7rem, 1.4vw, 0.95rem);
  border-right-color: var(--gold);
}
.wire__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); margin-bottom: 0.28rem;
  animation: wirepulse 1.6s ease-in-out infinite;
}
@keyframes wirepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .wire__dot { animation: none; } }

/* ── DECISION 4: the cards stop being cells and become cards, and the two
   that carry money stop weighing the same as a downloads link.

   The hairline dividers go. They were what made seven items read as one
   table. Cards get their own surface, their own edge and a gap between them,
   so a card half off the screen reads as ANOTHER CARD rather than as the band
   being clipped. That single change is most of the mobile fix, before the
   progress rail is even considered. */
.wire__rail {
  gap: 0.5rem;
  align-items: center;
  padding-block: 0.5rem;
}
.wcard {
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 10px;
  background: oklch(1 0 0 / 0.05);
  padding: 0.5rem 0.75rem;
  transition: background .14s ease, border-color .14s ease;
}
.wcard:hover { background: oklch(1 0 0 / 0.14); border-color: oklch(1 0 0 / 0.30); }
.wcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* THE RANK. `rank: "buy"` is the paid room and `rank: "lead"` is the free
   one, both set in config.js and both stamped onto the card by the renderer.
   The paid room carries a gold keyline and the largest title in the strip.
   Free prompts and downloads are real and stay on the strip; they are just no
   longer the same size as the thing that pays the mortgage. */
.wcard--buy {
  background: oklch(1 0 0 / 0.13);
  border-color: oklch(1 0 0 / 0.34);
  box-shadow: inset 3px 0 0 0 var(--gold);
}
.wcard--buy:hover { background: oklch(1 0 0 / 0.20); }
.wcard--buy .wcard__w { color: var(--gold); opacity: 1; }
.wcard--buy b { font-size: 0.95rem; }
.wcard--lead { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.24); }
.wcard--ship, .wcard--note, .wcard--event {
  background: transparent;
  border-color: oklch(1 0 0 / 0.10);
}
.wcard--ship b, .wcard--note b { font-weight: 700; font-size: 0.83rem; }
.wcard--ship em, .wcard--note em { opacity: 0.72; }
.wcard--live { border-color: var(--gold); box-shadow: none; }

/* ---- DESKTOP: 1100 and up ------------------------------------------------
   Cards divide the inset column. Growth is weighted rather than equal, so the
   two revenue cards are physically wider than a link to the story. */
@media (min-width: 1100px) {
  .wire__rail { flex: 1 1 auto; min-width: 0; gap: 0.5rem; overflow-x: hidden; }
  .wire__rail .wcard { flex: 1 1 0; width: auto; min-width: 0; }
  .wire__rail .wcard--buy  { flex-grow: 1.75; }
  .wire__rail .wcard--lead { flex-grow: 1.4; }
  .wire__rail .wcard--ship,
  .wire__rail .wcard--note { flex-grow: 0.8; }
  .wire__prog { display: none; }
}

/* ---- BELOW 1100: the rail scrolls, and it says so honestly ---------------
   THE PEEK IS THE FIRST AFFORDANCE. Card width is set so the next card shows
   roughly sixty pixels of itself, which is enough to read as a card with
   words in it. A sliver reads as a rendering fault. A curtain reads as a
   design hiding something. Sixty pixels of a real second card reads as swipe.

   THE PROGRESS RAIL IS THE SECOND. It is injected by site.js and sits on the
   bottom edge of the strip: a track the width of the rail, with a gold thumb
   whose width is the proportion visible and whose position is where you are.
   It tells the truth about how much more there is, which the gradient never
   did. It is not interactive, so it never competes with the swipe. */
@media (max-width: 1099px) {
  .wire__inner { padding-inline: 0; min-height: 0; }
  .wire__flag {
    padding-left: var(--gutter);
    padding-right: 0.7rem;
    margin-right: 0.7rem;
    font-size: 0.54rem; letter-spacing: 0.12em;
  }
  .wire--live .wire__flag { padding-left: 0.7rem; margin-left: var(--gutter); }
  .wire__rail {
    padding-block: 0.55rem 0.9rem;
    padding-right: var(--gutter);
    scroll-snap-type: x mandatory;
  }
  .wcard { width: min(70vw, 16.5rem); scroll-snap-align: start; }

  .wire__prog {
    position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
    z-index: 2; pointer-events: none;
    background: oklch(1 0 0 / 0.14);
  }
  .wire__prog i {
    display: block; height: 100%; width: 30%;
    background: var(--gold);
    transform: translateX(0);
    transition: transform .08s linear, width .12s ease;
  }
}

/* A phone: two lines of title, two of subline, nothing clipped mid-word.
   Unchanged in intent from the 08-31 rule this sits on top of; restated here
   so it is not lost under the new card padding. */
@media (max-width: 720px) {
  .wcard { padding: 0.55rem 0.8rem; min-height: 72px; }
  .wcard b { font-size: 0.88rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE FOLD, 2026-09-01. Measured, not eyeballed.

   The requirement, set 2026-08-31: the question and answer box has to sit
   high on the first screen and read as deliberate. On
   production this morning at 1280x674 the box sat at top 514 and ran to 732,
   so its submit button was 58px below the fold. The first draft of today's
   copy put the ruled subhead between the headline and the box and made it
   worse: box top 677, entirely off the first screen.

   THREE PIXELS BUDGETS WERE CUT, in the order of least harm.

   1. The eyebrow. Gone, in index.html. 46px, and it said nothing the promise
      line does not say properly further down.
   2. The subhead moved below the box. The headline is the hook, the box is
      the ask, and an explanation belongs after both. 127px.
   3. The headline sizes down at desktop only. This is the one with a real
      cost, so it is the smallest cut of the three: 3.6rem instead of the
      display size, which is still the largest type on the page by a wide
      margin and still holds three lines in the 589px column.

   The wire is NOT part of this budget. It kept its band height on purpose.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {
  .hero .wrap { padding-block: clamp(0.75rem, 1.5vw, 1.4rem) 0; }
  /* 3.2rem is not a taste call, it is the largest size at which this
     particular 68-character headline still sets in THREE lines inside the
     589px column. At the display size it took four, and the fourth line cost
     56px straight out of the capture box's budget. Measured at 1280. */
  .hero h1 {
    font-size: clamp(2.3rem, 4vw, 3.2rem);
    line-height: 1.0;
    margin-bottom: 1.25rem;
  }
  .hero__lede { font-size: 1.05rem; margin-top: 1.6rem; margin-bottom: 1.4rem; }
}

/* The wire holds one band height across the redesign: cards tightened by the
   same amount the card padding added, so the strip lands back on the 70px it
   measured before rather than growing into the fold it is supposed to
   protect. */
.wire__rail { padding-block: 0.34rem; }
.wcard { padding: 0.42rem 0.75rem; }
@media (min-width: 1100px) {
  .wire__inner { min-height: 70px; }
}

/* ---- THE LAST 40 PIXELS, and where they came from ------------------------
   After the eyebrow, the subhead move and the headline resize, the capture
   box still ended 39px past the fold at 1280x674. The headline stays at four
   lines: 68 characters of a ruled sentence, set in Archivo at wdth 112, needs
   about 42px type to fit three lines in a 589px column, and 42px is not a
   hero. So the remaining budget comes out of the box's own internal spacing,
   at desktop only, where it had 25.6px of top padding and 43px of note text
   doing very little work. The phone keeps every pixel of its original
   breathing room, because nothing is tight there. */
@media (min-width: 1100px) {
  .hero .wrap { padding-block: clamp(0.5rem, 1vw, 0.9rem) 0; }
  .hero h1 { margin-bottom: 1rem; }
  .hero .taskcap { margin-top: 1.4rem; padding: 1.15rem 1.3rem 1.05rem; }
  .hero .taskcap__q { margin: 0.3rem 0 0.7rem; }
  .hero .taskcap__note { margin-top: 0.55rem; font-size: 0.85rem; line-height: 1.45; }
}

/* ---- SEVEN CARDS DO NOT FIT 1026 PIXELS, so two of them stand down --------
   Measured at 1280: with all seven sharing the inset column the four
   secondary cards came out at 113px each and every one of their titles
   truncated to an ellipsis. "What actual..." and "The whole s..." communicate
   nothing at all, which is worse than not being there, and they were pushing
   the two cards that carry money down to a size they had not earned.

   So on desktop the two `--note` cards drop out. They are the two whose
   destinations are already reachable from the nav AND from the scope grid
   further down the same page, so nothing goes dark.

   CORRECTED the same hour: this was first written as 1100 to 1439, on the
   assumption that a wider window would give the strip more room. It does not.
   `--wrap` caps at 1200px, so the rail measures the same 1022px at 1440 as it
   does at 1280, and at 1440 the three titles truncated again. A breakpoint
   that assumes a container grows when the container is capped is a breakpoint
   guessed rather than measured. */

/* The nameplate carries the strip's name, so it is set to be read rather than
   glanced past. Gold type on the field at 0.6rem holds contrast well over
   the 4.5:1 line against every stop in the wire's gradient. */
.wire__flag { font-size: 0.6rem; }
@media (max-width: 1099px) { .wire__flag { font-size: 0.56rem; } }

/* ════════════════════════════════════════════════════════════════════════
   THE PHONE, SECOND PASS. 2026-09-01, after measuring the first one.

   THE FIRST PASS WAS NOT GOOD ENOUGH AND THE NUMBER SAYS SO. With the
   nameplate holding a 71px left column on a 375px screen, the rail had 293px
   to work with and a 264px card left a 21px peek of the next one. Twenty-one
   pixels is a sliver, and a sliver is exactly the thing that reads as a
   rendering fault rather than as an invitation. The whole point of this pass
   was to stop the strip looking clipped.

   So on a phone the nameplate stops being a column and becomes a ROW. It runs
   full width above the rail in gold mono caps at the page gutter, and the
   rail gets the entire 375px underneath it. That buys 71px of card space for
   about 18px of height, and it gives the strip a masthead, which is what a
   wire has always had.

   THE PEEK IS NOW A DESIGNED NUMBER, not a leftover. Card width is 74vw, so
   at 390 the next card shows about 75px of itself: enough to read a date
   stamp and the start of a title, which is what makes a person swipe.

   AND WHEN SOMETHING IS LIVE the row fills gold across the full width with a
   pulsing dot. On the desktop column that same state is a gold block. Both
   are the same rule: the colour appears only when it means something.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1099px) {
  .wire__inner { flex-direction: column; align-items: stretch; padding-inline: 0; }

  .wire__flag {
    flex-direction: row; align-items: center; gap: 0.34em;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid oklch(1 0 0 / 0.12);
    padding: 0.42rem var(--gutter) 0.36rem;
    margin: 0;
    font-size: 0.56rem; letter-spacing: 0.2em; line-height: 1;
  }
  .wire--live .wire__flag {
    background: var(--gold); color: var(--ink);
    padding: 0.42rem var(--gutter) 0.36rem;
    margin: 0;
    border-bottom-color: var(--gold);
  }
  .wire__dot { margin-bottom: 0; margin-right: 0.15em; }

  /* Every card the same height, so the rail has a straight top edge and a
     straight bottom edge. Ragged card heights are the difference between a
     row of cards and a pile of them. */
  .wire__rail {
    align-items: stretch;
    padding: 0.5rem var(--gutter) 0.85rem;
    gap: 0.5rem;
  }
  .wcard { width: 74vw; max-width: 19rem; }

  /* The progress rail spans the card area, which is now the full width. */
  .wire__prog { bottom: 2px; }
}

/* ---- TWO DEFECTS THE MEASUREMENT CAUGHT, both invisible to the eye -------

   1. THE RAIL ATE ITS OWN LEFT GUTTER. `scroll-snap-type: x mandatory` with
      `scroll-padding-left: 0` snapped the first card's left edge to the
      container's scroll origin the moment the page loaded, which scrolled the
      rail 20px on its own and put the first card hard against the screen
      edge while every other element on the page sat on a 20px gutter. The
      padding was there; the snap was overriding it. Snap padding now matches
      the layout gutter, so the rail rests where it was designed to rest and
      still snaps card to card on a swipe.

   2. THE HERO ORDER ON A PHONE. The subhead was set to render between the
      headline and the capture box, which is the arrangement that was already
      measured and rejected on desktop this morning: five lines of subhead put
      the box at top 728 with the fold at 844. Same order as desktop now.
      Headline, the ask, the offer, the free line, his face, then everything
      that elaborates. */
@media (max-width: 1099px) {
  .wire__rail { scroll-padding-left: var(--gutter); }
  .wire__flag { padding-block: 0.34rem 0.3rem; }
  /* 0.8rem of bottom padding on a phone was buying nothing and costing the
     first screen, which is where the offer and the ask now have to fit. */
  .wire__rail { padding-block: 0.34rem 0.5rem; }
}

/* ORDER CORRECTED 2026-09-01, off a MEASURED walk of production at 390x844
   rather than a preference. The numbers: h1 at document top 236, capture form
   at 496, and the offer line, the only place on the first screen that says
   what this is and when it happens, at 838. The fold is 844 and the header is
   sticky at 81, so on a natural scroll that line arrives underneath the
   header. The whole first screen on a phone was a logo, a MENU, a scrolling
   purple bar, one headline, and a box demanding the visitor type something
   before a single word had told them what they were typing into.

   Four questions in five seconds: what is offered, what does it cost, what
   happens next, why you. A phone got none of them. Desktop at 1280 showed all
   of it and looked correct, which is exactly how this survived a week: he
   arrives from LinkedIn, on a phone.

   So the offer goes ABOVE the ask, which is also the order the DOM now uses,
   and the block below no longer fights it. Nothing was deleted to make room;
   the subhead that used to sit here is still on the page at order 7. */
@media (max-width: 720px) {
  .hero h1        { order: 2; }
  .hero__offer    { order: 3; }
  .hero__free     { order: 4; }
  .hero .taskcap  { order: 5; }
  .hero__art      { order: 6 !important; }
  .hero__lede     { order: 7 !important; }
  .hero__promise  { order: 8; }
  .hero__cred     { order: 9 !important; }
  .hero .tonight  { order: 10; }
  .hero__lede     { margin-top: 0; }

  /* Tighter above the fold. Every pixel here is one the ask does not have to
     be pushed below 844 by, and the numbers are measured rather than guessed:
     at 390x844 the SHOW ME button finished at 898 before this block, which is
     54px under. Nothing is deleted to get them, the gaps just stop being
     desktop gaps on a phone. */
  .hero__offer    { margin-bottom: 0.25rem; }
  .hero__free     { margin-bottom: 0.3rem; }
  .hero h1        { margin-bottom: 0.7rem; }
  .hero .taskcap  { margin-top: 0.75rem; }
  .taskcap        { padding-top: 1.15rem; }
  .taskcap__q     { margin-bottom: 0.35rem; }
}

/* ---- THE NAMEPLATE ROW SITS ON THE GUTTER, NOT IN THE MIDDLE -------------
   `.wire__flag` is a centred flex column at desktop, where centring is right
   because it is a narrow left-hand block. Turned into a full-width row on a
   phone, the same `justify-content: center` put the masthead in the middle of
   the screen, floating, aligned to nothing. Every other line on the page
   starts at the gutter and so does this one now. */
@media (max-width: 1099px) {
  .wire__flag { justify-content: flex-start; }

  /* ONE LINE AT THE BOTTOM, NOT TWO. The gold seam and the progress track
     were both landing on the bottom edge, stacking two coloured hairlines in
     six pixels, which reads as a rendering artefact rather than as a border.
     On a phone the progress rail IS the bottom edge: a dim white track that
     closes the band exactly as the seam did, with the gold thumb riding on it
     to say where you are. The gold identity at this width is carried by the
     nameplate row at the top, which is new and did not exist before today. */
  .wire::after { height: 3px; background: oklch(1 0 0 / 0.16); }
  .wire__prog { bottom: 0; height: 3px; background: transparent; z-index: 4; }
}

/* Growth weights, retuned after the note cards came out. Measured at 1280:
   the challenge title is the longest one left, so it takes a little more of
   the column and the two free items give it up. Nothing on the strip should
   end in an ellipsis; a truncated title communicates less than no title. */
@media (min-width: 1100px) {
  .wire__rail .wcard--event { flex-grow: 1.2; }
  .wire__rail .wcard--ship  { flex-grow: 0.75; }
}

/* The challenge card is not a revenue item either, so its title drops to the
   secondary size with the other two, and it takes a little more of the column
   because its name is the longest on the strip. Measured at 1280: title fits
   with room to spare, nothing on the strip ends in an ellipsis. */
.wcard--event b { font-weight: 700; font-size: 0.83rem; }
.wcard--event em { opacity: 0.72; }
@media (min-width: 1100px) {
  .wire__rail .wcard--event { flex-grow: 1.35; }
}

/* TIGHTER ABOVE THE FOLD ON DESKTOP TOO. Found 2026-09-02 by the QC site
   watch, walking production at 1280x674, which is Adam's own laptop viewport
   after browser chrome, not 1080. The 2026-09-01 patch above measured and
   fixed this exact defect on a phone; nobody had measured it on a desktop.
   Before this block: the task-capture input and its submit button finished at
   716px, 42px under the fold, so the control that starts the funnel needed a
   scroll to reach. Nothing here is deleted, the desktop gaps just stop being
   as generous on a 674px-tall screen. */
@media (min-width: 941px) {
  .hero .wrap    { padding-top: 0.2rem; }
  .hero h1       { margin-bottom: 0.35rem; }
  .hero__offer   { margin-bottom: 0.25rem; }
  .hero__free    { margin-bottom: 0.35rem; }
  .hero .taskcap { margin-top: 0.2rem; padding-top: 0.3rem; }
}


/* NAV MENUS, 2026-09-04. THE SIX LABELS EXPAND; NOTHING IS ORP. Rationale in _source-notes/site.css.notes.md */
.nav__item { position: relative; display: flex; align-items: center; }

/* 941, NOT 1440. AMENDED 2026-09-04, path-to-purchase pass.
   This block held every rule that makes a dropdown a dropdown: absolute
   positioning, display:none until hover, the bridge over the 6px gap. Below
   1440 none of it applied, so the moment the nav row was restored in the
   941-1439 band the five submenus rendered IN FLOW and the header measured
   576px tall at 1400 - two thirds of the fold, with the H1 pushed under it.
   The drawer rules below are all scoped to .nav__links.open, and the toggle
   that sets .open is hidden from 941 up, so widening this costs nothing. */
@media (min-width: 941px) {
  .nav__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: -0.7rem;
    z-index: 6;
    flex-direction: column;
    width: max-content;
    min-width: 16rem;
    max-width: 23rem;
    padding: 0.4rem 0;
    background: #fff;
    border: 1px solid var(--lav-line);
    border-radius: 10px;
    box-shadow: 0 18px 40px -18px oklch(0.20 0.06 300 / 0.55),
                0 3px 10px -4px oklch(0.20 0.06 300 / 0.30);
  }
  /* the last menu opens leftward so it never runs past the CTA */
  .nav__item--end .nav__menu { left: auto; right: -0.7rem; }
  /* an invisible bridge over the 6px gap, so the pointer can cross it */
  .nav__menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  }
  .nav__item:not(.is-closed):hover > .nav__menu,
  .nav__item:not(.is-closed):focus-within > .nav__menu { display: flex; }

  .nav__links .nav__menu a:not(.btn) {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem 0.55rem;
    line-height: 1.25;
    white-space: normal;
    font-size: 0.92rem;
    color: var(--ink);
  }
  .nav__links .nav__menu a:not(.btn)::after { display: none; }
  .nav__links .nav__menu a:not(.btn):hover,
  .nav__links .nav__menu a:not(.btn):focus-visible {
    background: var(--lav-tint);
    color: var(--lav-deep);
  }
  /* the one-line description each link already carries for the drawer is
     shown here too, so a menu explains its entries the way the hover panel
     explains the bar */
  .nav__menu .navpv__sub {
    display: block;
    margin-top: 0.18rem;
    font-family: var(--font-body);
    font-variation-settings: "wdth" 100, "wght" 400;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
    white-space: normal;
  }
}

@media (max-width: 1439.98px) {
  .nav__links.open .nav__item { display: block; width: 100%; }
  .nav__links.open .nav__menu { display: block; }
  .nav__links.open .nav__menu a[data-self] { display: none; }
  .nav__links.open .nav__menu a:not(.btn) {
    padding-left: 1.3rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }
  .nav__links.open .nav__menu a:not(.btn):hover,
  .nav__links.open .nav__menu a:not(.btn):active { color: var(--lav-deep); }
  .nav__links.open .nav__menu .navpv__sub { padding-left: 0; font-size: 0.78rem; }
}
/* between 941 and 1439 the closed row carries only the CTA (rule 2b above) */
@media (min-width: 941px) and (max-width: 1439.98px) {
  .nav__links > .nav__item { display: none; }
}

/* ===========================================================================
   SITE HARMONY, 2026-09-04. The ladder and the one-pager's spine.
   One path, four rungs, the same words on every page. Tokens from DESIGN.md.
   ========================================================================= */
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 1.6rem; }
.hero__fine { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; }

/* THE SLOT LINE, 2026-09-06. Sits directly above the primary action because
   it is the reason to press it today rather than a footnote about it.

   Set as one quiet mono line, not a red banner with a countdown. The scarcity
   here is real (one operator, two builds a month) and the burned-vendor filter
   in root 5c cuts anything that looks like manufactured urgency, because a
   fake countdown is exactly what the firm that burned this customer used. A
   true fact stated plainly outperforms a true fact shouted.

   It renders hidden and is unhidden by BRAIN_SLOTS only when there is a figure
   worth standing behind, so a stale or unreadable count leaves no gap. */
.hero__slots {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 1.5rem 0 0;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lav-deep);
  background: var(--lav-tint);
  border: 1px solid var(--lav-line); border-radius: 999px;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
}
.hero__slots::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lav-deep); flex: none;
}
.hero__slots[hidden] { display: none; }

/* The line that turns five prices into one path. The ladder was already in
   ascending order; nothing on the page said the order meant anything. */
.hero__rungs {
  margin-top: 0.85rem; max-width: 58ch;
  font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft);
}
.hero__def { font-size: 1.12rem; color: var(--ink); margin: 1.1rem 0 0; max-width: 60ch; }
.hero__def b { color: var(--lav-deep); }

.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.four a { display: block; border: 1px solid var(--lav-line); border-radius: 16px; padding: 1.4rem 1.3rem; background: #fff; color: var(--ink); text-decoration: none; }
.four a:hover { background: var(--lav-tint); }
.four a .label { display: block; margin-bottom: 0.7rem; }
.four b { display: block; font-weight: 800; font-size: 1.15rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.four span:not(.label) { color: var(--ink-soft); font-size: 0.95rem; display: block; }
@media (max-width: 980px) { .four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .four { grid-template-columns: 1fr; } }


.pricing { padding-block: clamp(3.6rem, 7.5vw, 6rem); }
.pricing h2 { font-size: var(--size-h2); font-weight: 800; font-stretch: 106%; font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
.pricegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.pricegrid > div { border: 1.5px solid var(--ink); border-radius: 14px; padding: 1.3rem 1.2rem; background: #fff; }
.pricegrid b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; color: var(--lav-deep); }
.pricegrid span { display: block; margin-top: 0.4rem; color: var(--ink); font-weight: 600; }
.pricegrid small { display: block; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.85rem; }
.pricing__fine { color: var(--ink-soft); max-width: 68ch; margin-top: 1.4rem; }
.pricing__acts { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 1.4rem; }
@media (max-width: 980px) { .pricegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pricegrid { grid-template-columns: 1fr; } }

.ladder { background: var(--lav-tint); padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--lav-line); border-bottom: 1px solid var(--lav-line); }
.ladder__cap { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lav-deep); margin: 0 0 1.1rem; font-weight: 600; }
.ladder__rungs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.ladder__rungs li { border: 1px solid var(--lav-line); background: #fff; border-radius: 14px; }
.ladder__rungs li a { color: inherit; text-decoration: none; display: block; padding: 1rem 1.1rem; height: 100%; }
.ladder__rungs li a:hover { background: var(--lav-tint); border-radius: 14px; }
.ladder__rungs b { display: block; font-weight: 800; margin-bottom: 0.25rem; }
.ladder__rungs b + span { color: var(--ink-soft); font-size: 0.9rem; display: block; }
.ladder__rungs li[data-here] { border: 2px solid var(--lav); box-shadow: 0 18px 36px -28px var(--lav); }
.ladder__rungs li[data-here] b::after { content: "you are here"; display: inline-block; margin-left: 0.5em; font-family: var(--font-mono); font-weight: 600; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lav); vertical-align: middle; }
.ladder__next { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.4rem; }
.ladder__next p { margin: 0; color: var(--ink); }
.ladder__all { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--lav-deep); }
@media (max-width: 980px) { .ladder__rungs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ladder__rungs { grid-template-columns: 1fr; } }

.mainline { padding-block: clamp(3rem, 6vw, 4.5rem); text-align: center; border-top: 1px solid var(--lav-line); }
.mainline .mainline__num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; color: var(--lav-deep); text-decoration: none; display: inline-block; }
.mainline p { color: var(--ink-soft); max-width: 56ch; margin: 0.6rem auto 0; }
.mainline p a { color: var(--lav-deep); }

/* The stills that used to run as a home page carousel now live on /story. */
.originals h2 { color: var(--ink); }

/* Home page rhythm: the page is a decision path, not a magazine. Bands sit closer. */
body.home .paths, body.home .proof, body.home .ways, body.home .pricing, body.home .live, body.home .faq, body.home .ladder { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); }
body.home .mainline { padding-block: clamp(2.2rem, 4vw, 3rem); }
body.home .faq h2 { margin-bottom: 1.4rem; }
body.home .signup { padding-block: clamp(3rem, 6vw, 5rem); }

/* THE PATH TO PURCHASE, 2026-09-04. INFORMATION ARCHITECTURE P. Rationale in _source-notes/site.css.notes.md */
@media (min-width: 941px) and (max-width: 1439.98px) {
  /* the row is a row again, and it carries the labels it was built to carry */
  .nav__toggle { display: none; }
  .nav__links > .nav__item,
  .nav__links > a:not(.btn) { display: inline-flex; }
  .nav__links > .nav__item { position: relative; }

  /* seven items plus a button in a 1024 row only fits if the type gives ground
     first. It steps down here and nowhere else. */
  .nav__links { gap: clamp(0.75rem, 1.5vw, 1.35rem); flex-wrap: nowrap; }
  .nav__links a:not(.btn) { font-size: clamp(0.82rem, 1.05vw, 0.98rem); }
  .nav__links .btn { padding-inline: clamp(0.7rem, 1.4vw, 1.1rem); font-size: 0.8rem; }
}

/* The main line comes back into the header at 1100 instead of 1680. A phone
   number nobody can see is a phone tree nobody calls: the IVR built on 09-03
   has a three-row ledger, two rows of which are Adam's own test calls. */
@media (min-width: 1100px) { .navphone { display: inline-flex; } }
@media (max-width: 1099.98px) { .navphone { display: none; } }

/* PRICES is a top-level destination, not a hover child. It carries the gold
   keyline the site already uses to mark the commercial action, so the eye
   finds it without a second colour being invented. */
.nav__item--pay > a { font-weight: 800; }
.nav__item--pay > a::before {
  content: ""; display: inline-block; width: 3px; height: 0.85em;
  margin-right: 0.45em; vertical-align: -0.08em; border-radius: 2px;
  background: var(--gold);
}

/* THE PRICE ROW. ABOVE THE FOLD, ON THE HOME PAGE, IN THE HERO. Rationale in _source-notes/site.css.notes.md */
.hero__prices {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  max-width: 60ch;
}
.hero__prices a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--lav-line);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  transition: border-color .14s ease, background .14s ease;
}
.hero__prices a b { font-weight: 700; }
.hero__prices a span {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  color: var(--lav-deep);
}
.hero__prices a:hover,
.hero__prices a:focus-visible { border-color: var(--lav); background: var(--lav-tint); }
.hero__prices a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hero__prices .hero__prices__all {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.hero__prices .hero__prices__all:hover,
.hero__prices .hero__prices__all:focus-visible { background: var(--lav-deep); border-color: var(--lav-deep); }
@media (max-width: 560px) {
  .hero__prices a { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
  .hero__prices { gap: 0.35rem 0.4rem; }
}

/* ---------------------------------------------------------------------------
   THE PATH LINE. The one-line ladder for the seven purpose pages that carry no
   nav and no footer: /countdown /floor /free /greenroom /live /onair /unlock.
   /free is rung 01 and the only page on the property that has ever produced a
   real inbound reply, and until today a visitor who landed there could reach
   nothing that costs money.
   -------------------------------------------------------------------------*/
.pathline {
  margin: 28px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line, #DDD3EC);
  border-radius: 8px;
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--soft, #4a4360);
}
.pathline a { color: var(--lav, #563F82); text-decoration: none; font-weight: 600; }
.pathline a:hover { text-decoration: underline; }

/* THE PURPLE BOX, THE PROOF RAIL, THE PURPLE RIBBON.  2026-09-. Rationale in _source-notes/site.css.notes.md */

/* -- 1. THE RIBBON --------------------------------------------------------
   Four cards, always four, same four in the same order on every page and
   every width. Weights are set for four rather than for the eleven-in-DOM,
   five-visible, two-truncating strip they replace. Measured at 1280, which is
   Adam's own laptop viewport: the rail is about 988px, the weights sum to
   4.35, so the cards come out near 295 / 261 / 227 / 204 and every title and
   subline clears its narrowest cell. Nothing on the strip ends in an ellipsis
   from 1100 up. */
@media (min-width: 1100px) {
  .wire__rail .wcard { flex: 1 1 0; width: auto; min-width: 0; }
  .wire__rail .wcard--buy   { flex-grow: 1.30; }
  .wire__rail .wcard--lead  { flex-grow: 1.15; }
  .wire__rail .wcard--price { flex-grow: 1.00; }
  .wire__rail .wcard--sheet { flex-grow: 1.00; }
  .wire__rail .wcard--call  { flex-grow: 0.90; }
  .wire__rail .wcard--live  { flex-grow: 1.30; }
}

/* The two standing cards are quieter than the two dated ones on purpose. The
   strip has a hierarchy: a dated room you can lose by waiting outranks a page
   that will still be there tomorrow. */
.wcard--price,
.wcard--sheet,
.wcard--call {
  background: transparent;
  border-color: oklch(1 0 0 / 0.16);
}
.wcard--price b,
.wcard--sheet b { font-size: 0.88rem; }

/* On this site a number is always set in mono. A phone number set in the body
   face reads as a sentence; set in mono it reads as something to dial. */
.wcard--call b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

/* GOLD BUDGET ABOVE THE FOLD, stated here so it stops creeping. Gold appears
   exactly three times on a loaded page: the ribbon nameplate, the --buy card
   inset keyline, and the ribbon bottom seam. The hero card CTA bar repeats
   that same 3px keyline once, deliberately, so the page's two commercial
   actions wear one mark. Nothing else in the header, the ribbon or the hero
   card may use it. When something is genuinely live the nameplate takes the
   gold fill and the --live card takes it too, which is the one day the colour
   is allowed to shout. */
.wcard--live {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
}
.wcard--live .wcard__w,
.wcard--live b { color: var(--ink); opacity: 1; }
.wcard--live em { color: var(--ink); opacity: 0.78; }

/* Below 1100 the rail scrolls and says so. 78vw leaves roughly sixty pixels of
   the next card showing, which reads as swipe. A sliver reads as a rendering
   fault, and that distinction is why this width is a measured number rather
   than a round one. */
@media (max-width: 1099px) {
  .wire__rail .wcard { flex: none; width: min(78vw, 15.5rem); }
}

/* -- 2. THE PURPLE BOX ----------------------------------------------------
   Four bands: plate, props, proof line, action bar. The card is a grid with
   the body taking the slack, so the bar is always on the bottom edge whatever
   the copy does.

   THE PLATE IS 760/400, NOT 760/480. The old crop spent 297 of 465 pixels,
   64% of the card, on an animation, and left one paragraph to be the value
   props. Fifty pixels come out of the plate and the props get the room. The
   crop window is safe: read frame by frame, the gold-ringed brain mark sits
   at y 60 to 310 and the head runs crown y=75 to chin y=350, so 50% 34% keeps
   the whole mark, the whole dot path, and the face from crown to below the
   beard, and trims dead ground at the top and shoulder at the bottom. No
   re-render of the asset was needed and none was done. */
.proofcard {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 14px;
  overflow: hidden;
}

/* THE SEAM IS A DECISION, NOT AN ACCIDENT. The plate carries its own purple
   ground, lighter than --lav-deep. Fighting that means re-rendering the asset.
   Hiding it means an unmarked colour step, which reads as a mistake. Declaring
   it with a 1px gold keyline makes the card read as a lit screen seated in a
   deeper chassis. */
.proofcard__plate {
  line-height: 0;
  border-bottom: 1px solid var(--gold);
}
.proofcard__plate picture { display: block; margin: 0; }

.proofcard__face {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 760 / 400;
  object-fit: cover;
  object-position: 50% 34%;
  justify-self: stretch;
  margin: 0;
  border-radius: 14px 14px 0 0;
}

.proofcard__body { padding: 1.15rem 1.25rem 1.1rem; }

.proofcard__eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-lav-soft);
}

/* THREE ROWS, WHICH IS WHY THE DIVIDER SYSTEM EXISTS. This list was authored
   with a border-top on every child and the border removed on the first, and it
   was being handed a single row, so the mechanism never rendered once in the
   component's life. */
.proofcard__facts { margin: 0; display: grid; gap: 0; }
.proofcard__facts > div {
  display: block;
  padding: 0.72rem 0;
  border-top: 1px solid rgb(255 255 255 / 0.18);
}
.proofcard__facts > div:first-child { border-top: 0; padding-top: 0; }
.proofcard__facts dt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.86 0.05 300);
  margin-bottom: 0.22rem;
}
/* One sentence, 92 characters at the outside. The three shipped are 43, 62 and
   78. Past the cap they wrap to three lines and the card stops balancing
   against the text column. */
.proofcard__facts dd {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.93);
}

.proofcard__proof {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-lav-soft);
  opacity: 0.82;
}

/* THE ACTION LEAVES THE PAGE. It used to be a text link to #proof, an anchor
   further down the page it was already on. /shop is the one page carrying the
   whole ladder with prices, and until today it was a body link from nowhere on
   the property, which is most of "it takes many clicks to realize there are
   services or products someone can even consider." This bar is the shortest
   fix available to that sentence. It carries no price itself. It says where
   the prices are. */
.proofcard__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.95rem 1.25rem;
  background: oklch(1 0 0 / 0.10);
  border-top: 1px solid oklch(1 0 0 / 0.22);
  box-shadow: inset 3px 0 0 0 var(--gold);
  border-radius: 0 0 14px 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.14s ease;
}
.proofcard__cta svg {
  width: 1.05em; height: 1.05em; flex: none;
  transition: transform 0.14s ease;
}
.proofcard__cta:hover,
.proofcard__cta:focus-visible { background: oklch(1 0 0 / 0.18); }
.proofcard__cta:hover svg,
.proofcard__cta:focus-visible svg { transform: translateX(3px); }
.proofcard__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The card is not a link and must not behave like one, so it gets no hover
   state of its own. Exactly one thing in this rectangle looks clickable, and
   it is the thing that is clickable. */

@media (prefers-reduced-motion: reduce) {
  .proofcard__cta,
  .proofcard__cta svg { transition: none; }
  .js .hero__art.pre { transform: none; }
}

/* The card owns its own height now, so the column stops reserving space the
   card does not use. */
body.home .hero__art { min-height: 0; }

@media (max-width: 940px) {
  .proofcard { max-width: 26rem; margin-inline: auto; }
  /* the old 210px cap belonged to a card whose media was a cut-out portrait */
  .proofcard__face { max-width: none; }
  .proofcard__body { padding: 1rem 1.05rem; }
  .proofcard__facts dd { font-size: 0.88rem; }
  .proofcard__proof { line-height: 1.6; }
  .proofcard__cta { min-height: 56px; }
}

/* HERO ORDER ON A PHONE, AND WHY EVERY CHILD IS NAMED.

   The rule the blocks above learned the hard way: when a container orders any
   of its children it orders ALL of them, because an unordered sibling does not
   stay put, it takes order 0 and goes to the front. Those blocks were written
   for a hero that had .hero__lede, .hero__offer, .hero__free and .taskcap in
   it. This hero has none of them, and three of its real children were named
   nowhere, so at 390 the two buttons and the definition paragraph were sorting
   ahead of the headline. Every child of this hero is named below.

   The sequence puts the headline, then the face and its three value props,
   then the two buttons, inside the first two screens. The definitional
   paragraphs follow, because they explain something the reader has by then
   decided to care about. */
@media (max-width: 940px) {
  body.home .hero .wrap > div:first-child { display: contents; }

  /* THE DEFAULT COMES FIRST, AND IT IS THE ACTUAL FIX. Naming every child is
     only correct until somebody adds a child, and this file has now been
     caught by that three times: the 08-31 pass missed .taskcap, the 09-01 pass
     missed it again, and this pass was written against a hero that gained a
     .hero__prices row an hour later. An unnamed sibling on order 0 does not
     stay where the DOM put it, it goes to the FRONT, so the newest element on
     the page lands above the headline every time.

     Anything not named below sorts after everything that is, in DOM order.
     Selectors are matched in shape so source order decides, not weight.

     🔴 AND IT HAPPENED A FOURTH TIME, 2026-09-06, to the person reading the
     warning directly above. The hero gained .hero__slots and .hero__rungs, the
     catch-all sent both to order 15, and at 390 the slot line rendered 750
     pixels BELOW the button it exists to justify. It looked perfect at 1280.
     The desktop screenshot is not the check; measuring the offsets at 390 is,
     and that is what caught it. Every child of this hero is named below, and
     the next one added has to be named here too. */
  body.home .hero .wrap > div:first-child > *          { order: 15 !important; }

  body.home .hero .wrap > div:first-child > h1         { order: 1 !important; }
  /* no extra margin: the hero grid already carries a gap, and adding one on
     top of it opened a ninety-pixel hole between the headline and the card */
  body.home .hero .wrap > .hero__art                   { order: 2 !important; margin-top: 0; padding-top: 0; }
  body.home .hero .wrap > div:first-child > .hero__prices  { order: 3 !important; }
  /* The ladder, then the sentence that says the ladder is one path, then the
     scarcity, then the buttons. The slot line has to touch the button it is a
     reason to press; a scarcity claim floating on its own further down the
     page is just a boast. */
  body.home .hero .wrap > div:first-child > .hero__rungs   { order: 4 !important; }
  body.home .hero .wrap > div:first-child > .hero__slots   { order: 5 !important; }
  body.home .hero .wrap > div:first-child > .hero__acts    { order: 6 !important; }
  body.home .hero .wrap > div:first-child > .hero__promise { order: 7 !important; }
  body.home .hero .wrap > div:first-child > .hero__def     { order: 8 !important; }
  body.home .hero .wrap > div:first-child > .hero__cred    { order: 9 !important; }
  body.home .hero .wrap > div:first-child > .hero__fine    { order: 10 !important; }
  body.home .hero .wrap > div:first-child > .tonight       { order: 11 !important; }
}

/* -- 3. THE PROOF RAIL ----------------------------------------------------
   THE RULE: a real mark and a set-text mark never appear in the same row.
   Segregation, not deletion. Two rows, two jobs, two treatments.

   No auto-scroll. Two short rows do not need a carousel, an auto-scroll hides
   half the proof from anybody who does not wait, and a moving logo strip is
   the most templated device on the internet. Both rows are static and both are
   fully visible at 390 and at 1400. */
.marks { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.marks__label {
  margin: 0 0 1.1rem;
  max-width: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ROW 1, CLIENTS. All set text, uniformly, and no images at all. Sea Pine has
   a hand-traced vector and Wovely has a 128px badge; StatPi has no mark and
   never had one, so a logo row here is two and a half logos plus the word
   StatPi in mono, which is the exact mixing this rule bans. Three names each
   carrying a papered sentence is the stronger claim, and it is the one a
   competitor cannot fake. Every sentence shipped in this row is lifted
   verbatim from the facts already papered in the retired proof-marks.js. */
.marks--clients .marks__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.marks__client {
  border-top: 1px solid var(--lav-line);
  padding-top: 0.85rem;
  transition: border-color 0.14s ease;
}
.marks__client > a,
.marks__client > span {
  display: block;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-variation-settings: "wdth" 106;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.14s ease;
}
.marks__client p {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The papers. Mono, because on this site every fact that can be checked is set
   in mono, and these three can be: a payment date, a module count, a live URL. */
.marks__client small {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-soft);
}
.marks__client:hover > a,
.marks__client > a:focus-visible { color: var(--lav); }
.marks__client:has(> a:hover),
.marks__client:has(> a:focus-visible) { border-top-color: var(--lav); }
@media (max-width: 860px) {
  .marks--clients .marks__row { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ROW 2, CAREER. Real marks only, or nothing. Optical height is set per mark
   rather than globally, because a tall 3:4 shield and a square lockup with
   type inside it cannot share a raw pixel height and read the same size. The
   value rides on the figure as --mark-h, so adding a third mark is one
   attribute and restyles nothing. Grayscale until you touch one: colour is the
   reward for attention, never the default, so the row never competes with the
   client names above it. No captions. A logo that needs a caption is not a
   logo. */
.marks--career { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
/* left, like everything else in this band. A centred two-mark row inside a
   left-aligned section reads as stray rather than as composed. */
.marks--career .marks__label { text-align: left; }
.marks--career .marks__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.marks--career figure { margin: 0; line-height: 0; }
.marks--career img {
  display: block;
  height: var(--mark-h, 48px);
  width: auto;
  filter: grayscale(1);
  /* 0.68, not the 0.58 this was specified at. Measured in the render: the
     Savannah Bee lockup is fine-line with type inside it and at 0.58 it read
     as a smudge next to the solid PGA shield. Quiet is the intent, invisible
     is not. */
  opacity: 0.68;
  transition: filter 0.16s ease, opacity 0.16s ease;
}
.marks--career figure:hover img,
.marks--career img:focus-visible { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .marks__client,
  .marks__client > a,
  .marks--career img { transition: none; }
}

/* The one-line description each nav label carries belongs in a dropdown or a
   drawer, never in the row itself. `.navpv__sub { display: none }` existed only
   inside `@media (min-width: 1440px)`, so from 941 to 1439 every top-level
   label rendered its whole sentence inline and the header measured 130px of
   prose. Scoped to the ROW, so the dropdown rule above still shows them where
   they explain something. */
@media (min-width: 941px) {
  .nav__links > .nav__item > a .navpv__sub,
  .nav__links > a:not(.btn) .navpv__sub { display: none; }
}

/* ═══════════════════════ THREE WAYS IN, 2026-09-07 ═══════════════════════
   Ruled the same day: two builds a month, and three ways to be one of them.
   COMMISSION IT, PARTNER ON IT, FINANCE IT.

   THE BAND IS TINTED AND KEYLINED so it separates from the white proof band
   above it and the white price band below it without a new colour being
   invented. Same treatment as .ladder, which is the other band on this page
   whose job is to say "here is the shape of the thing" rather than to sell a
   single item.

   THREE CARDS, EQUAL WEIGHT, NO RECOMMENDED ONE. A highlighted middle card is
   the desk choosing for the reader, and these routes are not ranked: the whole
   point of the ruling is that the reader arrives already knowing which of the
   three questions is theirs. Ink keylines rather than the softer lavender of
   .four, because this is the commercial statement on the page.

   THE DOOR IS NOT A FOURTH CARD. It carries a gold keyline instead, the mark
   this site already uses for the commercial action, so three routes never read
   as four. One ask under three routes is the funnel discipline of 2026-09-02
   applied below the fold. */
.ways {
  background: var(--lav-tint);
  padding-block: clamp(3.6rem, 7.5vw, 6rem);
  border-top: 1px solid var(--lav-line);
  border-bottom: 1px solid var(--lav-line);
}
.ways h2 {
  font-size: var(--size-h2); font-weight: 800;
  font-stretch: 106%; font-variation-settings: "wdth" 106;
  letter-spacing: -0.02em; max-width: 26ch;
}
.ways__lede {
  margin-top: 0.9rem; max-width: 60ch;
  font-size: 1.12rem; color: var(--ink); font-weight: 600;
}
.ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.way {
  border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 1.4rem 1.3rem; background: #fff;
  display: flex; flex-direction: column;
}
.way__n {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lav-deep);
}
.way h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.25; margin: 0.7rem 0 0.5rem;
}
.way p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.ways__fine { color: var(--ink-soft); max-width: 68ch; margin-top: 1.4rem; }
.ways__door { margin-top: 1.8rem; padding-left: 1.1rem; border-left: 3px solid var(--gold); max-width: 72ch; }
.ways__door p { margin: 0; color: var(--ink); }
.ways__door p b { font-weight: 800; }
.ways__acts { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 1.1rem; }
@media (max-width: 980px) { .ways__grid { grid-template-columns: 1fr; } }

/* ---------- follow along, footer strip, 2026-09-08 ---------- */
.followstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 2px dashed var(--lav-line); }
.followstrip__cap { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lav-deep); }
.followstrip a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.followstrip a:hover { color: var(--lav-deep); }


/* ---- THE OCTOBER BOARD, 2026-09-08 -------------------------------------
   The board grew a third row (the partnership, filled by nomination) and
   .slotboard__slots was hardcoded to two columns. Scoped to a modifier so the
   two-slot board anywhere else is untouched. Its own breakpoint, declared
   after the 720px rule above, because that rule targets the base class and
   would otherwise not reach a modifier written later. */
.slotboard__slots--three { grid-template-columns: repeat(3, 1fr); }
.slot--nom { border-style: dashed; }
.slot--nom .slot__s { font-size: 1.05rem; }
@media (max-width: 980px) { .slotboard__slots--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .slotboard__slots--three { grid-template-columns: 1fr; } }

/* Four ways in, up from three. The base grid is auto-fit already on most
   breakpoints; this pins four across on a wide screen and pairs them below. */
.ways__grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .ways__grid--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .ways__grid--four { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════════
   THE PRODUCT PLATES. 2026-09-11, DEVELOPMENT desk.

   Adam: "why do products on product page not have product visuals
   representing the product/service?" Measured before the fix: /shop carried
   zero <img>, zero background-image and four <svg>, all of them nav and logo
   furniture. /services carried one photograph, of Adam. Twenty-three priced
   things were being sold as walls of text.

   WHAT A PLATE IS, AND WHY IT IS NOT AN ICON ROW. These are services, so
   there is no object to photograph. The honest visual is the MECHANISM: the
   queue with the ticket numbers on it, the fifty hours counted out, the one
   metric that raised a flag while four stayed quiet, the total that does not
   move while the payments spread across a calendar. Every plate draws the
   specific thing that product does. None of them is a decorative glyph and
   no two are the same drawing.

   THE LANGUAGE IS THE SITE'S OWN, NOT A NEW ONE. Post-Tier-4: hairline
   lavender scaffolding, real depth instead of a 5px keyline, rounded panel
   framing, IBM Plex Mono for any numeral. The payoff in each drawing is the
   one solid lav-deep block, so the eye lands on what the customer ends up
   holding. GOLD APPEARS ONCE IN THE WHOLE SET, on the live dot of the free
   Thursday session, on a dark field, which is both halves of the Tier 2 and
   Tier 3 rules: gold means "this one is happening," and gold is a dark-field
   accent only because it measures 2.3:1 on white.

   The plates ship as one <symbol> sprite per page and render through <use>,
   so a drawing is defined once however many cards carry it, and the same
   product wears the same plate on both /shop and /services.

   aria-hidden on purpose: the card's own heading and copy already say what
   the product is, and a screen reader does not need the drawing described
   twice.
   ════════════════════════════════════════════════════════════════════════ */

.pplate {
  display: block;
  align-self: stretch;          /* .gocard is a flex column with align-items:flex-start */
  width: 100%;
  margin: 0 0 0.2rem;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--lav-tint);
  box-shadow: var(--depth-1);
  overflow: hidden;
  line-height: 0;
}
.pplate svg { display: block; width: 100%; height: auto; }

/* the card lifts on hover; the plate should ride with it rather than sit
   flat while the rest of the card moves. */
.gocard:hover .pplate { border-color: var(--hair-strong); }
@media (prefers-reduced-motion: reduce) { .gocard:hover .pplate { border-color: var(--hair); } }

/* The plain-words answer block on the home page (SEO desk 2026-09-14): written to be quoted by an answer engine, so it stays factual and short. */
.answer { background: #fff; }
.answer__body p { max-width: 68ch; margin: 0 0 .85rem; line-height: 1.55; }
.answer__body p b { font-weight: 800; letter-spacing: -0.01em; }

/* ════════════════════════════════════════════════════════════════════════
   CRO PASS, 2026-09-19 (UIUX as the CRO desk). Adam, 04:0x, on his phone:
   "Site is very hard to follow and the store is laid out in mobile difficult."
   Appended last on purpose so it wins the cascade over the five nav eras above.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. No layout shift from the late blocks. The wire's cards and the hotline pill are filled by
   wire.js at DOMContentLoaded; until then the rail was 0px and the hotline was [hidden], so every
   page below the header jumped 142px on desktop (CLS 0.095 on /shop, /build, /services, the three
   product pages; measured with the Performance API). The boxes now hold their height from the
   first paint and the script fills them in place. */
.wire__rail { min-height: 76px; }
@media (min-width: 641px) and (max-width: 900px) { .wire__rail { min-height: 79px; } }
@media (max-width: 640px) { .wire__rail { min-height: 85px; } }
body:not(.home) .hotline[hidden] { display: flex !important; visibility: hidden; }
/* the nav phone pill is revealed by wire.js; keeping its box (the number is static in the markup and
   wire.js rewrites it from config) stops the centred link row sliding 152px left on reveal */
@media (min-width: 901px) { .navphone[hidden] { display: inline-flex !important; visibility: hidden; } }

/* 2. The phone menu: four destinations first, the rest as a quiet list. The drawer used to open on
   nine mono links plus their six dropdowns, a screen and a half of text on a 390 phone. */
.nav__quick { display: none; }
@media (max-width: 940px) {
  .nav__links.open .nav__quick {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    margin: 0.55rem 0 0.9rem; padding: 0; width: 100%;
  }
  .nav__links.open .nav__quick a:not(.btn) {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 56px; padding: 0.7rem 0.8rem;
    border: 2px solid var(--ink, #1D1430); border-radius: 12px; background: #fff;
    font-family: var(--font-body); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em;
    color: var(--ink, #1D1430); box-shadow: 3px 3px 0 0 var(--ink, #1D1430);
  }
  .nav__links.open .nav__quick a:first-child { background: var(--gold, #FFC933); }
  .nav__links.open .nav__quick a:nth-child(2) { background: var(--lav-tint, #F1ECFA); }
  .nav__links.open .nav__quick a:not(.btn):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink, #1D1430); }
  /* the nine parents become a two-column list of small caps under the tiles; the hover-only
     dropdowns and the one-line descriptions stay closed here, where nobody can hover */
  .nav__links.open .nav__item { width: 100%; }
  .nav__links.open > .nav__item > a:not(.btn), .nav__links.open > a:not(.btn) {
    font-size: 0.9rem; padding: 0.72rem 0 0.72rem; min-height: 44px; display: flex; align-items: center;
  }
  .nav__links.open .nav__menu { display: none !important; }
  .nav__links.open .navpv__sub { display: none !important; }
  .nav__links.open > .btn { display: none !important; }   /* the seat is the first tile; twice in one drawer is the thing this fixes */
}

/* 3. The home, followable. Duplicate blocks keep their markup and carry .is-cut (index.html says which and
   why); #putthemup is cut on phones only. The plain-words answer block folds under its own heading. */
.is-cut { display: none !important; }
@media (max-width: 900px) { .is-cut-phone { display: none !important; } }
.answer__fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.8rem; }
.answer__fold > summary::-webkit-details-marker { display: none; }
.answer__fold > summary h2 { margin: 0; }
.answer__fold > summary::after { content: ""; width: 12px; height: 12px; border-right: 2.5px solid var(--lav); border-bottom: 2.5px solid var(--lav); transform: rotate(45deg); flex: none; margin-left: auto; transition: transform .2s var(--ease); }
.answer__fold[open] > summary::after { transform: rotate(-135deg); }
.answer__fold > summary + div { margin-top: 1.2rem; }
/* the answer body is a .pre reveal inside a closed details; a closed details never intersects, so it opens without the fade */
.answer__fold .answer__body.pre { opacity: 1; transform: none; }

/* 4. The store on a phone. /shop at 390 was twenty same-size cards, each plate 150px tall, 14,672px in one
   column with no way to jump. Now: a sticky row of section chips under the header (the section labels, as
   written), the plate beside the heading instead of above it, full-width 48px buttons, tighter cards. */
.shopjump { display: none; }
@media (max-width: 720px) {
  .shopjump {
    display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    position: sticky; top: var(--navh, 58px); z-index: 45; margin: 0; padding: 0.55rem var(--gutter);
    background: color-mix(in oklch, #fff 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lav-line); list-style: none; scroll-snap-type: x proximity;
  }
  .shopjump::-webkit-scrollbar { display: none; }
  .shopjump li { flex: none; scroll-snap-align: start; }
  .shopjump a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0.45rem 0.85rem; border-radius: 999px;
    border: 1.5px solid var(--lav-line); background: #fff; color: var(--ink); text-decoration: none;
    font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; white-space: nowrap;
  }
  .shopjump a.is-here, .shopjump a:active { background: var(--ink); color: #fff; border-color: var(--ink); }
  body.shop section[id] { scroll-margin-top: calc(var(--navh, 58px) + 58px); }
  .gocards { gap: 0.9rem; }
  .gocard { padding: 1rem 1rem 1.1rem; gap: 0.55rem; border-radius: 14px; }
  .gocard:has(> .pplate) { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 0.85rem; align-items: center; }
  .gocard:has(> .pplate) > .pplate { grid-column: 1; grid-row: 1 / 3; width: 92px; margin: 0; align-self: center; }
  .gocard:has(> .pplate) > .label { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .gocard:has(> .pplate) > h2 { grid-column: 2; grid-row: 2; align-self: start; }
  .gocard:has(> .pplate) > :not(.pplate):not(.label):not(h2) { grid-column: 1 / -1; }
  .gocard h2 { font-size: 1.22rem; line-height: 1.12; }
  .gocard p { font-size: 0.95rem; line-height: 1.45; }
  .gocard .btn { width: 100%; justify-content: center; min-height: 48px; margin-top: 0.35rem; }
  .gocard__fine { font-size: 0.8rem; }
  .gocard:hover { transform: none; box-shadow: none; }
}
/* a phone on its side (844x390): the header, the wire and the pill left 115px for the page; the wire already
   carries the main line as a card, so the floating pill stands down when the viewport is that short */
@media (max-height: 500px) { .hotline { display: none !important; } }

/* 5. The store leads with the product (second pass, 2026-09-19). Desktop: the lede rides first in the ladder grid,
   full width, so the page reads as it did. Phone and a phone on its side: the wire and the pill collapse to one slim
   line of names, the heading goes small, the first card is the first screen with the next one peeking, the section
   rail sticks from under the first card, the paragraph comes after the first three cards. Reorder and collapse only. */
.shop__lede { grid-column: 1 / -1; order: -1; margin: 0 0 0.4rem; }
@media (min-width: 721px) { .shop__lede { padding-inline: 0; } }
@media (max-width: 900px) {
  body.shop .hotline { display: none !important; }
  body.shop .wire { border-block-width: 1px; }
  body.shop .wire__flag { display: none; }
  body.shop .wire__rail { min-height: 0; padding-block: 0.15rem; gap: 0; }
  body.shop .wcard { padding: 0.35rem 0.7rem; width: auto; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body.shop .wcard__w, body.shop .wcard em { display: none; }
  body.shop .wcard b { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
  body.shop .wcard + .wcard { border-left: 1px solid oklch(1 0 0 / 0.22); }
  body.shop .wire__prog { display: none !important; }
  body.shop .hero .wrap { padding-block: 0.9rem 0.3rem !important; }
  body.shop .hero .label { margin-bottom: 0.2rem; }
  body.shop .hero h1 { font-size: 1.45rem !important; letter-spacing: -0.02em !important; }
  body.shop .hero .pre, body.shop #rungs .pre { opacity: 1; transform: none; }
  /* the grid and its section become contents, so the sticky rail's parent is <main> and it holds the whole way down */
  body.shop #rungs, body.shop #rungs > .gocards { display: contents; }
  body.shop #rungs > .gocards > .gocard, body.shop #rungs > .gocards > .shop__lede { margin-inline: var(--gutter); }
  body.shop #rungs > .gocards > .gocard { margin-bottom: 0.9rem; scroll-margin-top: calc(var(--navh, 58px) + 58px); }
  body.shop #rungs > .gocards > .gocard:first-child { margin-top: 0.4rem; }
  body.shop .shop__lede { order: 0; margin: 0.6rem var(--gutter) 1.6rem; font-size: 1rem; }
  body.shop #rungs > .wrap:not(.gocards) { margin-block: 0.4rem 1.8rem; }
  body.shop .shopjump { display: flex; margin: 0 0 0.9rem; }
  body.shop .shopjump a { min-height: 44px; }
  /* the first screen: name, the first two lines, the price, one button; "More about this" is the rest */
  body.shop .gocard > p:not(.label):not(.gocard__when):not(.gocard__fine):not(.gocard__seats) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.shop .gocard .btn { margin-top: 0.15rem; }
}
/* second pass, corrections after the render: the wire card kept a 72px floor from the 1100-and-below block; the hero's
   label and h1 were still 124px; the card label wrapped to three lines beside the plate; a phone on its side (721 to
   900) had none of the compact card rules, so the plate ran full width */
@media (max-width: 900px) {
  body.shop .wcard { min-height: 0 !important; }
  body.shop .hero { padding-bottom: 0; }
  body.shop .hero .wrap { padding-block: 0.7rem 0.1rem !important; }
  body.shop .hero .label { display: none; }   /* the h1 says the same thing three lines lower; the label is the first chip of the rail */
  body.shop .hero h1 { font-size: 1.35rem !important; margin: 0; }
  body.shop .gocards { gap: 0.9rem; }
  body.shop .gocard { padding: 0.95rem 0.95rem 1rem; gap: 0.5rem; border-radius: 14px; }
  body.shop .gocard:has(> .pplate) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 0.8rem; align-items: center; }
  body.shop .gocard:has(> .pplate) > .pplate { grid-column: 1; grid-row: 1 / 3; width: 84px; margin: 0; align-self: center; }
  body.shop .gocard:has(> .pplate) > .label { grid-column: 2; grid-row: 1; margin: 0; align-self: end; font-size: 0.6rem; letter-spacing: 0.1em; line-height: 1.3; }
  body.shop .gocard:has(> .pplate) > h2 { grid-column: 2; grid-row: 2; align-self: start; }
  body.shop .gocard:has(> .pplate) > :not(.pplate):not(.label):not(h2) { grid-column: 1 / -1; }
  body.shop .gocard h2 { font-size: 1.2rem; line-height: 1.12; }
  body.shop .gocard p { font-size: 0.95rem; line-height: 1.45; }
  body.shop .gocard .btn { width: 100%; justify-content: center; min-height: 48px; }
  body.shop .gocard:hover { transform: none; box-shadow: none; }
  body.shop .shopjump { display: flex; }
}

/* 2026-09-30 site audit (axe color-contrast): the schedule rows on the lavender signup panel read 4.17:1. Lifted to pass AA. */
.signup__side .srow > span { color: #e8e2f4; }

/* 2026-10-02 funnel truth pass: Six Sharp joined the phone quick menu as a fifth tile; it spans the
   row so the 2x2 grid above stays square. */
@media (max-width: 940px) {
  .nav__links.open .nav__quick a:nth-child(5) { grid-column: 1 / -1; }
}