/* ==========================================================================
   Cultivate Elite — design system
   Direction: "COURT LINES" (approved 2026-08-16)

   Source of truth: the direction board shared with Khoi
   (Cultivate-Elite-Website-Directions.html → iframe title "Court Lines").
   The whole visual system is built from basketball court geometry itself —
   the key, the three-point arc, the baseline — used as structural chrome, so
   the brand reads as designed and confident before a single professional
   photo exists. Hardwood-amber and painted-line white on deep charcoal, with
   one hot accent reserved for action and for loss (the empty seat).

   Every hex below is a token used somewhere in this file; search the var name
   to find its uses. Switching direction is a token swap here, not a template
   rewrite.
   ========================================================================== */

:root {
  /* --- Court Lines palette (verbatim from the approved direction) --------- */
  --court-black:   #14110D;  /* page ground                                  */
  --court-black-2: #1B160F;  /* panel / card ground, one step up from black  */
  --court-black-3: #221B12;  /* inset ground — inputs, the painted key fill  */
  --amber:         #C98A3E;  /* hardwood-amber — court geometry, filled seat */
  --amber-dim:     #7A5527;  /* hairlines, dividers, muted numerals          */
  --amber-bright:  #E4A857;  /* hover/active, the "FULL" glow                */
  --line-white:    #F5F1E6;  /* painted-line white — primary text            */
  --line-white-dim:#B8AF9C;  /* secondary text (chalk dust)                  */
  --hot:           #FF4425;  /* the single hot accent — CTA, open-seat alarm */
  --hot-dim:       #7A2415;  /* hot at low emphasis — borders, bg washes     */
  --owes:          #FF2E63;  /* unpaid badge — deliberately NOT --hot, so
                                "come get paid" never reads as "needs fill"  */

  /* --- Legacy aliases -----------------------------------------------------
     The admin templates were written against the previous token names. They
     are re-pointed at Court Lines rather than renamed across nine templates,
     so one design decision stays one edit. */
  --bg:       var(--court-black);
  --panel:    var(--court-black-2);
  --panel-2:  var(--court-black-3);
  --line:     var(--amber-dim);
  --ink:      var(--line-white);
  --muted:    var(--line-white-dim);
  --hardwood: var(--amber);
  --paint:    var(--line-white);
  --ok:       var(--amber-bright);   /* filled / paid reads GOLD, not green:
                                        the win state in this direction is a
                                        full key, and gold is that reward.  */
  --warn:     var(--amber);

  /* Type: system condensed-sans, pushed condensed via font-stretch + tight
     tracking + heavy weight. Jersey numerals via tabular-nums. No webfonts,
     so first paint is never blocked on a network request. */
  --sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r: 5px;      /* Court Lines corners are near-square — painted lines, not
                    pills. Radius is structural restraint, not decoration.  */
  --pad: 16px;
  --shell: 1180px;
}

* { box-sizing: border-box; }

/* Court Lines is a single, dark, arena-under-lights palette — it IS the
   brand, not a light default that happens to invert. body paints ground and
   ink explicitly so the page reads identically under any OS theme. */
body {
  margin: 0;
  background: var(--court-black);
  color: var(--line-white);
  font-family: var(--sans);
  font-stretch: condensed;
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--amber); }
img { max-width: 100%; height: auto; }

/* ==========================================================================
   Masthead — the baseline rule
   ========================================================================== */
.masthead {
  border-bottom: 2px solid var(--amber);
  background:
    repeating-linear-gradient(135deg, rgba(201,138,62,.05) 0 10px, transparent 10px 20px),
    var(--court-black-2);
  position: sticky; top: 0; z-index: 20;
}
.masthead-inner {
  max-width: var(--shell); margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  font-size: 16px; color: var(--line-white); text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--hot); }
.wordmark .tag {
  font-size: 9px; font-weight: 800; letter-spacing: .2em;
  color: var(--amber); border: 1px solid var(--amber-dim);
  padding: 2px 6px; border-radius: 3px; margin-left: 10px;
  align-self: center;
}

.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a {
  color: var(--line-white-dim); text-decoration: none; padding: 7px 11px;
  border-radius: 3px; font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.nav a:hover { color: var(--line-white); background: var(--court-black-3); }
.nav a.on { color: var(--court-black); background: var(--amber); }

main { max-width: var(--shell); margin: 0 auto; padding: 22px 18px 70px; }

h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -.01em;
     font-weight: 900; text-transform: uppercase; }
h2 { font-size: 18px; margin: 30px 0 12px; letter-spacing: .02em;
     font-weight: 900; text-transform: uppercase; }
h3 { font-weight: 900; }
.lede { color: var(--line-white-dim); margin: 0 0 22px; max-width: 74ch; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--court-black-2); border: 1px solid var(--amber-dim);
  border-radius: var(--r); padding: var(--pad); margin-bottom: 16px;
}
.card h3 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase;
           letter-spacing: .02em; }
.grid { display: grid; gap: 14px; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ==========================================================================
   Scoreboard register — the numbers are the hero
   ========================================================================== */
.stat {
  background: var(--court-black-2); border: 1px solid var(--amber-dim);
  border-radius: var(--r); padding: 14px 16px;
}
.stat .label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); font-weight: 800; margin-bottom: 6px;
}
.stat .value {
  font-variant-numeric: tabular-nums;
  font-size: 36px; line-height: 1; font-weight: 900; color: var(--amber-bright);
}
.stat .value.ok  { color: var(--amber-bright); }
.stat .value.hot { color: var(--hot); text-shadow: 0 0 24px rgba(255,68,37,.35); }
.stat .sub { color: var(--line-white-dim); font-size: 12.5px; margin-top: 6px; }

/* ==========================================================================
   Capacity — the emotional centre. An empty seat is the unit of loss and is
   drawn as the alarm; a full key is the reward.
   ========================================================================== */
.seats { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.seat {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--amber-dim); background: transparent;
}
.seat.filled {
  background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--court-black-3), 0 0 10px rgba(201,138,62,.5);
}
.seat.open { border-style: dashed; border-color: var(--hot); background: transparent; }

.capbar {
  height: 6px; border-radius: 3px; background: var(--court-black);
  border: 1px solid var(--amber-dim); overflow: hidden; margin: 8px 0;
}
.capbar > i { display: block; height: 100%;
              background: linear-gradient(90deg, var(--amber), var(--amber-bright)); }
.capbar.low > i { background: linear-gradient(90deg, var(--hot), var(--amber)); }

/* ==========================================================================
   Pills
   ========================================================================== */
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
}
.pill.ok   { background: rgba(228,168,87,.18); color: var(--amber-bright);
             border: 1px solid var(--amber-bright); }
.pill.hot  { background: var(--hot-dim); color: #FFB199; border: 1px solid var(--hot); }
.pill.warn { background: rgba(201,138,62,.16); color: var(--amber);
             border: 1px solid var(--amber-dim); }
.pill.mute { background: var(--court-black-3); color: var(--line-white-dim);
             border: 1px solid var(--amber-dim); }
/* Money owed is its own colour so it never reads as "session needs filling". */
.pill.owes { background: var(--owes); color: var(--line-white);
             box-shadow: 0 0 10px rgba(255,46,99,.45); }

/* ==========================================================================
   Tables
   ========================================================================== */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); font-weight: 800;
  padding: 8px 10px; border-bottom: 1px solid var(--amber-dim);
}
td { padding: 10px; border-bottom: 1px solid var(--amber-dim); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; }
.wrap { overflow-x: auto; }   /* table scroller — not the page shell */

/* ==========================================================================
   Forms
   ========================================================================== */
label {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 11px; border-radius: 4px;
  border: 1px solid var(--amber-dim); background: var(--court-black-3);
  color: var(--line-white); font: inherit;
  /* 16px UNCONDITIONALLY, not inside a width query. Mobile Safari force-zooms
     any focused control computing below 16px and never zooms back out, and it
     decides that on computed size alone — orientation and viewport width have
     nothing to do with it. A phone in landscape reports ~844px, so a
     width-based rule silently exempts the exact device it was written for.
     Nothing about a wide window wants 15.5px inputs either, so this is
     simply correct everywhere. */
  font-size: 16px;
}
::placeholder { color: var(--line-white-dim); opacity: .7; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--amber-bright); outline-offset: 1px;
  border-color: var(--amber-bright);
}
.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 150px; margin-bottom: 0; }

.btn {
  display: inline-block; padding: 11px 18px; border-radius: 3px; border: 0;
  background: var(--hot); color: var(--line-white); font: inherit;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgba(255,68,37,.55);
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost {
  background: transparent; color: var(--amber); border: 1px solid var(--amber-dim);
  box-shadow: none;
}
.btn.ghost:hover { color: var(--amber-bright); border-color: var(--amber-bright); }
.btn.danger { background: transparent; color: var(--hot); border: 1px solid var(--hot);
              box-shadow: none; }
.btn.sm { padding: 6px 11px; font-size: 11.5px; letter-spacing: .06em; }

/* ==========================================================================
   Flash
   ========================================================================== */
.flash { padding: 11px 14px; border-radius: 4px; margin-bottom: 14px;
         font-size: 14px; font-weight: 700; }
.flash.ok    { background: rgba(228,168,87,.13); color: var(--amber-bright);
               border: 1px solid rgba(228,168,87,.35); }
.flash.error { background: rgba(255,68,37,.13); color: #FFB199;
               border: 1px solid var(--hot); }

.empty {
  padding: 26px; text-align: center; color: var(--line-white-dim);
  border: 1px dashed var(--amber-dim); border-radius: var(--r);
}
.muted { color: var(--line-white-dim); }
.small { font-size: 12.5px; }
.chk { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px;
       color: var(--line-white); font-size: 14px; }
.chk input { width: auto; }

/* Screen-reader-only, for labels a sighted user gets from context. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   ==========================================================================
   PUBLIC MARKETING SURFACE — court geometry as layout
   ==========================================================================
   ========================================================================== */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 18px; }
.shell-narrow { max-width: 780px; margin: 0 auto; padding: 0 18px; }

/* --- Public header: wordmark + a booking CTA that never scrolls away ----- */
.pub-head {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 2px solid var(--amber);
  background:
    repeating-linear-gradient(135deg, rgba(201,138,62,.05) 0 10px, transparent 10px 20px),
    var(--court-black-2);
}
.pub-head-inner {
  max-width: var(--shell); margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 14px;
}
.pub-nav { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.pub-nav a.link {
  color: var(--line-white-dim); text-decoration: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 8px 10px;
}
.pub-nav a.link:hover { color: var(--amber); }
.book-chip {
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--court-black); background: var(--amber);
  padding: 8px 12px; border-radius: 3px; text-decoration: none; white-space: nowrap;
}
.book-chip:hover { background: var(--amber-bright); }

/* --- HERO: the three-point arc as a structural backdrop ------------------
   ::before is the arc, ::after the baseline. Both are pure geometry — no
   image, no photography dependency. */
.court-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--amber);
  background:
    radial-gradient(circle at 50% -20%, rgba(201,138,62,.22), transparent 62%),
    var(--court-black-2);
  padding: clamp(46px, 9vw, 96px) 18px clamp(40px, 7vw, 74px);
}
.court-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: clamp(-620px, -46vw, -300px);
  width: min(1120px, 165vw); aspect-ratio: 1;
  transform: translateX(-50%);
  border: 2px solid var(--amber-dim);
  border-radius: 50%;
  pointer-events: none;
}
/* No top rule here: the sticky header already lays the baseline directly
   above, and painting a second one stacks into a 4px band. */
.court-hero > .inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto; text-align: center;
}

.kicker {
  display: inline-block;
  font-size: 10.5px; font-weight: 900; letter-spacing: .24em;
  text-transform: uppercase; color: var(--hot);
  margin: 0 0 16px;
}
.headline {
  font-size: clamp(34px, 7.4vw, 68px);
  font-weight: 900; line-height: 1.02; letter-spacing: -.015em;
  text-transform: uppercase; color: var(--line-white);
  margin: 0 0 16px;
}
.headline em { font-style: normal; color: var(--hot); }
.subhead {
  font-size: clamp(15px, 1.9vw, 18px); line-height: 1.55;
  color: var(--line-white-dim);
  max-width: 60ch; margin: 0 auto 26px;
}
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hot); color: var(--line-white);
  font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  padding: 15px 24px; border-radius: 3px; text-decoration: none; border: 0;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 18px -6px rgba(255,68,37,.55);
}
.cta:hover { filter: brightness(1.08); }
.cta .arrow { font-size: 15px; }
.cta-ghost {
  display: inline-flex; align-items: center;
  font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--amber-dim);
  padding: 15px 20px; border-radius: 3px; text-decoration: none;
}
.cta-ghost:hover { color: var(--amber-bright); border-color: var(--amber-bright); }

/* --- Credibility strip. Kept deliberately small: the buyer on the discovery
   call said credentials don't matter, results do. --------------------------- */
.bio-strip {
  max-width: 900px;
  margin: 26px auto 0;
  padding: 12px 16px;
  background: var(--court-black-3);
  border: 1px solid var(--amber-dim);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--line-white-dim);
  display: flex; gap: 10px; align-items: center; justify-content: center;
  text-align: left;
}
.bio-strip b { color: var(--amber); font-weight: 800; }

/* --- Court-geometry section divider: baseline + centre circle + number ---- */
.divider {
  position: relative; height: 56px;
  margin: clamp(46px, 7vw, 76px) auto clamp(20px, 3vw, 30px);
  max-width: var(--shell);
}
.divider .baseline {
  position: absolute; left: 0; right: 0; top: 27px; height: 2px;
  background: var(--amber-dim);
}
.divider .circle {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; transform: translate(-50%, -50%);
  border: 2px solid var(--amber); border-radius: 50%;
  background: var(--court-black);
}
.divider .label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 900; letter-spacing: .12em; color: var(--amber);
}

.section-head { text-align: center; margin: 0 0 4px; }
.section-head .kicker { margin-bottom: 6px; }
.section-head h2 {
  margin: 0; font-size: clamp(24px, 3.8vw, 34px);
  font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
  color: var(--line-white);
}
.section-sub {
  text-align: center; max-width: 640px; margin: 12px auto 32px;
  font-size: 14px; line-height: 1.6; color: var(--line-white-dim);
}

/* --- The training blocks. The painted key frames the content. ------------- */
.block-label {
  margin: 0 0 12px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber);
  display: flex; align-items: center; gap: 10px;
}
.block-label::after { content: ""; flex: 1; height: 1px; background: var(--amber-dim); }

.offer-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.offer {
  position: relative;
  background: var(--court-black-2);
  border: 1px solid var(--amber-dim);
  border-top: 2px solid var(--amber);
  border-radius: 0 0 var(--r) var(--r);
  padding: 22px 20px 20px;
}
.offer h3 {
  margin: 0 0 8px; font-size: 17px; text-transform: uppercase;
  letter-spacing: .02em; color: var(--line-white);
}
.offer p { margin: 0; color: var(--line-white-dim); font-size: 14px; line-height: 1.6; }
.offer .tag-row { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.offer .tag {
  font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--amber-dim);
  padding: 4px 8px; border-radius: 3px;
}
.offer.is-lead { border-top-color: var(--hot); }
.offer.is-lead .tag { color: var(--hot); border-color: var(--hot-dim); }

/* --- Rates as an UPGRADE LADDER, never a discount table ------------------- */
.tiers { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.tier {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px;
  background: var(--court-black-2);
  border: 1px solid var(--amber-dim);
  border-radius: var(--r);
}
.tier.best {
  border-color: var(--hot);
  background: linear-gradient(90deg, rgba(255,68,37,.14), var(--court-black-2) 60%);
}
.tier .cadence {
  font-size: 14px; font-weight: 900; color: var(--line-white);
  text-transform: uppercase; letter-spacing: .03em;
}
.tier .cadence small {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--line-white-dim);
  letter-spacing: .02em; margin-top: 3px; text-transform: none;
}
.tier .price {
  font-size: 30px; font-weight: 900; color: var(--amber-bright);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.tier .price small { font-size: 11px; font-weight: 700; color: var(--line-white-dim); }
.tier.best .price { color: var(--hot); }
.badge-best {
  font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hot); border: 1px solid var(--hot);
  padding: 2px 6px; border-radius: 2px; margin-left: 8px; vertical-align: middle;
}
/* The private rate is UNRESOLVED (owner: Khoi + Matthew). This row renders the
   absence honestly rather than inventing a number onto a public page. */
.tier.private .price { color: var(--line-white-dim); font-weight: 800; font-size: 26px; }
.tier.private .price small {
  display: block; font-size: 9.5px; margin-top: 2px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber-dim);
}

.upgrade-note {
  max-width: 720px; margin: 16px auto 0;
  font-size: 13.5px; line-height: 1.6; color: var(--line-white-dim);
}
.upgrade-note b { color: var(--amber); }

/* --- Testimonial --------------------------------------------------------- */
.testimonial {
  max-width: 720px; margin: 0 auto;
  padding: 22px 24px 20px;
  border-left: 3px solid var(--amber);
  background: var(--court-black-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.testimonial q {
  display: block;
  font-size: clamp(20px, 3vw, 27px); font-weight: 900; font-style: normal;
  line-height: 1.3; color: var(--line-white); quotes: none; margin-bottom: 12px;
}
.testimonial cite {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--amber); text-transform: uppercase;
}
.testimonial cite span {
  display: block; color: var(--line-white-dim); font-weight: 600;
  text-transform: none; letter-spacing: 0; margin-top: 3px; font-size: 12px;
}

/* --- The key: capacity drawn literally as spots in the paint -------------- */
.court-key {
  position: relative;
  max-width: 340px; margin: 40px auto 0;
  padding: 20px 16px 14px;
  background: var(--court-black-3);
  border: 2px solid var(--amber-dim);
  border-top: none;
}
.court-key::before {
  /* free-throw arc — the half circle at the top of the key */
  content: "";
  position: absolute; top: -30px; left: 50%;
  width: 110px; height: 60px; transform: translateX(-50%);
  border: 2px solid var(--amber-dim); border-bottom: none;
  border-radius: 110px 110px 0 0;
}
.spots { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.spot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.spot.filled {
  background: var(--amber); color: var(--court-black);
  box-shadow: 0 0 0 2px var(--court-black-3), 0 0 10px rgba(201,138,62,.5);
}
.spot.open { background: transparent; border: 2px dashed var(--hot); color: var(--hot); }
.capacity-line {
  text-align: center; margin-top: 12px;
  font-size: 12px; font-weight: 800; color: var(--line-white-dim); letter-spacing: .03em;
}
.capacity-line b { color: var(--line-white); font-size: 13px; }

/* --- Enquiry form -------------------------------------------------------- */
.form-card {
  max-width: 720px; margin: 0 auto;
  padding: 24px;
  background: var(--court-black-2);
  border: 1px solid var(--amber-dim);
  border-radius: var(--r);
}
.form-card h3 {
  margin: 0 0 4px; font-size: 19px; font-weight: 900; text-transform: uppercase;
  color: var(--line-white); letter-spacing: .01em;
}
.form-card .fine { margin: 0 0 18px; font-size: 12.5px; color: var(--line-white-dim); }
.form-submit {
  width: 100%; margin-top: 6px;
  display: block; text-align: center;
  background: var(--hot); color: var(--line-white);
  font-family: inherit; font-weight: 900; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px; border-radius: 4px; border: 0; cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(255,68,37,.55);
}
.form-submit:hover { filter: brightness(1.08); }

/* --- Closing CTA + footer ------------------------------------------------ */
.foot-cta {
  text-align: center;
  margin: clamp(46px, 7vw, 76px) auto 0;
  padding: 34px 18px 30px;
  border-top: 2px solid var(--amber);
  background:
    radial-gradient(circle at 50% 120%, rgba(201,138,62,.18), transparent 62%),
    var(--court-black-2);
}
.foot-cta .mini-word {
  font-size: 12px; font-weight: 900; letter-spacing: .18em;
  color: var(--amber); text-transform: uppercase; margin-bottom: 14px;
}
.pub-foot {
  max-width: var(--shell); margin: 0 auto; padding: 22px 18px 40px;
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  font-size: 12px; color: var(--line-white-dim);
}
.pub-foot a { color: var(--amber-dim); text-decoration: none; font-weight: 700; }
.pub-foot a:hover { color: var(--amber); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
  .masthead-inner { padding: 10px 14px; }
  main { padding: 18px 14px 60px; }
  .stat .value { font-size: 30px; }
  .shell, .shell-narrow { padding: 0 14px; }
  .pub-head-inner { padding: 10px 14px; }
  .pub-nav a.link { display: none; }   /* CTA survives; secondary links fold */
  .tier { padding: 14px; }
  .tier .price { font-size: 26px; }
  .form-card { padding: 18px; }
  .bio-strip { text-align: left; }

  /* One field per row. A 150px basis still fits two-up inside a 390px screen,
     which renders "phone or email" — the only required field — about twenty
     characters wide. This one IS genuinely a width question: at 844px the
     same two fields are ~400px each and side-by-side is right, so it stays
     keyed to width rather than to touch. */
  .row > .field { flex: 1 1 100%; }
}

/* Touch targets: >= 44px (WCAG 2.5.5 / Apple HIG).
   Keyed to the input device, NOT to viewport width — "narrow window" and
   "fat finger" are different questions. A phone in landscape and a tablet are
   ~844px and ~768px wide and still need big targets; a narrow desktop window
   does not, because a mouse is precise. .cta and .form-submit already clear
   44px at every size. */
@media (hover: none) and (pointer: coarse) {
  .book-chip { padding: 14px 16px; }        /* the entire mobile header nav */
  .pub-nav a.link { padding: 14px 12px; }
  .nav a { padding: 12px 14px; }            /* admin, tapped courtside */
  .btn.sm { padding: 12px 14px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}