/* ==========================================================================
   DadSportsNetwork — broadcast design system
   Ground #0C0D0F · Gold #E8B54A · Blue #2F6FBA · Ink #F2F4F7
   No frameworks, no external requests. System type only.
   ========================================================================== */

:root {
  --ground:      #0C0D0F;
  --ground-lift: #131519;
  --ground-deep: #08090B;

  --gold:        #E8B54A;
  --gold-dim:    rgba(232, 181, 74, .34);
  --gold-faint:  rgba(232, 181, 74, .10);

  --blue:        #2F6FBA;
  --blue-ink:    #6BA3E0;
  --blue-glow:   rgba(47, 111, 186, .30);

  --home:        #1B4C8C;
  --away:        #8C1B22;

  --ink:         #F2F4F7;
  --ink-2:       #A2A9B4;
  --ink-3:       #808894;

  --line:        rgba(242, 244, 247, .10);
  --line-soft:   rgba(242, 244, 247, .06);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --max: 1140px;
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

::selection { background: rgba(232, 181, 74, .26); color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: #0C0D0F; padding: .7rem 1.1rem;
  font: 700 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; z-index: 99;
}
.skip:focus { left: .75rem; top: .75rem; }

/* ---------- Type -------------------------------------------------------- */

h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 700; }

.display {
  font-size: clamp(2.15rem, 7.4vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.038em;
  font-weight: 800;
}

.eyebrow {
  font: 700 .7rem/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.35rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: .75;
  flex: none;
}

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

.section-head { max-width: 60ch; }
.section-head h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -.028em;
}
.section-head p { margin: 1.1rem 0 0; max-width: none; }

/* ---------- Header ------------------------------------------------------ */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(12, 13, 15, .78);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 66px;
}

.lockup { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.lockup:hover { text-decoration: none; }
.lockup img { height: 34px; width: auto; }
.lockup span {
  font: 700 .68rem/1.15 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 1.9rem); }
.nav a {
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--gold); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
/* arena light */
.hero::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%;
  height: 78%;
  background:
    radial-gradient(58% 70% at 30% 0%, rgba(47, 111, 186, .20), transparent 68%),
    radial-gradient(45% 60% at 78% 8%, rgba(232, 181, 74, .09), transparent 70%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-logo { width: clamp(74px, 8.5vw, 104px); margin-bottom: 1.9rem; }

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #FFF0CC 0%, var(--gold) 58%, #B98726 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92rem 1.5rem;
  font: 700 .76rem/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: #0C0D0F; }
.btn--gold:hover { background: #F2C463; }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold-dim); background: var(--gold-faint); }

.hero-trust {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font: 500 .8rem/1.6 var(--sans);
  color: var(--ink-3);
  max-width: 40ch;
}
.hero-trust strong { color: var(--ink-2); font-weight: 600; }

/* ---------- Program monitor (CSS illustration) -------------------------- */

.monitor { position: relative; }

.monitor__label {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 .62rem/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .6rem;
}

.monitor__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(47, 111, 186, .16), transparent 42%),
    radial-gradient(120% 90% at 50% 118%, rgba(150, 172, 200, .16), transparent 62%),
    linear-gradient(160deg, #14171C 0%, #0B0C0E 60%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(.7rem, 1.6vw, 1.1rem);
}
/* faint sweep of arena light across the "ice" */
.monitor__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .045) 50%, transparent 64%);
  pointer-events: none;
}

.monitor__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: relative; z-index: 2; }

.rec {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 .6rem/1 var(--mono); letter-spacing: .18em;
  color: var(--ink);
  background: rgba(8, 9, 11, .7);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .42rem .7rem;
}
.rec::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #E5484D;
  box-shadow: 0 0 8px rgba(229, 72, 77, .9);
  animation: rec 2s ease-in-out infinite;
}
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.tag-replay {
  font: 700 .6rem/1 var(--mono); letter-spacing: .18em;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  background: rgba(232, 181, 74, .08);
  border-radius: 3px;
  padding: .42rem .6rem;
}

.monitor__bottom { display: flex; justify-content: center; position: relative; z-index: 2; }

/* the scoreboard bug, modelled on the app's Modern Minimal board */
.board {
  display: flex; align-items: stretch;
  background: rgba(10, 11, 13, .84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .85);
}

.board__team {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .8rem;
  position: relative;
}
.board__team::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .34rem;
  height: 2px; border-radius: 2px;
}
.board__team--home::after { background: #3B7BD1; }
.board__team--away::after { background: #C4383F; }

.board__abbr {
  font: 800 clamp(.62rem, 1.1vw, .74rem)/1 var(--sans);
  letter-spacing: .1em; color: var(--ink);
}
.board__sog { font: 600 .52rem/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); }

.board__score {
  font: 800 clamp(1.15rem, 2.4vw, 1.7rem)/1 var(--sans);
  letter-spacing: -.02em; color: var(--ink);
  padding: .42rem .85rem;
  display: flex; align-items: center;
}

.board__clock {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .42rem clamp(.7rem, 1.6vw, 1.1rem);
  background: rgba(255, 255, 255, .05);
  border-inline: 1px solid rgba(255, 255, 255, .07);
}
.board__time {
  font: 700 clamp(.95rem, 2vw, 1.35rem)/1 var(--sans);
  letter-spacing: .01em; color: var(--gold);
}
.board__seg {
  font: 700 .5rem/1 var(--mono); letter-spacing: .14em;
  color: #7FE0A8;
  background: rgba(127, 224, 168, .12);
  border-radius: 2px; padding: .17rem .34rem;
}

.monitor__caption {
  margin: .85rem 0 0;
  font: 500 .78rem/1.55 var(--sans);
  color: var(--ink-3);
}
.monitor__caption strong { color: var(--ink-2); font-weight: 600; }

/* ---------- Sections ---------------------------------------------------- */

section { position: relative; }

.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-bottom: 1px solid var(--line-soft); }
.band--tight { padding: clamp(2.75rem, 5vw, 4rem) 0; }

/* Boards section lead — the field tripod shot, full width above the grid. */
.shots-hero { margin: 0 0 1.1rem; }
.shots-hero img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--line);
}
.shots-hero figcaption {
  margin-top: .55rem;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}

/* The clip bin feature — copy beside the capture, capture gets the width. */
.clipfeature {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
.clipfeature__copy h2 { margin: .3rem 0 1rem; }
.clipfeature__copy p { color: var(--ink-2); max-width: 46ch; }
.clipfeature__copy p + p { margin-top: .9rem; }
.pill-ex {
  display: inline-block; padding: .12rem .6rem; border-radius: 999px;
  border: 1px solid var(--gold-dim); color: var(--gold);
  font-size: .78rem; letter-spacing: .04em; white-space: nowrap;
}
.clipfeature__shot { margin: 0; }
.clipfeature__shot img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--line);
}
.clipfeature__shot figcaption {
  margin-top: .55rem; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 860px) {
  .clipfeature { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 3rem; }
}

/* The booth — full-bleed image band, plate bottom-left like a lower third.
   ⚠️ The plate carries its own ground; type straight on a photo dies the day
   the photo changes. */
.booth { position: relative; border-bottom: 1px solid var(--line-soft); }
.booth img { width: 100%; height: auto; display: block; }
.booth__plate {
  position: absolute; left: clamp(1rem, 5vw, 3.5rem); bottom: clamp(1rem, 4vw, 2.75rem);
  max-width: min(34rem, 82%);
  background: rgba(8, 9, 11, .82);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: clamp(.8rem, 2vw, 1.3rem) clamp(1rem, 2.5vw, 1.6rem);
  backdrop-filter: blur(6px);
}
.booth__line {
  margin: 0; color: var(--ink);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -.01em;
}
.booth__sub { margin: .35rem 0 0; color: var(--ink-2); font-size: clamp(.85rem, 1.6vw, 1rem); }
@media (max-width: 560px) {
  /* On a phone the plate would cover most of the picture — let it sit below. */
  .booth__plate { position: static; max-width: none; border-radius: 0; border-left-width: 4px; }
}

/* Founder's note */
.note-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.note-body {
  border-left: 2px solid var(--gold);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.note-body p {
  margin: 0 0 1.15rem;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.012em;
}
.note-body p + p { color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.62; letter-spacing: 0; }
.sig {
  margin-top: 1.9rem !important;
  font: 700 .7rem/1.5 var(--mono) !important;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3) !important;
}

/* The rundown — numbered rows, not a card grid */
.rundown { margin-top: clamp(2.5rem, 5vw, 3.75rem); border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 8.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease;
}
.row:hover { background: rgba(232, 181, 74, .026); }

.row__num { font: 700 .78rem/1.4 var(--mono); color: var(--gold); letter-spacing: .06em; }
.row__name {
  font: 800 .82rem/1.35 var(--sans);
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
}
.row__body { margin: 0; max-width: 58ch; }
.row__body strong { color: var(--ink); font-weight: 600; }

/* Sport lineup strip */
.lineup {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.9rem, 2.6vw, 2rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-block: 1px solid var(--line);
}
.lineup li {
  font: 800 clamp(.82rem, 1.7vw, 1.05rem)/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: clamp(.9rem, 2.6vw, 2rem);
}
.lineup li:not(:last-child)::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); opacity: .8; flex: none;
}
ul.lineup { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; }

/* Two-up split */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

/* "In build" — deliberately quieter than shipped features */
.next-list { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; }
.next-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
}
.next-list li:first-child { border-top: 1px dashed var(--line); }
.next-list b {
  font: 700 .64rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.next-list span { color: var(--ink); font-weight: 600; }
.next-list em { font-style: normal; color: var(--ink-2); font-weight: 400; }

/* Negative-space trust block */
.nots { list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0; }
.nots li {
  display: flex; align-items: baseline; gap: .95rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.02rem;
}
.nots li::before {
  content: "NO";
  font: 800 .6rem/1.9 var(--mono); letter-spacing: .12em;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 0 .34rem;
  flex: none;
}

/* Closing band */
.closer {
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(47, 111, 186, .16), transparent 62%),
    var(--ground-deep);
  border-bottom: 1px solid var(--line-soft);
}
.closer h2 {
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1.08; letter-spacing: -.03em;
  max-width: 20ch; margin-inline: auto;
}
.closer p { margin: 1.4rem auto 0; max-width: 46ch; }
.closer .cta-row { justify-content: center; }

/* ---------- Legal + support pages --------------------------------------- */

.page-head {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 130% at 12% 0%, rgba(47, 111, 186, .13), transparent 66%);
}
.page-head h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1.02; letter-spacing: -.032em;
}
.page-head .meta {
  margin: 1.3rem 0 0;
  font: 600 .72rem/1.6 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

.doc-grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem);
}

.toc { position: sticky; top: 92px; align-self: start; }
.toc h2 {
  font: 700 .64rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 1rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--line-soft); }
.toc a {
  display: flex; gap: .7rem;
  padding: .5rem 0;
  font: 500 .82rem/1.4 var(--sans);
  color: var(--ink-3);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font: 700 .64rem/1.85 var(--mono); color: var(--gold); opacity: .6;
}
.toc a:hover { color: var(--ink); text-decoration: none; }

.doc { max-width: var(--measure); counter-reset: sec; }
.doc > section { scroll-margin-top: 88px; padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.doc > section + section { border-top: 1px solid var(--line-soft); margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.doc h2 {
  counter-increment: sec;
  font-size: clamp(1.18rem, 2.2vw, 1.45rem);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-bottom: 1rem;
  display: flex; gap: .8rem; align-items: baseline;
}
.doc h2::before {
  content: counter(sec, decimal-leading-zero);
  font: 700 .7rem/1.5 var(--mono);
  color: var(--gold);
  flex: none;
}
.doc h3 {
  font-size: .96rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); margin: 1.85rem 0 .7rem;
}
.doc p { margin: 0 0 1.05rem; }
.doc ul, .doc ol { margin: 0 0 1.15rem; padding-left: 1.15rem; }
.doc li { margin-bottom: .55rem; }
.doc li::marker { color: var(--gold); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc p:last-child, .doc ul:last-child { margin-bottom: 0; }

/* callouts */
.callout {
  background: var(--ground-lift);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  margin: 0 0 2.5rem;
}
.callout h2, .callout h3 {
  font: 700 .68rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1rem; display: block;
}
/* A callout heading is a label, not a numbered clause. It must neither print a
   number nor advance the counter — otherwise every section renders one higher
   than the table of contents, and the in-text cross-references point wrong. */
.callout h2 { counter-increment: none; }
.callout h2::before { content: none; }
.callout ul { margin: 0; padding-left: 1.1rem; }
.callout li { color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }

.callout--planned {
  border: 1px dashed var(--gold-dim);
  border-left: 2px solid var(--gold);
  background: rgba(232, 181, 74, .04);
}
.flag {
  display: inline-block;
  font: 700 .6rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: #0C0D0F; background: var(--gold);
  padding: .35rem .55rem; border-radius: 2px;
  margin-bottom: 1rem;
}

/* permissions table */
.table-scroll { overflow-x: auto; margin: 0 0 1.5rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: .85rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font: 700 .62rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border-bottom-color: var(--gold-dim); white-space: nowrap;
}
td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* FAQ */
.faq { margin: 0; border-top: 1px solid var(--line); }
.faq dt {
  font: 700 1.02rem/1.4 var(--sans);
  color: var(--ink);
  padding: 1.6rem 0 .55rem;
  letter-spacing: -.01em;
}
.faq dd { margin: 0 0 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); max-width: var(--measure); }
.faq dd:last-child { border-bottom: none; }

/* contact block */
.contact {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ground-lift);
}
.contact .eyebrow { margin-bottom: .9rem; }
.contact a.email {
  font: 700 clamp(1.05rem, 2.4vw, 1.4rem)/1.3 var(--sans);
  letter-spacing: -.015em;
  word-break: break-word;
}

.token {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--gold);
  background: var(--gold-faint);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 0 .28em;
}

/* ---------- Footer ------------------------------------------------------ */

.footer { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.footer-top {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 2.25rem; border-bottom: 1px solid var(--line-soft);
}
.footer-mark { display: flex; align-items: center; gap: .8rem; }
.footer-mark img { height: 42px; width: auto; }
.footer-mark p { margin: 0; font: 700 .66rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.footer-mark span { display: block; color: var(--ink-3); font-weight: 500; letter-spacing: .1em; }

.footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.85rem; }
.footer-nav a {
  font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.footer-nav a:hover { color: var(--ink); text-decoration: none; }

.fine {
  margin: 1.75rem 0 0;
  font-size: .74rem; line-height: 1.7; color: var(--ink-3); max-width: 62ch;
}
.fine + .fine { margin-top: .6rem; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1000px) {
  .doc-grid { grid-template-columns: 1fr; }
  .toc {
    position: static;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.25rem 1.35rem;
    background: var(--ground-lift);
  }
  .toc ol { columns: 2; column-gap: 2rem; }
  .toc li { break-inside: avoid; }
}

@media (max-width: 860px) {
  .hero-grid, .note-grid { grid-template-columns: 1fr; }
  .note-grid .section-head { max-width: none; }
  .monitor { order: 2; }
}

@media (max-width: 620px) {
  .lockup span { display: none; }
  .nav { gap: 1rem; }
  .nav a { font-size: .7rem; letter-spacing: .08em; }
  .row { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .55rem; }
  .row__num { grid-row: 1; }
  .row__body { grid-column: 2; }
  .next-list li { grid-template-columns: 1fr; row-gap: .3rem; }
  .toc ol { columns: 1; }
  .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead, .toc, .closer, .cta-row { display: none; }
  body { background: #fff; color: #111; }
  .doc, .doc p, .doc li, h1, h2, h3 { color: #111 !important; }
}


/* ── PRICING ─────────────────────────────────────────────────────────────
   Two cards, Pro carrying the gold. Built from the existing tokens rather
   than new colours so it sits inside the page it was added to. */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.tier {
  background: var(--ground-lift);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.tier--pro { border-color: var(--gold-dim); background: linear-gradient(180deg, var(--gold-faint), transparent 60%), var(--ground-lift); }
.tier__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
.tier__name { font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tier--pro .tier__name { color: var(--gold); }
.tier__price { margin-left: auto; font-size: .95rem; font-weight: 700; color: var(--ink-2); }
.tier--pro .tier__price { color: var(--ink); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.tier li { padding-left: 1.15rem; position: relative; color: var(--ink); line-height: 1.5; }
.tier li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.tier--pro li::before { background: var(--gold); }
.tier .fine { margin-top: 1rem; }


/* ── FOUNDER PHOTO ───────────────────────────────────────────────────────
   Sits under the heading in the note-grid's narrower column. The gold hairline
   echoes the rule already on .note-body so the two halves read as one block
   rather than a picture parked next to some text. */
.note-photo {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  background: var(--ground-lift);
  max-width: 22rem;
}
.note-photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 860px) {
  /* On one column the photo would otherwise run the full width and push the
     copy off the first screen. */
  .note-photo { max-width: 16rem; }
}


/* ── REAL APP FRAMES ─────────────────────────────────────────────────────
   16:9 stills, so a two-up grid is the only sensible shape above ~900px —
   three across makes the scoreboard too small to read, which defeats the
   entire point of showing them. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.shots figure { margin: 0; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--ground-deep);
}
.shots figcaption {
  margin-top: .6rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── TEXTURED SECTION GROUNDS ────────────────────────────────────────────
   The same playing-surface plates the app uses behind its welcome screen.
   ⚠️ They are already dark — measured mean luminance 11-18 of 255 — so they
   need holding DOWN, not lightening: at full strength the markings compete
   with body copy. A low opacity plus a gradient wash keeps them as texture
   rather than picture, and every section keeps an opaque token background
   underneath so no text ever sits on bare image. */
.band--tex { position: relative; isolation: isolate; }
.band--tex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.band--tex-ice::before      { background-image: url("tex/ice.jpg"); }
.band--tex-turf::before     { background-image: url("tex/turf.jpg"); }
.band--tex-hardwood::before { background-image: url("tex/hardwood.jpg"); }

@media (prefers-reduced-motion: no-preference) {
  .band--tex::before { background-attachment: fixed; }
}


/* ── CONTROL KEY ─────────────────────────────────────────────────────────
   Three short columns under the frames, naming what is visible in them. The
   screenshots were already showing the whole operating surface; this is the
   caption that stops it reading as five pictures of a scoreboard. */
.controls-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.controls-key h3 {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.controls-key p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.controls-key b { color: var(--ink); font-weight: 700; }


/* ── HERO RIG: the real iPad frame with the phone remote overlapping it ──
   The phone deliberately breaks the iPad's bottom-right corner rather than
   sitting beside it in its own column: side by side at equal weight reads as
   two products, and the remote is an accessory to the thing above it. */
.rig { position: relative; padding-bottom: clamp(1.5rem, 5vw, 3rem); }
.rig__pad { margin: 0; }
.rig__pad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.rig__phone {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 21%;
  min-width: 108px;
  margin: 0;
}
.rig__phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .65);
}
@media (max-width: 720px) {
  /* Overlapping at phone width would cover the scoreboard, which is the one
     thing the hero image exists to show. */
  .rig { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; padding-bottom: 0; }
  .rig__phone { position: static; width: 5.5rem; min-width: 0; }
}

/* ⚠️ ONE grid child, not two. The hero is a 2-column grid and the monitor was a
   single cell; replacing it with a figure AND a caption made three children, so
   the caption wrapped into the left column under the buttons. */
.rig-cell { min-width: 0; }
/* Bigger, and clear of the scoreboard: at 21% the phone sat over the burned-in
   board, hiding the one thing the shot exists to prove. */
.rig__phone { width: 26%; right: -3%; bottom: -4%; }


/* ── COMPARISON TABLE ────────────────────────────────────────────────────
   Our column is lifted, not the competitors' dimmed — dimming them reads as a
   thumb on the scale, and the numbers are doing the work anyway. */
.compare { width: 100%; border-collapse: collapse; margin-top: clamp(1.5rem, 4vw, 2.5rem); font-size: .95rem; }
.compare th, .compare td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.08); }
.compare thead th { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.compare tbody th { font-weight: 500; color: var(--ink-2); }
.compare td { color: var(--ink-2); }
.compare .is-us { background: var(--gold-faint); color: var(--ink); }
.compare thead .is-us { color: var(--gold); }
.compare tbody .is-us b { color: var(--ink); font-weight: 700; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ── HERO: textured, lifted, and the two devices SEPARATED ───────────────
   Kyle: "separate the remote from the ipad so you can see them clearly. Also
   the background up top could be a little lighter. use the textured background
   here for the top section."

   The overlap was my call and it was wrong for this pair: the phone is a full
   second interface, not a detail, and tucking it into the corner made it read
   as a badge on the iPad instead of the other half of the rig. Side by side,
   both are legible. */
.hero { background: var(--ground-lift); }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("tex/ice.jpg");
  background-size: cover;
  background-position: center;
  /* Higher than the section bands: this one is doing the LIGHTENING as well as
     the texture, and the hero has no body copy sitting directly on it. */
  opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
          mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.hero > * { position: relative; z-index: 1; }

.rig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 21%, 168px);
  gap: clamp(.75rem, 2vw, 1.4rem);
  align-items: end;
  padding-bottom: 0;
}
.rig__phone { position: static; width: 100%; min-width: 0; right: auto; bottom: auto; }
@media (max-width: 720px) {
  .rig { grid-template-columns: minmax(0, 1fr) 5.5rem; }
}


/* ── THE RIG IS THE MAIN EVENT ───────────────────────────────────────────
   Kyle: "superimpose these screengrabs onto an iphone and ipad frame. These
   are also the main event so they should be much bigger."

   The hero was a 50/50 grid, which capped the devices at half the page no
   matter what I did to them. Stacking it — copy, then hardware across the full
   width — is the only way they get to be the biggest thing on the screen.

   The frames are drawn in CSS rather than dropped in as mockup PNGs: they scale
   with the layout, cost nothing to load, and there is no licence attached to
   them. The iPhone capture already contains its own status bar and island, so
   the frame only has to supply the bezel. */
.hero-grid { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
.hero-copy { max-width: 60ch; }

.rig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 17%, 260px);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  padding-bottom: 0;
  margin-top: clamp(1rem, 3vw, 2rem);
}

/* iPad: wide bezel, gentle corner. The gradient reads as an edge catching the
   light rather than a flat grey rectangle. */
.rig__pad {
  padding: clamp(9px, 1.05vw, 20px);
  border-radius: clamp(20px, 2.4vw, 38px);
  background: linear-gradient(155deg, #43464c 0%, #23262b 26%, #131519 62%, #0b0c0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .13),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 44px 100px rgba(0, 0, 0, .62);
}
.rig__pad img {
  border-radius: clamp(11px, 1.35vw, 22px);
  border: 0;
  box-shadow: none;
}

/* iPhone: tighter bezel, much rounder corner — the two radii are what actually
   say "different device" at a glance. */
.rig__phone {
  position: static;
  width: 100%;
  min-width: 0;
  padding: clamp(5px, .6vw, 11px);
  border-radius: clamp(24px, 3vw, 52px);
  background: linear-gradient(155deg, #43464c 0%, #23262b 26%, #131519 62%, #0b0c0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .15),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 34px 76px rgba(0, 0, 0, .66);
}
.rig__phone img {
  border-radius: clamp(19px, 2.4vw, 43px);
  border: 0;
  box-shadow: none;
}

@media (max-width: 720px) {
  .rig { grid-template-columns: minmax(0, 1fr) 4.75rem; gap: .6rem; }
}


/* ── Wider measure, bigger phone ─────────────────────────────────────────
   Kyle: "make the phone larger and text wider to fill the space."

   60ch was the right cap when the hero was a 50/50 grid and the copy had a
   column to sit in. Once the hero stacked, that cap left a third of a wide
   page empty beside the paragraph. 78ch is still a readable measure — past
   about 85 the eye starts losing its place on the return sweep — while
   actually using the width.

   The phone goes 17% -> 22%: at the old size it read as a thumbnail beside
   the iPad rather than the second device you actually operate. */
.hero-copy { max-width: 78ch; }
.rig { grid-template-columns: minmax(0, 1fr) clamp(150px, 22%, 340px); }

@media (max-width: 720px) {
  .rig { grid-template-columns: minmax(0, 1fr) 5.25rem; }
}


/* The lede's 46ch was set for a narrow hero column. The hero stacked, so it
   now has the page to work with. */
.hero-copy .lede { max-width: 68ch; }
/* Closing the founder's note. Top margin only — it is the last thing in that
   section now, not the first thing in the next one. */
.note-grid + .lineup { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }


/* ── HERO: crest beside the copy ─────────────────────────────────────────
   Two columns inside the stacked hero. The mark is sized as a share of the
   row, not a fixed px, so it keeps its relationship to the headline at every
   width instead of dwarfing it on a laptop. */
.hero-copy {
  display: grid;
  grid-template-columns: clamp(150px, 27%, 430px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-width: none;
}
.hero-logo { width: 100%; height: auto; margin: 0; }
.hero-copy .lede { max-width: 62ch; }

@media (max-width: 760px) {
  /* Beside the headline at phone width the crest would leave the copy about
     nine words to a line. Back on top, and smaller. */
  .hero-copy { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-logo { width: clamp(96px, 30vw, 150px); }
}


/* ── FOUNDER GRID: heading its own row, photo and quote sharing the next ──
   Two rows. The heading takes column one of row one on its own; the photo and
   the quote sit side by side in row two, so their tops meet without either one
   being nudged. */
.note-grid { grid-template-rows: auto auto; align-items: start; }
.note-grid > .section-head { grid-column: 1; grid-row: 1; }
.note-grid > .note-photo   { grid-column: 1; grid-row: 2; margin-top: 0; }
.note-grid > .note-body    { grid-column: 2; grid-row: 2; }

@media (max-width: 860px) {
  /* One column: back to source order, heading then photo then quote. */
  .note-grid > .section-head,
  .note-grid > .note-photo,
  .note-grid > .note-body { grid-column: 1; grid-row: auto; }
}


/* ── Crest to the RIGHT of the headline ──────────────────────────────────
   Kyle: "switch the logo to the right of the headline text." Placed by grid
   column rather than by reordering the HTML, so the mark stays first in the
   source — it is the brand, and a screen reader meeting the wordmark before
   the headline is the right reading order whichever side it is drawn on. */
.hero-copy { grid-template-columns: minmax(0, 1fr) clamp(150px, 27%, 430px); }
.hero-copy > .hero-logo { grid-column: 2; grid-row: 1; }
.hero-copy > .hero-text { grid-column: 1; grid-row: 1; }

@media (max-width: 760px) {
  .hero-copy > .hero-logo,
  .hero-copy > .hero-text { grid-column: 1; grid-row: auto; }
}


/* The lede spans the whole hero, under the headline row. */
.hero-copy { grid-template-rows: auto auto; }
.hero-copy > .lede {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: none;
  margin-top: clamp(.5rem, 1.5vw, 1.25rem);
}
@media (max-width: 760px) {
  .hero-copy > .lede { grid-column: 1; grid-row: auto; }
}


/* Tops already meet; this makes the BOTTOMS meet too. The gold rule is the
   quote's left edge, and a rule that stops 37px short of the photo beside it
   reads as a mistake rather than as ragged text. Stretching the cell runs the
   rule the full height of the row; the text still sits at the top of it. */
.note-grid > .note-body { align-self: stretch; }


/* ── HERO SPACING: one block, not three ──────────────────────────────────
   Kyle: "bring these elements closer together so they feel like one section."

   ⚠️ The cause was the crest, not the gaps. `gap` was one value for BOTH axes,
   so the 4rem I wanted between the copy and the mark was also being applied
   between the headline row and the lede — and because the crest is far taller
   than the text beside it, the crest was setting the row height and leaving a
   band of dead ground under the buttons. Splitting the axes and capping the
   mark's height to the text it sits beside closes both gaps at once. */
.hero-copy {
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: clamp(.75rem, 1.5vw, 1.5rem);
  align-items: center;
}
.hero-logo {
  width: auto;
  max-width: 100%;
  max-height: clamp(150px, 24vw, 330px);
  justify-self: center;
}
.hero-copy > .lede { margin-top: 0; }
.hero-trust { margin-top: clamp(1rem, 2.5vw, 1.75rem); }

@media (max-width: 760px) {
  .hero-logo { max-height: none; width: clamp(96px, 30vw, 150px); justify-self: start; }
}


/* Reading order: eyebrow + headline (beside the crest), then the full-width
   lede, then the buttons, then the fine print. The lede spanning both columns
   is what forces these onto their own rows — inside the text column they would
   sit above it again. */
.hero-copy > .cta-row    { grid-column: 1 / -1; grid-row: 3; }
.hero-copy > .hero-trust { grid-column: 1 / -1; grid-row: 4; }
@media (max-width: 760px) {
  .hero-copy > .cta-row,
  .hero-copy > .hero-trust { grid-column: 1; grid-row: auto; }
}


/* The gold line that names the two-device relationship, sitting on the rig it
   describes rather than under it. */
.rig__eyebrow { margin: 0 0 clamp(.75rem, 2vw, 1.25rem); }


/* ── SECTION HEADS USE THE WIDTH ─────────────────────────────────────────
   Kyle: "dont stack text like this and leave black space to the right."

   The caps were 60ch on the block and 52ch on the paragraph — measures set for
   a narrow column, which on a full-width band stacked the copy into five short
   lines with a third of the row empty beside it. 90ch on the block and 78ch on
   the paragraph is still a readable measure and actually spends the width.

   ⚠️ The two-column heads (.note-grid) are exempt — they DO sit in a column,
   and widening them there would push the quote off the row. */
.section-head { max-width: 90ch; }
.note-grid .section-head { max-width: 60ch; }


/* ── FOUNDER HEADING SPANS THE ROW ───────────────────────────────────────
   Kyle: "why three lines? can be achieved with one."

   It was stacking because it sat in the narrow left column beside the quote —
   the ch cap was never the binding constraint, the COLUMN was. Spanning row one
   hands it the full measure, and "Built by a hockey dad, for hockey dads." lands
   on one line. Photo and quote still share row two, so their tops still meet. */
.note-grid > .section-head { grid-column: 1 / -1; max-width: none; }

@media (max-width: 860px) {
  .note-grid > .section-head { grid-column: 1; }
}


/* Download button in the sticky header, so the ask follows the reader down the
   page instead of living only in the hero. */
.nav .btn--nav {
  margin-left: clamp(.5rem, 1.5vw, 1.25rem);
  padding: .55rem 1.05rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  background: var(--gold);
  color: #0C0D0F;
  border-radius: 7px;
  white-space: nowrap;
}
.nav .btn--nav:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .nav .btn--nav { display: none; } }


/* The parenthetical sits on its own line as an aside — same face, held back a
   step so it reads as the widening-out it is rather than as a second headline. */
.h2-aside { color: var(--ink-2); }


/* ── PRICING CTA ─────────────────────────────────────────────────────────
   Centred and larger than the hero buttons on purpose: it is the last thing
   before the fine print, and by here the reader has the price and does not
   need another paragraph. */
.pricing-cta { margin-top: clamp(2rem, 5vw, 3.25rem); text-align: center; }
.btn--big {
  font-size: .95rem;
  padding: 1.05rem 2.6rem;
  letter-spacing: .12em;
}
.pricing-cta .fine { margin-top: 1rem; }


/* The comparison footnote runs the width of the table it explains. 62ch stacked
   it into seven short lines beside a mostly-empty row — the same narrow-column
   cap that was wrong on the section heads, in the one place where the reader is
   already scanning a full-width object.
   ⚠️ Scoped to #compare only. The .fine under the Pro card and under the pricing
   CTA sit in narrow containers where 62ch is correct. */
#compare .fine { max-width: none; }

@media (min-width: 860px) {
  .shots--three { grid-template-columns: repeat(3, 1fr); }
}

/* The compare table pans sideways on narrow screens; a peeking column is the
   only cue, and it is easy to read as a rendering mistake. Name the gesture. */
@media (max-width: 900px) {
  .table-scroll::before {
    content: "swipe sideways to compare \2192";
    display: block;
    font: 700 .62rem/1.4 var(--mono);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: .6rem;
  }
}

/* Phone: the crest-beside-headline grid leaves the lede a ~170px column. One
   column, smaller crest, everything full measure. */
@media (max-width: 640px) {
  /* Kyle 8/21: "get the hero image right below the headline so it's visible
     before scrolling." The rig capture lives in a SIBLING of .hero-copy, so no
     amount of reordering inside the copy block can move it up. display:contents
     dissolves the copy block into the hero grid, and then every piece takes an
     explicit order: crest, headline, THE RIG, lede, buttons. */
  .hero-copy { display: contents; }
  .hero-grid { gap: 1.4rem; }
  .hero-logo { width: clamp(110px, 34vw, 160px); order: 1; }
  .hero-text { order: 2; }
  .rig-cell  { order: 3; }
  .hero-copy .lede { order: 4; }
  .hero-copy .cta-row { order: 5; }
  /* The rig's own eyebrow reads as clutter wedged between headline and image,
     and it costs exactly the height that decides what clears the fold. */
  .rig__eyebrow { display: none; }
}