/* ============================================================
   BOOSTER CLUB — stylesheet
   Palette is derived from a night-game scoreboard: ink housing,
   amber bulbs, cool daylight paper.
   To match your school colors, change --brand and --brand-deep.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Azeret+Mono:wght@500;700&display=swap');

:root{
  /* --- Color -------------------------------------------- */
  --brand:       #2A74BF;   /* Sky View blue for surfaces — banners, buttons.
                               White text on this clears AA at 4.8:1.        */
  --brand-ink:   #1F5FA0;   /* the same blue a shade deeper, for small text
                               sitting ON light backgrounds where the surface
                               blue would be too pale to read.               */
  --brand-deep:  #164A80;   /* large dark panels                             */
  --sky:         #85AFD9;   /* the blue in the Bobcat logo */
  --sky-bright:  #69B3E7;   /* the flyer blue. A SURFACE colour only — white
                               text on it is 2.3:1 and unreadable, ink text is
                               8.5:1. Use it under black type, never over it. */
  --sky-edge:    #3E90CC;   /* border/edge for sky-bright surfaces */
  --ink:         #0B0D10;   /* the black on the flyers     */
  --ink-soft:    #4C5866;
  --bulb:        #FFCE05;   /* Sky View gold               */
  --bulb-dim:    #6E5A0B;
  --paper:       #EEF3F8;   /* cool daylight page          */
  --card:        #FFFFFF;
  --line:        #D5DDE7;
  --turf:        #2F7D4F;   /* "active / renewed" only     */

  /* --- Type --------------------------------------------- */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data:    "Azeret Mono", ui-monospace, "SF Mono", monospace;

  /* --- Layout ------------------------------------------- */
  --wrap: 1160px;
  /* Set at breakpoints rather than with clamp(). A clamp() inside a custom
     property that a browser can't parse computes to zero and takes the page
     gutters with it — a static fallback can't save it, because the failure
     happens after var() substitution. Breakpoints degrade safely. */
  --pad: 20px;
  --r: 4px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a { color: var(--brand-ink); }

/* explicit sides rather than padding-inline: logical properties are missing
   on iOS Safari before 14.1, which is still out there on older phones */
.wrap{
  width:100%; max-width: var(--wrap); margin-left:auto; margin-right:auto;
  padding-left: var(--pad); padding-right: var(--pad);
}

@media (min-width: 700px){  :root{ --pad: 32px; } }
@media (min-width: 1000px){ :root{ --pad: 48px; } }

/* ============ Type scale ============ */
h1,h2,h3,h4{ font-family: var(--display); margin:0; line-height:.92; letter-spacing:-.01em; text-transform: uppercase; }
h1{ font-weight:900; font-size:44px; font-size: clamp(44px, 8vw, 92px); }
h2{ font-weight:800; font-size:32px; font-size: clamp(32px, 5vw, 54px); }
h3{ font-weight:700; font-size: clamp(22px, 3vw, 30px); }
p{ margin:0 0 1em; }
.lede{ font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-soft); max-width: 62ch; }

.eyebrow{
  font-family: var(--data); font-weight:700; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color: var(--brand-ink);
  display:block; margin-bottom:14px;
}
.eyebrow--bulb{ color: var(--bulb); }
.eyebrow--sky{ color: var(--sky); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--display); font-weight:800; font-size:20px;
  text-transform:uppercase; letter-spacing:.02em;
  padding: 13px 26px 11px; border-radius: var(--r);
  border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--bulb); outline-offset:3px; }
.btn--bulb{ background: var(--bulb); color: var(--ink); }
.btn--bulb:hover{ background:#FFC24D; }
.btn--brand{ background: var(--sky-bright); color: var(--ink); }
.btn--brand:hover{ background: #7EC0EF; }
.btn--ghost{ background:transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color:#fff; }
.btn--onink{ background:transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn--onink:hover{ background:#fff; color: var(--ink); }
.btn--sm{ font-size:16px; padding:9px 18px 7px; }
.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* ============ Header ============ */
.ticker{
  background: var(--sky-bright); color: var(--ink);
  font-family: var(--data); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:7px 0; text-align:center;
}
.ticker b{ font-weight:700; }

.nav{
  position: sticky; top:0; z-index:50;
  background:#fff; color: var(--ink);
  border-bottom: 4px solid var(--bulb);
  box-shadow: 0 2px 14px rgba(11,13,16,.06);
}
.nav__in{ display:flex; align-items:center; gap:22px; height:70px; }
.nav__brand{
  display:flex; align-items:center; gap:12px;
  color: var(--ink); text-decoration:none; margin-right:auto;
}
.nav__mark{ width:auto; height:46px; flex:none; }
.nav__name{ font-family: var(--display); font-weight:800; font-size:21px; line-height:.95; text-transform:uppercase; }
.nav__sub{ font-family: var(--data); font-size:9.5px; letter-spacing:.16em; color: var(--brand); text-transform:uppercase; }
.nav__links{ display:flex; gap:22px; align-items:center; order:2; }
.nav__cta{ order:3; flex:none; }
.nav__links a{
  color: var(--ink); text-decoration:none; font-weight:600; font-size:14px;
  letter-spacing:.02em; padding:4px 0; border-bottom:2px solid transparent;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ border-bottom-color: var(--bulb); }
/* The CTA is an <a> inside .nav__links, so the rule above was overriding the
   button padding and squeezing it flat. Higher specificity puts it back, with
   extra room because condensed display type reads cramped in a tight box. */
.nav__links a.btn{ padding:12px 28px 10px; letter-spacing:.05em; border-bottom:2px solid transparent; }
.nav__links a.btn:hover{ border-bottom-color: transparent; }
.nav__toggle{ display:none; background:none; border:1px solid var(--line); color: var(--ink); border-radius:3px; padding:8px 12px; font-size:13px; cursor:pointer; }

@media (max-width: 880px){
  .nav__toggle{ display:block; order:4; }
  .nav__cta{ order:3; padding:11px 18px 9px; font-size:17px; }
  /* the wordmark wraps to two lines at phone widths, so it shrinks and the
     season line drops away — the mark plus the name still identify the club */
  .nav__name{ font-size:17px; }
  .nav__sub{ display:none; }
  .nav__mark{ height:38px; }
  .nav__in{ gap:10px; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--pad) 20px; border-bottom:4px solid var(--bulb);
    box-shadow: 0 12px 20px rgba(11,13,16,.1);
  }
  .nav__links[hidden]{ display:none; }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; }
}
@media (max-width: 560px){
  .nav__cta{ display:none; }   /* the fixed bar below carries it instead */
  .nav__name{ font-size:16px; }
}

/* ============ Hero ============ */
.hero{
  background: var(--ink);
  color:#fff;
  padding: clamp(48px, 7vw, 84px) 0 clamp(56px, 8vw, 96px);
  position:relative; overflow:hidden;
}
.hero::before{  /* faint yard-line rhythm */
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 96px);
  pointer-events:none;
}
.hero__grid{ position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items:center; }
.hero h1{ color:#fff; margin-bottom:20px; }
/* the second line is light blue, not gold — the buttons and the
   scoreboard already carry the gold on this screen */
.hero h1 em{ font-style:normal; color: var(--sky-bright); }
.hero__lede{ color: rgba(255,255,255,.78); font-size: clamp(17px,2vw,20px); max-width:46ch; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
@media (max-width: 900px){ .hero__grid{ grid-template-columns:1fr; } }

/* ============ Scoreboard (signature) ============ */
.board{ filter: drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.board__bezel{
  background: linear-gradient(#1B242F, #141B24);
  border:3px solid #2C3846;
  border-radius:8px;
  padding: 20px 20px 18px;
  position:relative;
}
.board__bezel::after{ /* rivets */
  content:""; position:absolute; top:7px; right:7px; bottom:7px; left:7px; border:1px dashed rgba(255,255,255,.09); border-radius:4px; pointer-events:none;
}
.board__head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.55);
  margin-bottom:14px;
}
.board__digits{ display:flex; gap:5px; justify-content:center; margin-bottom:16px; }
.digit{
  font-family: var(--data); font-weight:700;
  font-size: clamp(34px, 6.4vw, 62px); line-height:1;
  color: var(--bulb);
  background: #0A0E14;
  background-image: radial-gradient(rgba(255,176,32,.13) 1px, transparent 1.4px);
  background-size: 6px 6px;
  border:1px solid #262F3B; border-radius:3px;
  padding: 10px 9px 8px; min-width: .78em; text-align:center;
  text-shadow: 0 0 16px rgba(255,176,32,.55);
}
.digit--thin{ min-width:auto; padding-left:5px; padding-right:5px; color: var(--bulb-dim); text-shadow:none; }
.board__bar{ height:12px; background:#0A0E14; border:1px solid #262F3B; border-radius:2px; overflow:hidden; }
.board__fill{
  height:100%; width:0;
  background: repeating-linear-gradient(90deg, var(--bulb) 0 8px, #E09A12 8px 12px);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.board__rows{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:#262F3B; margin-top:16px; border:1px solid #262F3B; }
.board__cell{ background:#141B24; padding:12px 10px; text-align:center; }
.board__cell span{ display:block; font-family: var(--data); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.45); margin-bottom:5px; }
.board__cell b{ font-family: var(--display); font-weight:800; font-size:26px; color:#fff; }
.board__posts{ display:flex; justify-content:space-around; padding-left:20%; padding-right:20%; }
.board__posts i{ width:12px; height:26px; background: linear-gradient(#2C3846, #1B242F); border-radius:0 0 2px 2px; }

/* ============ Section frame ============ */
.section{ padding:56px 0; padding: clamp(56px, 8vw, 96px) 0; scroll-margin-top:86px; }
.section--tint{ background: var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--ink{ background: var(--brand-deep); color:#fff; }
.section--ink h2{ color:#fff; }
.section__head{ max-width: 68ch; margin-bottom: clamp(32px, 4vw, 48px); }
.section__head h2{ margin-bottom:16px; }


/* ============ Allocation ============ */
.alloc{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:2px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); }
.alloc__item{ background: var(--brand-deep); padding:26px 22px; }
.alloc__pct{ font-family: var(--display); font-weight:900; font-size:62px; line-height:.85; color: var(--sky); display:block; }
.alloc__label{ font-family: var(--display); font-weight:700; font-size:19px; text-transform:uppercase; margin:10px 0 8px; line-height:1; }
.alloc__detail{ font-size:14px; color: rgba(255,255,255,.68); margin:0; }

/* ============ Tier cards ============ */
/* Fixed column counts rather than auto-fit. With auto-fit, five business
   packages became a row of four plus one card stretched across the full
   width, which looked like a mistake. Three up gives 3+2 for the business
   levels and a clean 3+3 for the six family levels, and stretch makes every
   card in a row the same height with the buttons landing on one line. */
.tiers{ display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch; }
@media (min-width: 640px){  .tiers{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .tiers{ grid-template-columns: repeat(3, 1fr); } }
.tier{
  background: var(--card); border:1px solid var(--line); border-top:5px solid var(--brand);
  border-radius: var(--r); padding:26px 24px 24px; display:flex; flex-direction:column;
}
/* Colour-only grouping: same thin rule, different meaning.
   Family levels 3 and up share the gold rule because $125 and up picks
   reserved seats in the earlier window. */
.tier--gold{ border-top-color: var(--bulb); }
.tier--featured{ border-top-color: var(--bulb); border-top-width:7px; box-shadow: 0 10px 30px rgba(11,13,16,.08); }
.tier__name{ font-family: var(--display); font-weight:800; font-size:30px; text-transform:uppercase; line-height:.9; }
.tier__price{ font-family: var(--data); font-weight:700; font-size:22px; color: var(--brand-ink); margin:8px 0 4px; }
.tier__note{ font-size:13.5px; color: var(--ink-soft); font-style:italic; margin:0 0 14px; }
.tier__slots{
  display:inline-block; font-family: var(--data); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ink);
  background: var(--bulb); padding:4px 9px; border-radius:2px; margin-bottom:12px;
}
.tier__slots--full{ background: var(--ink); color: var(--bulb); }
.tier ul{ list-style:none; padding:0; margin:0 0 20px; flex:1; }
.tier li{ position:relative; padding-left:22px; margin-bottom:9px; font-size:15px; line-height:1.45; }
.tier li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; background: var(--brand); border-radius:1px; }
.tier__acts{ display:flex; flex-wrap:wrap; gap:8px; }
.tier__upsell{
  font-size:14px; font-style:italic; line-height:1.5;
  color: var(--ink-soft); background: var(--paper);
  border-left:3px solid var(--bulb); border-radius:0 var(--r) var(--r) 0;
  padding:12px 14px; margin:0 0 18px;
}
.tier__upsell--inc{ border-left-color: var(--brand); }
.tier__upsell--inc span{ color: var(--brand); }
.tier__upsell span{
  display:block; font-family: var(--data); font-style:normal;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink); margin-bottom:5px;
}

/* ============ Sponsor / member wall ============ */
.wall__group{ margin-bottom:44px; }
.wall__rule{
  display:flex; align-items:baseline; gap:14px; margin-bottom:20px;
  border-bottom:2px solid var(--ink); padding-bottom:8px;
}
.wall__rule h3{ font-size:clamp(24px,3.4vw,34px); }
.wall__count{ font-family: var(--data); font-size:12px; color: var(--ink-soft); margin-left:auto; }

.banners{ display:grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap:14px; }
.banner{  /* an outfield fence banner */
  background: var(--sky-bright); color: var(--ink); text-decoration:none;
  border:3px solid var(--sky-edge); border-radius:2px;
  min-height:104px; padding:16px 18px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  font-family: var(--display); font-weight:800; font-size:23px; line-height:1; text-transform:uppercase;
  position:relative; transition: transform .15s ease;
}
.banner::before, .banner::after{ /* grommets */
  content:""; position:absolute; top:7px; width:6px; height:6px; border-radius:50%;
  background: rgba(11,13,16,.28);
}
.banner::before{ left:8px; } .banner::after{ right:8px; }
.banner:hover{ transform: translateY(-3px); }
.banner img{ max-height:52px; width:auto; object-fit:contain; }
.banner--lg{ min-height:150px; font-size:30px; }
.banner--sm{ min-height:78px; font-size:18px; border-width:2px; }

.names{ display:flex; flex-wrap:wrap; gap:8px 0; padding:0; margin:0; }
.names li{
  list-style:none; font-size:16px; padding:2px 16px;
  border-right:1px solid var(--line); line-height:1.3;
}
.names li:first-child{ padding-left:0; }

.wall__empty{
  border:2px dashed var(--line); border-radius: var(--r);
  padding:34px; text-align:center; color: var(--ink-soft); font-size:15px;
}

/* ============ Forms ============ */
.form{ display:grid; gap:16px; max-width:620px; }
.field label{ display:block; font-family: var(--data); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; font-family: var(--body); font-size:16px; color: var(--ink);
  background: var(--card); border:1px solid var(--line); border-radius: var(--r);
  padding:12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:3px solid var(--bulb); outline-offset:1px; border-color: var(--brand); }
.field textarea{ min-height:150px; resize:vertical; }
.field--half{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .field--half{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; }

/* ============ Split / misc ============ */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,60px); align-items:start; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } }

.callout{
  background: var(--ink); color:#fff; border-radius: var(--r);
  padding: clamp(28px,4vw,44px); border-left:6px solid var(--bulb);
}
.callout h3{ color:#fff; margin-bottom:12px; }
.callout p{ color: rgba(255,255,255,.75); }

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary{ font-family: var(--display); font-weight:700; font-size:21px; text-transform:uppercase; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family: var(--data); color: var(--brand-ink); }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:12px 0 0; color: var(--ink-soft); max-width:70ch; }

/* ============ Footer ============ */
.foot{ background: var(--ink); color: rgba(255,255,255,.7); padding: 56px 0 34px; font-size:15px; }
.foot__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:36px; margin-bottom:36px; }
.foot h4{ color:#fff; font-size:19px; margin-bottom:14px; }
.foot__lockup{ background:#fff; border-radius:6px; padding:14px 18px; display:inline-block; margin-bottom:18px; }
.foot__lockup img{ height:74px; width:auto; }
.foot a{ color: rgba(255,255,255,.7); text-decoration:none; display:block; padding:4px 0; }
.foot a:hover{ color: var(--bulb); }
.foot__base{ border-top:1px solid rgba(255,255,255,.14); padding-top:22px; font-family: var(--data); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.45); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
@media (max-width: 780px){ .foot__grid{ grid-template-columns:1fr; gap:26px; } }

/* ============ Page banner (interior pages) ============ */
.phead{ background: var(--brand-deep); color:#fff; padding: clamp(40px,6vw,68px) 0 clamp(36px,5vw,56px); }
.phead h1{ color:#fff; font-size: clamp(40px,7vw,74px); margin-bottom:16px; }
.phead p{ color: rgba(255,255,255,.75); max-width:60ch; font-size:18px; margin:0; }


/* ============ Member add-on passes ============ */
.passes{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
/* the four member passes sit two across so the two concession punch passes
   share the bottom row and read as a pair */
.passes--2up{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px){ .passes--2up{ grid-template-columns: 1fr; } }
.pass{
  background: var(--card); border:1px solid var(--line); border-radius: var(--r);
  padding:24px 24px 22px; display:flex; flex-direction:column; position:relative;
  border-top:5px solid var(--sky-bright);
}
.pass__gate{
  position:absolute; top:-1px; right:-1px;
  background: var(--ink); color: var(--bulb);
  font-family: var(--data); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:0 var(--r) 0 var(--r);
}
.pass__name{ font-family: var(--display); font-weight:800; font-size:27px; text-transform:uppercase; line-height:.95; max-width:14ch; }
.pass__price{ font-family: var(--data); font-weight:700; font-size:21px; color: var(--brand); margin:10px 0 10px; }
.pass__price small{ font-family: var(--body); font-weight:400; font-size:13px; color: var(--ink-soft); }
.pass__blurb{ font-size:15.5px; margin:0 0 14px; }
.pass__btn{ align-self:flex-start; margin-top:16px; }
.pass__limit{
  font-family: var(--data); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink-soft);
  border-top:1px dashed var(--line); padding-top:12px; margin-top:auto;
}
/* punch-card dots — one per punch */
.punches{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 16px; padding:0; }
.punches li{
  list-style:none; width:15px; height:15px; border-radius:50%;
  border:2px dashed var(--sky-bright); background: var(--paper);
}
.pass__sports{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:0; }
.pass__sports li{
  list-style:none; font-family: var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  background: var(--paper); border:1px solid var(--line);
  border-radius:2px; padding:4px 8px;
}

/* ============ Dated pickup event ============ */
.event{
  background: var(--ink); color:#fff; border-radius: var(--r);
  border-left:6px solid var(--bulb); padding: clamp(26px,4vw,40px);
  display:grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px,4vw,44px);
}
.event h3{ color:#fff; font-size: clamp(26px,3.4vw,36px); margin-bottom:12px; }
.event__when{ font-family: var(--display); font-weight:900; font-size:clamp(30px,4vw,44px); color: var(--bulb); line-height:.9; text-transform:uppercase; }
.event__where{ font-size:15px; color: rgba(255,255,255,.72); margin-top:10px; }
.event__slots{ list-style:none; padding:0; margin:0; }
.event__slot{ display:flex; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.16); }
.event__slot:first-child{ border-top:0; padding-top:0; }
.event__time{ font-family: var(--data); font-weight:700; font-size:14px; color: var(--bulb); flex:none; width:118px; }
.event__who{ font-size:15px; color: rgba(255,255,255,.82); }
.event__note{ font-size:14px; color: rgba(255,255,255,.6); margin:14px 0 0; }
@media (max-width: 780px){ .event{ grid-template-columns:1fr; } .event__time{ width:100px; } }


/* ============ Designation split bar ============ */
.split-bar{ display:flex; height:38px; margin:16px 0 8px; border:1px solid var(--line); border-radius:2px; overflow:hidden; max-width:460px; }
.split-bar div{
  display:grid; place-items:center;
  font-family: var(--data); font-weight:700; font-size:13px;
}
.split-bar__team{ background: var(--bulb); color: var(--ink); width:50%; }
.split-bar__general{ background: var(--brand); color:#fff; flex:1; }
.split-bar__caption{ font-size:13.5px; color: var(--ink-soft); max-width:460px; }


/* ============ Sponsor inventory cards ============ */
.inv{ border-top-color: var(--brand); }
.inv--featured{ border-top-color: var(--bulb); border-top-width:7px; box-shadow:0 10px 30px rgba(11,13,16,.08); }
.inv__gate{ background: var(--sky-bright); color: var(--ink); }
.inv__prices{ display:flex; gap:1px; background: var(--line); border:1px solid var(--line); border-radius:2px; margin:12px 0 10px; }
.inv__col{ background: var(--card); padding:10px 12px; flex:1; }
.inv__col span{ display:block; font-family: var(--data); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:3px; }
.inv__col b{ font-family: var(--data); font-weight:700; font-size:19px; color: var(--ink); }
.inv__col--best{ background: var(--paper); }
.inv__col--best b{ color: var(--brand-ink); }
.inv__price{ font-family: var(--data); font-weight:700; font-size:19px; color: var(--brand-ink); margin:12px 0 10px; }
.inv__save{ font-size:13px; font-style:italic; color: var(--ink-soft); margin:0 0 12px; }
.inv__rates{ list-style:none; padding:0; margin:0 0 14px; border-top:1px dashed var(--line); }
.inv__rates li{ font-family: var(--data); font-size:12px; padding:7px 0; border-bottom:1px dashed var(--line); }
.inv ul:not(.inv__rates){ list-style:none; padding:0; margin:0 0 14px; }
.inv ul:not(.inv__rates) li{ position:relative; padding-left:20px; margin-bottom:7px; font-size:14.5px; line-height:1.45; }
.inv ul:not(.inv__rates) li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background: var(--brand); border-radius:1px; }


/* ============ Add-on priority ladder ============ */
.ladder{ background: var(--ink); color:#fff; border-radius: var(--r); border-left:6px solid var(--bulb); padding: clamp(26px,4vw,38px); }
.ladder__note{ color: rgba(255,255,255,.78); font-size:16px; max-width:62ch; margin:0 0 24px; }
.ladder__list{ list-style:none; padding:0; margin:0; counter-reset:none; }
.ladder__step{ display:flex; gap:18px; padding:16px 0; border-top:1px solid rgba(255,255,255,.14); }
.ladder__step:first-child{ border-top:0; padding-top:0; }
.ladder__num{
  flex:none; width:34px; height:34px; border-radius:50%;
  background: var(--sky); color: var(--ink);
  display:grid; place-items:center;
  font-family: var(--display); font-weight:900; font-size:19px;
}
.ladder__who{ font-family: var(--display); font-weight:800; font-size:23px; text-transform:uppercase; line-height:1; margin-bottom:8px; }
.ladder__when{ font-family: var(--data); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--bulb); margin:-2px 0 8px; }
.ladder__detail{ font-size:15px; color: rgba(255,255,255,.72); margin:0; max-width:64ch; }


/* ============ Shared package benefits ============ */
.shared{
  background: var(--card); border:1px solid var(--line);
  border-left:5px solid var(--brand); border-radius: var(--r);
  padding:20px 24px; margin-bottom:22px;
}
.shared__label{
  display:block; font-family: var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:12px;
}
.shared__list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 32px; }
.shared__list li{ position:relative; padding-left:22px; font-size:15.5px; font-weight:500; }
.shared__list li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:9px; background: var(--brand); border-radius:1px; }
.tier__plus{
  display:block; font-family: var(--data); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft);
  border-top:1px solid var(--line); padding-top:12px; margin-bottom:10px;
}


/* ============ Flat (untiered) walls ============ */
.wall__total{ font-size:16px; color: var(--ink-soft); margin:0 0 20px; }
.wall__total b{ font-family: var(--display); font-size:26px; color: var(--ink); vertical-align:-2px; margin-right:2px; }
.names--wall{ gap:10px 0; }
.names--wall li{ font-size:16.5px; }


/* ============ Donor tiles ============
   Families get the gold tile, businesses the blue one, and the donor
   tiles run smaller because there are more of them and the names are
   longer. Ink on gold is 13:1, so the text holds up at this size. */
.banner--gold{ background: var(--bulb); border-color:#D4A900; color: var(--ink); }
.banner--tiny{
  min-height:56px; padding:10px 12px; border-width:2px;
  font-size:14.5px; letter-spacing:.005em;
}
.banners--tiny{ grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); gap:10px; }


/* ============================================================
   MOBILE
   The site is read on phones in a gym, one hand, bad light. These
   rules make the tap targets bigger, the tiles denser and the
   primary action permanently reachable.
   ============================================================ */

/* --- fixed action bar, phones only --- */
.mobilebar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(11,13,16,.96);
  border-top:3px solid var(--bulb);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobilebar .btn{ width:100%; justify-content:center; font-size:19px; padding:14px 20px 12px; }
@media (max-width: 560px){
  .mobilebar{ display:block; }
  body{ padding-bottom:78px; }
}

@media (max-width: 620px){
  /* stacked buttons read better than two ragged widths */
  .hero__acts{ flex-direction:column; align-items:stretch; }
  .hero__acts .btn{ width:100%; justify-content:center; }

  /* scoreboard has to fit 7 characters across a 335px column */
  .board__bezel{ padding:14px 12px 12px; }
  .board__digits{ gap:3px; }
  .digit{ font-size:30px; padding:8px 6px 6px; }
  .digit--thin{ padding-left:4px; padding-right:4px; }
  .board__cell{ padding:10px 6px; }
  .board__cell b{ font-size:20px; }
  .board__cell span{ font-size:8.5px; letter-spacing:.1em; }

  /* 84 sponsor tiles at full width is a very long scroll — go two up */
  .banners{ grid-template-columns: repeat(auto-fill, minmax(142px,1fr)); gap:10px; }
  .banner{ min-height:74px; font-size:15.5px; padding:12px 10px; border-width:2px; }
  .banner--lg{ min-height:92px; font-size:18px; }
  .banner--sm{ min-height:62px; font-size:13.5px; }
  .banners--tiny{ grid-template-columns: repeat(auto-fill, minmax(124px,1fr)); gap:8px; }
  .banner--tiny{ min-height:46px; font-size:12px; padding:8px 7px; }
  .banner::before, .banner::after{ top:5px; width:4px; height:4px; }

  .ticker{ font-size:11px; letter-spacing:.06em; padding:8px var(--pad); }
  .wall__total b{ font-size:22px; }
  .doors__rowhead{ margin-top:22px; }
  .alloc__pct{ font-size:52px; }
  .split-bar{ max-width:none; }
}

@media (max-width: 400px){
  h1{ font-size:38px; }
  .digit{ font-size:26px; padding:7px 5px 5px; }
  .tier__name, .pass__name{ font-size:24px; }
  .btn{ font-size:18px; padding:12px 20px 10px; }
}

/* fingers, not cursors */
@media (hover: none){
  .btn:hover, .door:hover, .banner:hover, .tier:hover{ transform:none; }
  .faq summary{ padding:4px 0; }
}


/* ============ Mission statement ============ */
.mission{
  font-size:19px; font-size: clamp(19px, 2.2vw, 24px);
  line-height:1.55; color: var(--ink); max-width:70ch; margin:0;
  padding-left:22px; border-left:5px solid var(--sky-bright);
}
@media (max-width: 620px){ .mission{ padding-left:16px; border-left-width:4px; } }



/* ============ Reasons to join ============ */
.reasons{ list-style:none; counter-reset:r; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:2px; background: var(--line);
  border:1px solid var(--line); border-radius: var(--r); overflow:hidden; }
@media (min-width: 720px){ .reasons{ grid-template-columns: repeat(2, 1fr); } }
.reason{ counter-increment:r; background: var(--card); padding:24px 24px 22px; }
.reason h3{ font-size:21px; margin-bottom:8px; }
.reason h3::before{
  content: counter(r); display:inline-grid; place-items:center;
  width:26px; height:26px; margin-right:10px; border-radius:50%;
  background: var(--sky-bright); color: var(--ink);
  font-family: var(--data); font-size:13px; vertical-align:2px;
}
.reason p{ font-size:15.5px; color: var(--ink-soft); margin:0; }

/* ============ Config-driven notes ============ */
.note{
  font-size:15px; color: var(--ink-soft); max-width:70ch;
  border-left:3px solid var(--line); padding-left:16px; margin:24px 0 0;
}


/* ============ Checkbox group ============ */
.checks{ display:grid; gap:10px; }
.checks label{
  display:flex; align-items:flex-start; gap:11px;
  font-family: var(--body); font-size:15.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color: var(--ink);
  margin:0; cursor:pointer; line-height:1.4;
}
.checks input{ width:19px; height:19px; flex:none; margin-top:1px; accent-color: var(--brand); }


/* ============================================================
   BUSINESS COMPARISON GRID
   Shown from 760px up. Below that the tier cards take over —
   a five-column table on a phone is unreadable, and both render
   from the same config so they can't disagree.
   ============================================================ */
.mx__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mx{
  width:100%; border-collapse:collapse; font-size:15px;
  /* fixed layout: column widths come from the header row rather than from
     whichever cell happens to hold the longest string, so all five tiers
     are identical regardless of content */
  table-layout: fixed;
  min-width: 700px;
}
.mx--six{ min-width: 700px; }
.mx__corner{ width: 26%; }
.mx__tier{ width: 14.8%; }          /* 5 tiers x 14.8 = 74, + 26 label */
.mx--six .mx__corner{ width: 25%; }
.mx--six .mx__tier{ width: 12.5%; } /* 6 tiers x 12.5 = 75, + 25 label */
.mx th, .mx td{ padding:13px 12px; text-align:center; border-bottom:1px solid var(--line); }
.mx tbody th{
  text-align:left; font-family: var(--body); font-weight:500; font-size:15px;
  color: var(--ink);
}
.mx__corner{
  text-align:left; font-family: var(--data); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft);
  vertical-align:bottom; border-bottom:none;
}
.mx__tier{ vertical-align:bottom; border-bottom:none; padding:0 6px; }
.mx__tier span{ display:block; }
.mx__name{
  font-family: var(--display); font-weight:800; font-size:22px;
  text-transform:uppercase; line-height:1; padding-top:14px;
}
.mx__price{ font-family: var(--data); font-weight:700; font-size:19px; margin-top:6px; }
.mx__per{ font-family: var(--data); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; padding-bottom:12px; }
/* each column takes its tier's colour, the way the flyer does */
.mx__tier--white   { background: var(--card);       color: var(--ink); border:1px solid var(--line); border-bottom:none; }
.mx__tier--blue    { background: var(--sky-bright); color: var(--ink); }
.mx__tier--gold    { background: var(--bulb);       color: var(--ink); }
.mx__tier--bobcat  { background: var(--ink);        color:#fff; }
.mx__tier--champion{ background: var(--brand-deep); color:#fff; }
.mx__tier--champion .mx__price, .mx__tier--bobcat .mx__price{ color: var(--bulb); }
.mx__on{ color: var(--brand); font-size:20px; font-weight:700; }
.mx__off{ color: var(--line); font-size:18px; }
.mx__val{ font-family: var(--data); font-size:13.5px; line-height:1.3; }
.mx tbody tr:nth-child(odd) td, .mx tbody tr:nth-child(odd) th{ background: rgba(105,179,231,.07); }
.mx__acts td{ padding-top:18px; border-bottom:none; background:none !important; }
.mx__acts .btn{ width:100%; justify-content:center; }
.mx__note{ font-size:13.5px; color: var(--ink-soft); margin:14px 0 0; }

/* The grid is the better presentation wherever it can fit, so it holds down
   to 620px and scrolls sideways in the tight band above that. Cards only take
   over on real phones, where a five-column table is genuinely unreadable. */
.tiers--business{ display:none; }
@media (max-width: 619px){
  [data-matrix="business"]{ display:none; }
  /* display:block first: a browser without grid support drops the grid
     declaration, and without a fallback the cards would inherit the
     display:none above and the packages would vanish entirely. */
  .tiers--business{ display:block; }
  .tiers--business{ display:grid; }
}


/* ============================================================
   SPECIALTY SPONSORSHIPS — three columns, as on the flyer
   ============================================================ */
.spec__gate{
  background: var(--card); border:1px solid var(--line);
  border-left:5px solid var(--sky-bright); border-radius: var(--r);
  padding:16px 20px; margin:0 0 26px; font-size:16px; max-width:70ch;
}
/* One column or three, never two. There are exactly three of these, so a
   two-column state always leaves an orphan card sitting on its own row.
   `stretch` keeps the three equal height even though Game Day has six items
   and the others have four. */
.spgrid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch; }
@media (min-width: 1040px){ .spgrid{ grid-template-columns: repeat(3, 1fr); } }


.sp{ background: var(--card); border:1px solid var(--line); border-radius: var(--r); overflow:hidden; }
.sp__head{ padding:18px 20px 16px; }
/* Blurbs run 81 to 106 characters, so at three across they wrap to different
   line counts and the coloured blocks end at different depths. A floor on the
   header height lines the three up; the shortest simply carries a little more
   air. */
@media (min-width: 1040px){ .sp__head{ min-height:152px; } }
.sp__head h3{ font-size:26px; line-height:1; }
.sp__head p{ font-size:14px; margin:8px 0 0; opacity:.85; }
.sp--brand .sp__head{ background: var(--brand-deep); color:#fff; }
.sp--bulb  .sp__head{ background: var(--bulb);       color: var(--ink); }
.sp--sky   .sp__head{ background: var(--sky-bright); color: var(--ink); }

.sp__list{ list-style:none; padding:0 20px; margin:0; }
.sp__item{ padding:15px 0; border-bottom:1px solid var(--line); }
.sp__item:last-child{ border-bottom:0; }
/* In the single-column state a four-item list makes a very tall thin card,
   so run the items two-up once there's room for it. */
@media (min-width: 620px) and (max-width: 1039px){
  /* Two-up, drawn as a boxed grid: a 1px gap over a line-coloured background
     gives clean rules between every cell, horizontal and vertical, without
     fighting :nth-child to strip the last row's border. */
  .sp__list{
    display:grid; grid-template-columns: repeat(2, 1fr);
    gap:1px; background: var(--line);
    border:1px solid var(--line); border-radius:2px;
    padding:0; margin:0 20px 20px;
  }
  .sp__item{ background: var(--card); border-bottom:0; padding:14px 16px; }
  /* an odd final item spans both columns, so the grid never leaves a grey hole */
  .sp__item:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .sp__head{ padding-bottom:14px; }
}

.sp__top{ display:flex; align-items:baseline; gap:12px; }
.sp__top b{ font-size:16.5px; font-weight:700; }
.sp__price{ margin-left:auto; flex:none; font-family: var(--data); font-weight:700; font-size:15px; }
.sp__price--ask{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--brand-ink); }
.sp__covers{ display:block; font-size:14px; color: var(--ink-soft); margin-top:4px; }
.sp__plus{
  display:block; margin-top:6px; font-size:13px; font-style:italic;
  color: var(--ink-soft); padding-left:12px; border-left:2px solid var(--bulb);
}

/* ============ Scoreboard panel card ============ */
.inv--dark{
  background: var(--ink); color:#fff; border-color: var(--ink);
  border-top-color: var(--bulb);
}
.inv--dark .pass__name{ color:#fff; }
.inv--dark .inv__price{ color: var(--bulb); }
.inv--dark .pass__blurb{ color: rgba(255,255,255,.82); }
.inv--dark .inv__rates{ border-top-color: rgba(255,255,255,.2); }
.inv--dark .inv__rates li{ border-bottom-color: rgba(255,255,255,.2); }
.inv--dark ul:not(.inv__rates) li{ color: rgba(255,255,255,.82); }
.inv--dark .pass__gate{ background: var(--bulb); color: var(--ink); }
.inv__term{ display:flex; gap:14px; align-items:baseline; }
.inv__term span{
  font-family: var(--data); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:.7;
  flex:none; width:104px;
}
.inv__term b{ font-family: var(--body); font-weight:500; font-size:14.5px; }
@media (max-width: 520px){
  .inv__term{ display:block; }
  .inv__term span{ width:auto; margin-bottom:3px; }
}


/* ============================================================
   JOIN OR RENEW — a true 2x2
   Colour follows the rest of the site: blue is business, gold is
   family, the same way the sponsor and donor walls read.
   ============================================================ */
.quad{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 760px){ .quad{ grid-template-columns: repeat(2, 1fr); } }

.quad__card{
  background: var(--card); border:1px solid var(--line);
  border-top:5px solid var(--line); border-radius: var(--r);
  padding:24px 24px 22px; display:flex; flex-direction:column;
  text-decoration:none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.quad__card:hover{ box-shadow:0 10px 26px rgba(11,13,16,.09); }
.quad__card:focus-visible{ outline:3px solid var(--bulb); outline-offset:3px; }
.quad__card--biz{ border-top-color: var(--brand); }
.quad__card--fam{ border-top-color: var(--bulb); }
.quad__card:hover{ transform: translateY(-2px); }
.quad__card--biz:hover{ border-color: var(--brand); }
.quad__card--fam:hover{ border-color: var(--bulb); }

.quad__tag{
  font-family: var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft);
  margin-bottom:10px;
}
.quad__card h3{ font-size:25px; margin-bottom:10px; }
.quad__card p{ font-size:15.5px; color: var(--ink-soft); margin:0 0 14px; flex:1; }
/* the whole tile is the link, so this is an affordance rather than a button */
.quad__go{
  font-family: var(--display); font-weight:800; font-size:17px;
  text-transform:uppercase; letter-spacing:.02em;
  border-top:1px dashed var(--line); padding-top:14px; margin-top:auto;
}
.quad__card--biz .quad__go{ color: var(--brand-ink); }
.quad__card--fam .quad__go{ color: var(--bulb-dim); }
.quad__go::after{ content:" \2192"; }
.quad__card[aria-disabled="true"]{ opacity:.55; pointer-events:none; }


/* family grid has six columns, so it needs to breathe less */
.mx--six th, .mx--six td{ padding:11px 8px; }
.mx--six .mx__name{ font-size:18px; }
.mx--six .mx__price{ font-size:16px; }
.mx--six tbody th{ font-size:14.5px; }
.mx--six .mx__val{ font-size:12.5px; }
.mx__tier--fam{ background: var(--bulb); color: var(--ink); }

.tiers--family{ display:none; }
@media (max-width: 619px){        /* same threshold as the business grid */
  [data-matrix="family"]{ display:none; }
  .tiers--family{ display:block; }
  .tiers--family{ display:grid; }
}


/* ============================================================
   HOME PAGE TEASERS
   Name what exists, then send the reader to the page that holds
   the detail. No prices here — they live on one page each so they
   can't drift apart.
   ============================================================ */
.teaser__text{ max-width:62ch; }
/* the gold "New for 2026–27" pill, shared by the home page teaser and any
   section that wants to flag itself as new */
.teaser__label, .badge-new{
  display:inline-block; background: var(--bulb); color: var(--ink);
  font-family: var(--data); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:2px; margin-bottom:16px;
}
.teaser h2{ margin-bottom:14px; }
.teaser__list{
  list-style:none; padding:0; margin:26px 0 0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.teaser__list li{
  font-family: var(--data); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:2px; padding:8px 13px;
}
.teaser__cta{ margin:28px 0 0; }

/* on the dark band */
.section--ink .teaser h2{ color:#fff; }
.section--ink .teaser .lede{ color: rgba(255,255,255,.78); }
.section--ink .teaser__list li{ border-color: rgba(255,255,255,.28); color: var(--sky-bright); }


/* ---- grid on narrow screens: tighten up and hint that it scrolls ---- */
@media (max-width: 820px){
  .mx th, .mx td{ padding:10px 6px; }
  .mx__name{ font-size:16px; letter-spacing:-.01em; }
  .mx--six .mx__name{ font-size:15px; }
}
@media (max-width: 1000px){
  .mx tbody th{ font-size:14px; }
  .mx th, .mx td{ padding:11px 8px; }
  .mx__name{ font-size:18px; }
  .mx__price{ font-size:16px; }
  .mx__val{ font-size:12px; }
}
.mx__scroll{ position:relative; }
.mx__hint{
  display:none; font-family: var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft);
  margin:0 0 10px;
}
/* only shown where the table can actually overflow */
@media (max-width: 700px){ .mx__hint{ display:block; } }


/* Card spacing when the grid falls back to block (no `gap` there). */
.tiers--business > * , .tiers--family > *{ margin-bottom:18px; }
@supports (display: grid){
  .tiers--business > * , .tiers--family > *{ margin-bottom:0; }
}


/* ============ Prorated price note ============ */
.inv__pro{
  font-size:13.5px; font-style:italic; line-height:1.5;
  color: var(--ink-soft); background: var(--paper);
  border-left:3px solid var(--bulb); border-radius:0 var(--r) var(--r) 0;
  padding:11px 14px; margin:0 0 14px;
}
.inv--dark .inv__pro{ background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }


/* ============================================================
   UPCOMING EVENTS
   A date rail on the left, the detail on the right. Cards drop
   out on their own once the date passes.
   ============================================================ */
.events{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 820px){ .events{ grid-template-columns: repeat(2, 1fr); } }

.ev{
  display:grid; grid-template-columns:1fr; gap:0;
  background: var(--card); border:1px solid var(--line);
  border-top:5px solid var(--bulb); border-radius: var(--r); overflow:hidden;
}
@media (min-width: 520px){ .ev{ grid-template-columns: 150px 1fr; } }

.ev__when{
  background: var(--ink); color:#fff;
  font-family: var(--display); font-weight:800; font-size:21px;
  text-transform:uppercase; line-height:1.05;
  padding:18px 18px 16px;
}
.ev__time{
  display:block; font-family: var(--data); font-weight:700; font-size:11px;
  letter-spacing:.12em; color: var(--bulb); margin-top:8px;
}
.ev__body{ padding:20px 22px 20px; }
.ev__body h3{ font-size:23px; margin-bottom:8px; }
.ev__body p{ font-size:15px; color: var(--ink-soft); margin:0 0 10px; }
.ev__where{ font-family: var(--data); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
.ev__body .btn{ margin-top:4px; }


/* ============ Renewal form ============ */
.form__note{ font-size:14.5px; color:#B3261E; margin:14px 0 0; }
.checks input[type="radio"]{ width:19px; height:19px; flex:none; margin-top:1px; accent-color: var(--brand); }
[data-renew-form][hidden], [data-renew-choose][hidden]{ display:none; }


/* ============ Renewal add-ons ============ */
.checks label em{ font-style:normal; color: var(--ink-soft); font-size:13.5px; }
.checks label b{ font-weight:700; color: var(--brand-ink); font-size:13.5px; }
.checks label.is-included{ opacity:.85; }
.checks--spec{
  border-left:3px solid var(--sky-bright); padding:14px 0 4px 16px; margin-top:4px;
}
.checks__head{
  font-family: var(--data); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--ink-soft); margin:12px 0 2px;
}
.checks__head:first-child{ margin-top:0; }
[data-spec-panel][hidden]{ display:none; }

.pay__note{
  font-size:15px; color: var(--ink-soft); margin:0;
  border-left:3px solid var(--sky-bright); padding-left:14px; max-width:60ch;
}

/* the included-passes row sits apart from the ones you can add */
[data-inc-passes]{ margin-bottom:14px; }
[data-inc-passes][hidden]{ display:none; }


/* The "anything to add on top?" line is a plain lead-in, not a callout —
   no accent rule, and enough air before the list it introduces. */
.passes__intro{
  font-size:15px; color: var(--ink-soft);
  margin:20px 0 14px; max-width:60ch;
}
[data-pass][hidden]{ display:none; }

.form__note--ok{ color: var(--ink-soft); }
.form__note--ok code{
  font-family: var(--data); font-size:12.5px; word-break:break-all;
  background: var(--card); border:1px solid var(--line); border-radius:2px;
  padding:3px 6px; display:inline-block; margin-top:6px;
}


/* ============ How specialty money splits ============ */
.spec__split{
  margin-top:26px; padding:22px 24px;
  background: var(--card); border:1px solid var(--line);
  border-left:5px solid var(--bulb); border-radius: var(--r);
}
.spec__split h3{ font-size:21px; margin-bottom:10px; }
.spec__split p{ font-size:15.5px; color: var(--ink-soft); margin:0; max-width:74ch; }