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

: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", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", 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; }

.hero__art { position: relative; align-self: end; 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, 6.4fr) minmax(0, 5.6fr); }
  .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 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', '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', 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', 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', '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', 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; }

/* ---------- 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', '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', 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', 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', 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', 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; } }

/* ---------- 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', 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', 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__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', 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', 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', 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); }
.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; }
}

/* ---------- hero ticket: the details stop being a wall of text ---------- */
.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', 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; }


/* ── 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; } }

/* ── 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 already carries
      every channel as a FOLLOW card. The argument still holds and Adam wants
      it anyway, which settles it: he has looked at this page more than the
      argument has. It rides ABOVE the nav, so the wire keeps its place as the
      strip directly under the chrome and nothing below moves. */

/* 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 ─────────────────────────────────────────────
   Adam, 2026-08-09: "Tony did consulting. That is about as void of soul as I
   can imagine." He is right and the 00:48 change was my error.

   I diagnosed the weight correctly and then fixed it with the wrong instrument.
   Archivo is the BODY font, so setting the wordmark in it at 800 made the
   lockup a generic grotesk, and a generic grotesk beside a mark is every
   consultancy that has ever existed. The identity kit specced IBM Plex Mono on
   purpose: mono reads as systems and technical, which is the actual product.

   The real problem was never the family. Plex Mono 600 at 0.34em is too LIGHT
   and too AIRY beside a dense, rounded mark. So: same family, 700 instead of
   600 (the weight is now loaded, it was not before), tracking closed to 0.22em
   rather than the 0.19em a grotesk wanted, since mono needs more air to stay
   readable. Size still untouched, per his original instruction. */
.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; }
/* 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; }


/* Real artwork on /origin: book covers and the Vistage mark. Adam asked for
   the actual covers rather than the typographic stand-ins. Sourced from Open
   Library's cover service and Vistage's own site, and both copies are stored
   in the vault so the page never depends on a remote host staying up. */
.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 .nx-under a { color: var(--lav-deep); font-weight: 700; }


/* ── THE LOCKUP, FINAL: THE MARK STANDS ALONE ────────────────────────────
   Adam, 2026-08-11: "i thought website was going to be just the brain with
   the 2nd in it... i hate the way 2ndbrain looks spelled out."

   He is right, and every earlier round of this section was solving the wrong
   problem. The mark is a rebus: a brain shape with "2nd" reading inside it.
   It already says the name. Setting the name in type beside it does not
   reinforce the mark, it competes with it and asks the eye to read the same
   word twice in two different voices. That is why no family, weight or
   tracking value ever balanced: nothing was wrong with the type.

   So the word is gone from the nav markup on every page, and the mark takes
   the space back. Weight now comes from scale, which is what a mark standing
   alone needs. The rules below are the last word on the lockup and they sit
   at the end of the file on purpose, after the four earlier blocks they
   supersede (lines ~967, ~1096, ~1160, ~1829). Those are left in place so
   the reasoning stays readable; they are overridden here, not deleted.

   The footer keeps 2NDBRAINCONSULTING.COM because there it is an address,
   not a logo. The standalone word above it went with the rest. */

/* 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(66px, 6.6vw, 92px) !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; }