/* Built from resources/scss/redesign.scss by tools/build-redesign-css.py.
   Do not edit — edit the partials. */



@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Atkinson/atkinson-next-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/PlexMono/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/PlexMono/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/PlexMono/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/PlexMono/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/PlexMono/plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/PlexMono/plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/Barlow/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/Barlow/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/Barlow/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/Barlow/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/Barlow/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/Barlow/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================================
   BOSTON FIREARMS — REDESIGN MOCKUP
   Design system. One semantic token layer over the live navy/red kit
   (brand/brand-kit.md), so no component ever touches a brand hex directly.

   Signature device: the reticle bracket. Four corner arms that close on
   whatever the reader is meant to act on. Nothing else is decorated.
   ========================================================================= */


/* ── Animatable custom properties (bracket geometry) ─────────────────────── */
@property --bk-arm  { syntax: '<length>'; inherits: true; initial-value: 12px; }
@property --bk-off  { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* ── TOKENS — Boston Firearms navy / red (brand-kit.md), upgraded ─────── */
:root {
  --ink:              #17181B;
  --ink-soft:         #1E3C5C;
  --ink-muted:        #5B6675;
  --surface:          #FFFFFF;
  --surface-tint:     #F2F5F9;
  --surface-raised:   #FFFFFF;
  --dark:             #1E3C5C;
  --dark-raised:      #17304A;
  --dark-deep:        #10233A;
  --dark-deepest:     #0B1F33;
  --on-dark:          #FFFFFF;
  --on-dark-muted:    #B7C6D9;
  /* The brand red, deepened 2026-08-30. #D8374F was light and highly saturated:
     white on it measured 4.59:1 — technically AA, but large white-on-red fills
     halate, which is the "hard on the eyes" everyone was describing. #B4243C is
     the same hue, deeper, and improves BOTH directions at once — white on it is
     6.44:1, and red text on white (the wordmark sub, eyebrows) goes 4.59 → 6.44.
     Prominence is bought back with size and weight below, not with saturation. */
  --signal:           #B4243C;
  /* --signal only reaches 2.47:1 on --dark, so dark surfaces get their own
     lighter signal. A theme must be able to move both. */
  --signal-on-dark:   #FF8698;
  --signal-deep:      #8E1A2E;
  --on-signal:        #FFFFFF;
  --confirm:          #1E7A55;
  --warn:             #B4791C;
  --rule:             rgba(30, 60, 92, .12);
  --rule-strong:      rgba(30, 60, 92, .26);
  --rule-dark:        rgba(255, 255, 255, .16);
  --shadow:           0 1px 2px rgba(23,24,27,.05), 0 12px 32px -16px rgba(30,60,92,.28);
  --shadow-lift:      0 2px 4px rgba(23,24,27,.06), 0 24px 48px -20px rgba(30,60,92,.38);

  /* Atkinson Hyperlegible Next is drawn by the Braille Institute to be told
     apart at a glance — the forms that normally collide (I l 1, O 0, b d p q)
     each carry a distinguishing feature. One family for display and body, so
     the page loads two faces total instead of four. */
  --font-display:     'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
  --font-word:        'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Arial, sans-serif;
  --font-body:        'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display-weight:   700;
  --display-track:    -.014em;   /* opened up; Atkinson needs less negative */
  --radius:           10px;
  --radius-lg:        18px;
  --pad:              clamp(1.4rem, 3vw, 2.1rem);
  --pad-sm:           clamp(1.1rem, 2.2vw, 1.5rem);
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--signal); color: var(--on-signal); }

/* ── Layout primitives ───────────────────────────────────────────────────── */
.wrap      { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 3rem); }
.wrap--nar { max-width: 780px; }
.wrap--mid { max-width: 980px; }

.section        { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark  { background: var(--dark); color: var(--on-dark); }
.section--tint  { background: var(--surface-tint); }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.04;
  text-wrap: balance;
}

.d-xl { font-size: clamp(1.95rem, 4.2vw, 3.3rem); line-height: 1.08; }
.d-lg { font-size: clamp(1.55rem, 2.9vw, 2.25rem); line-height: 1.14; }
.d-md { font-size: clamp(1.28rem, 1.95vw, 1.6rem); line-height: 1.22; }
.d-sm { font-size: clamp(1.05rem, 1.35vw, 1.18rem); line-height: 1.32; }

.lede { font-size: clamp(1.075rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.section--dark .lede { color: var(--on-dark-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}
.section--dark .eyebrow { color: var(--on-dark-muted); }
.eyebrow--signal { color: var(--signal-deep); }
.section--dark .eyebrow--signal { color: var(--signal); }

.mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted  { color: var(--ink-muted); }
.section--dark .muted { color: var(--on-dark-muted); }
.small  { font-size: .875rem; line-height: 1.5; }
.xsmall { font-size: .78rem; line-height: 1.45; }

/* Orange as text only at display sizes — it is 3.6:1 on paper. */
.signal-text { color: var(--signal-deep); }
.section--dark .signal-text,
.on-dark .signal-text { color: var(--signal); }

.price { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── The reticle bracket ─────────────────────────────────────────────────
   Four corner arms drawn as gradients on a single overlay. At rest they sit
   loose and wide; on hover / selection they close in — the sight picture
   settling. Used only on things the reader is meant to act on.
   --------------------------------------------------------------------- */
.brk { position: relative; --bk-arm: 14px; --bk-off: 0px; --bk-w: 2px; --bk-c: var(--signal); }
.brk > .brk-f {
  position: absolute;
  inset: calc(var(--bk-off) * -1);
  pointer-events: none;
  transition: --bk-arm .3s cubic-bezier(.2,.75,.3,1), --bk-off .3s cubic-bezier(.2,.75,.3,1), opacity .3s ease;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)),
    linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)),
    linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)),
    linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c));
  background-size:
    var(--bk-arm) var(--bk-w), var(--bk-w) var(--bk-arm),
    var(--bk-arm) var(--bk-w), var(--bk-w) var(--bk-arm),
    var(--bk-arm) var(--bk-w), var(--bk-w) var(--bk-arm),
    var(--bk-arm) var(--bk-w), var(--bk-w) var(--bk-arm);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
@media (prefers-reduced-motion: reduce) { .brk > .brk-f { transition: opacity .01ms; } }

/* states */
.brk--loose            { --bk-off: 9px; --bk-arm: 13px; }
.brk--loose:hover,
.brk--loose:focus-within { --bk-off: 3px; --bk-arm: 26px; }
.brk[aria-selected="true"], .brk.is-on { --bk-off: 3px; --bk-arm: 30px; --bk-w: 2px; }
.brk--quiet > .brk-f   { opacity: 0; }
.brk--quiet:hover > .brk-f,
.brk--quiet.is-on > .brk-f,
.brk--quiet[aria-selected="true"] > .brk-f { opacity: 1; }

/* the mark itself — brackets closing on a centre square */
.mark { width: 44px; height: 44px; flex: none; display: block; }
.mark rect.c { fill: var(--signal); }
.mark path   { stroke: currentColor; stroke-width: 2.4; fill: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--signal);
  --btn-fg: var(--on-signal);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 58px;
  padding: .95rem 1.95rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .012em;
  text-decoration: none;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover  { --btn-bg: var(--signal-deep); border-color: var(--signal-deep); }
.btn:active { transform: translateY(1px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.section--dark .btn--ghost, .on-dark .btn--ghost { --btn-fg: var(--on-dark); border-color: var(--rule-dark); }
.section--dark .btn--ghost:hover, .on-dark .btn--ghost:hover { --btn-fg: var(--on-dark); border-color: var(--on-dark); }

.btn--dark  { --btn-bg: var(--ink); --btn-fg: var(--surface); border-color: var(--ink); }
.btn--dark:hover { --btn-bg: var(--ink-soft); border-color: var(--ink-soft); color: var(--surface); }

.btn--sm { min-height: 48px; padding: .6rem 1.25rem; font-size: .94rem; }
.btn--lg { min-height: 68px; padding: 1.15rem 2.5rem; font-size: 1.22rem; }
.btn--block { display: flex; width: 100%; }

.link {
  color: inherit; text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 1px;
  font-weight: 600;
  transition: background .18s ease;
}
.link:hover { background: color-mix(in srgb, var(--signal) 16%, transparent); }

/* ── Site chrome ─────────────────────────────────────────────────────────── */
.topbar {
  background: var(--dark); color: var(--on-dark);
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
}
.topbar .wrap { display: flex; gap: .3rem 0; align-items: center; justify-content: center; flex-wrap: wrap; padding-block: .55rem; }
.topbar .wrap > * { padding-inline: .8rem; line-height: 1.3; }
.topbar .wrap > *:not(:last-child) { border-right: 1px solid var(--rule-dark); }
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { color: var(--signal); }
@media (max-width: 720px) {
  .topbar { font-size: .74rem; }
  .topbar .tb-info { display: none; }
}

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 92px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); flex: none; }
.brand .wordmark { font-family: var(--font-word); font-weight: 700; font-size: 1.25rem; letter-spacing: .09em; text-transform: uppercase; line-height: 1; }
.brand .sub { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; color: var(--ink-muted); text-transform: uppercase; display: block; margin-top: 4px; }

.nav { display: flex; gap: 1.75rem; margin-left: auto; align-items: center; }
.nav a {
  text-decoration: none; font-size: 1.04rem; font-weight: 600; color: var(--ink);
  padding-block: .4rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--signal); }
.masthead .btn { flex: none; }

.navtoggle { display: none; background: none; border: 2px solid var(--rule-strong); border-radius: var(--radius); width: 46px; height: 46px; cursor: pointer; margin-left: auto; align-items: center; justify-content: center; }
.navtoggle span, .navtoggle span::before, .navtoggle span::after { content: ''; display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.navtoggle span::before { position: absolute; top: -6px; }
.navtoggle span::after  { position: absolute; top: 6px; }

@media (max-width: 1080px) {
  .navtoggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
  .masthead > .wrap > .btn { display: none; }
}

/* theme switch */
.themer { display: flex; align-items: center; gap: .4rem; margin-left: 1rem; flex: none; }
.themer label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.themer select {
  font-family: var(--font-mono); font-size: .72rem; padding: .4rem .5rem;
  background: var(--surface-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
}
@media (max-width: 940px) { .themer { order: 3; margin-left: 0; } }

/* ── Mockup banner ───────────────────────────────────────────────────────── */
.mockbar { display: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { background: var(--dark); color: var(--on-dark); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4, .foot .foot-h { font-size: .74rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 1rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.foot a { color: var(--on-dark); text-decoration: none; font-size: .93rem; }
.foot a:hover { color: var(--signal); }
.foot-legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; color: var(--on-dark-muted); }

/* ── Cards / panels ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--pad);
}
.card--dark { background: var(--dark-raised); border-color: var(--rule-dark); color: var(--on-dark); }
.panel { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-raised); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { background: var(--dark); color: var(--on-dark); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-block: clamp(3rem, 7vw, 6rem);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--on-dark); }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero-sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem,2vw,1.6rem); color: var(--on-dark); margin-top: .9rem; }
.hero-body { color: var(--on-dark-muted); max-width: 46ch; margin-top: 1.25rem; font-size: 1.06rem; }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

.hero-fig { position: relative; }
.hero-fig img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-lg); }
.hero-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (max-width: 900px) { .hero-fig { max-width: 420px; } }

/* ── Next-classes strip ──────────────────────────────────────────────────── */
.upnext { background: var(--dark-raised); border-top: 1px solid var(--rule-dark); }
.upnext-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem .35rem; }
.upnext-head h2 { font-size: .78rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--signal); }
.upnext-head p { font-size: .82rem; color: var(--on-dark-muted); }
.upnext-list { display: grid; padding-bottom: 1.25rem; }
.sesh {
  display: grid; grid-template-columns: 132px 128px 1fr auto auto;
  gap: 1rem; align-items: center;
  padding: .85rem .25rem; border-top: 1px solid var(--rule-dark);
  color: var(--on-dark); text-decoration: none;
  transition: background .18s ease, padding-left .18s ease;
}
.sesh:hover { background: rgba(255,255,255,.05); padding-left: .75rem; }
.sesh-day  { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.sesh-time { font-family: var(--font-mono); font-size: .95rem; font-weight: 500; }
.sesh-name { font-weight: 600; font-size: .98rem; }
.sesh-seats{ font-family: var(--font-mono); font-size: .78rem; color: var(--on-dark-muted); letter-spacing: .04em; }
.sesh-seats.low { color: var(--signal); }
.sesh-go   { font-family: var(--font-mono); font-size: 1.1rem; color: var(--signal); }
.sesh.is-full { pointer-events: none; opacity: .42; }
.sesh.is-full .sesh-go { visibility: hidden; }
@media (max-width: 760px) {
  .sesh { grid-template-columns: 1fr auto; grid-template-areas: "day seats" "name go" "time go"; gap: .2rem .75rem; padding-block: 1rem; }
  .sesh-day{grid-area:day} .sesh-time{grid-area:time} .sesh-name{grid-area:name} .sesh-seats{grid-area:seats;text-align:right} .sesh-go{grid-area:go;align-self:center}
}

/* ── Proof bar ───────────────────────────────────────────────────────────── */
.proofbar { border-block: 1px solid var(--rule); background: var(--surface-tint); }
.proofbar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof { padding: 1.6rem clamp(.85rem,2vw,1.5rem); border-left: 1px solid var(--rule); }
.proof:first-child { border-left: 0; padding-left: 0; }
.proof b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.5rem,3vw,2.15rem); letter-spacing: -.03em; line-height: 1; }
.proof span { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .45rem; line-height: 1.35; }
@media (max-width: 780px) { .proofbar .wrap { grid-template-columns: 1fr 1fr; } }

/* ── The path (class ladder) ─────────────────────────────────────────────── */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.5rem; position: relative; }
.rail::before { content: ''; position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: var(--rule); }
@media (max-width: 860px) { .rail { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; } .rail::before { display: none; } }
@media (max-width: 480px) { .rail { grid-template-columns: 1fr; } }

.step {
  position: relative; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 0 1rem 0 0;
  color: var(--ink-muted);
  transition: color .2s ease;
}
.step:hover { color: var(--ink); }
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: .85rem;
  background: var(--surface); border: 2px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--font-mono); font-weight: 600; font-size: .92rem;
  color: var(--ink-muted);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  position: relative; z-index: 1;
}
.step-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.25; }
.step-meta  { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; margin-top: .3rem; }
.step[aria-selected="true"] .step-num { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.step[aria-selected="true"] { color: var(--ink); }
.step[aria-selected="true"] .step-meta { color: var(--signal-deep); }

.stagepanel { margin-top: 2.5rem; }
.stagepanel[hidden] { display: none; }
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px) { .stage-grid { grid-template-columns: 1fr; } }
.stage-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
.stage-fig--tall img { aspect-ratio: 3/4; }

.factrow { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 1.5rem 0; padding-block: 1rem; border-block: 1px solid var(--rule); }
.fact b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }
.fact span { display: block; font-size: .74rem; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: .15rem; }

.ticks { list-style: none; padding: 0; display: grid; gap: .65rem; }
.ticks li { position: relative; padding-left: 1.7rem; font-size: .97rem; line-height: 1.5; }
.ticks li::before { content: '›'; position: absolute; left: .15rem; top: 0; font-family: var(--font-mono); font-weight: 600; color: var(--signal-deep); font-size: 1.15rem; line-height: 1.3; }
.section--dark .ticks li::before, .card--dark .ticks li::before { color: var(--signal); }

/* ── All-classes table ───────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-raised); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
table.cmp th, table.cmp td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: .93rem; }
table.cmp thead th { background: var(--surface-tint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
table.cmp tbody th { font-family: var(--font-display); font-weight: 700; font-size: 1rem; width: 24%; }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom: 0; }
table.cmp td.num { font-family: var(--font-mono); font-weight: 600; }

/* ── Timeline (what happens in the 4 hours) ──────────────────────────────── */
.tl { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: t; }
.tl li { display: grid; grid-template-columns: 92px 1fr; gap: clamp(1rem,3vw,2rem); padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.tl li:last-child { border-bottom: 1px solid var(--rule); }
.tl .clock { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--signal-deep); padding-top: .2rem; }
.section--dark .tl .clock, .on-dark .tl .clock { color: var(--signal-on-dark); }  /* --signal was 2.47:1 on --dark */
.section--dark .tl li { border-color: var(--rule-dark); }
.tl h3 { font-size: 1.1rem; margin-bottom: .4rem; }
@media (max-width: 560px) { .tl li { grid-template-columns: 1fr; gap: .35rem; } }

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.revgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .revgrid { grid-template-columns: 1fr; } }
.rev { display: flex; flex-direction: column; gap: .75rem; }
.stars { color: var(--signal); font-size: .95rem; letter-spacing: .18em; }
.rev p { font-size: .97rem; }
.rev cite { font-style: normal; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--ink-muted); margin-top: auto; }
.card--dark .rev cite { color: var(--on-dark-muted); }

.licstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: 2rem; }
.licstrip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); filter: saturate(.85); }
@media (max-width: 620px) { .licstrip { grid-template-columns: repeat(3, 1fr); } .licstrip img:nth-child(n+4) { display: none; } }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .25rem; top: 1.1rem; font-family: var(--font-mono); font-size: 1.4rem; color: var(--signal); line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding-bottom: 1.5rem; max-width: 68ch; color: var(--ink-muted); }
.section--dark .faq summary, .section--dark .faq details { border-color: var(--rule-dark); }
.section--dark .faq details > div { color: var(--on-dark-muted); }

/* ── CALENDAR / DATE PICKER ──────────────────────────────────────────────── */
.book { display: grid; grid-template-columns: 380px 1fr; gap: clamp(1.5rem,3vw,2.5rem); align-items: start; }
@media (max-width: 980px) { .book { grid-template-columns: 1fr; } }

.pickcourse { display: grid; gap: .85rem; }
.coursecard {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface-raised); padding: var(--pad-sm);
  transition: border-color .2s ease, background .2s ease;
}
.coursecard:hover { border-color: var(--rule-strong); }
.coursecard input { position: absolute; opacity: 0; pointer-events: none; }
.coursecard:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 7%, var(--surface-raised)); }
.coursecard:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; }
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.2; }
.cc-price { font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.cc-desc { font-size: .88rem; color: var(--ink-muted); margin-top: .5rem; }
.cc-tag { display: inline-block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .45rem; border: 1px solid var(--rule-strong); border-radius: 2px; margin-top: .7rem; }
.cc-tag--best { border-color: var(--signal); color: var(--signal-deep); }

.seats-step { display: flex; align-items: center; gap: .75rem; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.stepper button { width: 46px; height: 46px; background: var(--surface-raised); border: 0; cursor: pointer; font-size: 1.25rem; font-family: var(--font-mono); line-height: 1; }
.stepper button:hover { background: var(--surface-tint); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { width: 52px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; border-inline: 2px solid var(--rule-strong); line-height: 46px; }

/* date rail */
.dates-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem .8rem; border: 1px solid var(--rule-strong); border-radius: 999px;
  background: none; cursor: pointer; color: var(--ink-muted);
  transition: all .18s ease; min-height: 36px;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.viewtoggle { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.viewtoggle button { padding: .5rem .9rem; background: var(--surface-raised); border: 0; cursor: pointer; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); min-height: 38px; }
.viewtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.daygroup { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.25rem; }
.daygroup:first-of-type { margin-top: 0; }
.daygroup > h3 { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .75rem; }
.daygroup > h3 .today { color: var(--signal-deep); }

.slot {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center;
  background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: .95rem 1.1rem; margin-bottom: .5rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.slot:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }
.slot[aria-selected="true"] { border-color: var(--signal); box-shadow: var(--shadow-lift); }
.slot-time { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.slot-sub  { display: block; font-size: .82rem; color: var(--ink-muted); margin-top: .15rem; }
.slot-seats{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-muted); text-align: right; }
.slot-seats.low { color: var(--signal-deep); font-weight: 600; }
.slot-price{ font-family: var(--font-mono); font-weight: 600; font-size: 1rem; }
.slot:disabled { opacity: .45; cursor: not-allowed; }
.slot:disabled:hover { border-color: var(--rule); box-shadow: none; }
@media (max-width: 560px) {
  .slot { grid-template-columns: 1fr auto; }
  .slot-price { grid-column: 2; }
  .slot-seats { grid-column: 1 / -1; text-align: left; }
}

/* month grid view */
.month { }
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; max-width: 540px; }
.month-nav h3 { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.month-nav button { width: 44px; height: 44px; border: 1px solid var(--rule-strong); background: var(--surface-raised); border-radius: var(--radius); cursor: pointer; font-family: var(--font-mono); font-size: 1.1rem; }
.month-nav button:hover:not(:disabled) { background: var(--surface-tint); }
.month-nav button:disabled { opacity: .3; cursor: not-allowed; }
.dow, .mgrid { max-width: 540px; }
.dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 4px; }
.dow span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); text-align: center; padding-block: .35rem; }
.mgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.mday {
  position: relative; aspect-ratio: 1; min-height: 46px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-raised);
  font-family: var(--font-mono); font-size: .88rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: border-color .18s ease, background .18s ease;
}
.mday .n { line-height: 1; }
.mday .pips { display: flex; gap: 2px; }
.mday .pips i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal); display: block; }
.mday:disabled { opacity: .3; cursor: not-allowed; background: none; border-color: transparent; }
.mday.pad { visibility: hidden; }
.mday:hover:not(:disabled) { border-color: var(--ink); }
.mday[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.mday[aria-selected="true"] .pips i { background: var(--signal); }

/* deferred path card */
.later {
  margin-top: 1.5rem; border: 2px dashed var(--rule-strong); border-radius: var(--radius-lg);
  padding: var(--pad-sm); background: none;
  display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; align-items: center;
}
@media (max-width: 620px) { .later { grid-template-columns: 1fr; } }
.later h3 { font-size: 1.05rem; margin-bottom: .35rem; }

/* sticky summary bar */
.stickybar {
  position: sticky; bottom: 0; z-index: 50;
  background: var(--dark); color: var(--on-dark);
  border-top: 2px solid var(--signal);
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.75,.3,1);
}
.stickybar.is-up { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }
.stickybar .wrap { display: flex; align-items: center; gap: 1.25rem; padding-block: .85rem; flex-wrap: wrap; }
.sb-what { font-weight: 600; font-size: .95rem; }
.sb-when { font-family: var(--font-mono); font-size: .82rem; color: var(--on-dark-muted); }
.sb-total { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; }
@media (max-width: 620px) { .stickybar .wrap { gap: .5rem; } .sb-total { margin-left: 0; } .stickybar .btn { width: 100%; } }

/* ── CHECKOUT ────────────────────────────────────────────────────────────── */
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin-bottom: 2.5rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
.steps li { flex: 1; display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; font-size: .87rem; border-right: 1px solid var(--rule); color: var(--ink-muted); }
.steps li:last-child { border-right: 0; }
.steps li b { font-family: var(--font-mono); font-size: .78rem; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-tint); flex: none; }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--signal) 8%, var(--surface-raised)); }
.steps li[aria-current="step"] b { background: var(--signal); color: var(--on-signal); }
.steps li.done b { background: var(--confirm); color: #fff; }
@media (max-width: 640px) {
  .steps li span { display: none; }
  .steps li[aria-current="step"] span { display: inline; }
  .steps li { justify-content: center; flex: 0 0 auto; padding-inline: .75rem; }
  .steps li[aria-current="step"] { flex: 1; }
}

.checkout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(1.5rem,3vw,2.5rem); align-items: start; }
@media (max-width: 980px) { .checkout { grid-template-columns: 1fr; } .summary { order: -1; } }

.summary { position: sticky; top: 96px; }
.sum-line { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; font-size: .93rem; }
.sum-line .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sum-total { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; margin-top: .5rem; border-top: 2px solid var(--ink); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; }
.sum-total .n { font-family: var(--font-mono); }

/* the multi-license upgrade — an inline row, never a modal */
.upsell { border: 1px solid var(--rule); border-radius: var(--radius); margin-block: 1rem; overflow: hidden; }
.upsell-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; padding: .85rem .95rem; background: var(--surface-tint); }
.upsell-row b { font-size: .9rem; display: block; font-family: var(--font-display); }
.upsell-row span { font-size: .78rem; color: var(--ink-muted); display: block; }
.upsell-body { padding: 0 .95rem .95rem; font-size: .86rem; color: var(--ink-muted); }
.upsell-body[hidden] { display: none; }
.states { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .75rem; }
.states i { font-family: var(--font-mono); font-style: normal; font-size: .64rem; letter-spacing: .05em; padding: .18rem .3rem; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink); }

/* THE ORDER BUMP */
.bump {
  position: relative; display: block; cursor: pointer;
  border: 2px dashed var(--signal); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--signal) 5%, var(--surface-raised));
  padding: var(--pad);
  margin-block: 1.75rem;
  transition: background .2s ease, border-style .2s ease;
}
.bump:has(input:checked) { border-style: solid; background: color-mix(in srgb, var(--signal) 11%, var(--surface-raised)); }
.bump:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; }
.bump-flag {
  position: absolute; top: -11px; left: var(--pad);
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: var(--signal); color: var(--on-signal); padding: .25rem .6rem; border-radius: 2px;
}
.bump-grid { display: grid; grid-template-columns: 30px 1fr; gap: 1rem; }
.bump input { width: 24px; height: 24px; margin-top: 3px; accent-color: var(--signal); cursor: pointer; }
.bump h3 { font-size: clamp(1.2rem,2vw,1.35rem); margin-bottom: .5rem; line-height: 1.25; }
.bump p { font-size: .93rem; margin-bottom: .6rem; }
.bump .was { text-decoration: line-through; color: var(--ink-muted); font-family: var(--font-mono); }
.bump-foot { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.bump-yes { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.bump-amt { font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; margin-left: auto; }

/* forms */
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field > label { font-size: .84rem; font-weight: 600; }
.field .hint { font-size: .78rem; color: var(--ink-muted); }
.field input, .field select {
  min-height: 50px; padding: .7rem .85rem;
  background: var(--surface-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color .18s ease;
}
.field input:hover, .field select:hover { border-color: var(--ink-muted); }
.field input:focus { border-color: var(--signal); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }

.attendee { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad-sm); margin-bottom: 1rem; background: var(--surface-raised); }
.attendee-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.attendee-head h3 { font-size: 1rem; }
.attendee-head .why { font-size: .76rem; color: var(--ink-muted); }

.paytabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.paytab {
  display: flex; align-items: center; gap: .5rem; min-height: 52px; padding: .6rem 1rem;
  border: 2px solid var(--rule); border-radius: var(--radius); background: var(--surface-raised); cursor: pointer;
  font-size: .9rem; font-weight: 600;
}
.paytab[aria-pressed="true"] { border-color: var(--ink); }
.paytab svg { width: 22px; height: 22px; }

.trustrow { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .8rem; color: var(--ink-muted); }
.trustrow span { display: flex; align-items: center; gap: .4rem; }
.trustrow svg { width: 15px; height: 15px; flex: none; color: var(--confirm); }

/* ── Quiz ────────────────────────────────────────────────────────────────── */
.quizcard { max-width: 620px; margin-inline: auto; }
.qprogress { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: 2rem; }
.qprogress i { display: block; height: 100%; background: var(--signal); transition: width .35s cubic-bezier(.2,.75,.3,1); }
.qbtns { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 2rem; }
.qbtn { min-height: 62px; font-size: 1.05rem; }

/* ── LTC guide ───────────────────────────────────────────────────────────── */
.guide { max-width: 720px; }
.guide h2 { margin-top: 3rem; margin-bottom: 1rem; }
.guide h3 { margin-top: 1.75rem; margin-bottom: .5rem; font-size: 1.15rem; }
.guide p + p { margin-top: 1rem; }
.guide ul { padding-left: 0; }
.callout { border-left: 3px solid var(--signal); background: var(--surface-tint); padding: var(--pad-sm); border-radius: 0 var(--radius) var(--radius) 0; margin-block: 1.75rem; }
.callout h3 { margin-top: 0; }

.toc { position: sticky; top: 96px; align-self: start; }
.toc ul { list-style: none; padding: 0; display: grid; gap: .55rem; border-left: 2px solid var(--rule); }
.toc a { display: block; padding-left: 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .88rem; color: var(--ink-muted); text-decoration: none; }
.toc a:hover, .toc a.on { color: var(--ink); border-left-color: var(--signal); }
.guidewrap { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem,5vw,4rem); }
@media (max-width: 900px) { .guidewrap { grid-template-columns: 1fr; } .toc { display: none; } }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 2px; background: var(--surface-tint); color: var(--ink-muted); }
.pill--signal { background: var(--signal); color: var(--on-signal); }
.pill--confirm{ background: var(--confirm); color: #fff; }

.note { font-size: .8rem; color: var(--ink-muted); }
.center { text-align: center; }
.mt0 { margin-top: 0 !important; }

.splitrule { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.splitrule::after { content: ''; height: 1px; background: var(--rule); }
.section--dark .splitrule::after { background: var(--rule-dark); }

.anno {
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  padding: .9rem 1.1rem; margin-block: 1.25rem;
  font-size: .84rem; line-height: 1.55; border-radius: 0 var(--radius) var(--radius) 0;
}
.anno b { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: .3rem; }

@media print { .masthead, .stickybar, .mockbar, .topbar { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   OFFER BLOCK — the 39-state decision, moved out of the summary rail and
   given the whole main column. This is the moment, so it gets the space.
   ═══════════════════════════════════════════════════════════════════════ */
.offer {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.offer-head {
  background: var(--dark); color: var(--on-dark);
  padding: clamp(1.25rem,3vw,1.9rem) clamp(1.1rem,3vw,2rem);
}
.offer-head .eyebrow { color: var(--signal); }
.offer-head h2 { color: var(--on-dark); margin-top: .6rem; font-size: clamp(1.4rem,3vw,2rem); line-height: 1.1; }
.offer-head p { color: var(--on-dark-muted); margin-top: .7rem; max-width: 58ch; font-size: .97rem; }

.offer-body { padding: var(--pad); }

/* two big choices */
.offer-opts { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; }
@media (max-width: 780px) { .offer-opts { grid-template-columns: 1fr; } }

.opt {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--pad-sm); background: var(--surface);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.opt:hover { border-color: var(--rule-strong); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; }
.opt:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 7%, var(--surface-raised)); }
.opt--hero { border-color: var(--rule-strong); }
.opt--hero:has(input:checked) { border-color: var(--signal); border-width: 3px; }

.opt-flag {
  position: absolute; top: -12px; right: 1.1rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--signal); color: var(--on-signal);
  padding: .3rem .6rem; border-radius: 2px;
}
.opt-top { display: flex; align-items: flex-start; gap: .8rem; }
.opt-tick {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--rule-strong); margin-top: 2px;
  display: grid; place-items: center; transition: all .2s ease;
}
.opt-tick::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background .2s ease; }
.opt:has(input:checked) .opt-tick { border-color: var(--signal); }
.opt:has(input:checked) .opt-tick::after { background: var(--signal); }
.opt-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.opt-sub { font-size: .85rem; color: var(--ink-muted); margin-top: .3rem; }
.opt-price { margin-top: 1rem; font-family: var(--font-mono); font-weight: 600; font-size: 1.6rem; letter-spacing: -.02em; }
.opt-price small { font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--ink-muted); letter-spacing: 0; }
.opt-delta { font-family: var(--font-mono); font-size: .82rem; color: var(--signal-deep); font-weight: 600; margin-top: .2rem; }

/* value stack */
.vstack { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 0; }
.vstack li { position: relative; display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .5rem 0 .5rem 1.4rem; border-bottom: 1px dashed var(--rule); font-size: .89rem; }
.vstack li:last-child { border-bottom: 0; }
.vstack li::before { content: '✓'; position: absolute; left: 0; top: .5rem; color: var(--confirm); font-weight: 700; font-size: .85rem; }
.vstack li > .v { flex: none; }
.vstack .v { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-muted); white-space: nowrap; }
.vstack li.no::before { content: '×'; color: var(--ink-muted); opacity: .5; }
.vstack li.no { color: var(--ink-muted); }

/* the per-state maths line */
.mathline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin-top: 1.25rem; padding: .9rem 1.1rem;
  background: var(--dark); color: var(--on-dark); border-radius: var(--radius);
}
.mathline b { font-family: var(--font-mono); font-size: 1.35rem; color: var(--signal); letter-spacing: -.02em; }
.mathline span { font-size: .87rem; color: var(--on-dark-muted); }

/* ── Pay-over-time strip ────────────────────────────────────────────────── */
.bnpl {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .85rem 1.1rem; margin-block: 1.25rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-tint);
  font-size: .9rem;
}
.bnpl b { font-family: var(--font-mono); font-weight: 600; }
.bnpl .tag {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--surface); padding: .25rem .5rem; border-radius: 2px;
}

/* ── Payment method grid ────────────────────────────────────────────────── */
.paygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1.5rem; }
.paymethod {
  display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  min-height: 74px; padding: .8rem .9rem;
  border: 2px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-raised); cursor: pointer; text-align: left;
  transition: border-color .18s ease, background .18s ease;
}
.paymethod:hover { border-color: var(--rule-strong); }
.paymethod[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-tint); }
.paymethod .pm-mark { height: 20px; display: flex; align-items: center; gap: .4rem; }
.paymethod .pm-mark svg { height: 20px; width: auto; }
.paymethod .pm-name { font-weight: 600; font-size: .88rem; }
.paymethod .pm-note { font-size: .72rem; color: var(--ink-muted); line-height: 1.3; }
.paymethod .pm-note b { color: var(--signal-deep); font-family: var(--font-mono); }

/* ── Security panel ─────────────────────────────────────────────────────── */
.secure {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface-tint);
  padding: var(--pad-sm); margin-top: 1.5rem;
}
.secure-top { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-family: var(--font-display); font-size: .98rem; }
.secure-top svg { width: 18px; height: 18px; color: var(--confirm); flex: none; }
.secure p { font-size: .84rem; color: var(--ink-muted); margin-top: .5rem; }
.secure-marks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.secure-marks .cardmark {
  height: 26px; min-width: 40px; padding: 0 .4rem;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--surface-raised);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-muted);
}
.secure-marks .cardmark svg { height: 14px; width: auto; }
.trustline { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; margin-top: .9rem; font-size: .78rem; color: var(--ink-muted); }
.trustline span { display: flex; align-items: center; gap: .35rem; }
.trustline svg { width: 13px; height: 13px; flex: none; color: var(--confirm); }

/* summary: compact upgrade confirmation (persuasion now lives in .offer) */
.sum-chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem; margin-block: .85rem;
  border-radius: var(--radius); font-size: .84rem;
  background: color-mix(in srgb, var(--confirm) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--confirm) 35%, transparent);
}
.sum-chip svg { width: 15px; height: 15px; color: var(--confirm); flex: none; }
.sum-chip.nudge { background: color-mix(in srgb, var(--signal) 12%, transparent); border-color: var(--signal); }
.sum-chip.nudge svg { color: var(--signal-deep); }
.sum-chip button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--signal-deep); cursor: pointer; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PATH — Intro to Shooting → LTC Course → Continue training.
   Lives on the classes page, not the home page. The middle step is the one
   almost everyone takes, so it is the one that dominates.
   ═══════════════════════════════════════════════════════════════════════ */
.journey { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 0; align-items: stretch; margin-top: 2.5rem; }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; gap: 0; } }

.jstep {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface-raised); padding: var(--pad);
  display: flex; flex-direction: column;
}
.jstep--main { border: 2px solid var(--ink); background: var(--surface-raised); box-shadow: var(--shadow-lift); }
.jstep-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 2px; margin-bottom: .9rem;
  background: var(--surface-tint); color: var(--ink-muted);
}
.jstep--main .jstep-tag { background: var(--signal); color: var(--on-signal); }
.jstep h3 { font-size: 1.15rem; line-height: 1.2; }
.jstep--main h3 { font-size: clamp(1.25rem,2vw,1.5rem); }
.jstep .opt-note { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: .4rem; }
.jstep p { font-size: .89rem; color: var(--ink-muted); margin-top: .7rem; }
.jstep .jfoot { margin-top: auto; padding-top: 1.1rem; }

.jarrow { display: grid; place-items: center; padding-inline: .85rem; color: var(--rule-strong); }
.jarrow svg { width: 26px; height: 26px; }
@media (max-width: 900px) {
  .jarrow { padding: .6rem 0; transform: rotate(90deg); }
  .jarrow svg { width: 22px; height: 22px; }
}

.jnote {
  margin-top: 1.5rem; padding: var(--pad-sm);
  border-left: 3px solid var(--signal); background: var(--surface-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}
.jnote b { font-family: var(--font-display); }

/* two LTC options inside the middle step */
.jpair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
@media (max-width: 480px) { .jpair { grid-template-columns: 1fr; } }
.jpair a {
  display: block; text-decoration: none;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: .7rem .8rem; transition: border-color .18s ease, background .18s ease;
}
.jpair a:hover { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 7%, transparent); }
.jpair .n { display: block; font-weight: 700; font-family: var(--font-display); font-size: .93rem; line-height: 1.2; }
.jpair .p { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; margin-top: .3rem; }

/* ── Side-by-side comparison cards ──────────────────────────────────────── */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2.5vw,1.75rem); margin-top: 2.5rem; align-items: start; }
@media (max-width: 820px) { .vs { grid-template-columns: 1fr; } }
.vscard {
  border: 2px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface-raised); overflow: hidden;
  display: flex; flex-direction: column;
}
.vscard--lead { border-color: var(--signal); }
.vscard-head { padding: var(--pad); border-bottom: 1px solid var(--rule); }
.vscard--lead .vscard-head { background: color-mix(in srgb, var(--signal) 9%, transparent); }
.vscard-head h3 { font-size: clamp(1.15rem,2vw,1.4rem); line-height: 1.15; }
.vscard-price { font-family: var(--font-mono); font-weight: 600; font-size: 2rem; letter-spacing: -.03em; margin-top: .6rem; }
.vscard-price small { font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-muted); letter-spacing: 0; display: block; margin-top: .1rem; }
.vscard-body { padding: var(--pad); display: flex; flex-direction: column; flex: 1; }
.vscard-foot { margin-top: auto; padding-top: 1.35rem; }

/* the shared-vs-different split */
.samediff { display: grid; gap: .1rem; margin-top: 1rem; }
.samediff dt {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); padding-top: .9rem; margin-top: .5rem; border-top: 1px solid var(--rule);
}
.samediff dd { margin: .3rem 0 0; font-size: .92rem; }
.samediff dd.hi { font-family: var(--font-mono); font-weight: 600; color: var(--signal-deep); }

/* ── The real reciprocity map (client asset from the live home page) ─────── */
.mapfig { margin: 0; }
.mapfig img { width: 100%; height: auto; border-radius: var(--radius); }
.mapfig figcaption { margin-top: .9rem; font-size: .84rem; color: var(--ink-muted); }
.section--dark .mapfig figcaption { color: var(--on-dark-muted); }
.mapfig--card { background: #fff; padding: clamp(.75rem,2vw,1.5rem); border-radius: var(--radius-lg); border: 1px solid var(--rule); }

.mapkey { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; font-size: .85rem; }
.mapkey span { display: flex; align-items: center; gap: .45rem; }
.mapkey i { width: 13px; height: 13px; border-radius: 3px; display: block; flex: none; }
.mapkey i.yes { background: #34b233; }
.mapkey i.no  { background: #e03a52; }

/* ── Featured On — full colour, large, on a light band under the hero ───── */
.presswall { background: var(--surface-raised); border-block: 1px solid var(--rule); }
.presswall .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 6vw, 4.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.presswall .lbl {
  width: 100%; text-align: center; margin-bottom: .35rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted);
}
.presswall img {
  height: clamp(44px, 7vw, 74px); width: auto; max-width: 100%;
  object-fit: contain;
}
.presswall img.on-white { background: #fff; padding: .35rem .5rem; border-radius: 3px; }
@media (max-width: 560px) { .presswall .wrap { gap: 1.5rem 2rem; } .presswall img { height: 40px; } }

/* ── LTC035 compliance bar — every page except checkout ─────────────────── */
.ltcbar {
  background: var(--confirm); color: #fff;
  font-size: .78rem; line-height: 1.35;
}
.ltcbar .wrap { display: flex; align-items: center; justify-content: center; gap: .6rem; padding-block: .55rem; text-align: center; }
.ltcbar svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 720px) { .ltcbar { font-size: .68rem; } .ltcbar .wrap { gap: .45rem; padding-block: .5rem; } }

/* On checkout the same line appears as a static panel, not a bar. */
.ltcnote {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem 1rem; margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--confirm) 40%, transparent);
  background: color-mix(in srgb, var(--confirm) 10%, transparent);
  border-radius: var(--radius); font-size: .84rem; line-height: 1.45;
}
.ltcnote svg { width: 17px; height: 17px; flex: none; color: var(--confirm); margin-top: 1px; }

/* ── Sticky book bar — all pages except checkout ────────────────────────── */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--dark); color: var(--on-dark);
  border-top: 2px solid var(--signal);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 28px -14px rgba(0,0,0,.5);
}
.bookbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.bb-guar { display: flex; align-items: center; gap: .5rem; font-size: .87rem; font-weight: 600; }
.bb-guar svg { width: 16px; height: 16px; color: var(--signal); flex: none; }
.bookbar .btn { flex: none; }
body:has(.bookbar) { padding-bottom: var(--bookbar-h, 88px); }
@media (max-width: 620px) {
  .bookbar .wrap { gap: .6rem; padding-block: .6rem; }
  .bb-guar { font-size: .78rem; line-height: 1.25; }
  /* The always-on CTA: the one control that has to stay legible at arm's length. */
  .bookbar .btn { min-height: 52px; padding-inline: 1.3rem; font-size: .98rem; }
}
@media print { .bookbar { display: none; } }

/* ── Guarantee band in the footer ───────────────────────────────────────── */
.guarbar {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.4rem; margin-bottom: 2.5rem;
  border: 1px solid var(--rule-dark); border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
}
.guarbar svg { width: 26px; height: 26px; color: var(--signal); flex: none; }
.guarbar b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.guarbar span { display: block; font-size: .87rem; color: var(--on-dark-muted); margin-top: .3rem; max-width: 76ch; }
@media (max-width: 560px) { .guarbar { flex-direction: column; gap: .6rem; } }

/* guarantee as an inline seal, for use mid-page */
.guarseal {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .85rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--confirm) 45%, transparent);
  background: color-mix(in srgb, var(--confirm) 12%, transparent);
  font-size: .84rem; font-weight: 600;
}
.guarseal svg { width: 16px; height: 16px; color: var(--confirm); flex: none; }
.section--dark .guarseal { border-color: var(--rule-dark); background: rgba(255,255,255,.06); }
.section--dark .guarseal svg { color: var(--signal); }

/* ── Header pickers (language + skin) ───────────────────────────────────── */
.picker { display: flex; align-items: center; flex: none; }
.picker select {
  font-family: var(--font-mono); font-size: .72rem; padding: .4rem .45rem;
  background: var(--surface-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); cursor: pointer; max-width: 108px;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1080px) {
  .picker { margin-top: .75rem; }
  .picker select { max-width: none; width: 100%; }
}

/* ── Guarantee box under the pay button ─────────────────────────────────── */
.guarbox {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: var(--pad-sm); margin-top: 1rem;
  border: 2px solid var(--confirm); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--confirm) 8%, transparent);
}
.guarbox svg { width: 26px; height: 26px; color: var(--confirm); flex: none; }
.guarbox b { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.guarbox p { font-size: .87rem; color: var(--ink-muted); margin-top: .35rem; }
@media (max-width: 520px) { .guarbox { flex-direction: column; gap: .5rem; } }

/* ═══ SEPARATION FIXES ══════════════════════════════════════════════════════
   Spans inside label-based cards default to inline and run together. Every
   element that reads as its own line gets an explicit block.
   ═══════════════════════════════════════════════════════════════════════ */
.opt-name, .opt-sub, .opt-price, .opt-delta, .opt-top > span:last-child { display: block; }
.opt-price small { display: block; margin-top: .3rem; line-height: 1.35; }
.opt-price { line-height: 1.05; }
.opt-delta { margin-top: .45rem; line-height: 1.35; }
.opt .vstack { margin-top: 1.15rem; }
.opt-flag { z-index: 2; }
.offer-opts { padding-top: .5rem; }

.cc-name, .cc-price, .cc-desc, .cc-tag { display: block; }
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cc-top .cc-name { flex: 1; }
.cc-top .cc-price { flex: none; }

.bump-yes, .bump-amt { display: block; }
.bump-foot { align-items: baseline; }

.jstep h3, .jstep .opt-note { display: block; }
.jpair .n, .jpair .p { display: block; }

.vscard-price small { display: block; }

.paymethod .pm-name, .paymethod .pm-note { display: block; }

.sesh-day, .sesh-time, .sesh-name, .sesh-seats { display: block; }
@media (min-width: 761px) { .sesh-day, .sesh-time, .sesh-name, .sesh-seats { display: block; } }

/* header pickers need room for the longest label */
.picker select { max-width: none; min-width: 0; }
@media (min-width: 1081px) { .nav { gap: 1.25rem; } .picker select { min-width: 0; width: auto; } }

/* stop long unbroken strings blowing out narrow columns */
.wrap, .card, .opt, .vscard, .jstep, .attendee { min-width: 0; }
h1, h2, h3, h4, p, li, dd, td, th { overflow-wrap: anywhere; }
.mono, .price, .sesh-time, .slot-time { overflow-wrap: normal; }

/* ── Review cards with the reviewer's own photo ─────────────────────────── */
.rev { margin: 0; }
.rev blockquote { margin: 0; font-size: .97rem; }
.revby { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: 1rem; }
.revby img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.revby > span { display: flex; flex-direction: column; line-height: 1.3; }
.revby b { font-size: .9rem; font-family: var(--font-display); }
.revby span span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* ── Languages page ─────────────────────────────────────────────────────── */
.langgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.langcard {
  border: 1px solid var(--rule); border-left: 3px solid var(--signal);
  border-radius: var(--radius-lg); background: var(--surface-raised);
  padding: var(--pad); display: flex; flex-direction: column;
}
.langcard-head { padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.langname { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.langnative { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; line-height: 1.15; margin-top: .3rem; }
.langcard .ticks { font-size: .92rem; }
.langline { font-size: .86rem; color: var(--ink-muted); margin-top: 1rem; margin-bottom: 1.25rem; flex: 1; }

/* ── Big numbered steps (LTC guide) ─────────────────────────────────────── */
.bigsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .bigsteps { grid-template-columns: 1fr; } }
.bigstep {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface-raised); padding: var(--pad);
  display: flex; flex-direction: column;
}
.bigstep-n {
  font-family: var(--font-mono); font-weight: 600; font-size: 3.2rem; line-height: 1;
  color: var(--signal); opacity: .22; letter-spacing: -.04em;
  position: absolute; top: .6rem; right: 1rem;
}
.bigstep h3 { font-size: 1.2rem; margin-bottom: .55rem; max-width: 14ch; }
.bigstep p { font-size: .92rem; color: var(--ink-muted); }
.bigstep .who { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .8rem; display: block; }
.bigstep .bs-foot { margin-top: auto; padding-top: 1.25rem; }
.bigstep--us { border-color: var(--signal); border-width: 2px; }
.bigstep--us .who { color: var(--signal-deep); }

/* qualify checklist — visual, not a wall of bullets */
.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .6rem; margin-top: 2rem; }
.checkitem {
  display: grid; grid-template-columns: 26px 1fr; gap: .7rem; align-items: start;
  padding: .95rem 1.05rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-raised); font-size: .92rem; line-height: 1.4;
}
.checkitem svg { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.checkitem.yes svg { color: var(--confirm); }
.checkitem.no  svg { color: var(--signal-deep); }
.checkitem b { display: block; }
.checkitem span { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .15rem; }

/* two-up fact panels */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

/* ═══ RESPONSIVE HARDENING ══════════════════════════════════════════════════
   Grid and flex children default to min-width:auto, so one wide descendant
   pushes the whole column past the viewport. Every layout child gets min-width:0.
   ═══════════════════════════════════════════════════════════════════════ */
.checkout > *, .book > *, .stage-grid > *, .vs > *, .duo > *, .hero-grid > *,
.journey > *, .offer-opts > *, .bigsteps > *, .langgrid > *, .revgrid > *,
.foot-grid > *, .guidewrap > *, .bump-grid > *, .checkitem > *, .vstack > li,
.sum-line > *, .attendee > *, .grid2 > *, .paygrid > *, .seats-step > * { min-width: 0; }

/* the step bar has to survive 320px */
@media (max-width: 420px) {
  .steps li { padding-inline: .5rem; gap: .4rem; font-size: .8rem; }
  .steps li b { width: 21px; height: 21px; font-size: .7rem; }
  .steps li[aria-current="step"] span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
}

/* inputs and selects must never define the column width */
input, select, textarea { max-width: 100%; min-width: 0; }
.field, .field > input, .field > select { min-width: 0; }

/* long mono strings (times, codes) shouldn't force a wide column */
.sesh, .slot, .sum-line { min-width: 0; }

/* wide tables scroll inside their own container, never the page */
.tablewrap { max-width: 100%; }
table.cmp { min-width: min(720px, 100%); }
@media (max-width: 620px) { table.cmp { min-width: 560px; } }

/* belt and braces: nothing scrolls the page sideways */
html, body { max-width: 100%; overflow-x: clip; }

/* ═══ CHECKOUT — Square, security, seal ═════════════════════════════════════ */
.sqlogo { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--ink); vertical-align: middle; }
.sqlogo i { display: block; width: 7px; height: 7px; border-radius: 1.5px; background: var(--surface-raised); }
.sqlogo--lg { width: 30px; height: 30px; border-radius: 7px; }
.sqlogo--lg i { width: 12px; height: 12px; border-radius: 2.5px; }

.sqstrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .45rem; margin-top: .7rem; font-size: .78rem; color: var(--ink-muted); }
.sqstrap svg { width: 13px; height: 13px; color: var(--confirm); }
.sqstrap b { color: var(--ink); font-family: var(--font-display); }
.sqstrap .sep { opacity: .5; }

.sqstatus { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-muted); margin-bottom: .75rem; }
.sq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.sqstatus[data-kind="ready"] .sq-dot, .sqstatus[data-kind="token"] .sq-dot { background: var(--confirm); }
.sqstatus[data-kind="error"] .sq-dot { background: var(--signal-deep); }
.sq-card { min-height: 0; margin-bottom: .5rem; }
.sq-card:empty { display: none; }
.testcards { margin-top: .75rem; }
.sqbtn { margin-block: .75rem; min-height: 48px; }
.sqbtn[hidden], #pay-sqbtn[hidden], #pay-now[hidden] { display: none; }
.sqresult[hidden] { display: none; }
.sqresult { margin-top: 1rem; padding: var(--pad-sm); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface-tint); font-size: .86rem; display: grid; gap: .5rem; }
.sqresult code { font-family: var(--font-mono); font-size: .78rem; word-break: break-all; background: var(--surface-raised); padding: .4rem .6rem; border-radius: 3px; display: block; }
.sqresult span { color: var(--ink-muted); }

/* brand marks on payment tiles */
.paymethod .pm-mark { height: 22px; display: flex; align-items: center; color: var(--ink); }
.paymethod .pm-mark svg { height: 22px; width: 22px; }
.mark-afterpay { font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: -.02em; background: #B2FCE4; color: #000; padding: .2rem .45rem; border-radius: 4px; line-height: 1; }
.mark-cashapp { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #00D632; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .95rem; line-height: 1; }

/* security panel */
.secure-head { display: flex; gap: .9rem; align-items: flex-start; }
.secure-lock { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--confirm) 14%, transparent); color: var(--confirm); }
.secure-lock svg { width: 22px; height: 22px; }
.secure-head b { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.secure-head span { display: block; font-size: .85rem; color: var(--ink-muted); margin-top: .25rem; }
.secure-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.secure-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; padding: .35rem .6rem; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface-raised); color: var(--ink); }
.secure-badge svg { width: 13px; height: 13px; color: var(--confirm); }
.secure-marks { margin-top: .75rem; }

/* the guarantee seal */
.seal { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: center; margin-top: 1.5rem; padding: var(--pad); border: 2px solid var(--confirm); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--confirm) 7%, var(--surface-raised)); }
.seal-badge { position: relative; width: 96px; height: 96px; color: var(--confirm); }
.seal-badge svg { width: 100%; height: 100%; }
.seal-badge span { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: .62rem; letter-spacing: .18em; color: var(--confirm); background: var(--surface-raised); width: max-content; margin-inline: auto; padding: .1rem .4rem; border-radius: 2px; }
.seal-body .eyebrow { color: var(--confirm); }
.seal-body b { display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.2; margin-top: .3rem; }
.seal-body p { font-size: .88rem; color: var(--ink-muted); margin-top: .5rem; }
@media (max-width: 520px) { .seal { grid-template-columns: 1fr; justify-items: start; } }

/* SMS opt-in on the attendee step.
   It was a browser-default checkbox and one long grey sentence, which read as
   small print to skim past rather than a choice to make. It is now a card with
   a 24px box, a benefit line people can answer yes to, and the disclosure kept
   underneath where the law wants it. The box stays unchecked until the person
   checks it — an opt-in that arrives pre-ticked is not consent, and the whole
   point of the card is that opting in is a visible, deliberate act. */
.consent { display: block; margin-top: 1rem; padding: .9rem 1rem; border: 2px solid var(--rule); border-radius: var(--radius); background: var(--surface-raised); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.consent:hover { border-color: color-mix(in srgb, var(--signal) 55%, var(--rule)); }
.consent:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.consent__row { display: flex; gap: .75rem; align-items: flex-start; }
.consent input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--signal); cursor: pointer; }
.consent__title { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.consent__lede { display: block; margin-top: .2rem; font-size: .88rem; line-height: 1.45; color: var(--ink-muted); }
/* Spans, not a <ul>: a label may only hold phrasing content, and these sit
   inside the label so that clicking any of them ticks the box. */
.consent__list { display: block; margin-top: .5rem; }
.consent__item { display: block; position: relative; padding-left: 1.3rem; margin-top: .25rem; font-size: .88rem; line-height: 1.4; }
.consent__item::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--confirm); font-weight: 700; }
.consent__fine { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.45; color: var(--ink-muted); }
/* Once ticked, the card confirms the choice rather than staying neutral. */
.consent:has(input:checked) { border-color: var(--confirm); background: color-mix(in srgb, var(--confirm) 8%, var(--surface-raised)); }

/* site-wide guarantee seal (hero, footer band) */
.guarseal { padding: .6rem 1rem; font-size: .9rem; }
.guarseal svg { width: 18px; height: 18px; }
.guarbar { border-left-width: 4px; padding: var(--pad); }
.guarbar svg { width: 34px; height: 34px; }
.guarbar b { font-size: 1.15rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   UPGRADE LAYER — the navy design, done properly. Loaded last, wins.
   ═══════════════════════════════════════════════════════════════════════ */
body { font-size: 19px; }
.d-xl { font-size: clamp(2.15rem, 4.6vw, 3.6rem); line-height: 1.1; letter-spacing: -.016em; }
.d-lg { font-size: clamp(1.72rem, 3.2vw, 2.5rem); line-height: 1.16; }
.d-md { font-size: clamp(1.4rem, 2.1vw, 1.78rem); line-height: 1.24; }
.lede { color: var(--ink-muted); font-size: 1.12rem; line-height: 1.62; }

/* section eyebrow: short red bar, no trailing hairline */
.splitrule { display: flex; align-items: center; gap: .8rem; }
.splitrule::before { content: ''; width: 34px; height: 4px; border-radius: 2px; background: var(--signal); flex: none; }
.splitrule::after { display: none; }
.eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; font-size: .72rem; }

/* buttons: pills */
/* Weight, not glow. The old shadow was the button's own red bled outwards, which
   softened its edge and added to the halo white-on-red already produces. A neutral
   shadow gives the button a hard edge and more physical presence — it reads as a
   heavier object while being calmer to look at. Weight stays 700 from .btn. */
.btn { border-radius: 999px; box-shadow: 0 1px 0 rgba(23,24,27,.10), 0 12px 26px -14px rgba(23,24,27,.55); }
.btn:hover { --btn-bg: var(--signal-deep); border-color: var(--signal-deep); }
.btn--ghost, .btn--dark { box-shadow: none; }
.btn--dark { --btn-bg: var(--dark); border-color: var(--dark); }
.btn--dark:hover { --btn-bg: var(--dark-raised); border-color: var(--dark-raised); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--dark); border-color: #fff; box-shadow: none; }
.btn--white:hover { --btn-bg: #F2F5F9; border-color: #F2F5F9; color: var(--dark); }

/* cards */
.card, .vscard, .jstep, .langcard, .bigstep, .attendee, .opt, .coursecard, .slot, .checkitem, .panel {
  box-shadow: var(--shadow);
}
.card--dark { box-shadow: none; }

/* header */
.masthead { background: color-mix(in srgb, var(--surface-raised) 94%, transparent); }
.masthead .wrap { min-height: 80px; }
/* Logo lockup. Both lines are 15 characters, so the sub is tracked to finish
   flush with the wordmark rather than stopping short of it. */
.brand > span { display: flex; flex-direction: column; align-items: stretch; }
.brand .wordmark { font-size: 1.3rem; letter-spacing: .035em; color: var(--dark); line-height: 1; }
.brand .sub { color: var(--signal); font-weight: 600; font-size: .64rem; letter-spacing: .768em;
  margin-top: 5px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--signal) 28%, transparent);
  text-indent: .768em; text-align: center; white-space: nowrap; }
.mark path { stroke: var(--dark); }
.nav a { font-family: var(--font-display); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--signal); border-bottom-color: var(--signal); }
.topbar { background: var(--dark-deep); }
.ltcbar { background: var(--dark); border-bottom: 1px solid var(--rule-dark); }
.ltcbar svg { color: #7FD1A6; }

/* ── HERO with photograph ───────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dark-deep); }
.hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 38%; }
.hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,35,58,.96) 0%, rgba(16,35,58,.88) 45%, rgba(16,35,58,.45) 100%); }
@media (max-width: 900px) { .hero-bg::after { background: linear-gradient(180deg, rgba(16,35,58,.9) 0%, rgba(16,35,58,.95) 100%); } }
.hero-grid { padding-block: clamp(4rem, 9vw, 7.5rem); grid-template-columns: 1.1fr .9fr; }
.hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero h1 em { color: var(--signal-on-dark); }
.hero-body { color: var(--on-dark-muted); font-size: 1.1rem; }
.hero .eyebrow--signal { color: var(--signal-on-dark); }
.hero-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.hero-stat { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1.1rem; min-width: 128px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); backdrop-filter: blur(6px); }
.hero-stat b { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; line-height: 1; }
/* Direct child only: the figure above it holds a [data-price] span of
   its own, which this rule used to shrink to caption size. */
.hero-stat > span { font-size: .74rem; color: var(--on-dark-muted); letter-spacing: .02em; }
.hero-fig img { border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }

/* next-classes strip: light, card rows, and the room the screenshot asked for */
.upnext { background: var(--surface); border-top: 0; }
.upnext .wrap { padding-block: 1.75rem 2.5rem; }
.upnext-head { padding-block: 0 .9rem; }
.upnext-head h2 { color: var(--signal); }
.upnext-head p { color: var(--ink-muted); }
.upnext-list { gap: .5rem; padding-bottom: 0; }
.sesh { background: var(--surface-tint); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink);
  padding: .85rem 1.1rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sesh:hover { background: var(--surface-raised); border-color: var(--rule-strong); box-shadow: var(--shadow); padding-left: 1.1rem; transform: translateY(-1px); }
.sesh-day { color: var(--signal); }
.sesh-seats { color: var(--ink-muted); }
.sesh-seats.low { color: var(--signal); }
.sesh-seats.open { color: var(--confirm); }
.sesh-go { color: var(--dark); }
.upnext-more { margin-top: 1.25rem; }

/* proof bar */
.proofbar { background: var(--dark); border: 0; color: #fff; }
.proof { border-left-color: var(--rule-dark); }
.proof b { color: #fff; }
.proof span { color: var(--on-dark-muted); }

/* class cards on home: two clearly different objects */
.vscard { border: 0; }
.vscard--basic .vscard-head { background: var(--surface-tint); }
.vscard--lead { background: var(--dark); color: #fff; box-shadow: var(--shadow-lift); }
.vscard--lead .vscard-head { background: var(--dark-raised); border-color: var(--rule-dark); }
.vscard--lead h3, .vscard--lead .vscard-price { color: #fff; }
.vscard--lead .vscard-price small, .vscard--lead .samediff dt, .vscard--lead .lede { color: var(--on-dark-muted); }
.vscard--lead .samediff dd.hi { color: var(--signal-on-dark); }
.vscard--lead .samediff dt { border-color: var(--rule-dark); }
.vscard--lead .ticks li::before { color: var(--signal-on-dark); }
.vscard--lead .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.35); }
.vscard--lead .btn--ghost:hover { border-color: #fff; color: #fff; }
.vscard--lead .eyebrow--signal { color: var(--signal-on-dark); }
.vscard-head { padding-bottom: 1.2rem; }
.vscard-price { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; }

/* states legend like the live site */
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 760px) { .legend { grid-template-columns: 1fr; } }
.legend-item { padding: var(--pad-sm); border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.legend-item .lt { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; margin-bottom: .5rem; }
.legend-item .lt i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.legend-item .lt i.yes { background: #34b233; } .legend-item .lt i.no { background: #e03a52; }
.legend-item p { font-size: .9rem; color: var(--ink-muted); }

/* live fire block with the range photo */
.livefire { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px) { .livefire { grid-template-columns: 1fr; } }
.livefire figure { margin: 0; position: relative; }
.livefire img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.livefire figcaption { position: absolute; left: 1rem; bottom: 1rem; background: rgba(16,35,58,.85); color: #fff; padding: .5rem .8rem; border-radius: 8px; font-size: .78rem; }

/* getting-here: live map + directions */
.mapembed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--surface-tint); }
.mapembed iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.dirbtns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.dirbtn { display: inline-flex; align-items: center; gap: .55rem; min-height: 50px; padding: .65rem 1.1rem; border-radius: 999px;
  background: var(--surface-raised); border: 2px solid var(--rule-strong); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .92rem; transition: border-color .18s ease, transform .18s ease; }
.dirbtn:hover { border-color: var(--dark); transform: translateY(-1px); }
.dirbtn svg { width: 22px; height: 22px; flex: none; }
.section--dark .dirbtn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff; }
.section--dark .dirbtn:hover { border-color: #fff; }
.addr { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.35; }

/* reviews */
.revgrid .card { border: 0; }
.stars { color: #F5B301; }

/* ── UPSELL POPUP — desktop dialog, mobile bottom sheet ─────────────────── */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.is-open { display: block; }
.modal-bg { position: absolute; inset: 0; background: rgba(16,35,58,.72); backdrop-filter: blur(3px); }
.sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(600px, calc(100% - 2rem));
  max-height: min(92vh, 860px); display: flex; flex-direction: column; background: var(--surface-raised);
  border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
.sheet-head { background: var(--dark); color: #fff; padding: var(--pad); }
.sheet-head .eyebrow { color: var(--signal-on-dark); }
.sheet-head h2 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-top: .5rem; line-height: 1.15; }
.sheet-head p { color: var(--on-dark-muted); margin-top: .6rem; font-size: .95rem; }
.sheet-body { padding: var(--pad); overflow: auto; flex: 1; }
.sheet-body .mapfig img { border-radius: var(--radius); }
.sheet-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin-top: 1rem; }
.sheet-facts div { background: var(--surface-tint); border-radius: var(--radius); padding: .7rem .8rem; }
.sheet-facts b { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--dark); }
.sheet-facts span { font-size: .74rem; color: var(--ink-muted); }
.sheet-foot { padding: var(--pad-sm) var(--pad); border-top: 1px solid var(--rule); background: var(--surface-raised); display: grid; gap: .6rem; }
.sheet-foot .why { text-align: center; font-size: .78rem; color: var(--ink-muted); }
.sheet-close { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.3rem; cursor: pointer; }
@media (max-width: 640px) {
  .sheet { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .sheet-facts { grid-template-columns: 1fr 1fr 1fr; }
  .sheet-foot { padding-bottom: calc(var(--pad-sm) + env(safe-area-inset-bottom, 0)); }
}
@media (prefers-reduced-motion: no-preference) {
  .modal.is-open .sheet { animation: sheetIn .32s cubic-bezier(.2,.75,.3,1); }
  @keyframes sheetIn { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
  @media (max-width: 640px) { @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } }
}
body.modal-open { overflow: hidden; }

/* ── SECURITY: logos, not text ──────────────────────────────────────────── */
.paylogos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem; }
.paylogo { height: 32px; min-width: 50px; padding: 0 .55rem; border-radius: 6px; border: 1px solid var(--rule); background: #fff; display: grid; place-items: center; }
.paylogo svg { height: 18px; width: auto; }
.paylogo--sq { background: var(--ink); border-color: var(--ink); }
.paylogo--ap { background: #B2FCE4; border-color: #B2FCE4; font-family: var(--font-display); font-weight: 800; font-size: .74rem; color: #000; letter-spacing: -.02em; }
.paylogo--ca { background: #00D632; border-color: #00D632; color: #fff; font-family: var(--font-display); font-weight: 800; }
.paylogo--apple { background: #000; border-color: #000; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .78rem; gap: .25rem; display: inline-flex; }
.paylogo--gpay { font-family: var(--font-display); font-weight: 600; font-size: .78rem; display: inline-flex; gap: .25rem; align-items: center; }
.secure { text-align: center; }
.secure-line { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink-muted); }
.secure-line svg { width: 15px; height: 15px; color: var(--confirm); }
.secure-line b { color: var(--ink); }

/* sum-chip in navy */
.sum-chip.nudge { background: rgba(180,36,60,.08); }
.opt-flag, .bump-flag, .jstep--main .jstep-tag { background: var(--signal); color: #fff; }

/* footer */
.foot { background: var(--dark-deep); }
.guarbar { background: rgba(255,255,255,.05); border-left-color: var(--signal); }
.bookbar { background: var(--dark-deep); }

/* misc */
.tablewrap { box-shadow: var(--shadow); border: 0; }
table.cmp thead th { background: var(--dark); color: #fff; }
table.cmp tbody tr:nth-child(even) { background: var(--surface-tint); }
.faq summary::after { color: var(--signal); }
.section--dark .faq summary::after { color: var(--signal-on-dark); }
.qprogress i { background: var(--signal); }

/* mobile hero: single column (the upgrade layer's 2-col rule outranked the base media query) */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-block: clamp(2.5rem, 8vw, 4rem); }
  .hero .d-xl { font-size: clamp(1.85rem, 7.4vw, 2.5rem); }
  .hero-fig { max-width: 360px; }
  .hero-stat { min-width: calc(50% - .3rem); flex: 1; }
  .hero .eyebrow { letter-spacing: .08em; }
}
@media (max-width: 480px) { .hero-stat { min-width: calc(50% - .3rem); } }

/* ═══ BEST VALUE + PER-STATE ════════════════════════════════════════════════ */
.ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(38deg); background: var(--signal); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem 2.6rem; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); z-index: 2; pointer-events: none; }
.vscard, .opt, .coursecard { position: relative; overflow: hidden; }
.perstate { display: flex; align-items: baseline; gap: .55rem; margin-top: .6rem; }
.perstate b { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; color: var(--signal); letter-spacing: -.02em; line-height: 1; }
.perstate span { font-size: .82rem; color: var(--ink-muted); }
.vscard--lead .perstate b { color: var(--signal-on-dark); } .vscard--lead .perstate span { color: var(--on-dark-muted); }
.opt--hero .opt-price { color: var(--dark); }
.cc-tag--best { background: var(--signal); color: #fff; border-color: var(--signal); }

/* legend CTA band (moved out of the NO card) */
.legend-cta { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center;
  background: var(--dark); color: #fff; border-radius: var(--radius-lg); padding: var(--pad); box-shadow: var(--shadow-lift); }
@media (max-width: 720px) { .legend-cta { grid-template-columns: 1fr; } }
.legend-cta h3 { color: #fff; font-size: clamp(1.15rem,2.2vw,1.5rem); line-height: 1.2; }
.legend-cta p { color: var(--on-dark-muted); font-size: .92rem; margin-top: .35rem; }
.legend-cta .btn { white-space: nowrap; }

/* ═══ VALUE STACK — money saved ═════════════════════════════════════════════ */
.vstack2 { list-style: none; padding: 0; margin: 1.5rem 0 0; border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid var(--rule-dark); }
.vstack2 li { display: grid; grid-template-columns: 34px 1fr auto; gap: .8rem; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--rule-dark); font-size: .95rem; }
.vstack2 li:first-child { border-top: 0; }
.vstack2 svg { width: 22px; height: 22px; color: var(--signal-on-dark); }
.vstack2 .v { font-family: var(--font-mono); color: var(--on-dark-muted); text-decoration: line-through; font-size: .9rem; }
.vstack2 li.total { background: var(--signal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.vstack2 li.total .v { color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); }
.vstack2 li.total svg { color: #fff; }
.vstack2 li span small { display: block; font-size: .74rem; color: var(--on-dark-muted); font-weight: 400; }

/* included-on-the-day icon grid */
.kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1.5rem; }
@media (max-width: 560px) { .kit { grid-template-columns: repeat(2, 1fr); } }
.kit div { background: rgba(255,255,255,.07); border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: .9rem .7rem; text-align: center; }
.kit svg { width: 30px; height: 30px; margin-inline: auto; color: var(--signal-on-dark); }
.kit b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .84rem; margin-top: .5rem; color: #fff; line-height: 1.2; }
.kit span { display: block; font-size: .7rem; color: var(--on-dark-muted); margin-top: .15rem; }
.section:not(.section--dark) .kit div { background: var(--surface-tint); border-color: var(--rule); }
.section:not(.section--dark) .kit svg { color: var(--signal); }
.section:not(.section--dark) .kit b { color: var(--ink); } .section:not(.section--dark) .kit span { color: var(--ink-muted); }

/* ═══ THE FOUR HOURS — visual strip ═════════════════════════════════════════ */
.hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-top: 2.5rem; position: relative; }
@media (max-width: 1000px) { .hours { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .hours { grid-template-columns: repeat(2, 1fr); } }
.hour { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.1rem 1rem 1.2rem; box-shadow: var(--shadow); position: relative; }
.hour .t { font-family: var(--font-mono); font-weight: 600; font-size: .74rem; letter-spacing: .08em; color: var(--signal); }
.hour .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-tint); display: grid; place-items: center; margin: .7rem 0 .7rem; }
.hour .ic svg { width: 24px; height: 24px; color: var(--dark); }
.hour b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.2; }
.hour p { font-size: .8rem; color: var(--ink-muted); margin-top: .35rem; line-height: 1.4; }
.hour--fire .ic { background: var(--signal); } .hour--fire .ic svg { color: #fff; }
.hour--fire { border-color: var(--signal); }

/* compact timeline on class pages */
.tl li { padding-block: 1rem; }
.tl h3 { font-size: 1rem; }
.tl p { font-size: .88rem; }

/* ═══ ROUND 3 ═══════════════════════════════════════════════════════════════ */
/* sticky selection bar: hide for real, and fix to the viewport */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; transition: transform .3s cubic-bezier(.2,.75,.3,1), opacity .25s ease, visibility 0s .3s; }
.stickybar.is-up { visibility: visible; opacity: 1; transition: transform .3s cubic-bezier(.2,.75,.3,1), opacity .25s ease; }
body:has(.stickybar.is-up) { padding-bottom: 90px; }

/* footer brand */
.foot .brand .wordmark, .foot .brand .sub { color: #fff; }
.foot .brand .sub { color: var(--signal-on-dark); }
.foot .mark path { stroke: #fff; }
.foot-grid { align-items: start; }
.foot-legal { justify-content: center; text-align: center; gap: .5rem 1.5rem; }
.guarbar { align-items: center; }

/* ── header: dropdown + drawer ──────────────────────────────────────────── */
.masthead .wrap { gap: 1.25rem; }
.nav { display: flex; gap: 1.75rem; margin-left: auto; align-items: center; position: static; }
@media (max-width: 1080px) { .nav { display: none; } .masthead-cta { display: none; } }
.navtoggle { display: flex !important; margin-left: 0; border-radius: 999px; width: 48px; height: 48px; }
.navdd { position: relative; }
.navdd-btn { background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.04rem; color: var(--ink); display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.navdd-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.navdd.is-current .navdd-btn, .navdd-btn:hover { color: var(--signal); border-bottom-color: var(--signal); }
.navdd.is-open .navdd-btn svg { transform: rotate(180deg); }
.navdd-menu { position: absolute; top: calc(100% + 10px); left: -12px; min-width: 290px; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); border: 1px solid var(--rule); padding: .5rem; display: none; z-index: 80; }
.navdd.is-open .navdd-menu { display: block; }
.navdd-menu a { display: block; padding: .7rem .85rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); border: 0; }
.navdd-menu a:hover { background: var(--surface-tint); }
.navdd-menu b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.navdd-menu span { display: block; font-size: .88rem; color: var(--ink-muted); }

.drawer { position: fixed; inset: 0; z-index: 210; }
.drawer[hidden] { display: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(16,35,58,.6); backdrop-filter: blur(2px); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--surface-raised); overflow: auto; padding: 1.25rem 1.4rem 2rem; box-shadow: -20px 0 60px -20px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: no-preference) { .drawer.is-open .drawer-panel { animation: drawerIn .3s cubic-bezier(.2,.75,.3,1); } @keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface-raised); font-size: 1.4rem; cursor: pointer; }
.drawer-panel h4 { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin: 1.5rem 0 .5rem; }
.drawer-link { display: block; padding: .7rem .8rem; margin: 0 -.8rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.drawer-link:hover { background: var(--surface-tint); }
.drawer-link b { display: block; font-family: var(--font-display); font-weight: 600; }
.drawer-link span { display: block; font-size: .78rem; color: var(--ink-muted); }
.drawer-langs { display: flex; flex-wrap: wrap; gap: .4rem; }
.drawer-langs button { border: 1px solid var(--rule-strong); background: var(--surface-raised); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.drawer-langs button[aria-pressed="true"] { background: var(--dark); color: #fff; border-color: var(--dark); }
.drawer-contact { display: grid; gap: .5rem; margin-top: 1rem; }
.drawer .dirbtns { margin-top: .75rem; }

/* ── hero: condensed uppercase display, licence collage ─────────────────── */
.hero .d-xl { font-family: var(--font-display); font-weight: 800; letter-spacing: -.018em; font-size: clamp(1.95rem, 4.2vw, 3.25rem); line-height: 1.09; max-width: 16ch; line-height: .92; }
.hero .d-xl em { color: var(--signal-on-dark); }
.collage { position: relative; aspect-ratio: 1; max-width: 520px; margin-left: auto; }
.collage img { position: absolute; width: 44%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); transition: transform .3s ease; }
.collage img:nth-child(1) { left: 4%;  top: 0;    transform: rotate(-6deg); }
.collage img:nth-child(2) { left: 50%; top: 6%;   transform: rotate(4deg); width: 46%; }
.collage img:nth-child(3) { left: 0;   top: 44%;  transform: rotate(3deg); width: 42%; }
.collage img:nth-child(4) { left: 46%; top: 52%;  transform: rotate(-5deg); width: 48%; z-index: 2; }
.collage img:nth-child(5) { left: 26%; top: 26%;  transform: rotate(1deg); width: 40%; z-index: 3; border-color: var(--signal-on-dark); }
.collage:hover img { transform: rotate(0); }
.collage-cap { position: absolute; left: 0; right: 0; bottom: -2.2rem; text-align: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (max-width: 900px) { .collage { max-width: 380px; margin-inline: auto; margin-top: 2.5rem; } }

/* ── Afterpay line + pay strip ──────────────────────────────────────────── */
.apmark { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: -.02em; background: #B2FCE4; color: #000; padding: .22rem .5rem; border-radius: 5px; line-height: 1; }
.apline { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--ink-muted); margin-top: .5rem; }
.apline b { color: var(--ink); }
.apline--dark, .section--dark .apline, .vscard--lead .apline, .hero .apline { color: var(--on-dark-muted); }
.apline--dark b, .section--dark .apline b, .vscard--lead .apline b, .hero .apline b { color: #fff; }
.paystrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .6rem; margin-top: 1.5rem; }
.paystrip-secure { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ink-muted); margin-inline: .3rem; }
.paystrip-secure svg { width: 14px; height: 14px; color: var(--confirm); }
.section--dark .paystrip-secure, .hero .paystrip-secure { color: var(--on-dark-muted); }
.paystrip--compact .paylogo { height: 26px; min-width: 40px; }
.paystrip--compact .paylogo svg { height: 14px; }
/* Phones: the two captions take a full row each, so the strip reads as
   "Secure checkout" / a centred row of card marks / "PCI-DSS", instead of
   captions and logos interleaving wherever the wrap happens to fall. */
@media (max-width: 600px) { .paystrip-secure { flex-basis: 100%; justify-content: center; margin-inline: 0; } }

/* ── value prop (Multi) ─────────────────────────────────────────────────── */
.vprop { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 720px) { .vprop { grid-template-columns: 1fr; } }
.vprop-col { border-radius: var(--radius-lg); padding: var(--pad-sm); }
.vprop-col--else { background: var(--surface-tint); border: 1px dashed var(--rule-strong); }
.vprop-col--here { background: var(--dark); color: #fff; box-shadow: var(--shadow-lift); }
.vprop-col h4 { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.vprop-col--here h4 { color: var(--signal-on-dark); }
.vprop-col ul { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .45rem; font-size: .9rem; }
.vprop-col li { display: flex; justify-content: space-between; gap: .75rem; }
.vprop-col li .n { font-family: var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.vprop-col--here li .n { color: var(--on-dark-muted); }
.vprop-total { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 700; }
.vprop-col--here .vprop-total { border-color: var(--rule-dark); }
.vprop-total .n { font-size: 1.6rem; }
.vprop-col--else .vprop-total .n { text-decoration: line-through; color: var(--ink-muted); }
.vprop-col--here .vprop-total .n { color: var(--signal-on-dark); }

/* ── "you save" callout (why different) ─────────────────────────────────── */
.saved { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin-top: 1.5rem; padding: var(--pad-sm); border-radius: var(--radius-lg); background: var(--signal); color: #fff; box-shadow: var(--shadow-lift); }
.saved b { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: .9; }
.saved span { font-size: .95rem; }
.saved small { display: block; font-size: .76rem; opacity: .85; margin-top: .2rem; }
.inc { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
@media (max-width: 480px) { .inc { grid-template-columns: 1fr; } }
.inc li { display: flex; align-items: center; gap: .6rem; font-size: .93rem; }
.inc svg { width: 20px; height: 20px; color: var(--signal-on-dark); flex: none; }

/* ── comparison table: real separators ──────────────────────────────────── */
table.cmp th, table.cmp td { border-bottom: 1px solid var(--rule-strong); border-right: 1px solid var(--rule); }
table.cmp th:last-child, table.cmp td:last-child { border-right: 0; }
table.cmp tbody th { background: var(--surface-tint); }
table.cmp tbody tr:nth-child(even) { background: transparent; }
table.cmp td.lead { background: rgba(30,60,92,.06); font-weight: 600; }
table.cmp thead th.lead { background: var(--signal); }

/* ── centering fixes ────────────────────────────────────────────────────── */
.center .splitrule { justify-content: center; }
.center .hero-cta { justify-content: center; }
.center .lede, .center h2, .center h3 { margin-inline: auto; }
.presswall .wrap { text-align: center; }
.proofbar .wrap { text-align: left; }

/* ── product tiles (classes page) ───────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--dark); color: #fff; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow-lift); text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .5s ease, opacity .3s ease; }
.tile:hover img { transform: scale(1.04); opacity: .65; }
.tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,35,58,.1) 20%, rgba(16,35,58,.95) 75%); }
.tile > div { position: relative; padding: var(--pad); }
.tile .stage { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--signal-on-dark); }
.tile h3 { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: .95; margin-top: .4rem; color: #fff; }
.tile p { color: var(--on-dark-muted); font-size: .9rem; margin-top: .5rem; }
.tile .price { display: flex; align-items: baseline; gap: .5rem; margin-top: .8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; }
.tile .price small { font-size: .78rem; font-weight: 400; color: var(--on-dark-muted); }
.tile--main { outline: 3px solid var(--signal); outline-offset: -3px; }
.tile .btn { margin-top: 1rem; align-self: flex-start; }
.collage { width: 100%; max-width: 520px; margin-left: auto; }
.tile::before { background: linear-gradient(180deg, rgba(16,35,58,.25) 0%, rgba(16,35,58,.55) 40%, rgba(16,35,58,.97) 75%); }
.tile .stage { color: #FFB3BF; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* the maths — one line, three numbers */
.mathrow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; gap: .75rem; align-items: stretch; margin-top: 1.75rem; }
@media (max-width: 860px) { .mathrow { grid-template-columns: 1fr; } .mathrow .arrow { transform: rotate(90deg); justify-self: center; } }
.mathbox { border-radius: var(--radius-lg); padding: var(--pad-sm) var(--pad); display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.mathbox .lbl { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.mathbox .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; margin-top: .3rem; letter-spacing: -.01em; }
.mathbox .sub { font-size: .9rem; margin-top: .35rem; }
.mathbox--else { background: var(--surface-tint); border: 1px dashed var(--rule-strong); color: var(--ink-muted); }
.mathbox--else .big { text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--signal); color: var(--ink-muted); }
.mathbox--here { background: var(--dark); color: #fff; box-shadow: var(--shadow-lift); }
.mathbox--here .lbl { color: var(--signal-on-dark); } .mathbox--here .sub { color: var(--on-dark-muted); }
.mathbox--save { background: var(--signal); color: #fff; box-shadow: var(--shadow-lift); }
.mathbox--save .lbl { color: #fff; }  /* .8 white on --signal was 3.43:1 */
.mathrow .arrow { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink-muted); }
.mathnote { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: .9rem; color: var(--ink-muted); }
/* order bump — visual rounds comparison */
.rounds { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0 .25rem; }
@media (max-width: 480px) { .rounds { grid-template-columns: 1fr; } }
.rounds > span { display:block; border-radius: var(--radius); padding: .9rem 1rem; background: var(--surface-tint); border: 1px solid var(--rule); }
.rounds > span.up { background: var(--dark); color: #fff; border-color: var(--dark); }
.rounds .lbl { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.rounds .up .lbl { color: var(--signal-on-dark); }
.rounds .big { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; margin-top: .2rem; }
.rounds .big small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; margin-left: .3rem; opacity: .8; }
.pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: .6rem; }
.pips i { display: block; height: 14px; border-radius: 3px; background: var(--signal); }
.pips i.dim { background: var(--rule-strong); }
.up .pips i.dim { background: rgba(255,255,255,.18); }
.rounds .cart { display: flex; gap: .35rem; margin-top: .7rem; align-items: flex-end; flex-wrap: wrap; }
.rounds .cart svg { width: 22px; height: 44px; }
.rounds .cart svg.ghost { opacity: .18; }
.rounds .bar { height: 10px; border-radius: 5px; background: var(--rule-strong); margin-top: .7rem; overflow: hidden; }
.rounds .up .bar { background: rgba(255,255,255,.18); }
.rounds .bar i { display: block; height: 100%; background: var(--signal); border-radius: 5px; }
.rounds .cap { font-size: .78rem; color: var(--ink-muted); margin-top: .45rem; display: block; }
.rounds .up .cap { color: var(--on-dark-muted); }
.rounds .bar { display: block; }
.rounds .bar i { display: block; }
.paylogo--img { padding: 0 .6rem; height: 36px; min-width: 58px; }
.paylogo--img img { height: 20px; width: auto; max-width: 64px; display: block; }
.paystrip--compact .paylogo--img { height: 30px; min-width: 48px; } .paystrip--compact .paylogo--img img { height: 16px; }
/* eyebrows on dark grounds: readable, not red */
.section--dark .eyebrow, .section--dark .eyebrow--signal, .hero .eyebrow, .hero .eyebrow--signal,
.vscard--lead .eyebrow, .vscard--lead .eyebrow--signal, .sheet-head .eyebrow, .offer-head .eyebrow,
.vprop-col--here h4, .mathbox--here .lbl, .rounds .up .lbl, .tile .stage, .jstep--main .jstep-tag { color: #E6EDF5; }
.tile .stage { color: #fff; }
.sesh-seats, .slot-seats { font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: 0; }
.sesh-seats.open, .slot-seats.open { color: var(--confirm); }
.sesh-seats.low, .slot-seats.low { color: #fff; background: var(--signal); padding: .3rem .6rem; border-radius: 999px; display: inline-block; justify-self: end; animation: pulse 2.4s ease-in-out infinite; }
.slot-seats.low { justify-self: auto; }
.sesh-seats.full, .slot-seats.full { color: var(--ink-muted); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(180,36,60,.45); } 50% { box-shadow: 0 0 0 6px rgba(180,36,60,0); } }
@media (prefers-reduced-motion: reduce) { .sesh-seats.low, .slot-seats.low { animation: none; } }
.idnote { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; margin-bottom: 1.1rem; border-radius: var(--radius); background: rgba(180,36,60,.07); border: 1px solid rgba(180,36,60,.3); font-size: .86rem; line-height: 1.45; }
.idnote svg { width: 22px; height: 22px; flex: none; color: var(--signal-deep); margin-top: 1px; }
.idnote b { display: block; color: var(--ink); margin-bottom: .15rem; }
.grid3 { display: grid; grid-template-columns: 1fr 110px 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 .field:first-child { grid-column: 1 / -1; } }
.field > label em { font-style: normal; font-weight: 400; font-size: .72rem; color: var(--signal-deep); margin-left: .3rem; }
.field > label em.opt { color: var(--ink-muted); }
.upnudge { margin-block: 1rem; border: 2px solid var(--signal); border-radius: var(--radius-lg); background: rgba(180,36,60,.06); padding: .9rem; }
.upnudge-head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: .95rem; margin-bottom: .6rem; }
.upnudge-head svg { width: 22px; height: 22px; color: var(--signal-deep); flex: none; }
.upnudge img { width: 100%; height: auto; border-radius: var(--radius); background: #fff; }
.upnudge p { font-size: .86rem; margin-top: .6rem; line-height: 1.45; }
.upnudge p.ap { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ink-muted); }
.upnudge .btn { margin-top: .7rem; }
.apmark, .paylogo--ap { white-space: nowrap; flex: none; }
/* ═══ FORM FIELDS — clean, consistent ═══════════════════════════════════════ */
.field { gap: .35rem; margin-bottom: 1.15rem; align-content: start; }
.field > label { font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--ink); display: flex; align-items: baseline; gap: .3rem; }
.field > label em { margin-left: 0; }
.field > label em.req { color: var(--signal); font-weight: 700; font-size: .95rem; line-height: 1; }
.field > label em.optional { color: var(--ink-muted); font-weight: 400; font-size: .74rem; }
.field input, .field select {
  height: 52px; min-height: 52px; padding: 0 .95rem; font-size: 1rem;
  background: var(--surface-raised); border: 1.5px solid #CBD5E1; border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(23,24,27,.04); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #9AA6B5; }
.field input:hover, .field select:hover { border-color: #94A3B8; }
.field input:focus, .field select:focus { outline: none; border-color: var(--dark); box-shadow: 0 0 0 4px rgba(30,60,92,.14); }
.field input:user-invalid { border-color: var(--signal); }
.field .hint { font-size: .76rem; color: var(--ink-muted); }
.grid2, .grid3 { align-items: start; column-gap: 1rem; }
.grid3 { grid-template-columns: 1fr 130px 1fr; }
.field--mi input { text-align: center; letter-spacing: .1em; }
.attendee { padding: var(--pad); }
.attendee-head { margin-bottom: 1rem; }
.attendee-head h3 { font-size: 1.05rem; }
.idnote { background: #FFF6F7; border-color: rgba(180,36,60,.35); }
.grid3 { grid-template-columns: 1fr 96px 1fr; } .grid3 .field > label { white-space: nowrap; }
/* scarcity line */
.scar { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; padding: .45rem .8rem; border-radius: 999px; background: rgba(180,36,60,.12); color: var(--signal-on-dark); }
/* The sentence is one flex item, so on a narrow screen it wraps as a sentence
   rather than as three loose pieces ("Only" / "168" / "seats left…"). */
.scar > span { min-width: 0; line-height: 1.4; text-align: left; }
.scar i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(180,36,60,.6); animation: pulse 2s infinite; flex: none; }
.scar b { color: #fff; }
.section:not(.section--dark) .scar, .summary .scar { background: rgba(180,36,60,.09); color: var(--signal-deep); }
.section:not(.section--dark) .scar b, .summary .scar b { color: var(--ink); }
.summary .scar { font-size: .82rem; display: flex; }
/* floating language tab */
.langfab { position: fixed; right: 0; top: 46%; z-index: 90; }
.langfab-btn { display: flex; flex-direction: column; align-items: center; gap: .15rem; background: var(--dark); color: #fff; border: 0; border-radius: 12px 0 0 12px; padding: .7rem .6rem; cursor: pointer; box-shadow: -6px 6px 24px -10px rgba(0,0,0,.5); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: .72rem; letter-spacing: .06em; }
.langfab-btn svg { width: 18px; height: 18px; transform: rotate(90deg); margin-block: .2rem; }
.langfab-btn b { color: var(--signal-on-dark); font-weight: 700; }
.langfab-menu { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); border: 1px solid var(--rule); padding: .6rem; display: grid; gap: .3rem; min-width: 210px; }
.langfab-menu[hidden] { display: none; }
.langfab-menu button { text-align: left; background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .55rem .8rem; font: inherit; font-weight: 600; cursor: pointer; }
.langfab-menu button:hover { background: var(--surface-tint); }
.langfab-menu button[aria-pressed="true"] { background: var(--dark); color: #fff; border-color: var(--dark); }
.langfab-menu a { font-size: .76rem; color: var(--ink-muted); padding: .3rem .4rem 0; text-decoration: none; }
@media (max-width: 720px) { .langfab { top: auto; bottom: 96px; } .langfab-btn span { display: none; } }
/* social-proof toast */
.proof-toast { position: fixed; left: 1rem; bottom: 1rem; z-index: 95; max-width: 360px; display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 14px; padding: .8rem .9rem; box-shadow: 0 18px 44px -16px rgba(16,35,58,.45); font-size: .86rem; line-height: 1.35; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.75,.3,1); }
.proof-toast.is-in { opacity: 1; transform: none; }
.proof-toast[hidden] { display: none; }
.proof-toast .pt-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--confirm); color: #fff; display: grid; place-items: center; }
.proof-toast .pt-ic svg { width: 18px; height: 18px; }
.proof-toast small { display: block; color: var(--ink-muted); font-size: .74rem; margin-top: .15rem; }
.proof-toast small a { color: var(--signal-deep); }
.proof-toast .pt-x { background: none; border: 0; font-size: 1.2rem; color: var(--ink-muted); cursor: pointer; align-self: start; }
body:has(.bookbar) .proof-toast, body:has(.stickybar.is-up) .proof-toast { bottom: calc(var(--bookbar-h, 88px) + 4px); }
@media (max-width: 620px) { .proof-toast { left: .6rem; right: .6rem; max-width: none; } }
.summary .scar { display: block; padding: .55rem .8rem; border-radius: 10px; line-height: 1.45; } .summary .scar i { display: inline-block; vertical-align: middle; margin-right: .4rem; }
.seatnote { display: flex; align-items: flex-start; gap: .6rem; margin-top: .7rem; padding: .7rem .85rem; border-radius: 10px; background: var(--surface-tint); border: 1px solid var(--rule); }
.seatnote b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.3; }
.seatnote small { display: block; font-size: .76rem; color: var(--ink-muted); margin-top: .15rem; font-family: var(--font-mono); }
.sn-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .4rem; flex: none; background: var(--confirm); }
.seatnote--low { background: rgba(180,36,60,.08); border-color: rgba(180,36,60,.35); }
.seatnote--low b { color: var(--signal-deep); }
.seatnote--low .sn-dot, .seatnote--mid .sn-dot { background: var(--signal); animation: pulse 2s infinite; }
.sesh-seats.mid, .slot-seats.mid { color: var(--signal-deep); }
.foot-grid--live { grid-template-columns: 1.2fr 1fr 1.2fr; }
@media (max-width: 820px) { .foot-grid--live { grid-template-columns: 1fr; } }
.foot-plain { list-style: none; padding: 0; display: grid; gap: .3rem; margin-top: .5rem; font-size: .88rem; color: var(--on-dark-muted); }
.foot .dirbtns { margin-top: 1rem; }
.foot .dirbtn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; min-height: 44px; font-size: .85rem; }
.foot .dirbtn:hover { border-color: #fff; }
/* languages page */
.flagrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.flag { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .6rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.flag i { font-style: normal; font-size: 1.35rem; line-height: 1; }
.earbuds img { background: #f3f4f6; }
.hic { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-tint); display: grid; place-items: center; margin-bottom: .9rem; }
.hic svg { width: 28px; height: 28px; color: var(--dark); }
.bigstep--us .hic { background: var(--signal); } .bigstep--us .hic svg { color: #fff; }
.langtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 1000px) { .langtiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .langtiles { grid-template-columns: 1fr; } }.langtile { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--pad); box-shadow: var(--shadow); display: flex; flex-direction: column; text-align: center; }
.lt-flag { font-size: 3.4rem; line-height: 1; margin: 0 auto .8rem; }
.langtile h3 { font-size: 1.25rem; }
.langtile p { font-size: .88rem; color: var(--ink-muted); margin: .6rem 0 1.1rem; flex: 1; }
.excl { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; background: var(--signal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 20px -10px rgba(180,36,60,.7); }
.excl svg { width: 16px; height: 16px; }
.excl--center { margin-inline: auto; }
/* press wall v2 */
.press2 { background: var(--surface); padding-block: clamp(3rem,6vw,4.5rem); border-top: 1px solid var(--rule); }
.press2-head { text-align: center; }
.press2-head .eyebrow { display: block; margin-bottom: .5rem; }
.press2-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-top: 2rem; }
@media (max-width: 900px) { .press2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .press2-grid { grid-template-columns: repeat(2, 1fr); } }.press2-tile { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); height: 120px; display: grid; place-items: center; padding: 1rem 1.25rem; }
.press2-tile img { max-height: 70px; max-width: 100%; width: auto; object-fit: contain; }
.presswall { display: none; }
.press2-grid { grid-template-columns: repeat(6, 1fr); } @media (max-width: 900px) { .press2-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .press2-grid { grid-template-columns: repeat(2, 1fr); } }
.hero-fig video { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* ═══ ROUND 4 — the path, packages, Afterpay section, range gallery, cleaner calendar ═══ */

/* nav: "Compare all classes" row */
.navdd-cmp, .drawer-link--cmp { border-top: 1px solid var(--rule) !important; margin-top: .35rem; padding-top: .9rem !important; border-radius: 0 0 var(--radius) var(--radius) !important; }
.navdd-cmp b::after, .drawer-link--cmp b::after { content: ' →'; color: var(--signal); }

/* ── THE PATH: three cards, two arrows, left to right ─────────────────────── */
.path { display: grid; grid-template-columns: 1fr auto 1.18fr auto 1fr; gap: 0; align-items: stretch; margin-top: 2.5rem; }
.path-step { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--surface-raised); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--rule); transition: transform .2s ease, box-shadow .2s ease; }
.path-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.path-step--main { border: 3px solid var(--signal); box-shadow: var(--shadow-lift); }
.path-img { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--dark); }
.path-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.path-step--main .path-img { aspect-ratio: 16/8; }
.path-body { display: flex; flex-direction: column; flex: 1; padding: var(--pad-sm) var(--pad) var(--pad); gap: .45rem; }
.path-tag { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.path-step--main .path-tag { color: var(--signal-deep); }
.path-h { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: .95; color: var(--dark); }
.path-step--main .path-h { font-size: 2.5rem; }
.path-p { font-size: .9rem; color: var(--ink-muted); line-height: 1.5; }
.path-price { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin-top: .3rem; color: var(--ink); }
.path-price small { font-size: .74rem; font-weight: 500; color: var(--ink-muted); }
.path-body .btn { margin-top: auto; align-self: flex-start; }
.path-here { position: absolute; top: .8rem; left: .8rem; background: var(--dark); color: #fff; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 999px; }
.path-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding-inline: .6rem; color: var(--signal); }
.path-arrow svg { width: 44px; height: 44px; }
.path-arrow span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 960px) {
  .path { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .path-arrow { padding: .6rem 0; }
  .path-arrow svg { transform: rotate(90deg); width: 36px; height: 36px; }
  .path-step--main .path-img { aspect-ratio: 16/9; }
}
.section--dark .path-step { border-color: transparent; }
.section--dark .path-arrow span { color: var(--on-dark-muted); }

/* ── PACKAGES ─────────────────────────────────────────────────────────────── */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
@media (max-width: 900px) { .pkgs { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.pkg { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad); box-shadow: var(--shadow); }
.pkg--pop { border: 2px solid var(--signal); }
.pkg--lead { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: var(--shadow-lift); transform: scale(1.02); }
.pkg-tag { position: absolute; top: -13px; left: var(--pad); background: var(--signal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(180,36,60,.7); }
.pkg--lead .pkg-tag { background: var(--surface-raised); color: var(--dark); }
.pkg-head { display: flex; align-items: center; gap: .7rem; }
.pkg-n { font-family: var(--font-display); font-weight: 800; font-size: 4.2rem; line-height: .85; color: var(--dark); }
.pkg--lead .pkg-n { color: #fff; }
.pkg-unit { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.15; color: var(--ink-muted); }
.pkg--lead .pkg-unit { color: var(--on-dark-muted); }
.pkg-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 1rem; }
.pkg-dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--signal); }
.pkg--lead .pkg-dots i { background: var(--signal-on-dark); }
.pkg-price { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; margin-top: 1.2rem; }
.pkg-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--ink-muted); margin-top: .35rem; }
.pkg--lead .pkg-price small { color: var(--on-dark-muted); }
.pkg-price s { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.pkg-save { display: inline-block; margin-top: .7rem; padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--confirm) 14%, transparent); color: var(--confirm); font-family: var(--font-display); font-weight: 700; font-size: .82rem; align-self: flex-start; }
.pkg--lead .pkg-save { background: var(--signal); color: #fff; }
.pkg-inc { list-style: none; padding: 0; margin: 1.1rem 0 1.25rem; display: grid; gap: .5rem; font-size: .88rem; }
.pkg-inc li { position: relative; padding-left: 1.4rem; }
.pkg-inc li::before { content: '✓'; position: absolute; left: 0; color: var(--confirm); font-weight: 700; }
.pkg--lead .pkg-inc li::before { color: var(--signal-on-dark); }
.pkg-inc li.bonus { font-weight: 700; }
.pkg-inc li.bonus::before { content: '+'; color: var(--signal); }
.pkg .btn { margin-top: auto; }
.pkg .apline { margin-top: .7rem; justify-content: center; }
.pkg--lead .apline { color: var(--on-dark-muted); } .pkg--lead .apline b { color: #fff; }

/* ── AFTERPAY SECTION ─────────────────────────────────────────────────────── */
.apsec { background: var(--dark-deepest); color: #fff; position: relative; overflow: hidden; }
.apsec::before { content: ''; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(178,252,228,.16), transparent 62%); pointer-events: none; }
.apsec-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; }
@media (max-width: 900px) { .apsec-grid { grid-template-columns: 1fr; } }
.apsec h2 { color: #fff; }
.apsec .lede { color: var(--on-dark-muted); }
.apsec .lede b { color: #B2FCE4; }
.apmark--lg { font-size: 1.15rem; padding: .45rem .85rem; border-radius: 8px; }
.inc--light li { color: #fff; }
.inc--light svg { color: #B2FCE4; }
.apsec-alt { align-self: center; font-size: .85rem; color: var(--on-dark-muted); font-family: var(--font-mono); }
.aptl { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); padding: var(--pad); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.aptl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); font-size: .9rem; color: var(--ink-muted); }
.aptl-head b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.aptl-steps { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; position: relative; }
.aptl-steps::before { content: ''; position: absolute; left: 12%; right: 12%; top: 11px; height: 3px; background: var(--rule-strong); border-radius: 2px; }
.aptl-steps li { position: relative; text-align: center; padding-top: 2rem; }
.aptl-steps li i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 3px solid var(--rule-strong); }
.aptl-steps li.now i { background: #B2FCE4; border-color: var(--dark-deepest); }
.aptl-steps .w { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.aptl-steps b { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-top: .25rem; }
.aptl-steps li.now b { color: var(--dark); }
.aptl-foot { display: flex; align-items: baseline; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--ink); font-family: var(--font-display); font-weight: 700; }
.aptl-foot b { font-size: 1.4rem; }
.aptl-foot .zero { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--confirm); background: color-mix(in srgb, var(--confirm) 12%, transparent); padding: .3rem .6rem; border-radius: 999px; }
.aptl .paystrip { margin-top: 1.1rem; }
@media (max-width: 480px) { .aptl-steps { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; } .aptl-steps::before { display: none; } }

/* ── RANGE GALLERY ────────────────────────────────────────────────────────── */
.rangegrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .75rem; margin-top: 2rem; }
@media (max-width: 720px) { .rangegrid { grid-template-columns: 1fr 1fr; } .rangegrid figure:first-child { grid-column: 1 / -1; } }
.rangegrid figure { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--dark); }
.rangegrid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.rangegrid figure:first-child img { aspect-ratio: 4/3; }
.rangegrid figcaption { position: absolute; left: .8rem; bottom: .8rem; background: rgba(16,35,58,.86); color: #fff; padding: .4rem .7rem; border-radius: 8px; font-size: .74rem; }
.livefire2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .livefire2 { grid-template-columns: 1fr; } }
.livefire2 .rangegrid { margin-top: 0; }

/* ── LTC CHOOSER (MA vs 39) on ltc.html ─────────────────────────────────── */
.reach { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
@media (max-width: 860px) { .reach { grid-template-columns: 1fr; } }
.reach-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--rule); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.reach-card--lead { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: var(--shadow-lift); }
.reach-map { display: block; background: #fff; padding: .75rem; border-bottom: 1px solid var(--rule); }
.reach-map img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.reach-ma { display: grid; place-items: center; background: var(--surface-tint); border-bottom: 1px solid var(--rule); padding: 1.25rem; }
.reach-ma svg { width: 100%; max-width: 260px; height: auto; }
.reach-body { padding: var(--pad); display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.reach-body h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.reach-price { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; }
.reach-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--ink-muted); margin-top: .3rem; }
.reach-card--lead .reach-price small, .reach-card--lead .apline { color: var(--on-dark-muted); }
.reach-card--lead .apline b { color: #fff; }
.reach-card .ticks { margin-top: .6rem; font-size: .92rem; }
.reach-card--lead .ticks li::before { color: var(--signal-on-dark); }
.reach-foot { margin-top: auto; padding-top: 1.25rem; display: grid; gap: .5rem; }
.reach-card--lead .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.35); }
.reach-big { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: .9; color: var(--signal); }
.reach-card--lead .reach-big { color: var(--signal-on-dark); }

/* ── Guide: three steps with arrows in the hero ─────────────────────────── */
.steps3 { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr; gap: 0; align-items: stretch; margin-top: 2.5rem; }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; max-width: 480px; } }
.s3 { display: flex; flex-direction: column; gap: .4rem; padding: var(--pad-sm) var(--pad); border-radius: var(--radius-lg); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.s3--us { background: var(--surface-raised); color: var(--ink); border-color: #fff; box-shadow: var(--shadow-lift); }
.s3 .n { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: .9; color: var(--signal-on-dark); }
.s3--us .n { color: var(--signal); }
.s3 .who { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.s3--us .who { color: var(--signal-deep); }
.s3 h3 { font-size: 1.2rem; }
.s3 p { font-size: .88rem; color: var(--on-dark-muted); }
.s3--us p { color: var(--ink-muted); }
.s3 .btn { margin-top: auto; align-self: flex-start; }
.s3-arrow { display: grid; place-items: center; padding-inline: .5rem; color: var(--signal-on-dark); }
.s3-arrow svg { width: 40px; height: 40px; }
@media (max-width: 860px) { .s3-arrow { padding: .5rem 0; } .s3-arrow svg { transform: rotate(90deg); width: 32px; height: 32px; } }

/* ── comparison table on dark: readable ──────────────────────────────────── */
.section--dark .tablewrap { background: var(--dark-raised); }
.section--dark table.cmp tbody th { background: rgba(255,255,255,.06); color: #fff; }
.section--dark table.cmp th, .section--dark table.cmp td { border-color: var(--rule-dark); color: #fff; }
.section--dark table.cmp td.lead { background: rgba(255,255,255,.08); }
.section--dark table.cmp thead th { background: var(--dark-deep); }
.section--dark table.cmp thead th.lead { background: var(--signal); }

/* value ledger: what $100 buys (light) */
.ledger { list-style: none; padding: 0; margin: 1.5rem 0 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); background: var(--surface-raised); box-shadow: var(--shadow); }
.ledger li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .85rem 1.1rem; border-top: 1px solid var(--rule); font-size: .95rem; }
.ledger li:first-child { border-top: 0; }
.ledger li small { display: block; font-size: .76rem; color: var(--ink-muted); }
.ledger .v { font-family: var(--font-mono); color: var(--ink-muted); text-decoration: line-through; }
.ledger li.total { background: var(--dark); color: #fff; font-family: var(--font-display); font-weight: 700; }
.ledger li.total .v { text-decoration: none; color: var(--signal-on-dark); font-family: var(--font-display); font-size: 1.35rem; }
.ledger li.pay { background: var(--signal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.ledger li.pay .v { text-decoration: none; color: #fff; font-family: var(--font-display); font-size: 1.5rem; }

/* CTA pair: primary + "instead" link card */
/* The off-ramp card. Was a flex row capped at 460px, which left the heading
   and the call to action both wrapping mid-phrase while the row sat half
   empty. Three explicit tracks now — mark, message, action — and the action
   is a real pill that never wraps. */
.orcard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--radius-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; max-width: 34rem; transition: background .18s ease, border-color .18s ease; }
.orcard:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.orcard-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,134,152,.16); }
.orcard-ic, .orcard > svg { flex: none; }
.orcard svg { width: 22px; height: 22px; color: var(--signal-on-dark); }
.orcard > svg { width: 26px; height: 26px; }
.orcard b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.orcard b + span, .orcard-sub { display: block; margin-top: .2rem; font-size: .84rem; line-height: 1.45; color: var(--on-dark-muted); }
.orcard .go { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: #fff; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: .55rem .95rem; }
.orcard .go::after { content: '\2192'; transition: transform .18s ease; }
.orcard:hover .go::after { transform: translateX(3px); }
/* Under 620px the three tracks stack. Flex rather than a spanning grid child:
   the text gets the full width instead of 243px of a 342px card, and the
   layout auditor is not left reading 3 children against 2 declared tracks. */
@media (max-width: 620px) {
  .orcard { display: flex; flex-direction: column; align-items: stretch; gap: .85rem; }
  .orcard .go { justify-content: center; }
}

/* two-column "which one are you" */
.whichgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 760px) { .whichgrid { grid-template-columns: 1fr; } }
.which { border-radius: var(--radius-lg); padding: var(--pad); background: var(--surface-raised); border: 1px solid var(--rule); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.which--lead { border: 2px solid var(--signal); }
.which .eyebrow { margin-bottom: .5rem; }
.which h3 { font-size: 1.3rem; }
.which p { color: var(--ink-muted); margin-top: .5rem; font-size: .95rem; }
.which .btn { margin-top: 1.25rem; align-self: flex-start; }

/* ── CALENDAR: less clutter, obvious view switch ─────────────────────────── */
.book { grid-template-columns: 340px 1fr; }
.calhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.calhead h2 { font-size: 1.1rem; font-family: var(--font-display); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-tint); border: 1px solid var(--rule); }
.seg button { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .4rem 1.05rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink-muted); transition: background .18s ease, color .18s ease; }
.seg button svg { width: 17px; height: 17px; }
.seg button[aria-pressed="true"] { background: var(--dark); color: #fff; box-shadow: var(--shadow); }
.filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filters .lbl { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-right: .2rem; }
.chip { min-height: 34px; padding: .35rem .75rem; font-size: .7rem; }
.dow, .mgrid, .month-nav { max-width: none; }
.mday { min-height: 54px; }
.mday .pips i { width: 6px; height: 6px; }
.monthhint { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-muted); margin-top: .85rem; }
.monthhint i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); display: inline-block; }
.calbrief { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--ink-muted); margin-top: 1rem; }
.calbrief span { display: inline-flex; align-items: center; gap: .3rem; }
.calbrief svg { width: 14px; height: 14px; color: var(--confirm); }
.coursecard .cc-desc { font-size: .84rem; }
.pickcourse .apline { font-size: .8rem; margin-top: .35rem; }
@media (max-width: 980px) { .book { grid-template-columns: 1fr; } }

/* ── checkout: Afterpay panel ────────────────────────────────────────────── */
.apbig { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.25rem; align-items: center; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; border-radius: var(--radius-lg); background: var(--dark-deepest); color: #fff; box-shadow: var(--shadow-lift); }
.apbig .apmark { font-size: 1rem; padding: .4rem .7rem; border-radius: 7px; }
.apbig b { color: #B2FCE4; }
.apbig p { font-size: .92rem; line-height: 1.4; }
.apbig small { display: block; font-size: .76rem; color: var(--on-dark-muted); margin-top: .2rem; }
.apbig .btn { --btn-bg: #B2FCE4; --btn-fg: #000; border-color: #B2FCE4; box-shadow: none; white-space: nowrap; }
.apbig .btn:hover { --btn-bg: #9df3d6; border-color: #9df3d6; color: #000; }
.apbig-sched { display: flex; gap: .35rem; margin-top: .55rem; }
.apbig-sched span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: .68rem; padding: .3rem .2rem; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--on-dark-muted); }
.apbig-sched span:first-child { background: #B2FCE4; color: #000; font-weight: 600; }
@media (max-width: 620px) { .apbig { grid-template-columns: 1fr; } .apbig .btn { width: 100%; } }
.sum-ap { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .6rem .75rem; border-radius: 10px; background: var(--dark-deepest); color: #fff; font-size: .82rem; }
.sum-ap b { color: #B2FCE4; font-family: var(--font-mono); }

.path-img img { object-position: center 22%; }
.path-step--main .path-img img { object-position: center 40%; }

/* ═══ Programmatic pages ═══════════════════════════════════════════════════ */
.verdict { display: inline-flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 1.05rem; max-width: 62ch; }
.verdict b { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.verdict--yes b { color: #7FD1A6; } .verdict--no b { color: var(--signal-on-dark); }
.townlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.townlist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-raised); }
.townlist a { text-decoration: none; font-weight: 600; font-family: var(--font-display); color: var(--ink); }
.townlist span { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); }
.statelinks { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .25rem .75rem; font-size: .88rem; }
.statelinks a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.statelinks a:hover { color: var(--signal-deep); border-color: var(--signal); }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.gcard { display: flex; flex-direction: column; gap: .4rem; padding: var(--pad); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--rule); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gcard h3 { font-size: 1.15rem; line-height: 1.25; }
.gcard p { font-size: .9rem; color: var(--ink-muted); }
.guide h2 { margin-top: 2.5rem; margin-bottom: .75rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.guide p { margin-bottom: 1rem; max-width: 68ch; }
.guide .ticks { margin: 1rem 0 1.5rem; }
.guide .hours { margin-top: 1.25rem; }
.guide .checkgrid { margin-top: 1rem; }
.guide .faq { margin-top: 1.5rem; }
.guide .tablewrap { margin: 1rem 0; }
.chips .chip { text-decoration: none; text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 600; font-size: .85rem; min-height: 38px; }
.section--dark .chips .chip { color: #fff; border-color: rgba(255,255,255,.3); }

/* ═══ CLS / a11y hardening ═══ */
[data-afterpay]:empty { min-height: 1.9rem; }
[data-scarcity]:empty { min-height: 2.4rem; }
.upnext-list:empty { min-height: 372px; }
@media (max-width: 760px) { .upnext-list:empty { min-height: 560px; } }
#press-home:empty { min-height: 320px; }
.sesh-day, .slot-seats.mid, .sesh-seats.mid { color: var(--signal-deep); }
.sesh:hover .sesh-day { color: var(--signal-deep); }
/* header is rendered by JS — reserve its height so the hero doesn't jump */
#site-header:empty { min-height: 151px; }
@media (max-width: 720px) { #site-header:empty { min-height: 148px; } }
[data-afterpay]:empty { min-height: 2.25rem; }
[data-scarcity]:empty { min-height: 2.7rem; }
/* silo linking module */
.silo { background: var(--surface-tint); border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
.silo .chips { gap: .45rem; }
.silo .chip { background: var(--surface-raised); }
.silo .note a.link { white-space: nowrap; }
.silo h2 { color: var(--ink); }
/* breadcrumbs */
.crumbs { border-bottom: 1px solid var(--rule); background: var(--surface); }
.crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding-block: .7rem; font-size: .8rem; }
.crumbs a, .crumbs span { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--signal-deep); }
.crumbs a::after { content: '›'; margin-left: .45rem; color: var(--rule-strong); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
/* footer hub navigation — site-wide silo entry points */
.foot-hubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2.5rem;
  padding-top: 2rem; margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.foot-hubs ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .38rem; }
.foot-hubs a { color: var(--on-dark-muted); text-decoration: none; font-size: .85rem; line-height: 1.45; }
.foot-hubs a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .foot-hubs { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; } }

/* WCAG AA contrast fixes (Lighthouse a11y, 26 Aug 2026)
   1. .saved small was white at .85 opacity on --signal red = 3.70:1. Only full
      white clears 4.5:1 there; the size step already carries the hierarchy.
   2. .eyebrow--signal defaults to --signal-deep, which is 1.88:1 on the navy
      reach-card. On any dark surface it takes the brand pink instead (4.91:1). */
.saved small { opacity: 1; }
.reach-card--lead .eyebrow--signal,
.reach-card--lead .eyebrow,
.on-dark .eyebrow--signal,
.silo .eyebrow--signal { color: var(--signal-on-dark); }

/* .pkg-save was --confirm (#1E7A55) on its own 14% tint = 4.35:1, just under AA.
   A slightly deeper green on the same tint clears it without changing the look. */
.pkg-save { color: #1A6B4A; }
.pkg--lead .pkg-save { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LAYER

   Reveals are driven by one IntersectionObserver in app.js, not by
   `animation-timeline: view()`. Scroll-driven CSS is the nicer mechanism — it
   runs off the compositor — but its timelines do not resolve in every engine
   yet, and a reveal that silently never fires is worse than a cheap one that
   always does. The observer costs ~20 lines and unobserves each element once
   it has fired, so there is no ongoing scroll work.

   Three rules keep this from undoing the performance and accessibility work:
     1. The hidden start state applies ONLY under `html.js-motion`, which app.js
        sets after confirming the user has not asked for reduced motion. No JS,
        no support, or reduced motion => content is simply visible.
     2. Only `opacity` and `transform` animate. Nothing here can move layout,
        so CLS is untouched.
     3. Reveals are short and small (14px, 420ms). This is a firearms school,
        not a showreel: motion should read as competence, not flourish.
   ═══════════════════════════════════════════════════════════════════════════ */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  /* box-shadow/border-color are listed too, otherwise this shorthand would
     clobber the hover transitions the cards below rely on */
  transition: opacity .42s cubic-bezier(.2,.75,.3,1),
              transform .42s cubic-bezier(.2,.75,.3,1),
              box-shadow .2s cubic-bezier(.2,.75,.3,1),
              border-color .2s ease;
  /* children of a revealed group resolve in sequence; --i is set by app.js and
     capped there, because past ~6 items a stagger reads as lag, not rhythm */
  transition-delay: calc(var(--i, 0) * 70ms);
  /* deliberately NO will-change: promoting 40+ elements to their own compositor
     layers costs more than the transition saves. opacity/transform are already
     compositor-friendly without the hint. */
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Section rules draw themselves in rather than appearing */
.js-motion [data-reveal] .splitrule::before,
.js-motion .splitrule[data-reveal]::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.2,.75,.3,1) calc(var(--i, 0) * 70ms + 80ms);
}
.js-motion [data-reveal].is-in .splitrule::before,
.js-motion .splitrule[data-reveal].is-in::before { transform: scaleX(1); }

/* ── Interaction: what the page does when you touch it ──────────────────────
   Hover is a bonus, never the only signal — every rule here has a :focus-visible
   twin so keyboard users get the same feedback, and an :active state so a tap on
   a touch device confirms itself. Durations sit at 120–200ms: fast enough to feel
   like a response, slow enough to be seen. */
@media (prefers-reduced-motion: no-preference) {

  .gcard, .reach-card, .vscard, .pkg, .bigstep, .chip, .tile {
    transition: transform .2s cubic-bezier(.2,.75,.3,1),
                box-shadow .2s cubic-bezier(.2,.75,.3,1),
                border-color .2s ease;
  }
  .gcard:hover, .gcard:focus-visible,
  .reach-card:hover, .vscard:hover, .bigstep:hover {
    transform: translate3d(0,-3px,0);
    box-shadow: var(--shadow-lift);
  }
  .gcard:active, .chip:active { transform: translate3d(0,0,0) scale(.995); }

  .chip:hover, .chip:focus-visible { transform: translate3d(0,-1px,0); }

  /* Buttons acknowledge the press itself, not just the hover. */
  .btn { transition: transform .12s cubic-bezier(.2,.75,.3,1), background-color .18s ease, box-shadow .18s ease; }
  .btn:hover { transform: translate3d(0,-1px,0); }
  .btn:active { transform: translate3d(0,1px,0) scale(.985); }

  /* Card images breathe on hover; the card clips them so nothing shifts. */
  .gcard img, .tile img, .reach-map img { transition: transform .45s cubic-bezier(.2,.75,.3,1); }
  .gcard:hover img, .tile:hover img, .reach-map:hover img { transform: scale(1.03); }

  /* Inline links wipe an underline in rather than snapping one on. */
  .guide a:not(.btn):not(.chip):not(.gcard),
  .faq div a:not(.btn) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size .25s cubic-bezier(.2,.75,.3,1);
    text-decoration: none;
  }
  .guide a:not(.btn):not(.chip):not(.gcard):hover,
  .guide a:not(.btn):not(.chip):not(.gcard):focus-visible,
  .faq div a:not(.btn):hover, .faq div a:not(.btn):focus-visible { background-size: 100% 1.5px; }

  /* FAQ rows: the marker turns, the panel doesn't jump. */
  details summary { transition: color .18s ease; }
  details summary::marker, details summary::-webkit-details-marker { transition: transform .2s ease; }
}

/* ── Signature: the reticle acquires focus ──────────────────────────────────
   The brand mark is a scope reticle, and the hero figure already sits inside
   corner brackets. On load those brackets converge, once — the page settling
   onto its subject. It is the one deliberately theatrical moment on the site,
   and it costs nothing: two pseudo-elements, transform only. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes acquireTL { from { transform: translate3d(-14px,-14px,0); opacity: 0; } }
  @keyframes acquireBR { from { transform: translate3d(14px,14px,0);  opacity: 0; } }
  .hero-fig[data-brk]::before { animation: acquireTL .7s cubic-bezier(.2,.75,.3,1) .15s both; }
  .hero-fig[data-brk]::after  { animation: acquireBR .7s cubic-bezier(.2,.75,.3,1) .15s both; }
}

/* ── Cross-document view transitions ────────────────────────────────────────
   One rule turns every internal navigation into a cross-fade instead of a white
   flash. Browsers without support navigate exactly as they do today. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .22s; }
/* The header and the sticky bar are the same object across pages — hold them
   still so only the content beneath appears to change. */
/* view-transition-name makes this a stacking context, so the drawer and the
   Classes dropdown inside it were painting behind the hero. Lift the whole
   header context above page content — modals (z 200) still sit above it. */
#site-header { view-transition-name: site-header; position: relative; z-index: 100; }
.stickybar { view-transition-name: stickybar; }



/* ── Reading comfort, set for Atkinson ─────────────────────────────────────
   The face matters less than the setting. Generous leading, a measure capped
   near 68 characters, and tracking that opens as type gets smaller rather than
   tightening — that last one is where the old condensed setting hurt most. */
body { font-size: 17px; line-height: 1.68; }
p, li, dd, .lede, .hero-body, blockquote { max-width: 68ch; line-height: 1.68; }
.lede, .hero-body { font-size: 1.06rem; line-height: 1.62; }
small, .small, .note, .fine, figcaption { line-height: 1.55; letter-spacing: .01em; }
h1, h2, h3, h4 { line-height: 1.14; text-wrap: balance; }
.eyebrow, .foot-h, th, .pill, .tag, .chip, .crumbs { letter-spacing: .1em; }
.saved b, .mathbox .big, .rounds .big, .pkg-n, .s3 .n, .bigstep-n { letter-spacing: -.03em; line-height: .96; }




/* ── Afterpay block, used on both comparison cards ─────────────────────────
   Mint reads at full strength against the white card and the navy one alike, so
   the same component makes the payment option equally unmissable on each side.
   Replaces a thin grey line that disappeared on both. */
.apblock { display: flex; align-items: center; gap: .85rem; margin-top: .9rem;
  background: #B2FCE4; color: #0B2B22; border-radius: var(--radius-lg); padding: .8rem .95rem; }
.apblock .apmark { flex: none; background: #0B2B22; color: #B2FCE4; font-size: .8rem;
  padding: .3rem .6rem; border-radius: 6px; }
.apblock b { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.012em; line-height: 1.25; }
.apblock small { display: block; font-size: .8rem; line-height: 1.4; margin-top: .1rem; opacity: .8; }
.apblock small b { display: inline; font-size: inherit; }

.reach-card:not(.reach-card--lead) .reach-price { color: var(--ink-muted); }
/* A quiet nudge off the Basic card toward the Multi one. Deliberately small —
   it should read as a helpful aside, not a second sales pitch competing with
   the card's own CTA. */
.upnote { margin: 1.1rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-muted);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.btn--xs { padding: .42rem .8rem; font-size: .8rem; border-radius: 999px; }


/* ── Hero price block + hero review badge ─────────────────────────────────
   Two components that replaced the four hero stat boxes. The boxes repeated
   whatever the page said underneath them and made the hero busy; the price
   (with its instalment at equal weight) and the review number do not. Both
   are written for a dark hero and carry a light-surface variant. */
.heroprice { margin-top: 1.4rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg); background: rgba(255,255,255,.07); padding: 1.1rem 1.25rem; max-width: 30rem; }
.heroprice-lbl { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .5rem; }
.heroprice-row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.heroprice-amt { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 2.7rem); letter-spacing: -.03em; line-height: 1; color: #fff; }
.heroprice-or { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.heroprice-ap { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.heroprice-ap b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2rem); letter-spacing: -.025em; color: #B2FCE4; line-height: 1; }
.heroprice-fine { margin-top: .7rem; font-size: .84rem; line-height: 1.55; color: var(--on-dark-muted); }
.heroprice-alt { margin-top: .5rem; font-family: var(--font-mono); font-size: .78rem; color: var(--on-dark-muted); }
/* light surface — the class pages put this on tint, not on the dark hero */
.section:not(.section--dark) .heroprice, .heroprice--light {
  border-color: var(--rule); background: var(--surface-raised); box-shadow: var(--shadow);
}
.section:not(.section--dark) .heroprice-lbl, .heroprice--light .heroprice-lbl,
.section:not(.section--dark) .heroprice-or,  .heroprice--light .heroprice-or,
.section:not(.section--dark) .heroprice-fine,.heroprice--light .heroprice-fine,
.section:not(.section--dark) .heroprice-alt, .heroprice--light .heroprice-alt { color: var(--ink-muted); }
.section:not(.section--dark) .heroprice-amt, .heroprice--light .heroprice-amt { color: var(--ink); }
.section:not(.section--dark) .heroprice-ap b, .heroprice--light .heroprice-ap b { color: var(--signal-deep); }

.herorev { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.herorev-faces { display: flex; flex: none; }
.herorev-faces img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); margin-left: -14px; background: var(--surface-tint); }
.herorev-faces img:first-child { margin-left: 0; }
.herorev-stars { display: block; font-size: 1.05rem; letter-spacing: .16em; color: #FFC24B; line-height: 1; }
.herorev-body b { display: block; margin-top: .3rem; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.herorev-body b span { font-weight: 600; font-size: .95rem; color: var(--on-dark-muted); letter-spacing: 0; }
.herorev-sub { display: block; margin-top: .15rem; font-size: .88rem; color: var(--on-dark-muted); }
.hero:not(.on-dark) .herorev-body b, .section:not(.section--dark) .herorev-body b { color: var(--ink); }
.hero:not(.on-dark) .herorev-body b span, .hero:not(.on-dark) .herorev-sub,
.section:not(.section--dark) .herorev-body b span, .section:not(.section--dark) .herorev-sub { color: var(--ink-muted); }
.section:not(.section--dark) .herorev-faces img { border-color: var(--surface); }
@media (max-width: 480px) { .herorev-faces img { width: 40px; height: 40px; } .herorev-body b { font-size: 1.3rem; } }


/* ── The path rail: three classes, left to right ──────────────────────────
   Every stop is an entry point, not a step you must have earned. The arrows
   drop onto the track from above at all three nodes, which is the whole idea
   said in one picture: you join the line wherever you already are.

   Each <article> is display:contents so its four parts land in the rail's own
   shared rows — that keeps the nodes on one horizontal line without subgrid
   and without absolute positioning. */
.pathrail { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.5rem; }
.pathstop { display: contents; }

.pathstop-entry { grid-row: 1; display: grid; justify-items: center; text-align: center; padding-bottom: .5rem; }
.pathstop-entry q { font-family: var(--font-display); font-weight: 600; font-size: clamp(.92rem, 1.5vw, 1.05rem); color: var(--ink); quotes: '“' '”'; max-width: 26ch; }
.pathstop-entry svg { width: 18px; height: 26px; margin-top: .4rem; color: var(--signal); }

.pathstop-node { grid-row: 2; position: relative; display: grid; place-items: center; height: 62px; }
.pathstop-node::before { content: ''; position: absolute; left: -50%; right: -50%; top: 50%; height: 2px; background: var(--rule-strong); }
.pathstop:first-child .pathstop-node::before { left: 50%; }
.pathstop:last-child .pathstop-node::after { content: ''; position: absolute; right: -50%; top: 50%; transform: translate(1px, -50%); border-left: 9px solid var(--rule-strong); border-block: 6px solid transparent; }
.pathstop-node span { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--rule-strong); font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
.pathstop--lead .pathstop-node span { background: var(--signal); border-color: var(--signal); color: #fff; }
.pathstop-media { grid-row: 3; margin: 1.25rem 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--dark-deep); }
.pathstop-media img, .pathstop-media video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.pathstop-body { grid-row: 4; background: var(--surface-raised); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--pad-sm); display: flex; flex-direction: column; gap: .5rem; }
.pathstop-body .btn { margin-top: auto; }
.pathstop--lead .pathstop-body { border-color: var(--signal); border-top: 0; box-shadow: var(--shadow-lift); }
.pathstop--lead .pathstop-media { border: 1px solid var(--signal); border-bottom: 0; }
.pathstop-body h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.pathstop-price { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.pathstop-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--ink-muted); letter-spacing: 0; margin-top: .15rem; }
.pathstop-body p { font-size: .92rem; color: var(--ink-muted); line-height: 1.55; }
.pathstop-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-deep); }
.pathrail-note { margin-top: 1.5rem; font-size: .95rem; color: var(--ink-muted); max-width: 64ch; }

@media (max-width: 900px) {
  .pathrail { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2rem; }
  .pathstop { display: grid; grid-template-columns: 1fr; }
  .pathstop-entry, .pathstop-node, .pathstop-media, .pathstop-body { grid-row: auto; }
  .pathstop-entry { justify-items: start; text-align: left; }
  .pathstop-entry svg { transform: none; }
  .pathstop-node { height: 46px; justify-items: start; place-items: center start; }
  .pathstop-node::before, .pathstop:last-child .pathstop-node::after { display: none; }
  .pathstop-media { margin-top: .75rem; }
}


/* ── Shared media frame ───────────────────────────────────────────────────
   Was `.lt-media` on the LTC page only; promoted here because the range and
   compare pages need the same figure. A caption plate and an optional corner
   badge over a 16:10 well that holds either an <img> or a looping <video>. */
.mediafig { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--dark-deep); aspect-ratio: 16 / 10; }
.mediafig--wide { aspect-ratio: 16 / 9; }
.mediafig--square { aspect-ratio: 1; }
.mediafig--tall { aspect-ratio: 4 / 5; }
.mediafig img, .mediafig video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mediafig figcaption { position: absolute; left: .6rem; bottom: .6rem; right: .6rem; background: rgba(16,35,58,.86); color: #fff; padding: .35rem .6rem; border-radius: 7px; font-size: .72rem; line-height: 1.35; }
.mediabadge { position: absolute; top: .6rem; left: .6rem; display: inline-flex; align-items: center; gap: .35rem; background: rgba(180,36,60,.94); color: #fff; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; padding: .3rem .5rem; border-radius: 5px; }
.mediabadge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ── Drill cards: a skill, a loop of it happening ─────────────────────────
   Used for Concealed Carry 1's curriculum and anywhere else a list of
   physical skills reads better as footage than as bullets. */
.drills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 820px) { .drills { grid-template-columns: 1fr; } }
.drill { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.section--dark .drill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
@media (max-width: 560px) { .drill { grid-template-columns: 1fr; } }
.drill .mediafig { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; min-height: 215px; }
.drill-body { padding: var(--pad-sm); display: flex; flex-direction: column; gap: .4rem; }
.drill-n { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; color: var(--signal-deep); }
/* --signal on the dark drill surface is 2.5:1; the light tint clears AA */
.section--dark .drill-n { color: var(--signal-on-dark); }
.drill-body h3 { font-size: 1.05rem; }
.section--dark .drill-body h3 { color: #fff; }
.drill-body p { font-size: .89rem; line-height: 1.55; color: var(--ink-muted); }
.section--dark .drill-body p { color: var(--on-dark-muted); }

/* ── The three doors onto the range ───────────────────────────────────────
   The eligibility table answers this for a search engine; this answers it
   for a person, in one glance, before they reach the table. */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }
.door { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.door--lead { border-color: var(--signal); box-shadow: var(--shadow-lift); }
.door .mediafig { border-radius: 0; aspect-ratio: 16 / 9; }
.door-body { padding: var(--pad-sm); display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.door-body h3 { font-size: 1.15rem; }
.door-q { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.door-body p { font-size: .89rem; color: var(--ink-muted); line-height: 1.55; }
.door-price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.door-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-muted); letter-spacing: 0; margin-top: .1rem; }
.door-body .btn { margin-top: auto; }

/* ── Prompt card: a line of copy and one button ───────────────────────────
   Was two inline `grid-template-columns:1fr auto` cards that kept their two
   tracks at 390px, squeezing the copy into a 107px column and breaking words
   mid-syllable. Same layout, but it stacks. */
.promptcard { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; background: var(--surface-tint); }
@media (max-width: 640px) { .promptcard { grid-template-columns: 1fr; gap: 1rem; } .promptcard .btn { justify-self: start; } }


/* ── Hero trust row ───────────────────────────────────────────────────────
   The review badge and the seats-left pill used to stack as two separate
   blocks under the price, which is what made the hero read as a wall of seven
   things. They answer the same question — can I trust this, should I hurry —
   so they share a row and the eye takes them in once. */
.herotrust { display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.herotrust .herorev { margin-top: 0; }
.herotrust .scar { margin-top: 0; }
@media (max-width: 560px) { .herotrust { gap: .85rem; } }


/* ── Class markers: the progression, made unmissable while scrolling ──────
   The three classes read as one sequence, so each opens with its number set
   large enough to register at a glance, and a connector runs from one to the
   next. The connector carries "you can start here" rather than a bare arrow,
   because the whole point is that nobody has to begin at class one. */
.classmark { display: flex; align-items: flex-start; gap: clamp(.9rem, 2.5vw, 1.6rem); }
.classmark-n {
  font-family: var(--font-display); font-weight: 800; line-height: .82; margin-top: .06em;
  font-size: clamp(3.2rem, 9vw, 6rem); letter-spacing: -.05em;
  color: var(--rule-strong); flex: none; font-variant-numeric: tabular-nums;
}
.classmark--lead .classmark-n { color: var(--signal); }
.classmark-t { display: grid; gap: .35rem; }
.classmark-t .eyebrow { color: var(--ink-muted); }
.classmark--lead .classmark-t .eyebrow { color: var(--signal-deep); }
.classmark-t h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.025em; line-height: 1.06; text-wrap: balance; }
.classmark-price { font-family: var(--font-mono); font-size: .92rem; color: var(--ink-muted); }
.classmark-price b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; }

.classlink { display: grid; justify-items: center; gap: .5rem; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.classlink svg { width: 22px; height: 40px; color: var(--rule-strong); }
.classlink span {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .85rem; background: var(--surface);
}
@media (max-width: 620px) { .classmark { flex-direction: column; gap: .4rem; } }

/* ── Landing chrome ───────────────────────────────────────────────────────
   Paid traffic. The header keeps the logo for trust and the phone number for
   the people who would rather just call; everything else that could carry a
   visitor out of the funnel is gone. */
.masthead--bare .wrap { justify-content: space-between; }
.masthead-phone { font-family: var(--font-mono); font-size: .88rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.masthead-phone:hover { color: var(--signal); }
body[data-chrome="landing"] { padding-bottom: 0 !important; }
/* Phones: the number clipped at the right edge behind the wordmark (Mario,
   2026-09-24). The "Call" word goes, the number becomes a pill, and the brand
   loses its sub-line so the two fit side by side at 360px. */
@media (max-width: 640px) {
  .masthead--bare .brand .sub { display: none; }
  .masthead--bare .brand .wordmark { font-size: 1.05rem; }
  .masthead-phone { font-size: .8rem; padding: .45rem .7rem; border: 1.5px solid var(--rule-strong); border-radius: 999px; }
  .masthead-phone .mp-word { display: none; }
}

/* ── Quiz: the gate and the offer ─────────────────────────────────────────
   A paid-traffic page, so the result screen is a sales page rather than a
   receipt: the two ways in, the guarantee, and one place to click. */
.qfield { display: grid; gap: .35rem; margin-bottom: .9rem; }
.qfield > span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.qfield > span em { font-style: normal; opacity: .65; }
.qfield input { font: inherit; padding: .8rem .9rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); width: 100%; }
.qfield input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-color: transparent; }
.qerror { color: var(--signal-deep); font-size: .9rem; margin: .25rem 0 .75rem; }

.qoffer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
@media (max-width: 720px) { .qoffer { grid-template-columns: 1fr; } }
.qopt { display: flex; flex-direction: column; gap: .45rem; padding: var(--pad-sm); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); background: var(--surface-raised); border: 2px solid var(--signal); box-shadow: var(--shadow-lift); }
.qopt--alt { border-color: var(--rule); box-shadow: var(--shadow); }
.qopt-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-deep); }
.qopt--alt .qopt-tag { color: var(--ink-muted); }
.qopt-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.qopt-price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; }
.qopt-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-muted); letter-spacing: 0; margin-top: .2rem; }
.qopt-body { font-size: .9rem; color: var(--ink-muted); line-height: 1.5; }
.qopt-go { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--signal-deep); }

.qproof { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; margin-top: 1.75rem; }
@media (max-width: 720px) { .qproof { grid-template-columns: 1fr; } }
.qproof-seal { background: var(--surface-tint); border-radius: var(--radius-lg); padding: var(--pad-sm); }
.qproof-seal b { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.qproof-seal span { display: block; margin-top: .35rem; font-size: .88rem; color: var(--ink-muted); line-height: 1.5; }
.qproof-stats { display: grid; gap: .5rem; align-content: start; }
.qproof-stats div { display: flex; align-items: baseline; gap: .6rem; }
.qproof-stats b { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; min-width: 4.2rem; }
.qproof-stats span { font-size: .85rem; color: var(--ink-muted); }

/* ── Afterpay: the full price, then the instalment ────────────────────────
   The section used to open on $62.25 with the $249 buried in a paragraph, so
   the number people were being asked to accept never appeared at full size.
   Now the total is stated first and the instalment sits beside it, which is
   the comparison that makes it feel small — without a struck-through price
   implying a discount that does not exist. */
.apfull { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.apfull-total { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.03em; }
.apfull-lbl { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .66; }
.apfull-or { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .66; }

/* The fallback for someone who qualified but is not ready to commit. Quiet on
   purpose — it must not compete with the two courses above it. */
.qaside { margin-top: 1.1rem; font-size: .88rem; line-height: 1.55; color: var(--ink-muted); text-align: center; }
.qaside a { color: var(--signal-deep); font-weight: 600; }

/* ── The course-difference panel ──────────────────────────────────────────
   It was a paragraph followed by forty-one two-letter state codes, at
   checkout, where nobody is studying reciprocity — they are choosing. Two
   labelled rows carry the same decision, and the state list moves to the page
   built for it. */
.diffpanel { padding: .95rem 1.15rem; }
.diffpanel > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.diffrows { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: .9rem 0 0; }
@media (max-width: 520px) { .diffrows { grid-template-columns: 1fr; gap: .2rem; } .diffrows dd { margin-bottom: .7rem; } }
.diffrows dt { font-family: var(--font-display); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.diffrows dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-muted); }
.diffnote { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--ink-muted); }
.diffnote a { color: var(--signal-deep); font-weight: 600; }

/* ── Cards stop being links ───────────────────────────────────────────────
   A card that carries its own call to action should not also be one big
   anchor: the whole surface navigating makes the button look decorative, and
   a stray click on the copy takes you somewhere you did not choose. The card
   is a container now, and the link inside it is the only way out. */
.qopt-go, .gcard h3 a, .orcard .go { text-decoration: none; }
.qopt-go { align-self: flex-start; }
.qopt-go:hover, .gcard h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gcard h3 a { color: inherit; }
.gcard h3 a:focus-visible, .qopt-go:focus-visible, .orcard .go:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px;
}
/* the whole-card hover lift was an affordance for a click that no longer works */
.gcard:hover, .qopt:hover { transform: none; }
.reach-map { display: block; }

/* ═══ FAQ page ═══════════════════════════════════════════════════════════
   The jump bar is the whole point of a 25-question page: nobody reads one
   top to bottom, they arrive with one question and want the group it is in. */
.faqjump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.faqjump a { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em;
  padding: .55rem .95rem; border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-soft); text-decoration: none; background: var(--surface-raised);
  transition: background .18s ease, color .18s ease, border-color .18s ease; }
.faqjump a:hover, .faqjump a:focus-visible { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }
.faq details + details { margin-top: 0; }
.faq details > div p { margin: 0 0 .8rem; line-height: 1.65; }
.faq details > div p:last-child { margin-bottom: 0; }
.faq details > div em { color: var(--ink); }
/* the anchored section must clear the sticky masthead */
#general, #basic, #multi, #legal { scroll-margin-top: 5.5rem; }
.faqend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-top: 2.5rem; padding: var(--pad); border-radius: var(--radius-lg);
  background: var(--dark); color: var(--on-dark); }
.faqend h3 { font-size: 1.3rem; }
.faqend p { margin: .35rem 0 0; color: var(--on-dark-muted); font-size: .95rem; max-width: 44ch; }
.faqend-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.faqend-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.faqend-cta .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* ═══ The Multi saving ═══════════════════════════════════════════════════
   Replaces the three-box equation. That layout set $1,249+, $349 and $900+ at
   the same display size, and the largest of the three was a saving rather than
   a price — so readers took $900 for the cost. Here only one number is big and
   it is the one they pay; the comparison survives as a single struck line. */
.mathone { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center;
  margin-top: 2rem; padding: var(--pad); background: var(--dark); color: var(--on-dark);
  border-radius: var(--radius-lg); }
.mathone-price { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 5.5rem); line-height: .92; letter-spacing: -.03em; }
.mathone-price small { display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-muted); margin-top: .7rem; }
.mathone-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mathone-list li { display: flex; gap: .6rem; align-items: baseline; font-size: 1rem; line-height: 1.45; }
.mathone-list li::before { content: '\2713'; color: #7FD1A8; font-weight: 700; flex: none; }
.mathone-strike { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-dark);
  font-size: .95rem; color: var(--on-dark-muted); line-height: 1.55; }
.mathone-strike s { text-decoration: none; position: relative; color: #fff; font-weight: 700; }
.mathone-strike s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%;
  height: 2px; background: var(--signal); transform: rotate(-3deg); }
@media (max-width: 800px) { .mathone { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ═══ Afterpay lockup ════════════════════════════════════════════════════
   The real mark on its brand mint, so it reads on a white card and on the
   navy alike — the text-only .apmark could not sit on both. */
.apay { display: inline-flex; align-items: center; background: #B2FCE4;
  border-radius: 6px; padding: .3rem .5rem; flex: none; line-height: 0; }
.apay img { display: block; height: 14px; width: auto; }
.apay--sm img { height: 11px; }
.apay--lg img { height: 20px; }
.apayline { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-muted); }
.on-dark .apayline, .section--dark .apayline { color: var(--on-dark-muted); }
/* a price that was really higher — never decorative */
.was { position: relative; color: inherit; opacity: .75; text-decoration: none; white-space: nowrap; }
.was::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px;
  background: var(--signal); transform: rotate(-4deg); }

/* ═══ Class picker · one panel, four tabs ══════════════════════════════ */
.cpick-tabs { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; background: var(--surface-tint);
  border: 1px solid var(--rule); border-radius: 999px; }
.cpick-tabs button { font-family: var(--font-display); font-weight: 700; font-size: .95rem; padding: .6rem 1.1rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.cpick-tabs button:hover { color: var(--ink); }
.cpick-tabs button[aria-selected="true"] { background: var(--signal); color: #fff; }
.cpick-tabs button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.cpick-panel { display: grid; grid-template-columns: 5fr 7fr; gap: 0; margin-top: 1.1rem; border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow); }
.cpick-panel[hidden] { display: none; }
.cpick-fig { margin: 0; aspect-ratio: 4 / 3; min-height: 100%; }
.cpick-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpick-body { padding: var(--pad); display: flex; flex-direction: column; gap: .5rem; }
.cpick-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
.cpick-price small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .74rem; color: var(--ink-muted); margin-top: .35rem; }
.cpick-body h3 { font-size: 1.3rem; line-height: 1.2; }
.cpick-body p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--ink-muted); max-width: 52ch; }
.cpick-foot { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
@media (max-width: 800px) {
  .cpick-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); }
  .cpick-tabs button { border-radius: var(--radius); padding: .65rem .5rem; font-size: .88rem; }
  .cpick-panel { grid-template-columns: 1fr; }
  .cpick-fig { aspect-ratio: 16 / 10; min-height: 0; }
  .cpick-body { padding: var(--pad-sm); }
}

/* ═══ Tick what is true ════════════════════════════════════════════════
   Just the boxes until one is ticked; then one class steps in below with
   its photo. Nothing is pre-selected, because nothing has been chosen. */
.ctick { display: grid; gap: 1rem; max-width: 60rem; }
.ctick-l { display: grid; gap: .45rem; grid-template-columns: 1fr 1fr; }
.ctick-l label { display: flex; gap: .7rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--surface-raised); font-size: .95rem; cursor: pointer; }
.ctick-l label:has(input:checked) { border-color: var(--signal); background: rgba(180,36,60,.04); }
.ctick-l input { width: 1.15rem; height: 1.15rem; accent-color: var(--signal); flex: none; }
.ctick-r[data-state="empty"] { display: none; }
.ctick-card { display: grid; grid-template-columns: 5fr 7fr; border: 2px solid var(--signal); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow); }
.ctick-fig { margin: 0; min-height: 100%; aspect-ratio: 4 / 3; }
.ctick-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctick-body { padding: var(--pad-sm); display: flex; flex-direction: column; gap: .35rem; }
.ctick-k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-deep); }
.ctick-body h3 { font-size: 1.3rem; }
.ctick-p { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; margin: .25rem 0; }
.ctick-body p { margin: 0; font-size: .93rem; color: var(--ink-muted); line-height: 1.5; max-width: 52ch; }
.ctick-foot { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
@media (prefers-reduced-motion: no-preference) { .ctick-card { animation: ctick-in .28s ease-out; } }
@keyframes ctick-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .ctick-l { grid-template-columns: 1fr; } .ctick-card { grid-template-columns: 1fr; } .ctick-fig { aspect-ratio: 16 / 10; min-height: 0; } }

/* ═══ One sentence · the Multi closer ══════════════════════════════════ */
.onesent { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.35; max-width: 30ch; letter-spacing: var(--display-track); }
.onesent em { font-style: normal; color: var(--signal); }
.onesent-foot { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.5rem; }

/* ═══ Afterpay section · no class chosen ═══════════════════════════════ */
.aptl-split { margin-top: 1.25rem; display: grid; gap: .3rem; font-size: .86rem; }
.aptl-split > div { display: grid; grid-template-columns: 1fr auto auto; gap: .9rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-muted); }
.aptl-split > div:last-child { border-bottom: 0; }
.apsplit-p { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.apsplit-i { font-family: var(--font-mono); font-size: .78rem; font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: right; }
.aptl-steps b.frac, .aptl-steps li b:has(> *) { }

/* ═══ What the seat holds ══════════════════════════════════════════════ */
.seatgrid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 2rem; }
.seatgrid li { display: flex; gap: .65rem; align-items: baseline; font-size: 1rem; line-height: 1.45; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.seatgrid svg { width: 18px; height: 18px; flex: none; color: var(--confirm); transform: translateY(3px); }
.seatsum { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.seatsum .k { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; }
.seatsum-saver { padding: var(--pad-sm); background: var(--surface-tint); border-left: 4px solid var(--confirm); border-radius: var(--radius); }
.seatsum-saver .k { color: var(--confirm); }
.seatsum-saver p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--ink-muted); }
.seatsum-saver b { color: var(--ink); }
.seatsum-pay { padding: var(--pad-sm); background: var(--dark); color: var(--on-dark); border-radius: var(--radius); display: flex; flex-direction: column; gap: .3rem; }
.seatsum-pay .k { color: var(--on-dark-muted); margin-bottom: 0; }
.seatsum-pay b { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.seatsum-pay .apayline { color: var(--on-dark-muted); }
@media (max-width: 760px) { .seatgrid, .seatsum { grid-template-columns: 1fr; } }

/* ═══ Sticky masthead ══════════════════════════════════════════════════
   The approved-course bar and the address bar scroll away; the masthead
   (logo, nav, hamburger, date button) fixes to the top once you scroll past
   it. A spacer the same height stops the page jumping when it detaches. */
/* anchor jumps land below the pinned masthead */
html { scroll-padding-top: 92px; }
.masthead.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  box-shadow: 0 1px 0 var(--rule), 0 10px 30px -18px rgba(30,60,92,.35); }
@media (prefers-reduced-motion: no-preference) { .masthead.is-stuck { animation: mast-in .18s ease-out; } }
@keyframes mast-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ═══ Class header · a section that IS a class says so first ══════════════
   The class name is the heading and the tagline is the subhead, so nobody
   reads two paragraphs before learning which class they are looking at. */
.classhead { display: grid; gap: .35rem; }
.classhead-k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal-deep); }
.classhead--dark .classhead-k { color: var(--signal-on-dark); }
.classhead-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: .95; letter-spacing: -.035em; }
.classhead-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem; margin: .5rem 0 0; font-family: var(--font-mono); font-size: .86rem; color: var(--ink-muted); }
.classhead-price b { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); }
.classhead-price span { display: inline-flex; align-items: center; gap: .5rem; }
.classhead--dark .classhead-price { color: var(--on-dark-muted); }
.classhead--dark .classhead-price b { color: #fff; }
.classhead-tag { margin-top: 1.5rem; max-width: 24ch; }
.section--dark .classhead-tag { color: #fff; }

/* the seat, as pictures: one icon and a few words each */
.seatgrid--tiles { grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.seatgrid--tiles li { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem 1rem .95rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-raised); font-size: .92rem; line-height: 1.35; }
.seat-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-tint); color: var(--ink-soft); display: grid; place-items: center; }
.seat-ic svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .seatgrid--tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .seatgrid--tiles { grid-template-columns: repeat(2, 1fr); } }

/* ═══ Chat bubble ═══════════════════════════════════════════════════════
   A round launcher bottom-right, above the book bar, with a prompt that
   shows once per visit. Looks like a chatbot; opens a real text thread. */
.chatfab { position: fixed; right: 1.1rem; bottom: calc(var(--bookbar-h, 88px) + 1.5rem); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.chatfab-btn { position: relative; width: 60px; height: 60px; border-radius: 50%; color: #fff; display: grid; place-items: center; text-decoration: none;
  background: linear-gradient(145deg, var(--signal) 0%, var(--signal-deep) 100%);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--signal) 75%, transparent), 0 0 0 4px rgba(255,255,255,.14);
  transition: transform .18s ease, box-shadow .18s ease; }
/* the breathing ring: the launcher's only motion, and none at all if the visitor asked for none */
.chatfab-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--signal); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .chatfab-btn::before { animation: chat-ring 2.8s ease-out infinite; } }
@keyframes chat-ring { 0% { transform: scale(.85); opacity: .7; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }
/* out of the way of anything that takes over the screen */
body:has(.modal:not([hidden])) .chatfab, body:has(.sheet:not([hidden])) .chatfab, body:has(dialog[open]) .chatfab { display: none; }
.chatfab-btn svg { width: 28px; height: 28px; }
.chatfab-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 18px 40px -10px color-mix(in srgb, var(--signal) 85%, transparent), 0 0 0 4px rgba(255,255,255,.2); }
.chatfab-dot { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--signal-deep); }
@media (prefers-reduced-motion: no-preference) { .chatfab-dot { animation: chat-blink 2.4s ease-in-out infinite; } }
@keyframes chat-blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }.chatfab-tip { position: relative; max-width: 240px; padding: .8rem 2rem .8rem 1rem; background: var(--surface-raised); color: var(--ink); border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow-lift); border: 1px solid var(--rule); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.chatfab-tip.is-in { opacity: 1; transform: none; }
.chatfab-tip[hidden] { display: none; }
.chatfab-tip b { display: block; font-family: var(--font-display); font-size: .95rem; }
.chatfab-tip span { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .15rem; }
.chatfab-x { position: absolute; top: .3rem; right: .35rem; width: 24px; height: 24px; border: 0; background: none; color: var(--ink-muted); font-size: 1.1rem; cursor: pointer; }
.bookbar-chat { display: none !important; }
@media (max-width: 720px) { .chatfab { right: .9rem; bottom: calc(var(--bookbar-h, 76px) + .75rem); } .chatfab-btn { width: 54px; height: 54px; } .chatfab-btn svg { width: 25px; height: 25px; } .chatfab-tip { max-width: 210px; } .langfab { top: 34%; } }
.masthead-chat { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--ink-soft); text-decoration: none; margin-right: .75rem; white-space: nowrap; }
.masthead-chat svg { width: 18px; height: 18px; }
.masthead-chat:hover { color: var(--signal-deep); }
@media (max-width: 720px) { .masthead-chat { display: none; } }

.h-sub { display: block; font-size: .5em; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; margin-top: .35rem; }

/* ═══ What people say on the phone · one line each ═══════════════════════ */
.lt-obj, .it-obj, .bs-obj { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; margin-top: 2rem; }
.say { display: grid; gap: .55rem; padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--rule); border-left: 4px solid var(--signal);
  border-radius: var(--radius-lg); background: var(--surface-raised); }
.say-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-tint); color: var(--signal-deep); display: grid; place-items: center; }
.say-ic svg { width: 21px; height: 21px; }
.say q { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; quotes: '\201C' '\201D'; }
.say p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-muted); }

/* month view: the times live on the day */
.mday .times { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: .2rem; }
.mday .times i { font-style: normal; font-family: var(--font-mono); font-size: .6rem; line-height: 1; padding: .16rem .28rem; border-radius: 4px; background: var(--surface-tint); color: var(--ink-soft); }
.mday[aria-pressed="true"] { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.mday[aria-pressed="true"] .times i { background: var(--signal); color: #fff; }
.daytimes { display: grid; gap: .5rem; margin-top: 1rem; }
.daytimes:empty { display: none; }
.daytimes h3 { font-size: 1rem; margin-bottom: .25rem; }
@media (max-width: 640px) { .mday .times i { font-size: .54rem; padding: .12rem .2rem; } }

/* stacked steps (LTC languages section): number left, text takes the row */
.bigsteps--stack .bigstep { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; align-items: start; padding: 1rem 1.15rem; }
.bigsteps--stack .bigstep-n { grid-row: 1 / span 2; }
.bigsteps--stack .bigstep h3, .bigsteps--stack .bigstep p { grid-column: 2; max-width: none; }
.bigsteps--stack .bigstep .hic { display: none; }

.bigsteps--stack { display: grid; grid-template-columns: 1fr; gap: .9rem; }

/* the languages line in the hero: a pill, flags at size, no underline */
.hero .langline { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.6rem; padding: .55rem .9rem .55rem .7rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: 0; text-transform: none; }
.hero .langline:hover { background: rgba(255,255,255,.1); }
.hero .flags { display: inline-flex; gap: .2rem; font-size: 1.35rem; line-height: 1; }
.hero--calm .wrap { padding-block: clamp(3rem, 7vw, 5.5rem); }

.bigsteps--stack .bigstep-n { position: static; grid-row: 1 / span 2; font-size: 2rem; opacity: .4; line-height: 1.1; }

/* ═══ Drawer: fits one screen ═════════════════════════════════════════════ */
.drawer-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.drawer-ctas .btn { padding-left: .6rem; padding-right: .6rem; }
.drawer-panel h4 { margin: 1.1rem 0 .3rem; }
.drawer-link { padding: .5rem .8rem; }
.drawer-link span { display: none; }
.drawer-link--cmp { margin-top: .2rem !important; padding-top: .6rem !important; }
.drawer-visit { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--rule); display: grid; gap: .3rem; font-size: .84rem; color: var(--ink-muted); }
.drawer-visit a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.drawer-panel { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
@media (min-height: 760px) { .drawer-link span { display: block; } .drawer-link { padding: .6rem .8rem; } }

.drawer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: .25rem; }
.drawer-cols .drawer-link { padding: .42rem .5rem; margin: 0 -.5rem; font-size: .95rem; line-height: 1.25; }
.drawer-cols .drawer-link b { font-weight: 600; }
.drawer-cols h4 { margin: 1rem 0 .35rem; }
.drawer-link span { display: none !important; }
@media (max-width: 360px) { .drawer-cols { grid-template-columns: 1fr; } }

/* ═══ Class quiz ══════════════════════════════════════════════════════════ */
.cquiz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cquiz-o { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--radius-lg); overflow: hidden; background: var(--dark); cursor: pointer; text-align: left; aspect-ratio: 4 / 3; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease; }
.cquiz-o img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .4s cubic-bezier(.2,.75,.3,1); }
.cquiz-o:hover img { transform: scale(1.03); }
.cquiz-o:hover, .cquiz-o:focus-visible { transform: translateY(-2px); }
.cquiz-o[aria-pressed="true"] { border-color: var(--signal); }
.cquiz-q { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.1rem 1.1rem; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.2; background: linear-gradient(to top, rgba(16,35,58,.92), rgba(16,35,58,.35) 60%, transparent); }
.cquiz-q::before { content: '\201C'; opacity: .6; } .cquiz-q::after { content: '\201D'; opacity: .6; }
.cquiz-o[aria-pressed="true"] .cquiz-q::before { content: '\2713  '; color: #7FD1A8; opacity: 1; }
.cquiz-ans { margin-top: 1.25rem; }
.cquiz-ans[hidden] { display: none; }
.cquiz-card { display: grid; grid-template-columns: 5fr 7fr; border: 2px solid var(--signal); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow); }
.cquiz-card figure { margin: 0; min-height: 100%; aspect-ratio: 4 / 3; } .cquiz-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cquiz-body { padding: var(--pad); display: flex; flex-direction: column; gap: .5rem; }
.cquiz-k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-deep); }
.cquiz-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; }
.cquiz-price { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; margin: .2rem 0 .4rem; }
.cquiz-price small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .74rem; color: var(--ink-muted); margin-top: .35rem; }
.cquiz-body .ticks { margin: 0; }
.cquiz-foot { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
@media (prefers-reduced-motion: no-preference) { .cquiz-card { animation: ctick-in .28s ease-out; } }
@media (max-width: 820px) { .cquiz-opts { grid-template-columns: 1fr; gap: .7rem; } .cquiz-o { aspect-ratio: 16 / 7; } .cquiz-card { grid-template-columns: 1fr; } .cquiz-card figure { aspect-ratio: 16 / 9; min-height: 0; } }

/* drawer: the chat button is an outline, whatever the surrounding rules say */
.drawer-ctas .btn--ghost { --btn-bg: transparent; background: transparent; color: var(--ink); border: 1.5px solid var(--rule-strong); box-shadow: none; }
.drawer-ctas .btn--ghost:hover { background: var(--surface-tint); }
.drawer-cols .drawer-link--cmp b { white-space: nowrap; }

/* phones: Chat now lives in the book bar (the floating one would sit on the language tab) */
.bookbar-chat { display: none; align-items: center; gap: .45rem; padding: .7rem 1rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.55); color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.bookbar-chat svg { width: 20px; height: 20px; }


/* media columns fill their cell — aspect-ratio + height:100% lets an image
   compute its width from its height and spill into the text column */
.cquiz-card figure, .ctick-fig, .cpick-fig { position: relative; min-width: 0; aspect-ratio: auto; min-height: 16rem; }
.cquiz-card figure img, .ctick-fig img, .cpick-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .cquiz-card figure, .ctick-fig, .cpick-fig { min-height: 0; aspect-ratio: 16 / 10; } }

/* tablet masthead: the nav and the chat link do not fit beside the logo and
   the date button between 720 and 1080px; the drawer carries them there */
@media (max-width: 1080px) and (min-width: 721px) { .masthead .nav, .masthead-chat { display: none; } .masthead .wrap { gap: 1rem; } .masthead-cta { display: inline-flex !important; margin-left: auto; } .navtoggle { display: flex !important; margin-left: 0; } }

/* tablet topbar: drop the two soft facts so the address and numbers stay on one line */
@media (max-width: 1080px) and (min-width: 721px) { .topbar .tb-info:nth-child(2), .topbar .tb-info:nth-child(3) { display: none; } }

/* ═══ Menu · the combination ═════════════════════════════════════════════
   Bar and dropdown text from the original; the Classes panel as three
   statements with a photo, price and one line; the drawer grouped and
   colour-coded, sliding from the right, one button at the foot. */
.masthead-chat { padding: .5rem .9rem; border: 1px solid var(--rule-strong); border-radius: 999px; margin: 0 .5rem 0 .25rem; }
.masthead-chat:hover { border-color: var(--ink); }
.masthead .wrap { position: relative; }
.navdd--mega { position: static; }
.navdd-menu.mega { left: 0; right: 0; min-width: 0; padding: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 3px solid var(--signal); top: calc(100% + 12px); }
.mega-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 0; }
.mega-main { padding: 1.4rem 1.6rem 1.6rem; }
.mega-side { padding: 1.4rem 1.6rem 1.6rem; border-left: 1px solid var(--rule); background: var(--surface-tint); border-radius: 0 0 var(--radius-lg) 0; }
.mega-k { display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: .9rem; }
.mega-k::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.mega-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.navdd-menu .mega-tile { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.navdd-menu .mega-tile:hover { transform: translateY(-2px); border-color: var(--signal); box-shadow: var(--shadow-lift); background: var(--surface-raised); }
.mega-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mega-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-body { display: grid; gap: .25rem; padding: .85rem .95rem 1rem; }
.navdd-menu .mega-tile b { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.28; color: var(--ink); }
.mega-name { font-family: var(--font-mono); font-size: .79rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.mega-price { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--ink); margin-top: .15rem; }
.mega-price small { font-family: var(--font-mono); font-weight: 400; font-size: .79rem; color: var(--ink-muted); }
.navdd-menu .mega-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; padding: .7rem .6rem; margin: 0 -.6rem; }
.navdd-menu .mega-row b { font-size: .98rem; }
.navdd-menu .mega-row > span > span { display: block; font-size: .8rem; color: var(--ink-muted); }
.mega-row i { font-style: normal; color: var(--signal); font-size: 1.1rem; }
.navdd-menu .mega-cta { display: inline-flex; margin-top: .9rem; }
.mega-note { font-size: .84rem; color: var(--ink-muted); margin: .9rem 0 0; line-height: 1.5; }

/* the drawer */
.drawer-panel { padding: 0; display: flex; flex-direction: column; background: var(--surface-tint); }
.drawer-head { padding: .9rem 1.2rem; margin: 0; background: var(--surface-raised); border-bottom: 1px solid var(--rule); }
.drawer-body { flex: 1; overflow: auto; padding: .9rem 1rem 1rem; display: grid; grid-auto-rows: max-content; gap: .8rem; align-content: start; }
.dgroup { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.dgroup h4 { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .8rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.dgroup h4 i { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.dgroup--info h4 i { background: var(--ink-soft); }
.dgroup--classes h4 { background: rgba(180,36,60,.06); }
.dgroup--info h4 { background: rgba(30,60,92,.06); }
.dgroup .drawer-link { margin: 0; padding: .7rem 1rem; border-top: 1px solid var(--rule); border-radius: 0; }
.dgroup .drawer-link:first-of-type { border-top: 0; }
.dgroup .drawer-link b { font-weight: 600; font-size: .95rem; }
.dgroup .drawer-link span { display: block !important; font-size: .76rem; color: var(--ink-muted); }
.dgroup .drawer-link--cmp { border-top: 1px solid var(--rule) !important; margin-top: 0 !important; padding-top: .7rem !important; background: var(--surface-tint); }
.drawer-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; }
.drawer-contact a { display: grid; gap: .1rem; padding: .75rem .9rem; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.drawer-contact b { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.drawer-contact span { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-muted); }
.drawer-foot { padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); background: var(--surface-raised); border-top: 1px solid var(--rule); }
.drawer-visit, .drawer-ctas, .drawer-cols { display: none; }
@media (max-width: 1080px) { .navdd-menu.mega { display: none !important; } }

.navdd-menu .mega-tile .mega-img { display: block; position: relative; aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
.navdd-menu .mega-tile .mega-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.navdd-menu .mega-tile b, .navdd-menu .mega-tile span { white-space: normal; }

/* short screens: the drawer fits without scrolling */
@media (max-height: 900px) { .dgroup .drawer-link span { display: none !important; } .dgroup .drawer-link { padding: .6rem 1rem; } .drawer-body { gap: .65rem; } }

/* panel side column: a dark button with white text, then the Afterpay breakdown */
.navdd-menu a.mega-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .7rem 1.1rem; border-radius: 999px; background: var(--dark); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.navdd-menu a.mega-cta:hover { background: var(--dark-raised); color: #fff; }
/* Afterpay in the mega menu: the offer in one line, no price table. The
   per-class instalment used to be spelled out here and beside every price;
   it repeated the prices a second time and made the panel read like an
   invoice. The amount belongs at checkout, where it is calculated anyway. */
.mega-ap { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.mega-ap-head { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; font-size: .96rem; line-height: 1.4; color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.mega-ap-fine { display: block; margin-top: .55rem; font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; color: var(--ink-muted); }
.mega-note { display: none; }

/* phone: the language tab clears the chat bubble */
@media (max-width: 720px) { .langfab { top: auto !important; bottom: 17.5rem !important; } }

/* ═══ The class quiz ══════════════════════════════════════════════════════ */
.qz { margin-top: 2rem; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad); box-shadow: var(--shadow); }
.qz-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; gap: .5rem; align-items: center; }
.qz-steps li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-muted); border: 1px solid var(--rule-strong); }
.qz-steps li.on { background: var(--signal); color: #fff; border-color: var(--signal); }
.qz-steps li + li::before { content: ''; }
.qz-q h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; }
.qz-opts { display: grid; gap: .7rem; margin-top: 1.1rem; }
.qz-o { text-align: left; padding: 1rem 1.15rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface-raised); cursor: pointer; display: grid; gap: .15rem; transition: border-color .15s ease, transform .15s ease; }
.qz-o:hover { border-color: var(--signal); transform: translateY(-1px); }
.qz-o b { font-family: var(--font-display); font-size: 1.05rem; }
.qz-o span { font-size: .84rem; color: var(--ink-muted); }
.qz-back { margin-top: 1rem; background: none; border: 0; color: var(--ink-muted); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: underline; }
.qz-k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-deep); }
.qz-card { display: grid; grid-template-columns: 5fr 7fr; margin-top: .75rem; border: 2px solid var(--signal); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
.qz-card figure { margin: 0; position: relative; min-width: 0; min-height: 15rem; }
.qz-card figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qz-body { padding: var(--pad-sm); display: flex; flex-direction: column; gap: .45rem; }
.qz-body h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.qz-body p.qz-price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; margin: .2rem 0; color: var(--ink); }
.qz-body p.qz-ap { font-size: .85rem; color: var(--ink-muted); margin: 0 0 .6rem; }
.qz-body p { margin: 0; font-size: .93rem; color: var(--ink-muted); line-height: 1.5; }
.qz-foot { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.qz-result .apayline { margin-top: .2rem; }
@media (prefers-reduced-motion: no-preference) { .qz-q { animation: ctick-in .25s ease-out; } }
@media (max-width: 720px) { .qz-card { grid-template-columns: 1fr; } .qz-card figure { min-height: 0; aspect-ratio: 16 / 9; } }

/* ═══ The two licence options ════════════════════════════════════════════ */
.ltcpick { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ltcpick-c { position: relative; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.ltcpick-c--lead { border: 2px solid var(--signal); }
.ltcpick-c figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.ltcpick-c figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ltcpick-b { padding: var(--pad-sm); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ltcpick-k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.ltcpick-c--lead .ltcpick-k { color: var(--signal-deep); }
.ltcpick-b h3 { font-size: 1.3rem; line-height: 1.2; }
.ltcpick-p { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; margin: .1rem 0 .3rem; }
.ltcpick-p small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .74rem; color: var(--ink-muted); margin-top: .35rem; }
.ltcpick-b .ticks { margin: 0; }
.ltcpick-f { margin-top: auto; padding-top: 1rem; display: grid; gap: .5rem; justify-items: center; }
@media (max-width: 820px) { .ltcpick { grid-template-columns: 1fr; } }
/* ═══ Phone chrome ═══════════════════════════════════════════════════════
   One bottom stack: the book bar, then a slim booked-strip beside the chat
   bubble. Nothing else floats. The header is opaque when pinned, and the
   language tab is off phones (the drawer carries the languages). */
.masthead.is-stuck { background: var(--surface-raised); }
@media (max-width: 720px) {
.masthead { background: var(--surface-raised); }
  .langfab { display: none !important; }
  .chatfab-tip { display: none !important; }
  .chatfab { right: .85rem; bottom: calc(var(--bookbar-h, 76px) + .75rem); }
  .chatfab-btn { width: 52px; height: 52px; box-shadow: 0 10px 24px -10px rgba(16,35,58,.7), 0 0 0 3px rgba(255,255,255,.95); }
  .chatfab-btn svg { width: 24px; height: 24px; }
  .proof-toast { left: .75rem; right: calc(52px + 1.7rem); bottom: calc(76px + .85rem); max-width: none; grid-template-columns: 26px 1fr; gap: .55rem; padding: .55rem .7rem; border-radius: 12px; font-size: .8rem; line-height: 1.3; align-items: center; }
  .proof-toast .pt-ic { width: 26px; height: 26px; } .proof-toast .pt-ic svg { width: 14px; height: 14px; }
  .proof-toast > span:not(.pt-ic) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .proof-toast small { display: inline; margin-left: .3rem; font-size: .72rem; }
  .proof-toast .pt-x { display: none; }
  .bookbar .wrap { min-height: 76px; }
  /* picker: one option per row */
  .cpick-tabs { grid-template-columns: 1fr; gap: .35rem; }
  .cpick-tabs button { padding: .8rem .9rem; font-size: .95rem; text-align: left; }
  /* next classes: day and seats on one line, name with the arrow, time under */
  .sesh { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "day time seats" "name name name"; column-gap: .6rem; row-gap: .3rem; align-items: center; padding: .8rem .9rem; margin-bottom: .5rem; }
  .sesh:hover { padding-left: .9rem; transform: none; }
  .sesh-day { grid-area: day; font-size: .72rem; letter-spacing: .08em; }
  .sesh-time { grid-area: time; font-family: var(--font-display); font-size: .8rem; font-weight: 500; color: var(--ink-muted); }
  .sesh-time::before { content: '·'; margin-right: .45rem; color: var(--rule-strong); }
  .sesh-seats { grid-area: seats; text-align: right; font-size: .74rem; }
  .sesh-seats.low { padding: .2rem .55rem; animation: none; }
  .sesh-name { grid-area: name; font-size: .95rem; line-height: 1.3; }
  .sesh-name::after { content: ' \2192'; color: var(--signal); font-family: var(--font-mono); margin-left: .25rem; }
  .sesh-go { display: none; }
  /* afterpay schedule stays a single row of four */
  .aptl-steps { grid-template-columns: repeat(4, 1fr) !important; row-gap: 0 !important; gap: .25rem; }
  .aptl-steps::before { display: block !important; }
  .aptl-steps .w { font-size: .56rem; letter-spacing: .04em; }
  .aptl-steps b { font-size: .95rem; }
  .aptl-foot { flex-wrap: wrap; gap: .4rem .6rem; } .aptl-foot b { font-size: 1.1rem; } .aptl-foot .zero { margin-left: 0; width: 100%; text-align: center; }
  .aptl { padding: var(--pad-sm); }
}

/* phones: short guarantee, and the bubble/strip drop when there is no book bar */
.bb-short { display: none; }
@media (max-width: 720px) { .bb-long { display: none; } .bb-short { display: inline; } .bookbar .bb-guar { font-size: .84rem; } }
body.no-bookbar .chatfab { bottom: 1.1rem; }
body.no-bookbar .proof-toast { bottom: 1rem; }
@media (max-width: 720px) { body.no-bookbar .chatfab { bottom: 1rem; } body.no-bookbar .proof-toast { bottom: 1rem; } }
/* phones: the two long state lists collapse to a link */
.legend-more { display: none; }
@media (max-width: 720px) { .legend-item p { display: none; } .legend-more { display: inline-block; margin-top: .4rem; } }

/* phones: the hamburger hugs the right edge */
@media (max-width: 720px) { .masthead .wrap { justify-content: space-between; } .navtoggle { margin-left: auto !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR v6 — month-only picker, calmer class chooser
   Two ways of reading the same 179 sessions (the "Next available" card list and
   the month grid) was the main source of the noise on this page: the same
   white-card-with-a-thin-grey-rule repeated forty times down the column, with
   nothing telling the eye where to land. The list and its view switch are gone.
   What is left gets weight instead — available days are tinted so open and shut
   are told apart before a word is read, and the class chooser is two rows with
   a radio dot rather than two slabs of prose.
   Calendar-only classes; nothing here is used by another page.
   ═════════════════════════════════════════════════════════════════════════ */
.bookpage .book { grid-template-columns: 348px 1fr; gap: clamp(1.75rem, 3.5vw, 3.25rem); }
@media (max-width: 1020px) { .bookpage .book { grid-template-columns: 1fr; } }
.bookpage .steplabel {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
}
.bookpage .steplabel i {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dark); color: #fff; font-family: var(--font-mono); font-size: .7rem; font-style: normal;
}
.bookpage .colgap { margin-top: 2rem; }

/* ── the class chooser: rows with a real radio, one line of copy each ────── */
.pickcourse { display: grid; gap: .55rem; }
.cc {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: .8rem;
  align-items: center; cursor: pointer; padding: .95rem 1.05rem;
  border: 1.5px solid var(--rule); border-radius: 14px; background: var(--surface-raised);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cc input { position: absolute; opacity: 0; pointer-events: none; }
.cc:hover { border-color: var(--rule-strong); }
.cc-dot {
  grid-column: 1; grid-row: 1 / 3; width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid var(--rule-strong); background: var(--surface); transition: all .18s ease;
}
.cc-name { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.cc-sub  { grid-column: 2 / -1; grid-row: 2; font-size: .82rem; color: var(--ink-muted); line-height: 1.35; margin-top: .1rem; }
.cc-price { grid-column: 3; grid-row: 1; align-self: baseline; font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
.cc:has(input:checked) { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.cc:has(input:checked) .cc-dot { border-color: var(--signal); border-width: 6px; }
.cc:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; }
/* the upgrade reads as the different thing it is: navy ground, not another white card */
.cc--best { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.cc--best .cc-sub { color: var(--on-dark-muted); }
.cc--best .cc-dot { background: transparent; border-color: rgba(255,255,255,.45); }
.cc--best:hover { border-color: var(--dark-deep); }
.cc--best:has(input:checked) { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal) inset; }
.cc--best:has(input:checked) .cc-dot { border-color: var(--signal); }
.cc-flag {
  position: absolute; top: -9px; left: 46px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; padding: .16rem .5rem; border-radius: 3px;
  background: var(--signal); color: var(--on-signal);
}
.ccfoot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.ccfoot .apline { margin: 0; font-size: .78rem; }
.ccfoot a { font-size: .8rem; color: var(--ink-muted); text-underline-offset: 3px; }
.ccfoot a:hover { color: var(--signal-deep); }

/* ── seats ───────────────────────────────────────────────────────────────── */
.bookpage .seats-step { gap: .9rem; }
.bookpage .seats-step p { font-size: .82rem; }

/* ── the month panel ─────────────────────────────────────────────────────── */
.calpanel { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; box-shadow: var(--shadow); }
.calpanel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; background: var(--dark); color: #fff;
}
.calpanel-head h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.calpanel-head button {
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer; font-size: 1.15rem; line-height: 1;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: #fff;
}
.calpanel-head button:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.calpanel-head button:disabled { opacity: .28; cursor: not-allowed; }
.calpanel-body { padding: clamp(.95rem, 2vw, 1.35rem); }
.bookpage .filters { margin-bottom: 1rem; }
.bookpage .dow span { font-size: .62rem; color: var(--ink-muted); }
.bookpage .mgrid { gap: 6px; }
.bookpage .mday {
  aspect-ratio: 1 / .62; min-height: 52px; border-radius: 10px; gap: 5px;
  border: 1px solid transparent; background: none; color: var(--ink-muted); font-weight: 600;
}
/* a day with classes on it is tinted — open vs shut is read before any label */
.bookpage .mday:not(:disabled) { background: color-mix(in srgb, var(--dark) 6%, var(--surface)); border-color: color-mix(in srgb, var(--dark) 12%, transparent); color: var(--ink); }
.bookpage .mday:not(:disabled):hover { background: color-mix(in srgb, var(--dark) 13%, var(--surface)); border-color: var(--ink-soft); }
.bookpage .mday:disabled { opacity: 1; color: color-mix(in srgb, var(--ink-muted) 45%, transparent); background: none; border-color: transparent; }
.bookpage .mday .n { font-size: .95rem; }
.bookpage .mday .pips { display: flex; gap: 3px; height: 6px; }
.bookpage .mday .pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); opacity: .5; }
.bookpage .mday.is-low .pips i { background: var(--signal); opacity: 1; }
.bookpage .mday[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: #fff; box-shadow: var(--shadow-lift); }
.bookpage .mday[aria-pressed="true"] .pips i { background: #fff; opacity: .9; }
.bookpage .mday.has-pick { box-shadow: 0 0 0 2px var(--signal) inset; }
.callegend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .9rem; font-size: .76rem; color: var(--ink-muted); }
.callegend span { display: inline-flex; align-items: center; gap: .4rem; }
.callegend i { width: 13px; height: 13px; border-radius: 4px; display: block; flex: none; }
.callegend .lg--open { background: color-mix(in srgb, var(--dark) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--dark) 20%, transparent); }
.callegend .lg--low  { background: var(--signal); border-radius: 50%; width: 8px; height: 8px; }
.callegend .lg--none { border: 1px dashed var(--rule-strong); }

/* ── the chosen day's times ──────────────────────────────────────────────── */
.daytimes { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--rule); }
.daytimes h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: .7rem; }
.daytimes .empty { font-size: .88rem; color: var(--ink-muted); }
.tslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .55rem; }
/* card = the class; Continue rides inside it once the card is chosen, so
   moving on never means travelling to a button somewhere else on the page */
.tslot {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1.5px solid var(--rule); border-radius: 12px; background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tslot:hover { border-color: var(--ink-soft); }
.tslot[aria-selected="true"] { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; background: color-mix(in srgb, var(--signal) 5%, var(--surface)); }
.ts-pick { display: grid; gap: .12rem; text-align: left; cursor: pointer; padding: .8rem .95rem; border: 0; background: none; }
.ts-go { display: none; align-items: center; justify-content: center; gap: .45rem; padding: .6rem; text-decoration: none;
         background: var(--signal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.ts-go svg { width: 16px; height: 16px; }
.ts-go:hover { background: var(--signal-deep); }
.tslot[aria-selected="true"] .ts-go { display: flex; }
.ts-time { font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; }
.ts-end  { font-size: .78rem; color: var(--ink-muted); }
.ts-seats { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-muted); margin-top: .28rem; }
.ts-seats.low, .ts-seats.mid { color: var(--signal-deep); font-weight: 600; }

/* ── the deferred path, quieted right down ──────────────────────────────── */
.bookpage .later { margin-top: 1.25rem; border-width: 1px; border-style: dashed; padding: 1rem 1.15rem; gap: 1rem; }
.bookpage .later h3 { font-size: .95rem; margin-bottom: .2rem; }
.bookpage .later p { font-size: .82rem; }

/* ── static internal-link nav ────────────────────────────────────────────────
   app.js builds the real footer with innerHTML, so before it runs — and for any
   crawler that does not run JS — the site's whole internal link graph is
   missing. build-seo.mjs writes this nav into #site-footer as real HTML; app.js
   replaces it a moment later on every page except the landing chrome, where it
   stays and is the page's only way out. Styled to match the footer it precedes
   so the swap is invisible. */
.seo-nav { background: var(--dark); color: var(--on-dark); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.seo-nav .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.5rem; }
.seo-nav h2 { font-size: .74rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: .2em;
              text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 1rem; }
.seo-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.seo-nav a { color: var(--on-dark); text-decoration: none; font-size: .95rem; }
.seo-nav a:hover { color: var(--footer-link, var(--signal-on-dark)); text-decoration: underline; }

/* ══ V3 feedback, 2026-08-31 ══════════════════════════════════════════════ */

/* Intro curriculum: three things, not five fundamentals.
   Tom: "Instead of 5 you will just say 3 features of the class." */
.it-covers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.it-cover { position: relative; padding: 1.5rem 1.35rem 1.4rem; border: 1px solid var(--rule);
  border-radius: var(--radius-lg); background: var(--surface-raised); }
.it-cover-n { position: absolute; top: -.85rem; left: 1.3rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--signal); color: #fff;
  font-family: var(--font-mono); font-size: .85rem; font-weight: 700; }
.it-cover h3 { margin: .35rem 0 .5rem; font-size: 1.08rem; line-height: 1.25; }
.it-cover p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink-muted); }

/* The objections, as a conversation rather than a row of cards.
   Tom: "I don't like this design. Change it. Maybe conversational bubbles."
   Their line sits right and tinted, ours left and plain — the shape of a text
   thread, so the answer visibly belongs to the question above it. */
.saythread { display: grid; gap: 1.6rem; margin-top: 2rem; }  /* full width, like a phone thread */
.saypair { display: grid; gap: .5rem; }
.saybub { position: relative; padding: .85rem 1.1rem; border-radius: 1.15rem; max-width: 84%;
  font-size: .96rem; line-height: 1.5; }
.saybub--them { justify-self: start; background: rgba(120,120,128,.26); color: var(--ink); border-bottom-left-radius: .35rem;  /* the person texting us: left, grey */
  font-family: var(--font-display); font-weight: 700; }
.saybub--us { justify-self: end; background: #0A84FF; color: #fff;  /* our reply: right, blue */
  border: 0; border-bottom-right-radius: .35rem; }
.saybub--us b { color: #fff; }
.saythread .saybub--us { box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
@media (max-width: 560px) { .saybub { max-width: 92%; } }

/* The returner line under the path on the Intro page.
   Tom: took Intro then came back for the licence class → discount, no live fire. */
.path-returner { margin: 1.25rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-muted);
  padding: .85rem 1.1rem; border-left: 3px solid var(--signal); background: var(--surface-tint);
  border-radius: 0 var(--radius) var(--radius) 0; max-width: 56ch; }

/* Real flag marks. The emoji version rendered as "US ES BR CN" on Windows,
   which is what Tom was looking at when he wrote "use flags here". */
.flags { display: inline-flex; gap: .3rem; align-items: center; vertical-align: -.2em; margin-right: .55rem; }
.flags img { width: 1.5rem; height: 1rem; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12); object-fit: cover; }
.hero .flags { font-size: inherit; }

/* ══ Footer, turned down ══════════════════════════════════════════════════
   Tom: "although the footer will probably never be seen much by users its too
   big and too much on the eyes... We want footer to feel a bit hidden."
   Smaller type, muted links, tighter rhythm, and the SEO hub wall behind a
   disclosure. The links stay in the DOM so the silo still crawls. */
.foot--quiet { padding-block: 2.25rem 0; }
.foot--quiet .foot-h { font-size: .68rem; letter-spacing: .14em; opacity: .55; margin-bottom: .55rem; }
.foot--quiet a { color: var(--on-dark-muted); }
.foot--quiet a:hover { color: var(--on-dark); }
.foot--quiet .small { font-size: .82rem; line-height: 1.55; margin: 0; }
.foot-muted { color: var(--on-dark-muted); opacity: .75; margin-top: .3rem !important; }
.foot-tel { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

.foot-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: 1.75rem; }
@media (max-width: 720px) { .foot-top { grid-template-columns: 1fr; gap: 1.75rem; } }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.foot-links a { font-size: .84rem; line-height: 1.7; }
@media (max-width: 460px) { .foot-links { grid-template-columns: 1fr; } }

/* The SEO wall, shut by default */
.foot-more { border-top: 1px solid rgb(255 255 255 / .08); }
.foot-more > summary { list-style: none; cursor: pointer; padding: .9rem 0;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-muted); opacity: .6; display: flex; align-items: center; gap: .5rem; }
.foot-more > summary::-webkit-details-marker { display: none; }
.foot-more > summary::after { content: '+'; font-size: .95rem; line-height: 1; opacity: .8; }
.foot-more[open] > summary::after { content: '\2212'; }
.foot-more > summary:hover { opacity: .9; }
.foot-more .foot-hubs { padding-bottom: 1.5rem; }

.foot--quiet .foot-legal { border-top: 1px solid rgb(255 255 255 / .08); padding-block: 1rem 1.25rem;
  font-size: .72rem; opacity: .5; }
.foot--quiet .guarbar { margin-bottom: .5rem; }
/* Own class, because `.foot p.small { display:none }` above suppresses p.small
   throughout the footer — that rule is why the contact column used to render as
   two map buttons and nothing else. */
.foot-contact { font-size: .82rem; line-height: 1.55; margin: 0; }
.foot--quiet .foot-contact a { color: var(--on-dark-muted); }
.foot--quiet .foot-contact a:hover { color: var(--on-dark); }
/* languages.html flag row — SVG marks, matching the header set */
.flag img { width: 1.5rem; height: 1rem; border-radius: 2px; margin-right: .45rem;
  vertical-align: -.15em; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }

/* "Do I qualify?" lives only at the top of the nav and the top of the drawer;
   it is no longer repeated inside "Before you reserve". Mario: "only keep the
   top one, and make it more obvious." Signal-coloured outline and text so it
   reads as the second action in the bar, one step under the solid CTA. */
/* Mario, 2026-09-24: "the Do I qualify button is weird" — it was a smaller,
   tinted pill beside a full-height solid button. Now it is the ghost twin of
   the CTA: same height, same shape (the theme's .btn radius), no fill. */
.nav .nav-quiz { border: 1.5px solid var(--signal); border-radius: 999px; min-height: 48px; display: inline-flex; align-items: center;
  padding: .5rem 1.15rem; font-size: .94rem; line-height: 1; font-weight: 700; color: var(--signal-deep); background: transparent;
  transition: border-color .15s, background .15s, color .15s; }
.nav .nav-quiz:hover, .nav .nav-quiz.is-current { background: var(--signal); border-color: var(--signal); color: #fff; }
.drawer-quiz { display: block; padding: 1rem 1.1rem; margin-bottom: .35rem; text-decoration: none;
  border: 1.5px solid var(--signal); border-radius: var(--radius); background: var(--surface-tint); }
.drawer-quiz b { display: block; font-size: 1.1rem; color: var(--signal-deep); }
.drawer-quiz span { display: block; font-size: .82rem; color: var(--ink-muted); margin-top: .15rem; }
.lt-flag img { width: 2.1rem; height: 1.4rem; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }

/* The two videos moved here from the deleted door-to-firing-line section. That
   section laid them out in a narrow sidebar; on the full-width curriculum they
   need to pair up rather than stack at full bleed. */
#fundamentals .it-walkfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
#fundamentals .it-walkfigs figure { margin: 0; }
@media (max-width: 720px) { #fundamentals .it-walkfigs { grid-template-columns: 1fr; } }

/* ── Language flags ───────────────────────────────────────────────────────
   The three language pickers — the drawer row, the side rail's menu, and the
   booking rail on the calendar — all render through langButtons(), so they
   share one rule. The flag is 18px wide with a hairline edge: the Spanish and
   Chinese flags are solid fields that would otherwise bleed into a light chip,
   and the American one has a white stripe at its bottom edge. */
.langflag {
  width: 18px; height: auto; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.drawer-langs button,
.langfab-menu button[data-lang],
.bkrail-lang .langchip {
  display: inline-flex; align-items: center; gap: .45rem;
}
/* The side-rail menu lists languages vertically, so its flags line up in a
   column and the labels want a common left edge. */
.langfab-menu button[data-lang] { justify-content: flex-start; }

/* ── Text-message conversation ─────────────────────────────────────────────
   Objections and FAQs rendered as the SMS thread they actually arrive in:
   the visitor's texts left, ours right, iMessage grammar (dark-mode palette —
   the one deliberate departure from the theme accent, because the blue IS the
   pattern people recognize). Used on the home FAQ and the Intro fears. */
.txtconvo { display: grid; gap: .5rem; margin-top: 2.5rem; }
.txtconvo .tc-day { text-align: center; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .6rem; }
.txtconvo p { margin: 0; width: fit-content; max-width: min(52ch, 82%);
  padding: .72rem 1.05rem; border-radius: 22px; font-size: 1rem; line-height: 1.45;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; }
.txtconvo .tc-them { justify-self: start; background: rgba(120,120,128,.26);
  color: var(--ink); border-bottom-left-radius: 7px; }
.txtconvo .tc-them { margin-top: .85rem; }
.txtconvo .tc-day + .tc-them { margin-top: 0; }
.txtconvo .tc-us { justify-self: end; background: #0A84FF; color: #fff;
  border-bottom-right-radius: 7px; }
.txtconvo .tc-us a { color: #fff; font-weight: 700; }
.txtconvo .tc-status { justify-self: end; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .08em; color: var(--ink-muted); padding-right: .5rem; }
.tc-note { margin-top: 1.4rem; font-size: .9rem; color: var(--ink-muted); }
.tc-note a { color: inherit; font-weight: 700; }

/* A price inside a button ("See class dates — from $249") is a separate flex
   item, so on a phone the label wrapped on one side and the price sat alone
   on the other. display:contents folds it back into the label's text run. */
.btn > [data-price], .btn > [data-split], .t-btn > [data-price], .t-btn > [data-split], .ix-btn > [data-price], .ix-btn > [data-split] { display: contents; }
/* A button label that has to wrap on a phone wraps centred, not ragged-left. */
.btn, .t-btn, .ix-btn { text-align: center; }
/* Sticky book bar on phones: the review count stays on one line and the
   button gives up a little padding, so the bar is two items, not four rows. */
@media (max-width: 480px) { .bookbar .bb-guar { font-size: .76rem; } .bookbar .bb-short { white-space: nowrap; } .bookbar .btn { padding-inline: 1.05rem; font-size: .92rem; } }

/* The booking page footer: one legal line, barely there. */
.foot--bare { padding: 1.5rem 0 1.25rem; background: none; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; line-height: 1.5; text-align: center; color: color-mix(in srgb, var(--ink-muted) 55%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   Boston Firearms — TACTICAL theme (night / blacked-out)

   A token override, not a fork. app.css resolves 1,650 colour references
   through custom properties, so redefining the twenty-one below re-skins the
   whole site: every component, every generated page, untouched.

   Apply on either <html> or <body>:
       <link rel="stylesheet" href="assets/css/app.css">
       <link rel="stylesheet" href="assets/css/theme-tactical.css">
       <body data-theme="tactical">

   Load order matters — this file must come after app.css.

   ── The one non-obvious change ──────────────────────────────────────────
   --on-signal flips from white to near-black. The navy theme's signal is a
   red deep enough to carry white text (#D8374F, 4.9:1). Amber is a light
   colour: white on #FF8A00 measures 2.36:1, a straight WCAG failure, while
   near-black on the same amber is 7.94:1. Every filled button, badge and
   pill inherits this, so getting it wrong would have shipped unreadable CTAs
   site-wide.

   Measured against WCAG 2.1 on #101214:
     ink            15.58:1  AAA      signal          7.94:1  AAA
     ink-muted       8.53:1  AAA      on-signal/amber 7.94:1  AAA
     ink on raised  13.60:1  AAA      confirm         5.33:1  AA
     ink-muted on --surface-raised  7.38:1  AAA

   ── Two faces, and only two ─────────────────────────────────────────────
   Atkinson Hyperlegible Next carries everything a reader has to read —
   body, navigation, labels, prices, times. Barlow Condensed is the display
   voice and nothing else. The navy theme's third face (IBM Plex Mono) is
   folded into Atkinson here rather than kept alongside: three families on a
   near-black page is where the legibility went.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="tactical"],
[data-theme="tactical"] {

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --ink:              #E8EAED;   /* was #17181B — inverted for dark surfaces  */
  --ink-soft:         #AEB6BD;   /* was navy; secondary text, still AA        */
  --ink-muted:        #A7AFB6;   /* was #8B9299. 5.96:1 passed AA on paper,   */
                                 /* but the same grey on a black page reads   */
                                 /* far weaker than the number suggests —     */
                                 /* light-on-dark loses apparent weight. This */
                                 /* is 8.53:1 on --surface, 7.38:1 on raised. */

  /* ── Surfaces. Three steps of near-black so cards still separate from the
        page without a single white panel anywhere. ───────────────────────── */
  --surface:          #101214;
  --surface-tint:     #171A1D;
  --surface-raised:   #1C2024;

  /* ── The "dark" ramp goes darker still, so sections that were navy remain
        distinguishable from the page rather than collapsing into it. ─────── */
  --dark:             #0A0C0E;
  --dark-raised:      #14171A;
  --dark-deep:        #08090B;
  --dark-deepest:     #050607;
  --on-dark:          #E8EAED;
  --on-dark-muted:    #A7AFB6;   /* matched to --ink-muted, same reasoning    */

  /* ── Signal: safety amber. High-visibility is the point — it is the colour
        used on range gear precisely because it reads at a glance. ─────────── */
  --signal:           #FF8A00;
  --signal-deep:      #D97400;
  --signal-on-dark:   #FFA733;   /* the lighter step, as #FF8698 is to red    */
  --on-signal:        #101214;   /* NOT white — see the note above            */

  --confirm:          #4C9A2A;
  --warn:             #B4791C;

  /* ── Rules become light-on-dark instead of dark-on-light ──────────────── */
  --rule:             rgba(255, 255, 255, .10);
  --rule-strong:      rgba(255, 255, 255, .20);
  --rule-dark:        rgba(255, 255, 255, .14);

  /* ── Shadow does almost no work on a black page, so the lift comes from a
        hairline highlight instead of a drop shadow alone. ─────────────────── */
  --shadow:           0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -16px rgba(0, 0, 0, .8);
  --shadow-lift:      0 2px 4px rgba(0, 0, 0, .55), 0 24px 48px -20px rgba(0, 0, 0, .9);
}

/* ── The eight deliberate white plates ───────────────────────────────────
   app.css keeps #fff on the plates behind other companies' marks (payment
   logos, press logos), behind map images, and on three indicator dots. Those
   stay white on purpose: tinting a Visa or NRA mark misrepresents it. On a
   black page they need a soft edge so they do not glare. ─────────────────── */
[data-theme="tactical"] .paylogo,
[data-theme="tactical"] .presswall img.on-white,
[data-theme="tactical"] .reach-map,
[data-theme="tactical"] .mapfig--card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}

/* The press marks are dark artwork drawn for a white plate. The tile paints
   itself with --surface-raised, which this theme turns near-black, so they
   disappeared entirely. The plate stays white; the frame goes dark. */
[data-theme="tactical"] .press2-tile { background: #fff; border-color: rgba(255, 255, 255, .16); }

/* The logo. app.css paints the wordmark and the reticle with var(--dark),
   which was navy and is now near-black — so on a near-black masthead the mark
   disappeared entirely. It is not a token that can simply be flipped, because
   --dark is doing its real job everywhere else; the logo needs the on-dark
   colour instead. The footer already handles this for the navy theme, and this
   is the same treatment applied to the header. */
[data-theme="tactical"] .brand .wordmark { color: var(--on-dark); }
[data-theme="tactical"] .brand .sub { color: var(--signal); }
[data-theme="tactical"] .brand .sub { border-top-color: color-mix(in srgb, var(--signal) 34%, transparent); }
[data-theme="tactical"] .mark path { stroke: var(--on-dark); }
[data-theme="tactical"] .mark .c { fill: var(--signal); }

/* Photographs carry their own light. Knock them back a touch so they sit in a
   night palette instead of punching holes in it. */
[data-theme="tactical"] .hero-fig img,
[data-theme="tactical"] .rangegrid img,
[data-theme="tactical"] .path-img img {
  filter: brightness(.92) saturate(.94);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE-WIDE TACTICAL TREATMENT
   The token block above re-colours every page. This section gives every page
   the rest of the register from the reference sites — condensed caps display
   type, squared buttons, hard edges — so `?theme=tactical` restyles the whole
   site rather than only the pages written for it.

   Scoped entirely under [data-theme="tactical"], so the navy site is untouched.

   ── The type rule ────────────────────────────────────────────────────────
   Barlow Condensed is a POSTER face. It earns its keep at 3rem and above,
   where the narrow forms read as intent; at 0.9rem they read as a squint.
   So it is confined to the display scale and the CTA labels, and every other
   run of text — navigation included — is Atkinson Hyperlegible, which is
   drawn to be told apart at a glance and is the accessibility decision the
   brand has already made.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Where the condensed face is allowed to go ────────────────────────────
   The first cut of this theme pointed --font-display at Barlow Condensed. That
   read as one clean decision, but app.css spends that token on about 150
   separate strings — form labels, card names, drawer links, seat counts, table
   row headings, payment marks, nav links — almost none of which are display
   type. Repointing the token put the whole interface in a poster face at
   0.8–1.1rem, and that, far more than the palette, is what made the site hard
   to read.

   So the token stays where the navy theme left it, and the condensed face gets
   a name of its own and is applied by hand, only to type big enough to carry
   it. Two families still, but only one of them is ever asked to do a job it
   was not drawn for. */
[data-theme="tactical"] {
  --font-tactical: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --radius: 4px;
  --radius-lg: 6px;

  /* The third face goes. Everything app.css set in IBM Plex Mono — eyebrows,
     prices, times, seat counts, table headers, the logo's second line — comes
     back in Atkinson instead, so the tactical site loads two families total.
     Tabular figures are still asked for the same way; where the face cannot
     supply them the numerals set proportionally, which costs a little column
     alignment in the checkout ledger and buys a great deal of readability
     everywhere else. */
  --font-mono: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
}

/* The display scale, and only the display scale. `.d-md` and `.d-sm` are
   deliberately absent: at 1.05–1.6rem condensed caps stop being a statement and
   start being a squint, and those two sizes carry most of the site's subheads
   and card titles. */
[data-theme="tactical"] .display,
[data-theme="tactical"] .d-xl,
[data-theme="tactical"] .d-lg,
[data-theme="tactical"] h1,
[data-theme="tactical"] h2 {
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: .012em;   /* caps have no descenders to hold them apart, so
                               the negative display track has to come back off */
  line-height: .95;
  font-weight: 800;
}

/* h2 is also the tag on several 0.78rem section labels ("Up next",
   "As featured on"). Condensed caps at 800 at that size is the worst case in
   the whole system, so the small heading classes opt straight back out. */
[data-theme="tactical"] h1.d-md,
[data-theme="tactical"] h1.d-sm,
[data-theme="tactical"] h2.d-md,
[data-theme="tactical"] h2.d-sm,
[data-theme="tactical"] .upnext-head h2,
[data-theme="tactical"] .press2-head h2 {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: -.008em;
  line-height: 1.25;
  font-weight: 700;
}

/* The poster exceptions: the places the site already sets type at 1.5rem or
   more, where the condensed face earns its keep — a $249, a "39 STATES" at
   3rem. Listed one by one rather than caught by a token, because a token
   cannot tell a headline number from a form label. */
[data-theme="tactical"] .proof b,
[data-theme="tactical"] .hero-stat b,
[data-theme="tactical"] .heroprice-amt,
[data-theme="tactical"] .herorev-body b,
[data-theme="tactical"] .classhead-name,
[data-theme="tactical"] .vscard-price,
[data-theme="tactical"] .tile h3,
[data-theme="tactical"] .tile .price,
[data-theme="tactical"] .saved b,
[data-theme="tactical"] .mathbox .big,
[data-theme="tactical"] .rounds .big,
[data-theme="tactical"] .perstate b,
[data-theme="tactical"] .pkg-n,
[data-theme="tactical"] .pkg-price,
[data-theme="tactical"] .reach-price,
[data-theme="tactical"] .reach-big,
[data-theme="tactical"] .s3 .n,
[data-theme="tactical"] .verdict b,
[data-theme="tactical"] .cpick-price,
[data-theme="tactical"] .ctick-p,
[data-theme="tactical"] .qopt-price,
[data-theme="tactical"] .qz-body p.qz-price,
[data-theme="tactical"] .ltcpick-p,
[data-theme="tactical"] .cquiz-price,
[data-theme="tactical"] .seatsum-pay b,
[data-theme="tactical"] .apfull-total,
[data-theme="tactical"] .opt-price,
[data-theme="tactical"] .onesent {
  font-family: var(--font-tactical);
  font-weight: 800;
  letter-spacing: .005em;
}
/* Inside the review badge, the big "5.0" is poster type but its "on Google"
   rider is 0.95rem — that part stays in the body face. */
[data-theme="tactical"] .herorev-body b span { font-family: var(--font-body); font-weight: 600; }
/* The parenthetical rider some h2s carry (.h-sub) is 1.1rem — same rule. */
[data-theme="tactical"] .h-sub { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; }
/* The booking rail's h1 is 1.45rem — under the poster threshold, so it takes
   the body face like every other heading its size. */
[data-theme="tactical"] .bkrail h1 { font-family: var(--font-body); text-transform: none;
  letter-spacing: -.008em; line-height: 1.22; font-weight: 700; }

/* ── Navigation ───────────────────────────────────────────────────────────
   The masthead was the worst offender: condensed, 0.93rem, weight 500, over a
   near-black bar. Sentence-case links in the body face at 600 read instantly
   and cost the tactical register nothing — the header's character comes from
   the blacked-out bar and the amber CTA, not from the link face. */
[data-theme="tactical"] .nav a,
[data-theme="tactical"] .navdd-btn,
[data-theme="tactical"] .drawer-link,
[data-theme="tactical"] .navdd-menu b {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
}
/* app.css sets nav links at weight 500. On a white masthead that is a light,
   confident line; light-on-near-black at the same weight goes thin and grey,
   so 600 and a shade more size put the apparent weight back. */
[data-theme="tactical"] .nav a,
[data-theme="tactical"] .navdd-btn { font-size: .96rem; }
[data-theme="tactical"] .navdd-menu span { color: var(--ink-muted); }

/* The drawer and the dropdown lists: light-on-dark rows read tighter than the
   same rows on white, so the labels get a shade more size and air. */
[data-theme="tactical"] .navdd-menu b,
[data-theme="tactical"] .drawer-link b,
[data-theme="tactical"] .dgroup h4 { letter-spacing: .014em; }
[data-theme="tactical"] .drawer-link b { font-size: 1rem; }
[data-theme="tactical"] .navdd-menu a { padding: .8rem .9rem; }
[data-theme="tactical"] .navdd-menu span,
[data-theme="tactical"] .drawer-link span { font-size: .8rem; letter-spacing: .008em; }

/* Squared CTAs — but in the BODY face, not the condensed one. The condensed
   face was the last small-size holdout ("RESERVE YOUR SEAT" at 0.9rem had the
   letters touching), and a button label is precisely the text a visitor must
   never squint at. Caps stay for the register; Atkinson at 700 with real
   tracking supplies the legibility. */
[data-theme="tactical"] .nav .nav-quiz { border-radius: 4px; text-transform: uppercase; letter-spacing: .07em; font-size: .86rem; color: var(--signal); }
[data-theme="tactical"] .nav .nav-quiz:hover, [data-theme="tactical"] .nav .nav-quiz.is-current { color: #fff; }
[data-theme="tactical"] .btn {
  border-radius: 4px; text-transform: uppercase; letter-spacing: .07em;
  font-family: var(--font-body); font-weight: 700;
}

/* Micro-labels: uppercase Atkinson at 0.6–0.8rem needs weight and air, or it
   turns into texture. app.css already tracks them; this gives them the weight. */
[data-theme="tactical"] .eyebrow,
[data-theme="tactical"] .pill,
[data-theme="tactical"] .cc-tag,
[data-theme="tactical"] table.cmp thead th,
[data-theme="tactical"] .fact span,
[data-theme="tactical"] .daygroup > h3,
[data-theme="tactical"] .dow span,
[data-theme="tactical"] .foot h4,
[data-theme="tactical"] .foot .foot-h { font-weight: 700; }

/* The eyebrow carries the accent in this register. */
[data-theme="tactical"] .eyebrow { color: var(--signal); }

/* Photographic heroes want more contrast under a night palette, or the subject
   greys out against the surface behind it. */
[data-theme="tactical"] .hero-bg { filter: contrast(1.08) saturate(.92); }

/* ── The language rail ────────────────────────────────────────────────────
   app.css paints the tab with --dark, which under this theme is #0A0C0E —
   DARKER than the page it sits on. The one control a non-English reader has to
   find was the only element on the page with negative contrast against its own
   background. Amber is the answer the rest of the theme already uses for "look
   here", it is 7.94:1 with near-black on it, and it is the reason high-visibility
   orange exists on range gear in the first place. */
[data-theme="tactical"] .langfab-btn {
  background: var(--signal);
  color: var(--on-signal);
  box-shadow: -6px 6px 24px -8px rgba(0, 0, 0, .8);
}
/* Sideways text is text the reader has to work for, whatever the face — so
   under this theme the tab stops being sideways at all. It becomes a compact
   horizontal pill on the right edge: globe, current language, done. The
   "Select your language" prompt stays in the markup for screen readers but is
   visually clipped; the amber pill with a language name on it already says
   what it is. */
[data-theme="tactical"] .langfab-btn {
  writing-mode: horizontal-tb; transform: none; flex-direction: row;
  gap: .5rem; border-radius: 999px 0 0 999px; padding: .7rem 1.05rem .7rem .85rem;
  font-family: var(--font-body); font-size: .92rem; font-weight: 700;
  letter-spacing: .015em;
}
[data-theme="tactical"] .langfab-btn svg { transform: none; margin-block: 0; width: 17px; height: 17px; }
[data-theme="tactical"] .langfab-btn span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
[data-theme="tactical"] .langfab-btn b { color: var(--on-signal); font-weight: 800; }
[data-theme="tactical"] .langfab-btn:hover { background: var(--signal-deep); }
/* The open menu used to sit a fixed 52px in from the edge — the width of the
   old vertical tab. The pill is wider, so the menu anchors to it instead. */
[data-theme="tactical"] .langfab-menu { right: calc(100% + 10px); }
/* The open menu is a panel, not a call to action — it stays on the surface
   ramp, with the amber only on the edge that ties it back to the tab. */
[data-theme="tactical"] .langfab-menu {
  border-color: color-mix(in srgb, var(--signal) 38%, transparent);
}
[data-theme="tactical"] .langfab-menu button[aria-pressed="true"] {
  background: var(--signal); color: var(--on-signal); border-color: var(--signal);
}

/* ── White on amber: the failure --on-signal exists to prevent ────────────
   The token block flips --on-signal to near-black precisely because white on
   #FF8A00 measures 2.36:1. Twenty-odd rules in app.css hardcode `color: #fff`
   next to `background: var(--signal)` instead of reaching for the token, so
   they went straight past it. On the navy signal (#D8374F, 4.9:1 with white)
   they were fine, which is why nothing caught them until the palette moved.

   Every one of these is a badge, a total or a seat count — small, and load-
   bearing. `--on-signal` on the same amber is 7.94:1. */
[data-theme="tactical"] .sesh-seats.low,
[data-theme="tactical"] .slot-seats.low,
[data-theme="tactical"] .excl,
[data-theme="tactical"] .pkg-tag,
[data-theme="tactical"] .pkg--lead .pkg-save,
[data-theme="tactical"] .cc-tag--best,
[data-theme="tactical"] .ribbon,
[data-theme="tactical"] .opt-flag,
[data-theme="tactical"] .bump-flag,
[data-theme="tactical"] .jstep--main .jstep-tag,
[data-theme="tactical"] .vstack2 li.total,
[data-theme="tactical"] .vstack2 li.total .v,
[data-theme="tactical"] .ledger li.pay,
[data-theme="tactical"] .ledger li.pay .v,
[data-theme="tactical"] .saved,
[data-theme="tactical"] .saved b,
[data-theme="tactical"] .mathbox--save,
[data-theme="tactical"] .cpick-tabs button[aria-selected="true"],
[data-theme="tactical"] .qz-steps li.on,
[data-theme="tactical"] .ts-go,
[data-theme="tactical"] .it-cover-n,
[data-theme="tactical"] .saybub--them,
[data-theme="tactical"] .mday[aria-pressed="true"] .times i,
[data-theme="tactical"] .pathstop--lead .pathstop-node span,
[data-theme="tactical"] .hour--fire .ic svg,
[data-theme="tactical"] .bigstep--us .hic svg,
[data-theme="tactical"] .lt-stop--fire .lt-stop-t,
[data-theme="tactical"] .qbox--on .qnum,
[data-theme="tactical"] .qtile-flag { color: var(--on-signal); }

/* ── Two rules that painted text in a colour darker than the page ─────────
   Both read the --dark ramp for a foreground. Under the navy theme that ramp
   was navy on white, so it was the darkest thing available; here it is BELOW
   the page surface, and the text disappeared rather than merely dimming.
   .btn--dark is the worse of the two: app.css gives it --btn-fg: var(--surface)
   and the upgrade layer gives it --btn-bg: var(--dark), which in this palette
   is #101214 on #0A0C0E — 1.04:1, an invisible button. */
[data-theme="tactical"] .btn--dark { --btn-fg: var(--on-dark); color: var(--on-dark); }
[data-theme="tactical"] .btn--dark:hover { color: var(--on-dark); }
[data-theme="tactical"] .sesh-go,
[data-theme="tactical"] .aptl-steps li.now b { color: var(--signal); }

/* The rest of the ramp-as-foreground set. Each of these meant "the darkest
   ink we have" on a white card; the inverted equivalent is --ink, not a
   surface colour. Left as one group because they are one mistake. */
[data-theme="tactical"] .sheet-facts b,
[data-theme="tactical"] .opt--hero .opt-price,
[data-theme="tactical"] .path-h,
[data-theme="tactical"] .pkg-n,
[data-theme="tactical"] .pkg--lead .pkg-tag,
[data-theme="tactical"] .hour .ic svg,
[data-theme="tactical"] .hic svg { color: var(--ink); }

/* ── White plates that ink themselves with --ink ──────────────────────────
   The booking rail (calendar.html, calendar-v3.html) and the v2 calendar mark
   the chosen option by turning the pill white and setting `color: var(--ink)`.
   On the navy site --ink is #17181B, so that reads. Here --ink is #E8EAED, so
   the selected class, the selected language and the open day all went white on
   white — the three controls the whole booking flow turns on.

   The plate is a literal #fff in page CSS and is not worth theming, so the ink
   is what moves: --surface is this palette's near-black and is the exact
   counterpart of --ink. */
[data-theme="tactical"] .swopt:has(input:checked),
[data-theme="tactical"] .bkrail-lang button[aria-pressed="true"],
[data-theme="tactical"] .cal3-day.open { color: var(--surface); }
[data-theme="tactical"] .swopt:has(input:checked) em,
[data-theme="tactical"] .swopt:has(input:checked) .pr {
  color: color-mix(in srgb, var(--surface) 76%, #FFFFFF);
}
/* Same rule, same reason: white on the amber badge. */
[data-theme="tactical"] .swopt .tagbest { color: var(--on-signal); }

/* ── Navy baked into inline SVG ───────────────────────────────────────────
   Sixty-two generated pages carry small inline diagrams — the "MA" state mark,
   the carry maps — whose text is written with fill attributes rather than
   tokens, because a presentation attribute was the only thing that survived
   the templating. They are the live navy palette, hex by hex, so on a
   near-black card the navy "MA" sat at about 1.4:1 and the caption under it
   was not there at all.

   A presentation attribute loses to any CSS declaration, so the four navy
   values are matched by the value itself and re-pointed at the token each one
   was standing in for. Matching on the hex is what keeps this honest: it hits
   exactly the fills that were the navy palette and nothing else — the gold
   award ribbons, the Google and PayPal marks, and every other deliberate brand
   colour are left alone. */
[data-theme="tactical"] svg [fill="#1E3C5C"] { fill: var(--ink); }
[data-theme="tactical"] svg [fill="#5B6675"] { fill: var(--ink-muted); }
[data-theme="tactical"] svg [fill="#FF8698"] { fill: var(--signal-on-dark); }
[data-theme="tactical"] svg [fill="#B7C6D9"] { fill: var(--on-dark-muted); }
/* Same graphics, same problem: the caption asks for IBM Plex Mono by name. */
[data-theme="tactical"] svg [font-family*="IBM Plex Mono"] { font-family: var(--font-mono); }

/* ── The ID warning on checkout ───────────────────────────────────────────
   `.idnote` is the panel that tells you to type your name exactly as it appears
   on your licence — get it wrong and the certificate is wrong. It paints itself
   #FFF6F7, a pale wash of the navy palette's red, which on this theme left
   near-white text on a near-white panel: the single most consequential
   sentence in the booking flow, invisible.

   Rebuilt from the tokens as the warning it is, on the surface ramp. */
[data-theme="tactical"] .idnote {
  background: color-mix(in srgb, var(--signal) 9%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--signal) 40%, transparent);
  color: var(--ink);
}
[data-theme="tactical"] .idnote svg { color: var(--signal); }

/* Classic-hero headlines (the guide, the town, state and audience pages) set
   in the same face as the t-hero pages: Atkinson at 800, uppercase. Barlow
   Condensed at the 2rem a phone gives an h1 is exactly the "squint" size the
   theme notes warn about. Mario, on the LTC guide hero: "hard on the eyes." */
[data-theme="tactical"] .hero h1 { font-family: var(--font-display); letter-spacing: .01em; line-height: .98; }
/* Generated by tools/port-to-blade.py — page-scoped partials. */

/* Page-scoped components for calendar.html. Lifted from the mockup so no
   Blade template has to carry CSS. */

/* ═══════════════════════════════════════════════════════════════════════════
   OPTION 3 — "THE COUNTER"
   A dark rail down the left holds every control and the running receipt, and
   never moves. The right is one bright, quiet pane that does nothing but show
   the month. Controls and content are on opposite grounds, so there is no
   question about which is which — that is what the flat all-white version was
   missing. Scoped to .v-split.
   ═════════════════════════════════════════════════════════════════════════ */
/* The pane keeps the light palette whatever the site theme: this layout is a
   dark rail beside one bright pane, and under the tactical tokens the pane
   went as dark as the rail and the two stopped reading as different things.
   Only the pane is re-tokened: the rail's own rules (and the tactical theme's
   white-plate fix, which inks the chosen pill with --surface) must keep the
   dark palette, so the tokens go on .pane and the ground gradient names the
   white directly. */
.v-split .pane { --surface: #FFFFFF; --surface-tint: #F2F5F9; --surface-raised: #FFFFFF;
               --ink: #17181B; --ink-soft: #1E3C5C; --ink-muted: #5B6675;
               --rule: rgba(30, 60, 92, .12); --rule-strong: rgba(30, 60, 92, .26);
               --signal-deep: #B85F00; --confirm: #1E7A55; }
.v-split .pane { color: var(--ink); }
.v-split .pane h2, .v-split .pane h3 { color: var(--ink); }
/* The dark ground is painted on the grid, not on the rail, so the rail can be
   exactly as tall as its content — receipt right under the seat counter — while
   the left column still reads dark the whole way down the page. */
.v-split .sp { display: grid; grid-template-columns: minmax(0, 1fr) 372px; align-items: start;
               background: linear-gradient(to right, #FFFFFF 0 calc(100% - 372px), var(--dark-deep) calc(100% - 372px)); }
/* minmax(0,1fr), not 1fr: the seven day columns have a min-content width of
   their own and would otherwise push the whole grid — rail included — wider
   than the phone. */
@media (max-width: 1000px) { .v-split .sp { grid-template-columns: minmax(0, 1fr); } }

/* The floating language flag has no free edge on this layout: right is the
   booking rail, left is the calendar. It is replaced by a row inside the rail,
   with the other booking controls. */
.v-split .langfab { display: none; }
.bkrail-lang { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Flag-and-name chips (redesign.js fills [data-langflags]). A statement that
   the class is taught in all four, so no hover, no pressed state, no cursor. */
.bkrail-lang .langchip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: .38rem .7rem; font-size: .78rem; }

/* ── the rail ────────────────────────────────────────────────────────────── */
.bkrail { position: sticky; top: 0; align-self: start; background: var(--dark-deep); color: #fff;
        padding: clamp(1.4rem,3vw,2rem) clamp(1.25rem,2.5vw,1.75rem); display: flex; flex-direction: column; gap: 1.4rem; }
.bkrail-top { display: flex; flex-direction: column; gap: 1.4rem; }
@media (max-width: 1000px) { .v-split .sp { background: none; } .bkrail { position: static; } }

}
.bkrail-step { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bkrail h1 { font-size: 1.45rem; line-height: 1.12; margin-top: .35rem; }
.bkrail-lbl { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: .55rem; }

/* course switch: two stacked bars on the dark, price on the right */
.swap { display: grid; gap: .4rem; }
.swopt { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; cursor: pointer;
         padding: .8rem .9rem; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
         transition: all .16s ease; }
.swopt input { position: absolute; opacity: 0; pointer-events: none; }
.swopt strong { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: .95rem; line-height: 1.2; }
.swopt em { grid-column: 1; grid-row: 2; font-style: normal; font-size: .76rem; color: rgba(255,255,255,.55); }
/* Multi card: the state the buyer is actually licensing in leads, larger; the pitch line sits under it. */
.swopt em b { display: block; font-weight: 700; font-size: .9rem; line-height: 1.25; color: rgba(255,255,255,.85); }
.swopt:has(input:checked) em b { color: var(--ink); }
.swopt .pr { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; }
.swopt:hover { border-color: rgba(255,255,255,.34); }
.swopt:has(input:checked) { background: #fff; border-color: #fff; color: var(--ink); }
.swopt:has(input:checked) em { color: var(--ink-muted); }
.swopt:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 2px; }
.swopt .tagbest { position: absolute; top: -8px; right: 10px; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em;
                  text-transform: uppercase; background: var(--signal); color: #fff; padding: .14rem .45rem; border-radius: 3px; }

/* seats on the dark */
.bkrail-seats { display: flex; align-items: center; gap: .75rem; }
.dstep { display: inline-flex; border: 1.5px solid rgba(255,255,255,.22); border-radius: 10px; overflow: hidden; }
.dstep button { width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-family: var(--font-mono); font-size: 1.1rem; line-height: 1; }
.dstep button:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.dstep button:disabled { opacity: .3; cursor: not-allowed; }
.dstep output { width: 44px; line-height: 40px; text-align: center; font-family: var(--font-mono); font-weight: 600; border-inline: 1.5px solid rgba(255,255,255,.22); }
.bkrail-seats span { font-size: .8rem; color: rgba(255,255,255,.55); max-width: 16ch; line-height: 1.35; }

/* the receipt */
.receipt { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.2rem; padding-bottom: .5rem; }
.rrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .88rem; padding: .32rem 0; }
.rrow span:first-child { color: rgba(255,255,255,.5); }
.rrow .v { font-family: var(--font-mono); text-align: right; }
.rrow .v.none { color: rgba(255,255,255,.4); font-style: italic; font-family: var(--font-body); }
.rtotal { display: flex; align-items: baseline; justify-content: space-between; margin: .8rem 0 .55rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.14); }
.rtotal b { font-family: var(--font-display); font-size: .98rem; }
.rtotal .n { font-family: var(--font-mono); font-weight: 700; font-size: 1.55rem; }
.receipt .apline { color: rgba(255,255,255,.6); margin-bottom: .9rem; }
.receipt .apline b { color: #fff; }
.receipt .btn { width: 100%; }
.receipt .btn[aria-disabled="true"] { background: transparent; border-color: transparent !important; box-shadow: none;
  font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .9rem;
  color: rgba(255,255,255,.55);
  border: 1.5px solid rgba(255,255,255,.22); box-shadow: none; pointer-events: none; }
.rfoot { margin-top: .8rem; font-size: .78rem; color: rgba(255,255,255,.5); text-align: center; }
.rfoot a { color: #fff; }
.rguar { display: flex; align-items: center; gap: .45rem; justify-content: center; margin-top: .7rem; font-size: .76rem; color: rgba(255,255,255,.6); }
.rguar svg { width: 14px; height: 14px; color: #7FD1A6; }

/* ── the pane ────────────────────────────────────────────────────────────── */
.pane { background: var(--surface); padding: clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3.5vw,3rem) clamp(3rem,6vw,4.5rem); }
.pane-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pane-head h2 { font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: -.02em; }
.pane-head .sub { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-muted); margin-top: .3rem; }
.mnav { display: flex; gap: .4rem; }
.mnav button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rule-strong); background: var(--surface-raised); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.mnav button:hover:not(:disabled) { background: var(--surface-tint); }
.mnav button:disabled { opacity: .3; cursor: not-allowed; }

.gdow, .ggrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.gdow span { padding: .5rem .6rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule); }
.gday { position: relative; aspect-ratio: 1 / .74; min-height: 84px; text-align: left; padding: .5rem .55rem; cursor: default;
        border: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); background: none;
        display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.gday:nth-child(7n) { border-right: 0; }
.gday .num { font-family: var(--font-mono); font-size: 1rem; color: color-mix(in srgb, var(--ink-muted) 55%, transparent); }
.gday.open { cursor: pointer; }
.gday.open .num { color: var(--ink); font-weight: 600; }
.gday.open:hover { background: var(--surface-tint); }
.gday .cnt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; padding: .18rem .42rem; border-radius: 5px;
             background: color-mix(in srgb, var(--dark) 9%, transparent); color: var(--ink-soft); }
.gday.low .cnt { background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal-deep); font-weight: 600; }
.gday[aria-pressed="true"] { background: color-mix(in srgb, var(--dark) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--signal); }
.gday[aria-pressed="true"] .num { color: var(--signal-deep); }
.gday.today .num::after { content: ''; display: block; width: 100%; height: 2px; background: var(--signal); border-radius: 2px; margin-top: 2px; }
/* on a phone the count label will not fit seven across, so it becomes a dot */
}

/* Mario, 2026-09-24: "add all credit card options here also, not just
   Afterpay. Say secure." The shared pay strip, restyled for the dark rail. */
.bkrail .paystrip { justify-content: flex-start; gap: .3rem .35rem; margin-top: .8rem; }
.bkrail .paystrip-secure { color: rgba(255,255,255,.72); font-size: .72rem; margin-inline: 0 .2rem; flex-basis: 100%; }
.bkrail .paystrip-secure svg { color: #7FD1A6; }
.bkrail .paystrip-secure + .paylogo ~ .paystrip-secure { display: none; }  /* one secure line is enough in a rail */
.bkrail .paystrip--compact .paylogo--img { height: 22px; min-width: 0; padding: 0 .3rem; border: 0; }   /* seven on one row */
.bkrail .paystrip--compact .paylogo--img img { height: 12px; }
/* Phones: the receipt is a light sticky bar at the foot of the screen, so the
   strip is one short row — lock and small logos, no wrapping, no label (its
   white text vanished on the light bar and the two rows ate the screen). */
@media (max-width: 1000px) {
  .bkrail .paystrip { margin: .5rem 0 0; gap: .3rem; flex-wrap: nowrap; justify-content: center; overflow: hidden; }
  .bkrail .paystrip-secure { flex-basis: auto; font-size: 0; gap: 0; margin: 0; color: var(--ink-muted); }
  .bkrail .paystrip-secure svg { width: 14px; height: 14px; }
  .bkrail .paystrip--compact .paylogo--img { height: 18px; min-width: 0; padding: 0 .25rem; border: 1px solid var(--rule); }
  .bkrail .paystrip--compact .paylogo--img img { height: 10px; }
}

/* the day's sessions, on a spine */
.spine { margin-top: 2rem; }
.spine h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.spine .empty { color: var(--ink-muted); font-size: .9rem; }
.spine-list { position: relative; padding-left: 1.4rem; }
.spine-list::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); border-radius: 2px; }
/* row = the class; Continue rides inside it, revealed once the row is chosen,
   so moving on never means travelling back to the rail */
.sp-item { position: relative; display: flex; align-items: stretch; margin-bottom: .5rem; overflow: hidden;
           border: 1.5px solid var(--rule); border-radius: 12px; background: var(--surface-raised);
           transition: border-color .16s ease, box-shadow .16s ease; }
.sp-item::before { content: ''; position: absolute; left: -1.4rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%;
                   background: var(--surface); border: 2px solid var(--rule-strong); }
.sp-item:hover { border-color: var(--ink-soft); }
.sp-item[aria-selected="true"] { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.sp-item[aria-selected="true"]::before { background: var(--signal); border-color: var(--signal); }
.sp-pick { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center;
           text-align: left; cursor: pointer; padding: .9rem 1rem; border: 0; background: none; }
.sp-t { grid-column: 1; grid-row: 1; font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }
.sp-w { grid-column: 1; grid-row: 2; font-size: .82rem; color: var(--ink-muted); }
.sp-s { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-muted); text-align: right; }
.sp-s.low, .sp-s.mid { color: var(--signal-deep); font-weight: 600; }
.sp-go { display: none; align-items: center; gap: .45rem; flex: none; padding: 0 1.25rem; text-decoration: none;
         background: var(--signal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.sp-go svg { width: 17px; height: 17px; }
.sp-go:hover { background: var(--signal-deep); }
.sp-item[aria-selected="true"] .sp-go { display: flex; }
@media (max-width: 560px) {
  .sp-item { flex-wrap: wrap; }
  .sp-pick { flex-basis: 100%; }
  .sp-go { flex-basis: 100%; justify-content: center; padding: .8rem; }
}

/* ══ Tom's calendar-v3 notes, 2026-08-31 ═════════════════════════════════
   This layout is desktop/tablet only — mobile uses a different checkout — so
   the rules below are written for the two-column split and are not defended
   at phone widths. */

/* The receipt only carries rows once there is a date in them. */
.rprompt { font-size: .84rem; line-height: 1.45; color: rgba(255,255,255,.5);
           margin: 0 0 .2rem; padding: .1rem 0 .5rem; }

/* Afterpay, at checkout, given the weight Tom asked for. The instalment is set
   at price size because "four payments of $62.25" is the number that unsticks
   people, not the word Afterpay. */
.rap { margin: .1rem 0 1rem; padding: .85rem .9rem; border-radius: 12px;
       background: #B2FCE4; color: #0A241C; display: grid; gap: .3rem; }
.rap-mark img { display: block; height: 22px; width: auto; }
.rap-amt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.rap-amt b { font-family: var(--font-mono); font-size: 1.2rem; }
.rap-fine { font-size: .72rem; line-height: 1.45; color: rgba(10,36,28,.72); }

/* The foot of the calendar pane: the guarantee, and the way out for someone
   with no date in mind. Two cards, deliberately quieter than the calendar. */
.panefoot { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem;
            margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .panefoot { grid-template-columns: 1fr; } }

.pfguar { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
          padding: 1.1rem 1.25rem; border-radius: var(--radius-lg);
          background: color-mix(in srgb, var(--confirm) 7%, var(--surface));
          border: 1px solid color-mix(in srgb, var(--confirm) 24%, transparent); }
.pfseal { width: 56px; height: 56px; color: var(--confirm); flex: none; }
.pfguar b { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.25;
            color: color-mix(in srgb, var(--confirm) 78%, var(--ink)); }
.pfguar p { margin: .3rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-muted); }

.pflater { padding: 1.1rem 1.25rem; border-radius: var(--radius-lg);
           border: 1px dashed var(--rule-strong); background: var(--surface-tint); }
.pflater-k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
             text-transform: uppercase; color: var(--ink-muted); }
.pflater b { display: block; font-family: var(--font-display); font-size: 1rem; margin-top: .3rem; }
.pflater p { margin: .3rem 0 .8rem; font-size: .78rem; line-height: 1.5; color: var(--ink-muted); }

/* The site-wide guarantee band is redundant now that the seal sits in the pane,
   and Tom wants it off this page specifically. */
body.v-split .guarbar { display: none; }

/* ══ Phones and tablets: the "Two Pages to Book" mockup ══════════════════
   Mario, 2026-09-15 mockup and 2026-09-17: "the change was meant only for
   mobile". Above 1000px the page is the two-column counter above — dark rail,
   bright pane — exactly as before. Under 1000px the rail dissolves into the
   flow and the same DOM is dressed as the mockup: one light column, three
   numbered sections (class, day, time), dots on the open days, the day's
   times as rows, and the receipt as a bar stuck to the bottom carrying the
   total, the Afterpay quarter and the only button. */
.bk-sech.m-only { display: none; }
.bk-sech { display: flex; align-items: center; gap: .65rem; margin: 0 0 .7rem; }
.bk-sech h2 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; color: var(--ink); }
.bk-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: .85rem; line-height: 1;
  background: var(--surface-tint); border: 1px solid var(--rule-strong); color: var(--ink); }
.bk-n.is-now { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-n.is-done { background: var(--confirm); border-color: var(--confirm); color: #fff; }

@media (max-width: 1000px) {
  body.v-split .crumbs, body.v-split .chatfab { display: none; }
  .bk-sech.m-only { display: flex; }
  .v-split .sp { background: none; }   /* one grid column: the rail dissolves and its halves are ordered below */
  .bkrail-top { order: -1; }
  .bkrail .receipt { order: 1; }
  .bkrail { display: contents; }

  /* the controls, first and on the light ground */
  .bkrail-top { background: var(--surface); color: var(--ink); padding: 1.1rem 16px 0; gap: 1rem; }
  .bkrail-step { color: var(--ink-muted); }
  .bkrail h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); line-height: 1.04; letter-spacing: -.015em; margin: .3rem 0 0; color: var(--ink); }
  .bkrail h1 br { display: none; }
  .bkrail-lbl { display: none; }
  .bkrail-top > div:has(.bkrail-seats) { display: none; }   /* seats are added on the next page */
  .swap { gap: .5rem; }
  .swopt { padding: .85rem 1rem; border-radius: var(--radius-lg); border: 1.5px solid var(--rule); background: var(--surface-raised); color: var(--ink); gap: .15rem .9rem; }
  .swopt strong { font-size: 1rem; }
  .swopt em, .swopt em b { color: var(--ink-muted); font-size: .8rem; }
  .swopt .pr { font-size: 1.35rem; color: var(--ink); }
  .swopt:hover { border-color: var(--rule-strong); }
  .swopt:has(input:checked) { background: var(--surface-tint); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .swopt:has(input:checked) em, .swopt:has(input:checked) em b { color: var(--ink-muted); }
  .bkrail-top > div:has(.bkrail-lang) { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
  .bkrail-top > div:has(.bkrail-lang) .bkrail-lbl { display: block; margin: 0; color: var(--ink-muted); }
  .bkrail-lang .langchip { border-color: var(--rule); background: var(--surface-raised); color: var(--ink); padding: .2rem .55rem; font-size: .72rem; }

  /* the month, as a card with dots */
  .v-split .pane { --surface: #FFFFFF; padding: 1.4rem 16px 0; }
  .pane-head { margin-bottom: .4rem; padding: .85rem .85rem 0; border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-raised); }
  .pane-head h2 { font-size: 1.25rem; letter-spacing: -.01em; }
  .pane-head .sub { font-size: .7rem; }
  .mnav button { width: 38px; height: 38px; }
  .gdow, .ggrid { gap: 4px; padding: 0 .85rem; background: var(--surface-raised); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  .gdow span { padding: .25rem 0 .35rem; text-align: center; font-size: .6rem; letter-spacing: .08em; border: 0; }
  .ggrid { padding-bottom: .85rem; border-bottom: 1px solid var(--rule); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .gday { aspect-ratio: 1; min-height: 0; padding: 0; display: grid; place-items: center; place-content: center;
          border: 1px solid transparent; border-radius: 10px; text-align: center; }
  .gday .num { font-size: .95rem; }
  .gday.open { background: var(--surface-tint); border-color: var(--rule); }
  .gday.open:hover { background: var(--surface-tint); border-color: var(--rule-strong); }
  .gday .cnt { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; padding: 0; border-radius: 50%; font-size: 0; background: var(--confirm); }
  .gday.low .cnt { background: var(--signal); }
  .v-split .gday[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); box-shadow: none; }
  .v-split .gday[aria-pressed="true"] .num { color: #fff; }
  .v-split .gday[aria-pressed="true"] .cnt { background: #fff; }

  /* the day's times, as rows */
  .spine { margin-top: 1.4rem; }
  .spine-list { padding-left: 0; }
  .spine-list::before, .sp-item::before { display: none; }
  .sp-item { border: 1.5px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-raised); }
  .sp-item[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-tint); }
  .sp-go { display: none !important; }   /* Continue lives in the bar */
  .sp-pick { padding: .8rem 1rem; }
  .sp-t { font-size: 1rem; white-space: nowrap; }
  .spine .empty { margin: 0; padding: .9rem 1rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); }

  /* "no date in mind" as one dashed row; the guarantee moves into the bar */
  .panefoot { display: block; margin-top: .8rem; padding: 0; border: 0; }
  .pfguar { display: none; }
  .pflater { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem;
             padding: .7rem .2rem 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
  .pflater-k { display: block; margin: 0; font-family: var(--font-body); font-size: .82rem; font-weight: 400;
               letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
  .pflater b, .pflater p { display: none; }   /* the link says it; the card said it three times */
  .pflater .btn { padding: 0; min-height: 0; border: 0; background: none; box-shadow: none;
                  color: var(--signal-deep); font-weight: 700; font-size: .82rem; white-space: nowrap; }

  /* the bar */
  .bkrail .receipt { order: 1; position: sticky; bottom: 0; z-index: 6; margin-top: 1.5rem; border: 0; border-top: 1px solid var(--rule);
    background: var(--surface); color: var(--ink); padding: .9rem 16px calc(.8rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px -18px rgba(0,0,0,.35);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; align-items: center; }
  /* The waiting control below already says what to do; the prompt said it
     twice. The left column stays empty until there is a booking to describe. */
  .rprompt { display: none; }
  .rpicked { grid-column: 1; grid-row: 1 / 3; display: block; }
  .rpicked .rrow { display: inline; font-size: .78rem; color: var(--ink-muted); }
  .rpicked .rrow span:first-child, .rpicked .rrow:nth-child(3) { display: none; }
  .rpicked .rrow:first-child .v { display: block; font-family: var(--font-body); font-weight: 600; font-size: .88rem; color: var(--ink); text-align: left; }
  .rpicked .rrow:nth-child(2) .v { font-family: var(--font-body); color: var(--ink-muted); }
  .rtotal { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; display: block; text-align: right; }
  .rtotal b { display: none; }
  .rtotal .n { font-size: 1.4rem; line-height: 1.1; color: var(--ink); }
  .rap { grid-column: 2; grid-row: 2; margin: 0; padding: 0; background: none; text-align: right; }
  .rap-mark, .rap-fine { display: none; }
  .rap-amt { font-family: var(--font-body); font-weight: 400; font-size: .74rem; color: var(--ink-muted); }
  .rap-amt b { font-family: var(--font-mono); font-size: .78rem; color: var(--ink); }
  .receipt .btn { grid-column: 1 / -1; grid-row: 3; margin-top: .65rem; }
  /* Nothing is chosen yet, so this is instruction, not a call to action: a
     filled pill here reads as "press me to go somewhere", and the one thing it
     must not suggest is that the calendar is somewhere else. */
  .receipt .btn[aria-disabled="true"] { background: none; border: 0; box-shadow: none;
    color: var(--ink-muted); font-family: var(--font-body); font-weight: 500;
    font-size: .86rem; text-transform: none; letter-spacing: 0; min-height: 0;
    padding: .35rem 0; justify-content: center; }
  .rguar { grid-column: 1 / -1; grid-row: 4; margin-top: .55rem; font-size: .74rem; color: var(--ink-muted); }
  .rguar svg { color: var(--confirm); }
  .rfoot { display: none; }
  /* the grid item is the [data-paystrip] wrapper the script fills, not .paystrip itself */
  .bkrail .receipt > [data-paystrip] { grid-column: 1 / -1; grid-row: 5; min-width: 0; }
  .bkrail .paystrip .paylogo { flex: none; }   /* a no-wrap row must not shrink the boxes under their logos */
  /* Mario, 2026-09-24: with nothing chosen the bar is one thin row — the
     instruction on the left, the price on the right; the instalment line, the
     guarantee and the card logos wait until there is a booking to describe. */
  .bkrail .receipt:has(#go[aria-disabled="true"]) { padding-top: .45rem; padding-bottom: calc(.45rem + env(safe-area-inset-bottom, 0px)); gap: 0 .75rem; }
  .bkrail .receipt:has(#go[aria-disabled="true"]) .rap,
  .bkrail .receipt:has(#go[aria-disabled="true"]) .rguar,
  .bkrail .receipt:has(#go[aria-disabled="true"]) .paystrip { display: none; }
  .bkrail .receipt:has(#go[aria-disabled="true"]) .btn { grid-column: 1; grid-row: 1; margin: 0; justify-content: flex-start; text-align: left; padding: .2rem 0; }
  .bkrail .receipt:has(#go[aria-disabled="true"]) .rtotal .n { font-size: 1.15rem; }
}

/* ══ Desktop: the calendar and the rail fit one screen ════════════════════
   Mario, 2026-09-17: "no scroll — the calendar and sidebar stay the full size
   of the page". Mario, 2026-09-24: "get rid of the need to scroll; the calendar
   can shift up; the boxes and the time box are at the bottom edge". The first
   cut stretched the day cells to the viewport, which pushed the count chips to
   the bottom edge of each cell and left the day's times hanging off the foot.
   Now the pane starts higher, the rows are capped, the chip sits under the day
   number, and the times get the room that frees up: month, grid and times fit
   a 900px-tall window. The guarantee and choose-later cards stay below. */
@media (min-width: 1001px) {
  body.v-split .crumbs { display: none; }
  .v-split .pane { padding-top: 1.1rem; padding-bottom: 2rem; }
  .pane-cal .pane-head { margin-bottom: .5rem; }
  .pane-cal .pane-head h2 { font-size: 1.5rem; }
  .pane-cal .ggrid { grid-auto-rows: clamp(64px, 8.6vh, 92px); }
  .pane-cal .gday { min-height: 0; aspect-ratio: auto; padding: .4rem .5rem; justify-content: flex-start; gap: .3rem; }
  .pane-cal .gday .num { font-size: .92rem; }
  .pane-cal .spine { margin-top: 1rem; }
  .pane-cal .spine h3 { margin-bottom: .6rem; }
  .v-split .panefoot { margin-top: 2rem; }
  .bkrail { top: 81px; max-height: calc(100vh - 81px); overflow-y: auto; gap: .85rem; padding: 1.1rem 1.4rem 1.2rem; }
  .bkrail-top { gap: .85rem; }
  .bkrail h1 { font-size: 1.2rem; margin-top: .25rem; }
  .bkrail-lbl { margin-bottom: .35rem; }
  .swap { gap: .35rem; }
  .swopt { padding: .55rem .8rem; }
  .swopt em b { font-size: .82rem; }
  .dstep button, .dstep output { height: 34px; line-height: 34px; }
  /* The rail is one screen: the controls take the space that is left and scroll
     within themselves on a short window, while the receipt keeps its place at the
     foot so the Continue button is never the thing that falls off. */
  .bkrail { overflow: hidden; }
  .bkrail-top { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .receipt { flex: none; padding-top: .85rem; padding-bottom: .2rem; }
  .rrow { font-size: .82rem; }
  .rtotal { margin: .5rem 0 .4rem; }
  .rap { margin: 0 0 .7rem; padding: .55rem .8rem; }
  .rap-fine, .rfoot, .rguar { display: none; }   /* the guarantee card sits right under the calendar */
  .bkrail .paystrip { margin-top: .6rem; }
  .bkrail-lang .langchip { padding: .2rem .5rem; font-size: .68rem; gap: .3rem; }
  .rprompt { font-size: .78rem; margin: 0 0 .4rem; }
  .rtotal .n { font-size: 1.3rem; }
  .bkrail h1 { font-size: 1.1rem; }
  /* No floating bubble on the booking page: at this size it lands either on the
     rail's Continue or on the class row's. The page is a checkout step, and the
     phone view already hides it.  */
  body.v-split .chatfab, body.v-split .proof-toast { display: none; }
  .rguar { margin-top: .55rem; }
}
/* Page-scoped components for checkout.html. Lifted from the mockup so no
   Blade template has to carry CSS. */

/* ══ Checkout guarantee, 2026-08-31 ══════════════════════════════════════
   Mario: take it out of the footer and make it prevalent above mid-page. */
.coguar[hidden] { display: none; }
.coguar { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center;
  margin: 1rem 0 1.75rem; padding: 1.15rem 1.4rem; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--rule);
  border-left: 4px solid var(--confirm); box-shadow: var(--shadow); }
.coguar-seal { width: 58px; height: 58px; color: var(--confirm); flex: none; }
.coguar b { display: block; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25;
  color: color-mix(in srgb, var(--confirm) 78%, var(--ink)); }
.coguar p { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-muted); max-width: 68ch; }
.coguar p b { display: inline; font-family: inherit; font-size: inherit; color: var(--ink); }
@media (max-width: 620px) { .coguar { grid-template-columns: 1fr; gap: .7rem; } .coguar-seal { width: 44px; height: 44px; } }

/* In the rail (2026-09-24) it is one card among the rail's cards, not a banner. */
.summary .coguar { margin: 0; gap: .85rem; padding: 1rem 1.1rem; border-radius: var(--radius); box-shadow: none; }
.summary .coguar-seal { width: 44px; height: 44px; }
.summary .coguar b { font-size: .98rem; }
.summary .coguar p { font-size: .8rem; }
.railcard .sum-line--price { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rule); }

/* The footer band is redundant now the band sits above the fold. */
.guarbar { display: none; }

/* ══ Hierarchy pass, 2026-08-31 ═══════════════════════════════════════════
   Tom: the page is overwhelming — too much text, too many blended graphics.
   33 boxed blocks, 13 background colours and three separate money-back
   guarantees on the payment step. The fix is not decoration, it is ranking:
   headlines to separate areas, and a box only where a box earns one. */

/* The approval line is a fact, not an alarm. It was a full-width tinted bar
   with a shield, stacked directly above another full-width tinted bar with a
   shield — the two read as one striped mass. */
.co-approved { margin: .1rem 0 1.25rem; font-size: .78rem; line-height: 1.5; color: var(--ink-muted); }
.co-approved strong { color: var(--ink-soft); font-weight: 600; }

/* ── The rail: three labelled areas instead of one card doing six jobs ──── */
.summary { display: grid; gap: .9rem; align-content: start; }
.railcard { padding: 1.15rem 1.25rem; }
.railhead { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 400; margin: 0 0 .7rem; }
.railcourse { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; margin: 0; }

/* The upgrade, as an offer rather than an alert. It had a red border, a warning
   triangle and a solid red button — the language of a problem, for something
   optional. */
.upoffer p { margin: .75rem 0 .9rem; font-size: .84rem; line-height: 1.5; color: var(--ink-muted); }
.upoffer p b { color: var(--ink); }
.upoffer-map { display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--rule); }

/* ── The security strip: one line, one row, no slab ─────────────────────── */
.secure { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  padding: 1rem 0 0; margin-top: 1.25rem; }
.secure .paylogos { gap: .3rem; opacity: .75; }
.secure .paylogos img { height: 20px; }
.secure-line { justify-content: flex-start; font-size: .74rem; color: var(--ink-muted); }

/* ── The one guarantee on the payment step, beside the pay button ───────── */
.seal { background: color-mix(in srgb, var(--confirm) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--confirm) 22%, transparent); }

/* The bump keeps its weight — it is the offer Tom wants loud, and it sits at
   the pay button — but loses the dashed border, which read as a cut-out
   coupon competing with the rail. */
.bump { border-style: solid !important; border-width: 1.5px !important; }

/* Section headings inside a step. The eyebrow had no room above it and sat
   against the lede, so a new area did not read as a new area. */
.co-sec { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 400;
  margin: 2rem 0 .85rem; padding-top: .85rem; border-top: 1px solid var(--rule); }

/* ── Rhythm ───────────────────────────────────────────────────────────────
   The space BETWEEN areas has to beat the space WITHIN one, or evenly-spaced
   blocks read as a single undifferentiated list. Roughly 2.5:1 here. */
.checkout { gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
#panel-2 > .card, #panel-3 > .paygrid { margin-top: 1.1rem; }
#panel-2 .btn--lg, #panel-3 .btn--lg { margin-top: 2rem; }
.bump { margin-top: 2.25rem; }

/* ── The Multi upgrade as the first bump on each step (2026-09-24) ─────────
   Signal border and a wash of signal behind it, the map beside the words,
   one button. Once accepted it turns green and reads as a receipt. */
.bump--multi { position: relative; margin: 1.25rem 0 1.5rem; border-color: var(--signal) !important;
  background: color-mix(in srgb, var(--signal) 7%, var(--surface-raised)); }
#panel-3 .bump--multi { margin-bottom: .5rem; }
.bump-grid.bump-grid--multi { grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.bump-map { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); }
.bump--multi h3 { margin-bottom: .35rem; }
.bump--multi p { margin-bottom: 0; }
.bump--multi .bump-foot { border-top: 0; padding-top: 0; margin-top: .85rem; gap: .6rem 1rem; }
.bump--multi .bump-foot .btn { flex: 1 1 auto; justify-content: center; }
.bump--multi .bump-amt { margin-left: 0; }
.bump--multi.is-done { border-color: var(--confirm) !important; background: color-mix(in srgb, var(--confirm) 8%, var(--surface-raised)); }
.bump--multi.is-done .bump-flag { background: var(--confirm); }
/* the × and the collapsed strip */
.bump-x { position: absolute; top: .35rem; right: .45rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none;
  color: var(--ink-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.bump-x:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.bump-min { display: none; }
.bump--multi.is-min { padding: .7rem .9rem; }
.bump--multi.is-min .bump-flag, .bump--multi.is-min .bump-grid, .bump--multi.is-min .bump-x { display: none; }
.bump--multi.is-min .bump-min { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.bump--multi.is-min .bump-min b { color: var(--signal-deep); }
.bump--multi.is-min .bump-min span { color: var(--signal-deep); font-size: 1.1rem; }
.bump--multi.is-done .bump-x, .bump--multi.is-done .bump-min { display: none; }
@media (max-width: 720px) {
  .bump-grid.bump-grid--multi { grid-template-columns: 1fr; gap: .7rem; }
  .bump-map { max-height: 120px; object-fit: cover; object-position: center 40%; }
  .bump--multi .bump-foot .btn { width: 100%; }
  .bump--multi .bump-amt { display: none; }   /* the headline already says $100 more */
}

/* Field hints were the same weight as the labels above them, so every field
   read as two lines of instruction rather than one label and one aside. */
.field .hint, #panel-2 .note { font-size: .74rem; line-height: 1.45; color: var(--ink-muted); opacity: .85; }

/* The form card carried its own padding plus the section's, which stacked into
   a wide empty margin on the left of every input. */
#panel-2 > .card { padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Sandbox scaffolding is developer text, not customer text. It stays for
   testing but stops competing with the card fields above it. */
#panel-3 .note.mono, .sqhint { font-size: .68rem; opacity: .55; }

/* A field that failed the contact check. Red is the site's signal colour, so
   the message reads as the same voice as everything else rather than as a
   browser warning. */
.field--bad input { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent); }
.field .hint--bad { display: block; color: var(--signal-deep); font-weight: 600; margin-top: .3rem; }

/* The bump's two comparison panels sat tight against its heading. */
.bump-grid { gap: 1rem; }

/* The checkout toggles tiles and wallet buttons with the hidden attribute; the
   tiles are flex boxes, so the attribute needs to win over their display rule. */
.checkout [hidden], .paymethod[hidden], #pay-wallet[hidden], .sqbtn[hidden] { display: none !important; }

/* "Remove" on an extra attendee is a text link, not a button. */
.attendee-head .rm-attendee { background: none; border: 0; padding: 0; font: inherit; color: var(--signal); text-decoration: underline; cursor: pointer; }


/* ══ Phones: the booking mockup, in the light theme ══════════════════════
   Mario, 2026-09-17: the phone checkout is the "Two Pages to Book" mockup —
   one column, an order card you can act on, numbered sections, the Multi offer
   as a switch, and a bar at the thumb carrying the total and the only button.
   Everything here is scoped under 980px; the desktop checkout is the layout it
   has always had. `.m-only` elements and `.paybar` collapse to nothing above
   this width (`display: contents`), so the desktop DOM is unchanged.

   The SMS opt-in stays exactly where it is, inside each attendee card: it is
   how the prep video gets sent and how abandoned carts are recovered. */
.m-only { display: none; }
.paybar { display: contents; }

@media (max-width: 980px) {
  .m-only { display: block; }
  .steps, .co-approved, .coguar { display: none; }

  /* the question leads */
  .co-head { margin: .25rem 0 1.1rem; }
  .co-step { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
             text-transform: uppercase; color: var(--ink-muted); }
  .co-head h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); line-height: 1.04; letter-spacing: -.015em; margin: .3rem 0 .4rem; }
  .co-head p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-muted); }
  #panel-2 > h1, #panel-3 > h1, #panel-2 > .lede, #panel-3 > .lede { display: none; }

  /* one column, and the rail's cards take their place in it: the order card
     first, the Multi offer after the form, the price folded into the bar */
  .checkout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  .summary { display: contents; }
  .summary > .railcard:first-child { order: -2; }
  #up-head { order: 1; }
  #sum-state { order: 2; }
  .railcard--price, .sum-line--price, .sum-price-note { display: none; }   /* the phone card shows the per-seat price itself */
  .railcard { padding: .95rem 1.1rem; }

  /* the order card */
  .summary > .railcard:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .9rem; align-items: start; }
  .summary > .railcard:first-child > .railhead { grid-column: 1 / -1; }
  .railcourse { font-size: 1rem; }
  .order-amt { grid-column: 2; grid-row: 2 / 4; align-self: start; margin: 0; text-align: right; }
  .order-amt b { font-family: var(--font-mono); font-size: 1.35rem; line-height: 1; }
  .order-amt small { display: block; margin-top: .2rem; font-size: .68rem; color: var(--ink-muted); }
  .summary > .railcard:first-child > .small, .summary > .railcard:first-child > .seatnote { grid-column: 1 / -1; }
  .order-change { grid-column: 1 / -1; margin-top: .5rem; font-weight: 700; font-size: .84rem;
                  color: var(--signal-deep); text-decoration: none; }

  /* numbered sections, the same shell the calendar uses */
  .bk-sech { display: flex; align-items: center; gap: .65rem; margin: 0 0 .7rem; }
  .bk-sech h2 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
  .bk-sech .r { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted); }
  .bk-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
          font-family: var(--font-mono); font-weight: 700; font-size: .85rem; line-height: 1;
          background: var(--surface-tint); border: 1px solid var(--rule-strong); color: var(--ink); }
  .bk-n.is-now { background: var(--ink); border-color: var(--ink); color: #fff; }
  #attendees { margin-top: 0 !important; }

  /* "Bringing someone?" as one dashed row */
  #add-attendee { border-style: dashed; border-width: 1px; font-size: .84rem; color: var(--ink-muted); }
  #add-attendee + .note { display: none; }

  /* the Multi offer, as a switch */
  .upoffer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .9rem; align-items: center; }
  .upoffer .railhead { grid-column: 1; margin: 0; font-family: var(--font-body); font-size: .95rem;
                       font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .upoffer-map { display: none; }
  .upoffer p { grid-column: 1; margin: .2rem 0 0; font-size: .78rem; line-height: 1.4; }
  .upoffer #chip-up { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative;
                      width: 52px; height: 30px; min-height: 0; flex: none; padding: 0; font-size: 0;
                      border: 0; border-radius: 999px; background: var(--rule-strong); box-shadow: none; }
  .upoffer #chip-up::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
                             border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); }
  .upoffer #chip-up:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

  /* the bar. Fixed rather than sticky: a sticky bar still reserves its height
     where it sits in the form, which left a hole between the attendee card and
     the Multi offer. The page gets that height back as padding instead. */
  .paybar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
            padding: .65rem clamp(16px, 4vw, 24px) calc(.6rem + env(safe-area-inset-bottom, 0px));
            background: var(--surface); border-top: 1px solid var(--rule);
            box-shadow: 0 -10px 30px -18px rgba(0,0,0,.35); }
  /* When a wallet is chosen the card button is hidden and the bar has nothing
     left to do; the wallet's own button stays in the flow above. */
  .paybar:has(#pay-now[hidden]) { display: none; }
  main.section { padding-bottom: calc(var(--paybar-h, 150px) + 2.5rem); }
  /* The bar measures itself, so the bubble can sit just above whatever height
     it ends up being instead of guessing at a fixed offset. */
  body.no-bookbar .chatfab, .chatfab { bottom: calc(var(--paybar-h, 150px) + 1.4rem); }
  .chatfab-btn { width: 48px; height: 48px; }
  .chatfab-btn svg { width: 22px; height: 22px; }
  .paybar-sum { display: flex; justify-content: space-between; align-items: center; gap: .75rem;
                margin-bottom: .6rem; font-size: .78rem; line-height: 1.35; color: var(--ink-muted); }
  .paybar-sum b { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
  .paybar-sum .tot { flex: none; text-align: right; }
  .paybar-sum .tot b { font-family: var(--font-mono); font-size: 1.4rem; line-height: 1.1; }
  .paybar .btn { margin-top: 0 !important; }
  /* The bar is a strip, not a panel: the button gives back the height a
     full-size CTA takes at the bottom of a long form. */
  .paybar .btn--lg { min-height: 58px; padding-block: .9rem; font-size: 1.12rem; }
  .paybar .note { margin-top: .4rem !important; margin-bottom: 0; font-size: .72rem; }

  /* ── the guarantee, early and small ───────────────────────────────────
     Mario, 2026-09-17: "put the guarantee higher and smaller but looking
     great." It was the last block on the page, under the pay button and the
     terms, at 96px of seal and four lines of prose. It now sits directly under
     the booking card, before the payment methods, as one tight band: the seal
     at a third of the size, the promise on one line, the conditions beneath.
     The reassurance is worth most just before someone commits, not after. */
  #panel-3 { display: flex; flex-direction: column; }
  .seal { order: -1; grid-template-columns: 30px minmax(0, 1fr); gap: .1rem .7rem; align-items: start;
          margin: 0 0 1.1rem; padding: .85rem .95rem; border-width: 1.5px; border-radius: var(--radius-lg); }
  .seal-badge { width: 30px; height: 30px; margin-top: .1rem; }
  .seal-badge span { display: none; }
  .seal-body .eyebrow { font-size: .56rem; letter-spacing: .14em; }
  .seal-body b { font-size: .95rem; margin-top: .1rem; }
  .seal-body p { font-size: .76rem; line-height: 1.45; margin-top: .2rem; }

  /* When the Multi class is already booked there is nothing to upgrade, so the
     39-states line stops being a step and becomes a note on the booking. */
  #sum-state:has(.sum-chip) { order: -1; }
  #sum-state:not(:has(.upoffer)):not(:has(.sum-chip)) { display: none; }

  /* ── the range-time offer, compact ────────────────────────────────────
     Mario, 2026-09-17: the bump "looks bad on mobile". It was the tallest
     thing on the page — a 2.4rem number in each of two full-width stacked
     panels, because .rounds drops to one column under 480px. The two panels
     stay side by side here and shrink to fit: the comparison is the point, and
     it only reads as a comparison when both halves are on screen at once. */
  .bump { padding: 1rem; }
  .bump-flag { font-size: .56rem; padding: .16rem .5rem; letter-spacing: .12em; }
  .bump-grid { grid-template-columns: 24px minmax(0, 1fr); gap: .7rem; }
  .bump input { width: 22px; height: 22px; }
  .bump h3 { font-size: 1.05rem; margin-bottom: .25rem; text-wrap: balance; }
  .bump p { font-size: .84rem; margin-bottom: .35rem; }
  .rounds { grid-template-columns: 1fr 1fr; gap: .45rem; margin: .7rem 0 .2rem; }
  .rounds > span { padding: .6rem .65rem; }
  .rounds .lbl { font-size: .52rem; letter-spacing: .1em; line-height: 1.3; }
  .rounds .big { font-size: 1.55rem; margin-top: .15rem; }
  .rounds .big small { font-size: .66rem; margin-left: .2rem; }
  .rounds .bar { height: 6px; margin-top: .5rem; }
  .rounds .cap { font-size: .66rem; margin-top: .3rem; }
  .bump-foot { margin-top: .7rem; padding-top: .7rem; gap: .2rem .75rem; }
  .bump-yes { font-size: .92rem; }
  .bump-amt { font-size: 1.05rem; margin-left: auto; }
  #bump-note { font-size: .72rem; margin-top: .45rem !important; }

  /* The coupon lives in the order breakdown, which is a tap away behind the
     bar. This line says so where someone looks for it - next to the payment
     methods - and opens the sheet with the field focused. */
  .coupon-hint { display: block; width: 100%; margin: .7rem 0 0; padding: .6rem .8rem;
                 border: 1px dashed var(--rule-strong); border-radius: var(--radius);
                 background: none; font: inherit; font-size: .82rem; color: var(--ink-muted);
                 text-align: center; cursor: pointer; }
  .coupon-hint b { color: var(--signal-deep); font-weight: 700; }

  /* ── the order breakdown, as a sheet off the bar ──────────────────────
     Mario, 2026-09-17: the Order card is the last thing on the page and
     "people won't scroll that far". It leaves the flow and becomes a sheet
     that slides up from the bar when the total row is tapped, so the bar
     stays one line of numbers and one button. */
  .paybar-sum { width: 100%; min-height: 44px; padding: .2rem 0; margin-bottom: .5rem; gap: .5rem;
                background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
  .paybar-sum .tot small { display: inline-flex; align-items: center; gap: .15rem; color: var(--signal-deep); font-weight: 700; }
  .paybar-sum .tot small svg { width: 14px; height: 14px; transition: transform .2s ease; }
  .paybar-sum:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 8px; }

  .railcard--order { position: fixed; left: 0; right: 0; bottom: var(--paybar-h, 150px); z-index: 29;
                     margin: 0; max-height: 58vh; overflow-y: auto; border-radius: 16px 16px 0 0;
                     border-bottom: 0; box-shadow: 0 -18px 40px -22px rgba(0,0,0,.5);
                     transform: translateY(110%); visibility: hidden;
                     transition: transform .22s ease, visibility .22s ease; }
  .order-sheet-close { position: absolute; top: .5rem; right: .6rem; width: 38px; height: 38px;
                       border: 0; border-radius: 50%; background: var(--surface-tint); color: var(--ink);
                       font-size: 1.4rem; line-height: 1; cursor: pointer; }
  /* the floating bubble sits above everything; it must not land on the sheet */
  body.order-open .chatfab { display: none; }
  .order-backdrop { position: fixed; inset: 0; z-index: 28; background: rgba(10,12,14,.45);
                    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }

  body.order-open .railcard--order { transform: none; visibility: visible; }
  body.order-open .order-backdrop { opacity: 1; visibility: visible; }
  body.order-open .paybar-sum .tot small svg { transform: rotate(180deg); }

  @media (prefers-reduced-motion: reduce) {
    .railcard--order, .order-backdrop { transition: none; }
  }
}

/* The sheet only exists on a phone; above the breakpoint the Order card is an
   ordinary rail card and the backdrop must never render. */
.order-backdrop { display: none; }
@media (max-width: 980px) { .order-backdrop { display: block; } }
/* Page-scoped components for the booking confirmation (/checkout/thank-you).

   Mario, 2026-09-24: "make this super legible, very visual — this is basically
   an instruction and confirmation screen. Be clear on the dos and do nots."
   It was the checkout's two-column grid with the instructions as a receipt
   in the rail. Now it is one column, big type, and three colour-coded lists:
   bring, leave at home, we provide. */

.ty { max-width: 860px; margin-inline: auto; }
.ty-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.ty-seal { width: 84px; height: 84px; color: var(--confirm); flex: none; }
.ty-hero h1 { margin-top: .3rem; }
.ty-hero .lede { margin-top: .5rem; max-width: 52ch; }
@media (max-width: 560px) { .ty-hero { grid-template-columns: 1fr; } .ty-seal { width: 64px; height: 64px; } }

/* the booking: the class, then the date large enough to photograph */
.ty-booking { margin-top: 1.75rem; padding: 1.4rem 1.6rem; }
.ty-booking .railcourse { font-size: 1.25rem; }
.ty-when { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.3; margin: .5rem 0 0; color: var(--ink); }
.ty-where { margin-top: .5rem; font-size: .95rem; color: var(--ink-muted); }
.ty-where a { color: inherit; }

/* what happens next: three numbered stops, not a paragraph */
.ty-h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 2.25rem 0 1rem; }
.ty-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 720px) { .ty-next { grid-template-columns: 1fr; } }
.ty-next li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: 1rem 1.1rem;
  background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.ty-next .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700;
  background: var(--confirm); color: #fff; }
.ty-next b { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.25; }
.ty-next p { margin: .3rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--ink-muted); }

/* the day of class: three lists, each with its own colour and mark */
.ty-day { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 860px) { .ty-day { grid-template-columns: 1fr; } }
.ty-list { padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--radius-lg); border: 1px solid var(--rule); background: var(--surface-raised); border-top: 5px solid var(--ty-c); }
.ty-list--do { --ty-c: var(--confirm); }
.ty-list--dont { --ty-c: var(--signal-deep); }
.ty-list--we { --ty-c: var(--dark); }
.ty-list h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin: 0 0 .75rem; color: var(--ty-c); }
.ty-list h3 svg { width: 22px; height: 22px; flex: none; }
.ty-list ul { list-style: none; margin: 0; padding: 0; }
.ty-list li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .55rem 0; border-top: 1px solid var(--rule); font-size: .98rem; line-height: 1.4; }
.ty-list li:first-child { border-top: 0; }
.ty-list li svg { width: 20px; height: 20px; margin-top: .1rem; color: var(--ty-c); flex: none; }
.ty-list li b { display: block; }
.ty-list li small { display: block; font-size: .82rem; color: var(--ink-muted); margin-top: .1rem; }

.ty-invite { margin-top: 2rem; padding: 1.25rem 1.5rem; }
.ty-foot { margin-top: 1.5rem; display: grid; gap: .75rem; }
/* Page-scoped components for intro-to-shooting.html. Lifted from the mockup so no
   Blade template has to carry CSS. */

/* ═══ INTRO TO SHOOTING — the experience page ═════════════════════════════
   Built the way the Vegas ranges sell a helicopter door gun — near-black
   ground, one hot accent, condensed caps, one offer — but selling what we
   actually run: one pistol, one lane, one instructor, one first shot.
   Every video on this page is real footage of this range or its students,
   except the POV band (approved stock). Nothing generated.                  */

.ix-display { font-family: var(--font-tactical); text-transform: uppercase;
  letter-spacing: .015em; line-height: .9; font-weight: 800; }

/* ── Hero: none of its own. The page uses the shared .hero--video shell so
   it matches the two licence-class pages exactly (see _reduction.scss). ── */
@media (prefers-reduced-motion: reduce) { .ix-momentfig video, .ix-step video, .ix-rangefig video { display: none; } }
.ix-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; align-items: center; }
.ix-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--signal);
  color: var(--on-signal); font-family: var(--tac-display, var(--font-display)); text-transform: uppercase;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; padding: .95rem 1.9rem;
  border: 0; border-radius: 4px; text-decoration: none; transition: background .15s ease; }
.ix-btn:hover { background: var(--signal-deep); }
.ix-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.32); }
.ix-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.ix-split { font-size: .85rem; color: var(--on-dark-muted); margin-top: .9rem; }
.ix-split b { color: #B2FCE4; }
.ix-proof { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.6rem;
  font-family: var(--font-mono); font-size: .78rem; color: var(--on-dark-muted); }
.ix-proof b { color: #fff; }

/* ── Who this is for — replaced the ticker strip, whose centered wrapping
   caps read as noise. Four equal cards, left-aligned, same card language as
   the steps below. ─────────────────────────────────────────────────────── */
.ix-who { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.25rem; }
@media (max-width: 720px) { .ix-who { grid-template-columns: 1fr; } }
.ix-who article { background: var(--surface-raised); border: 1px solid var(--rule);
  border-radius: 8px; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.ix-who h3 { font-family: var(--font-tactical); text-transform: uppercase; font-weight: 800;
  letter-spacing: .02em; font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0; color: var(--ink); }
.ix-who p { margin: .55rem 0 0; color: var(--ink-muted); line-height: 1.6; }
/* Photo variant (intro-to-shooting) — the text-only cards read as a wall of
   copy. A real photo leads each card, the icon sits on its corner, a short
   tag names the person, and the body is one sentence. */
.ix-who--photo { gap: clamp(1rem, 2vw, 1.5rem); }
.ix-who--photo article { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 12px; transition: transform .2s ease, border-color .2s ease; }
.ix-who--photo article:hover { transform: translateY(-3px); border-color: var(--signal); }
.ix-who-media { position: relative; aspect-ratio: 16 / 10; background: var(--dark); }
.ix-who-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ix-who-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); }
.ix-who-media .ix-icon { position: absolute; left: 1.1rem; bottom: -1.2rem; z-index: 1;
  margin: 0; background: linear-gradient(color-mix(in srgb, var(--signal) 14%, transparent), color-mix(in srgb, var(--signal) 14%, transparent)), var(--surface-raised);
  box-shadow: 0 0 0 4px var(--surface-raised); }
.ix-who-body { padding: 1.9rem clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.25rem, 2.5vw, 1.6rem); }
.ix-who-tag { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--signal); font-weight: 700; margin-bottom: .35rem; }
.ix-who--photo p { font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .ix-who--photo article { transition: none; }
  .ix-who--photo article:hover { transform: none; } }

/* ── Section scaffolding ───────────────────────────────────────────────── */
.ix-sec { padding-block: clamp(3rem, 7vw, 5.5rem); }
.ix-eyebrow { display: block; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--signal); font-weight: 700; }
.ix-h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); color: var(--ink); margin: .6rem 0 0; max-width: 22ch; }
.ix-sub { margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-muted); max-width: 52ch; }

/* ── The experience: five steps, media-first ───────────────────────────── */
.ix-steps { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.75rem; }
.ix-step { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center; background: var(--surface-raised); border: 1px solid var(--rule);
  border-radius: 12px; overflow: hidden; }
.ix-step:nth-child(even) { grid-template-columns: 1.15fr 1fr; }
.ix-step:nth-child(even) .ix-step-media { order: 2; }
@media (max-width: 860px) { .ix-step, .ix-step:nth-child(even) { grid-template-columns: 1fr; }
  .ix-step:nth-child(even) .ix-step-media { order: 0; } }
.ix-step-media { position: relative; align-self: stretch; min-height: 260px; background: var(--dark); }
.ix-step-media video, .ix-step-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-step-body { padding: clamp(1.25rem, 3vw, 2.25rem); }
.ix-step-n { font-family: var(--font-tactical); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--signal); letter-spacing: .02em; }
.ix-step h3 { font-family: var(--font-tactical); text-transform: uppercase; font-weight: 800;
  letter-spacing: .02em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: .4rem 0 0; color: var(--ink); }
.ix-step p { margin: .7rem 0 0; color: var(--ink-muted); line-height: 1.6; max-width: 46ch; }

/* ── The moment: type on solid dark, the POV video framed beside it ────── */
.ix-h2 em { font-style: normal; color: var(--signal); }
.ix-momentgrid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; }
@media (max-width: 900px) { .ix-momentgrid { grid-template-columns: 1fr; } }
.ix-momentfig { margin: 0; position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); background: var(--dark); aspect-ratio: 16 / 10; }
.ix-momentfig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-momentfig figcaption { position: absolute; left: .9rem; bottom: .9rem;
  background: rgba(8,9,11,.82); color: #fff; padding: .45rem .8rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* ── The stack: one gear panel + a plain list ──────────────────────────────
   Seven boxed tiles read as a wall of boxes. The physical kit now shows as
   cut-out photos on one dark panel (pistol large, protection beside it) and
   everything else is a ruled list — one box on the page, not seven. */
.ix-stackgrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start; margin-top: 2.5rem; }
@media (max-width: 900px) { .ix-stackgrid { grid-template-columns: 1fr; } }
/* The LTC page shows the bench without a price card beside it (Mario, 2026-09-24). */
/* Mario, 2026-09-24: "it floats left — make it fit across the whole section,
   spread it out, make it look epic." One full-width panel: the pistol big on
   the left, protection stacked on the right, and the four extras as a row of
   signal-ruled columns underneath — no boxes. */
.ix-stackgrid--solo { grid-template-columns: 1fr; }
.ix-stackgrid--solo .ix-kit { padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3rem); border-radius: 18px;
  background: radial-gradient(110% 80% at 30% 45%, #2c3036 0%, #121417 70%); }
.ix-stackgrid--solo .ix-kit-lede { font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.35; max-width: 28ch; }
.ix-stackgrid--solo .ix-kit-items { grid-template-columns: 1.5fr 1fr; gap: 1.5rem clamp(2rem, 5vw, 5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.ix-stackgrid--solo .ix-kit-gun img { max-width: 680px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
.ix-stackgrid--solo .ix-kit-items figure:not(.ix-kit-gun) img { max-height: 190px; }
.ix-stackgrid--solo .ix-kit-items figcaption { font-size: .8rem; letter-spacing: .2em; }
.ix-stackgrid--solo .ix-kit-list { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.ix-stackgrid--solo .ix-kit-list li { display: block; padding: .9rem 0 0; border-top: 3px solid var(--signal); border-bottom: 0; }
.ix-stackgrid--solo .ix-kit-list li:last-child { border-bottom: 0; }
.ix-stackgrid--solo .ix-kit-list b { font-size: 1.25rem; }
.ix-stackgrid--solo .ix-kit-list span { display: block; margin-top: .35rem; }
@media (max-width: 900px) { .ix-stackgrid--solo .ix-kit-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .ix-stackgrid--solo .ix-kit-items { grid-template-columns: 1fr 1fr; }
  .ix-stackgrid--solo .ix-kit-list { grid-template-columns: 1fr; gap: .9rem; }
  .ix-stackgrid--solo .ix-kit-items figure:not(.ix-kit-gun) img { max-height: 90px; }
}
.ix-kit { border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); color: #fff;
  background: radial-gradient(120% 90% at 35% 40%, #2a2e33 0%, #121417 70%); }
.ix-kit-lede { margin: 0; font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.ix-kit-lede em { font-style: normal; color: var(--signal); font-weight: 700; }
.ix-kit-items { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto;
  gap: 1rem 1.5rem; align-items: center; margin-top: 1.5rem; }
.ix-kit-items figure { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ix-kit-items img { display: block; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.ix-kit-gun { grid-row: span 2; }
.ix-kit-gun img { width: 100%; max-width: 380px; }
.ix-kit-items figure:not(.ix-kit-gun) img { width: auto; max-width: 100%; max-height: 110px; }
.ix-kit-items figcaption { margin-top: .6rem; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
@media (max-width: 560px) {
  .ix-kit-items { grid-template-columns: 1fr 1fr; }
  .ix-kit-gun { grid-row: auto; grid-column: 1 / -1; }
  .ix-kit-items figure:not(.ix-kit-gun) { align-self: end; }
  .ix-kit-items figure:not(.ix-kit-gun) img { max-height: 80px; } }
.ix-kit-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ix-kit-list li { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1rem; align-items: baseline;
  padding: .95rem 0; border-top: 1px solid var(--rule); }
.ix-kit-list li:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 560px) { .ix-kit-list li { grid-template-columns: 1fr; } }
.ix-kit-list b { font-family: var(--font-tactical); text-transform: uppercase; font-weight: 700;
  letter-spacing: .03em; font-size: 1.1rem; color: var(--ink); }
.ix-kit-list span { color: var(--ink-muted); font-size: .95rem; line-height: 1.5; }
.ix-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); margin-bottom: .8rem; }
.ix-icon svg { width: 26px; height: 26px; color: var(--signal); }
.ix-stack-note { margin-top: 1.25rem; font-size: .92rem; color: var(--ink-muted); max-width: 52ch; line-height: 1.6; }
.ix-pricecard { position: sticky; top: 90px; background: var(--surface-raised);
  border: 1px solid var(--rule); border-top: 4px solid var(--signal); border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.ix-price { font-family: var(--font-tactical); font-weight: 800;
  font-size: clamp(4rem, 8vw, 6rem); line-height: 1; color: var(--ink); }
.ix-price sup { font-size: .4em; color: var(--signal); vertical-align: super; margin-right: .05em; }
.ix-pricecap { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: .5rem; }
.ix-pricecard .ix-btn { width: 100%; justify-content: center; margin-top: 1.25rem; }
.ix-pricefine { margin-top: .9rem; font-size: .82rem; color: var(--ink-muted); line-height: 1.55; }

/* ── Not a public range ────────────────────────────────────────────────── */
.ix-dark { background: var(--dark-deep); }
.ix-dark .ix-h2, .ix-dark .ix-step h3 { color: #fff; }
.ix-dark .ix-sub { color: var(--on-dark-muted); }
.ix-rangegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .ix-rangegrid { grid-template-columns: 1fr; } }
.ix-rangefig { margin: 0; position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: var(--dark); aspect-ratio: 16 / 10; }
.ix-rangefig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-rangefig figcaption { position: absolute; left: .9rem; bottom: .9rem;
  background: rgba(8,9,11,.82); color: #fff; padding: .45rem .8rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* ── Reviews — real Google reviews, verbatim, with the reviewers' own
   public avatars (pulled from the live listing 2026-09-01). ────────────── */
.ix-revsum { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.25rem; flex-wrap: wrap; }
.ix-revsum-faces { display: flex; flex-shrink: 0; }
.ix-revsum-faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface); margin-left: -14px; }
.ix-revsum-faces img:first-child { margin-left: 0; }
.ix-revsum-body { display: flex; align-items: center; gap: .9rem; }
.ix-revsum-body b { font-family: var(--font-tactical); font-weight: 800; font-size: 2.6rem;
  line-height: 1; color: var(--ink); }
.ix-revsum-body > span { max-width: 44ch; color: var(--ink-muted); line-height: 1.5; font-size: .95rem; }
.ix-revsum-body .stars { display: block; color: var(--signal); letter-spacing: .14em; font-size: 1.05rem; }
.ix-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .ix-revs { grid-template-columns: 1fr; } }
.ix-rev { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.5rem; margin: 0; }
.ix-rev .stars { color: var(--signal); letter-spacing: .12em; }
.ix-rev-head { display: flex; align-items: center; gap: .75rem; }
.ix-rev-head .stars { margin-left: auto; font-size: .85rem; }
.ix-rev-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ix-rev-name { font-weight: 700; color: var(--ink); line-height: 1.25; display: flex; flex-direction: column; }
.ix-rev-name small { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 400; }
.ix-rev blockquote { margin: .9rem 0 0; color: var(--ink); line-height: 1.6; font-size: .97rem; }

/* ── Alternating band: separates Proof / Fears / FAQ from each other ───── */
.ix-tint { background: color-mix(in srgb, var(--surface-raised) 55%, var(--surface));
  border-block: 1px solid var(--rule); }
.ix-tint details { background: var(--surface); }

/* ── Final call ────────────────────────────────────────────────────────── */
.ix-final { text-align: center; }
.ix-final .ix-h2 { margin-inline: auto; }
.ix-final .ix-cta { justify-content: center; }
.ix-final .scar { justify-content: center; }

@media (max-width: 900px) { #visit .wrap { grid-template-columns: 1fr !important; } }

/* Intro To Shooting hero: the one thing that page must not let anyone
   misread. Mario: "put NOT A LICENSE CLASS, and link to the LTC page." */
/* Mario, 2026-09-24: an outlined orange box blended into the button above it;
   a white card was harsh on the dark hero. Now it is quiet: no box at all, a
   thin signal rule on the left, muted text, the link in white. Distinct
   because nothing else in the hero is set like this, not because it is loud. */
.t-hero-note { display: block; margin: 1.25rem 0 0; max-width: 34rem; padding: .1rem 0 .1rem .9rem;
  border-left: 3px solid var(--signal); font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.72); }
.t-hero-note b { display: block; margin-bottom: .15rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--signal); }
.t-hero-note span { display: block; }
.t-hero-note a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.t-hero-note a:hover { color: var(--signal); text-decoration-color: var(--signal); }
/* Intro To Shooting hero on a phone. Mario: "super busy on mobile, make it
   minimalist." Four things survive: the headline, one sentence, the one
   button, and the not-a-license-class note. The kicker, the ghost button, the
   Afterpay line, the review badge and the proof row come back at tablet width. */
@media (max-width: 600px) {
  .t-hero--lean .t-kicker, .t-hero--lean .t-btn--ghost, .t-hero--lean .t-split,
  .t-hero--lean [data-herorev], .t-hero--lean .t-proof { display: none; }
  .t-hero--lean h1 { margin-top: 0; }
  .t-hero--lean .t-hero-sub { font-size: 1rem; }
  .t-hero--lean .t-hero-cta .t-btn { width: 100%; justify-content: center; }
  .t-hero--lean .t-hero-note { width: 100%; max-width: none; margin-top: .9rem; }
}

/* ── Not a license class: one band after the steps (2026-09-24) ──────────── */
.ix-warn { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.ix-warn-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items: center;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--rule); border-radius: 12px; background: var(--surface-raised); overflow: hidden; }
.ix-warn-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 14px, #17191d 14px 28px); }
.ix-warn-badge { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent); border-radius: 4px; padding: .25rem .55rem; margin-bottom: .75rem; }
.ix-warn-box h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.ix-warn-box h2 em { font-style: normal; color: var(--signal); }
.ix-warn-box p { margin: .5rem 0 0; color: var(--ink-muted); font-size: 1rem; max-width: 46ch; }
.ix-warn-box .ix-btn { white-space: nowrap; }
@media (max-width: 720px) { .ix-warn-box { grid-template-columns: 1fr; } .ix-warn-box .ix-btn { justify-content: center; white-space: normal; } }
/* Page-scoped components for ltc-class.html. Lifted from the mockup so no
   Blade template has to carry CSS. */

/* ═══ Page components — License To Carry only ═══════════════════════════════
   The four-to-five-hour walk-through, the taught-skills grid, the value stack, the
   Afterpay takeover, the license wall and the objection cards exist on this
   page and nowhere else. Everything is prefixed `lt-` so nothing here can be
   picked up by another page's markup. */

/* ── The four to five hours, stop by stop, with the real room in each one ─────── */
.lt-fh { margin-top: 2.5rem; display: grid; gap: 1.1rem; }
.lt-stop { display: grid; grid-template-columns: 96px 1fr; gap: 0 1.25rem; align-items: start; }
.lt-stop-rail { position: relative; display: grid; justify-items: center; }
.lt-stop-t { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-muted); background: var(--surface); border: 2px solid var(--rule-strong); border-radius: 999px; padding: .5rem .1rem; width: 100%; text-align: center; }
.lt-stop--fire .lt-stop-t { background: var(--signal); border-color: var(--signal); color: #fff; }
.lt-stop-rail::after { content: ''; position: absolute; top: 2.6rem; bottom: -1.1rem; width: 2px; background: var(--rule); }
.lt-stop:last-child .lt-stop-rail::after { display: none; }
.lt-stop-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.1rem, 3vw, 2.2rem); align-items: center; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--pad-sm); }
.lt-stop--fire .lt-stop-body { border-left: 4px solid var(--signal); }
.lt-stop-body h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.lt-stop-body p { margin-top: .5rem; color: var(--ink-muted); font-size: .95rem; line-height: 1.6; }
.lt-stop-tag { display: inline-block; margin-top: .8rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-deep); }
.lt-media { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--dark-deep); aspect-ratio: 16 / 10; }
.lt-media img, .lt-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-media figcaption { position: absolute; left: .6rem; bottom: .6rem; right: .6rem; background: rgba(16,35,58,.86); color: #fff; padding: .35rem .6rem; border-radius: 7px; font-size: .72rem; line-height: 1.35; }
.lt-media-live { position: absolute; top: .6rem; left: .6rem; display: inline-flex; align-items: center; gap: .35rem; background: rgba(216,55,79,.94); color: #fff; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; padding: .3rem .5rem; border-radius: 5px; }
.lt-media-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (max-width: 900px) {
  .lt-stop { grid-template-columns: 1fr; gap: .6rem; }
  .lt-stop-rail { justify-items: start; }
  .lt-stop-t { width: auto; padding: .4rem .9rem; }
  .lt-stop-rail::after { display: none; }
  .lt-stop-body { grid-template-columns: 1fr; }
  .lt-stop-body .lt-media { order: -1; }
}

/* ── What you are actually taught ─────────────────────────────────────── */
.lt-teach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 1000px) { .lt-teach { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .lt-teach { grid-template-columns: 1fr; } }
.lt-teach figure { margin: 0; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.lt-teach img, .lt-teach video { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-tint); }
.lt-teach figure { position: relative; }
.lt-teach video + figcaption .lt-teach-n::after { content: " · MOVING"; color: var(--ink-muted); }
.lt-teach figcaption { padding: .9rem 1rem 1.1rem; }
.lt-teach b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.lt-teach span { display: block; margin-top: .25rem; font-size: .85rem; color: var(--ink-muted); line-height: 1.5; }
.lt-teach-n { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; color: var(--signal-deep); display: block; margin-bottom: .3rem; }

/* ── The value stack ──────────────────────────────────────────────────── */
.lt-stack { margin-top: 2.5rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow); }
.lt-stack-head, .lt-row { display: grid; grid-template-columns: 1fr 15rem; gap: 1rem; align-items: center; padding: .85rem var(--pad-sm); }
.lt-stack-head { background: var(--dark); color: #fff; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.lt-row { border-top: 1px solid var(--rule); }
.lt-row b { font-family: var(--font-display); font-weight: 600; font-size: .98rem; display: flex; gap: .6rem; align-items: baseline; }
.lt-row b svg { width: 17px; height: 17px; color: var(--confirm); flex: none; align-self: center; }
.lt-row span { font-size: .88rem; color: var(--ink-muted); font-family: var(--font-mono); }
.lt-row--sum { background: var(--surface-tint); border-top: 2px solid var(--rule-strong); }
.lt-row--sum b { font-size: 1.05rem; }
.lt-row--sum span { color: var(--ink); font-weight: 600; }
.lt-row--pay { background: var(--dark-deep); color: #fff; align-items: center; }
.lt-row--pay b { color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 800; }
.lt-row--pay span { color: #B2FCE4; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.4rem); letter-spacing: -.02em; }
@media (max-width: 720px) {
  .lt-stack-head { display: none; }
  .lt-row { grid-template-columns: 1fr; gap: .2rem; }
  .lt-row span { padding-left: 1.55rem; }
}

/* ── Afterpay: the whole width, in Afterpay's own colour ──────────────── */
.lt-ap { background: #B2FCE4; color: #0A241C; }
.lt-ap-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .lt-ap-grid { grid-template-columns: 1fr; } }
.lt-ap .eyebrow { color: rgba(10,36,28,.66); }
.lt-ap-big { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; line-height: .84; font-size: clamp(3.6rem, 13vw, 9rem); margin: .4rem 0 0; }
.lt-ap-big sup { font-size: .3em; vertical-align: super; font-weight: 700; letter-spacing: -.02em; }
.lt-ap-cap { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 3vw, 1.8rem); letter-spacing: -.02em; margin-top: .5rem; }
.lt-ap-body { font-size: 1.02rem; line-height: 1.6; max-width: 42ch; margin-top: 1rem; color: rgba(10,36,28,.84); }
.lt-ap-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.lt-ap-cta a { text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 1rem 1.6rem; border-radius: 999px; display: inline-block; text-align: center; }
@media (max-width: 560px) { .lt-ap-cta { flex-direction: column; } .lt-ap-cta a { width: 100%; } }
.lt-ap-cta .go { background: #0A241C; color: #B2FCE4; }
.lt-ap-cta .alt { border: 2px solid #0A241C; color: #0A241C; }
.lt-ap-rail { display: grid; gap: .55rem; }
.lt-ap-rail div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; background: rgba(10,36,28,.08); border-radius: 12px; padding: .85rem 1.1rem; font-family: var(--font-mono); font-size: .88rem; }
.lt-ap-rail div.now { background: #0A241C; color: #B2FCE4; }
.lt-ap-rail b { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.lt-ap-wm { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -.045em; font-size: 1.7rem; }
.lt-ap-fine { font-family: var(--font-mono); font-size: .72rem; color: rgba(10,36,28,.66); margin-top: .6rem; line-height: 1.5; }
.lt-ap-alt { font-family: var(--font-mono); font-size: .82rem; color: rgba(10,36,28,.7); margin-top: 1rem; }

/* ── The wall of licenses ─────────────────────────────────────────────── */
.lt-wall { position: relative; background: var(--dark-deep); border-radius: var(--radius-lg); overflow: hidden; margin-top: 2rem; }
.lt-wall img { width: 100%; display: block; aspect-ratio: 3.51 / 1; object-fit: cover; object-position: center; }
.lt-wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,35,58,.12) 40%, rgba(16,35,58,.72) 66%, rgba(16,35,58,.94)); }
@media (max-width: 900px) { .lt-wall img { aspect-ratio: 1 / 1; object-position: 22% center; } }
.lt-wall-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3rem var(--pad) var(--pad); color: #fff; background: linear-gradient(to bottom, transparent, rgba(16,35,58,.9) 42%, rgba(16,35,58,.97)); }
.lt-wall-cap b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.9rem); letter-spacing: -.02em; }
.lt-wall-cap span { display: block; margin-top: .4rem; font-size: .92rem; color: #DCE6F2; max-width: 62ch; }

/* ── Objections ───────────────────────────────────────────────────────── */
.lt-obj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .lt-obj { grid-template-columns: 1fr; } }
.lt-obj article { background: var(--surface-raised); border: 1px solid var(--rule); border-left: 4px solid var(--signal); border-radius: var(--radius-lg); padding: var(--pad); }
.lt-obj h3 { font-size: 1.1rem; }
.lt-obj p { color: var(--ink-muted); font-size: .95rem; margin-top: .65rem; line-height: 1.6; }

/* ── Live-fire section extras ─────────────────────────────────────────── */
.lt-lf-media { display: grid; gap: 1rem; align-content: start; }
.lt-lf-media .lt-media { aspect-ratio: 16 / 10; }
.lt-lf-media .lt-media--tall { aspect-ratio: 4 / 3; }
/* ── The instalment rides along in the sticky bar (this page only) ─────── */
.bb-ap { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--on-dark-muted); margin-left: auto; }
.bb-ap b { color: #fff; font-family: var(--font-display); font-weight: 700; }
@media (max-width: 560px) { .bb-ap { display: none; } }

/* ── Languages: four flags, one row (2026-09-24) ─────────────────────────── */
.lt-langs { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 720px) { .lt-langs { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
.lt-langs li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) 1rem; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--rule); }
.lt-langs img { width: clamp(72px, 9vw, 108px); height: auto; border-radius: 6px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); margin-bottom: .6rem; }
.lt-langs b { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--ink); }
.lt-langs span { font-size: .82rem; color: var(--ink-muted); }
/* Page-scoped styles for the Basic Firearm Safety Course page. The page is
   built almost entirely from shared components (hero--video, ix-who, ix-steps,
   livefire2, reach, lt-ap) — only what those don't cover lives here. */

/* The MA LTC process has four steps; the shared .bigsteps grid is three-up. */
.bigsteps--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .bigsteps--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bigsteps--four { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE — the approved tactical direction.
   Built against the three sites Tom picked out: machinegunexperience.com,
   gunshiphelicopters.com, lasvegasshootingcenter.com. What they actually share,
   measured rather than guessed:

     · near-black grounds (#000 / #141414 / #111)
     · ONE hot orange accent — #F26322, #F68821, #FF912B, all within a few
       points of each other and of our tactical amber
     · condensed or technical display faces, set in caps
     · named packages with a huge price and a spec line, not feature lists
     · headlines that sell the experience, never the process

   Tom's note was that the old home read like a government form: it talked
   about getting a licence, not about the afternoon you actually spend. This
   keeps every fact and every price and changes what the page is about.

   Sits on the tactical token set — no second palette to maintain. All
   selectors are page-unique (t- prefix); the one global exception is the
   .guarbar hide, scoped through :has(.t-hero) so it only fires here.        */

/* The condensed face lives in _tactical.scss; aliased for this page's classes. */
:root[data-theme="tactical"], [data-theme="tactical"] {
  --tac-display: var(--font-display);
}

/* ── Display type — condensed caps on headings only; body stays Atkinson,
   which is the accessibility decision the brand already made. ───────────── */
.t-hero h1, .t-sec-h, .tp-name, .t-cta h2 {
  font-family: var(--tac-display); text-transform: uppercase;
  letter-spacing: .01em; line-height: .92; font-weight: 800;
}

/* ── Hero — the vicky live-fire loop under the gradient ──────────────────── */
.t-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end;
  padding: clamp(2rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem); overflow: hidden; }
.t-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; }
.t-hero-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; }
@media (prefers-reduced-motion: reduce) { .t-hero-video { display: none; } }
.t-hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.82) 55%, var(--surface) 100%); }
.t-hero .wrap { position: relative; z-index: 1; }
.t-kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--signal);
  border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  padding: .4rem .75rem; border-radius: 999px; }
/* On a phone the long kickers ("State-approved course LTC035 · Everett, MA ·
   10 min from Boston") cannot fit one line, so the pill becomes a rounded
   block that wraps as a sentence instead of a stretched capsule. */
@media (max-width: 600px) { .t-kicker { display: inline-block; white-space: normal; text-align: left; line-height: 1.7; border-radius: 10px; padding: .45rem .8rem; text-wrap: balance; } }
.t-hero h1 { font-size: clamp(3rem, 9vw, 7rem); margin: 1.1rem 0 0; color: #fff; max-width: 16ch; }
.t-hero h1 em { font-style: normal; color: var(--signal); }
.t-hero-sub strong { color: #fff; font-weight: 700; }
.t-hero-sub { margin: 1.25rem 0 0; font-size: clamp(1rem,1.6vw,1.2rem); line-height: 1.5;
  color: var(--on-dark-muted); max-width: 46ch; }
.t-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; align-items: center; }
.t-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--signal);
  color: var(--on-signal); font-family: var(--tac-display); text-transform: uppercase;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; padding: .95rem 1.9rem;
  border: 0; border-radius: 4px; text-decoration: none; transition: background .15s ease; }
.t-btn:hover { background: var(--signal-deep); }
.t-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.32); }
.t-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.t-proof { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.75rem;
  font-family: var(--font-mono); font-size: .78rem; color: var(--on-dark-muted); }
.t-proof b { color: #fff; }

/* ── The three course pages (intro, basic, multi) reuse this hero with their
   own words — see each page's HERO comment. Two extras the home hero doesn't
   need: the Afterpay split line under the CTAs, and a link in the proof row. */
.t-split { font-size: .85rem; color: var(--on-dark-muted); margin-top: .9rem; }
.t-split b { color: #B2FCE4; }
.t-proof a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.t-proof .flags img { width: 1.25rem; height: .85rem; }

/* ── As featured on — one quiet strip under the fold ─────────────────────── */
.t-press { padding: 1.9rem 0; border-bottom: 1px solid var(--rule); }
.t-press .wrap { text-align: center; }
.t-press-k { display: block; margin-bottom: 1.1rem; }
.t-press-row { display: flex; align-items: center; justify-content: center;
  gap: .8rem; flex-wrap: wrap; }
/* White chips, like the tactical footer wall — the marks are colored artwork
   and would die on a near-black ground. */
.t-press-row img { height: 34px; width: auto; max-width: 130px; object-fit: contain;
  background: #fff; border-radius: 6px; padding: .45rem .8rem; box-sizing: content-box; }

/* ── Packages — name, huge price, spec lines, one CTA. A ghosted image sits
   behind each card so it reads as a product rather than a table row. ─────── */
.t-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem; margin-top: 2.5rem; }
.tp { position: relative; overflow: hidden; border-radius: 10px; isolation: isolate;
  background: var(--surface-raised); border: 1px solid rgba(255,255,255,.10);
  padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease; }
.tp:hover { border-color: color-mix(in srgb, var(--signal) 55%, transparent); transform: translateY(-3px); }
.tp::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-size: cover; background-position: center; filter: grayscale(1) contrast(1.15); }
.tp--intro::before { background-image: url('/redesign/img/range-target.webp'); }
.tp--ltc::before   { background-image: url('/redesign/img/classroom.webp'); }
.tp--multi::before { background-image: url('/redesign/img/map-states.webp'); }
.tp::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,14,.35) 0%, rgba(10,12,14,.92) 70%); }
.tp-tag { align-self: flex-start; margin-bottom: .85rem; font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--signal); color: var(--on-signal); padding: .22rem .5rem; border-radius: 3px; font-weight: 700; }
.tp-name { font-size: clamp(2rem, 3.4vw, 2.7rem); color: #fff; margin: 0; }
.tp-name span { display: block; font-size: .52em; color: var(--on-dark-muted); font-weight: 600; }
.tp-price { font-family: var(--tac-display); font-weight: 800; font-size: clamp(3rem, 5.5vw, 4.2rem);
  line-height: 1; color: #fff; margin: 1.1rem 0 .2rem; }
.tp-price sup { font-size: .42em; color: var(--signal); vertical-align: super; margin-right: .04em; }
.tp-specs { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.tp-specs li { display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono);
  font-size: .82rem; letter-spacing: .02em; color: #fff; text-transform: uppercase; }
.tp-specs svg { width: 17px; height: 17px; color: var(--signal); flex: none; }
.tp-foot { margin-top: auto; padding-top: 1.4rem; }
.tp .t-btn { width: 100%; justify-content: center; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.t-sec { padding-block: clamp(3rem, 7vw, 5.5rem); }
.t-sec--alt { background: var(--surface-tint); }
.t-eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal); }
.t-sec-h { font-size: clamp(2rem, 4.5vw, 3.4rem); color: #fff; margin: .6rem 0 0; max-width: 22ch; }
.t-sec-sub { margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-muted); max-width: 54ch; }

.t-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem; margin-top: 2.5rem; }
.t-step { border: 1px solid var(--rule); border-radius: 8px; padding: 1.4rem 1.35rem;
  background: var(--surface-raised); }
.t-step-n { font-family: var(--tac-display); font-size: 2.6rem; line-height: 1; color: var(--signal); }
.t-step h3 { font-family: var(--tac-display); text-transform: uppercase; font-size: 1.3rem;
  letter-spacing: .01em; color: #fff; margin: .5rem 0 .4rem; }
.t-step p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-muted); }

/* ── Guarantee ────────────────────────────────────────────────────────────── */
.t-guar { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
  border: 1px solid color-mix(in srgb, var(--signal) 32%, transparent);
  border-left: 4px solid var(--signal); border-radius: 8px;
  background: color-mix(in srgb, var(--signal) 7%, var(--surface-raised));
  padding: 1.5rem 1.75rem; margin-top: 2.5rem; }
.t-guar svg { width: 54px; height: 54px; color: var(--signal); }
.t-guar b { font-family: var(--tac-display); text-transform: uppercase; font-size: 1.5rem;
  color: #fff; display: block; line-height: 1; }
.t-guar p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-muted); max-width: 62ch; }
@media (max-width: 620px) { .t-guar { grid-template-columns: 1fr; } }

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.t-cta { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); overflow: hidden;
  background: var(--dark-deep); text-align: center; }
.t-cta h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); color: #fff; margin: 0 auto; max-width: 18ch; }
.t-cta p { margin: 1rem auto 2rem; color: var(--on-dark-muted); max-width: 46ch; font-size: 1.02rem; }
.t-cta .t-hero-cta { justify-content: center; }

/* The page carries the guarantee in its own panel, so the footer band would
   be the second one on screen. Scoped: only the home page (t-hero--home) loses it; the course pages that share the hero keep theirs. */
body:has(.t-hero--home) .guarbar { display: none; }

/* ── The facility: copy left, one photo right; four plain tiles under the copy.
   Mario, 2026-09-15: say we are a school with a range, not a volume operation. */
.t-fac { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.t-fac-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.75rem; }
/* Mario, 2026-09-24: text tiles with an icon read as a wall of text; now each
   point is a photo tile — the picture, an icon badge pinned top-left, one line
   at the foot over a gradient. The badge is pinned, so nothing can sit off-centre. */
.t-fac-tile { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #111; }
.t-fac-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .5s ease; }
.t-fac-tile:hover img { transform: scale(1.04); }
.t-fac-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%); }
.t-fac-tile .ix-icon { position: absolute; top: .7rem; left: .7rem; z-index: 1; margin: 0; width: 40px; height: 40px; background: rgba(17,19,22,.78); backdrop-filter: blur(4px); }
.t-fac-tile .ix-icon svg { width: 22px; height: 22px; }
.t-fac-tile-body { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; z-index: 1; }
/* the pistol tile is the cut-out from the gear panels, on the same dark radial */
.t-fac-tile--kit { background: radial-gradient(120% 90% at 40% 40%, #2a2e33 0%, #121417 70%); }
.t-fac-tile--kit img { object-fit: contain; object-position: center 34%; padding: 3% 6% 26%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.t-fac-tile--kit::after { background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 32%, rgba(0,0,0,0) 50%); }
.t-fac-tile b { display: block; font-family: var(--font-tactical); text-transform: uppercase; letter-spacing: .03em; font-size: 1.1rem; line-height: 1.1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.t-fac-tile span { display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.4; color: rgba(255,255,255,.8); }
.t-fac .t-hero-cta { margin-top: 1.5rem; }
.t-fac-fig { margin: 0; }
.t-fac-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); }
.t-fac-fig figcaption { margin-top: .6rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (max-width: 860px) { .t-fac { grid-template-columns: 1fr; } .t-fac-fig { order: -1; } }
@media (max-width: 480px) { .t-fac-tiles { gap: .5rem; } .t-fac-tile { aspect-ratio: 4 / 3; } .t-fac-tile b { font-size: .92rem; } .t-fac-tile span { display: none; } .t-fac-tile .ix-icon { width: 32px; height: 32px; top: .5rem; left: .5rem; } .t-fac-tile .ix-icon svg { width: 18px; height: 18px; } }
/* Page-scoped components for the /stories advertorial section. Everything is
   prefixed `story` (or `gap` for the response-gap timeline) so nothing here
   can be picked up by another page's markup. The pages otherwise lean on the
   system: section bands, wrap--nar, gcards, factrow, chips. */

/* ── Hub filters ─────────────────────────────────────────────────────────── */
.story-filters { display: grid; gap: .6rem; margin-bottom: 2rem; }

/* ── Hub hero with scene image ───────────────────────────────────────────── */
.story-hub-hero { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; }
.story-hub-hero .story-scene { opacity: .45; }
.story-hub-hero .wrap { position: relative; z-index: 1; padding-block: clamp(4rem, 9vw, 8rem); }

/* ── Hub cards with thumbnails ───────────────────────────────────────────── */
.story-card-fig { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) .6rem; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.story-card-fig img { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; filter: saturate(.85); transition: transform .35s ease; }
.gcard:hover .story-card-fig img { transform: scale(1.04); }

/* ── Story hero: full-bleed scene image, content anchored low ────────────── */
.story-hero { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; display: grid; align-items: end; min-height: min(72vh, 640px); }
.story-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,20,.96) 0%, rgba(10,14,20,.55) 45%, rgba(10,14,20,.25) 100%); }
.story-hero .wrap { position: relative; z-index: 1; padding-top: clamp(6rem, 14vw, 11rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.story-hero h1 { color: var(--on-dark); }
.story-scene-note { display: block; margin-top: 1.25rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); opacity: .8; }

.storypage .stack p { max-width: 62ch; }

/* ── The response gap: one proportional time bar ─────────────────────────── */
/* The widths come inline from the data file; the proportions ARE the point,
   so the CSS never hard-codes a duration. Markers hang above the track and
   drop a tick through it; segment captions mirror the widths below. */
.gap-bar { position: relative; margin-top: 2.75rem; padding-top: 3.4rem; }
.gap-track { display: flex; height: 42px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.gap-seg { display: grid; place-items: center; }
.gap-seg--incident { background: var(--signal); }
.gap-seg--gap { background: transparent; }
.gap-seg--gap span { font-family: var(--font-mono); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .09em; color: var(--signal); filter: brightness(1.25); white-space: nowrap; }
.gap-mark { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); text-align: center; pointer-events: none; }
.gap-mark::after { content: ''; position: absolute; left: calc(50% - 1px); top: 3rem; bottom: 0; width: 2px; background: var(--on-dark); opacity: .6; }
.gap-mark b { font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; display: block; line-height: 1.1; }
.gap-mark span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--on-dark-muted); white-space: nowrap; }
.gap-mark--start { transform: none; text-align: left; }
.gap-mark--start::after { left: 0; }
.gap-mark--end { transform: translateX(-100%); text-align: right; }
.gap-mark--end::after { left: auto; right: 0; }
.gap-legend { display: flex; margin-top: .7rem; }
.gap-cap { padding-right: .75rem; }
.gap-cap b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.gap-cap span { font-size: .72rem; color: var(--on-dark-muted); }
.gap-cap--hot b { color: var(--signal); }
.gap-close { margin-top: 2.25rem; max-width: 56ch; font-size: 1.05rem; }
@media (max-width: 640px) {
  .gap-track { height: 34px; }
  .gap-seg--gap span { font-size: .58rem; letter-spacing: .05em; }
  .gap-mark b { font-size: 1rem; }
  .gap-mark span { white-space: normal; max-width: 9em; }
  .gap-mark--start span { max-width: 7.5em; }
}

/* ── Instructor take: text beside footage ────────────────────────────────── */
.story-duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; align-items: center; }
@media (min-width: 860px) { .story-duo { grid-template-columns: 1.1fr .9fr; } }
.story-duo-fig video { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); display: block; background: #000; }
.story-duo-fig figcaption { margin-top: .6rem; font-size: .78rem; color: var(--ink-muted); }

/* ── CTA over live range footage ─────────────────────────────────────────── */
.story-cta { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; }
.story-cta video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.story-cta .wrap { position: relative; z-index: 1; padding-block: clamp(4rem, 8vw, 7rem); }

/* Source citations sit apart from the narrative so reporting and commentary
   never blur. */
.src-note { margin-top: 2.25rem; padding: 1.1rem 1.25rem; background: var(--surface-tint); border-left: 3px solid var(--rule-strong); border-radius: var(--radius); }
.src-note ul { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.src-note p { margin-top: .8rem; }

/* ── Simple in-page footer (landing chrome renders none) ─────────────────── */
.storyfoot { background: var(--dark); color: var(--on-dark-muted); padding-block: clamp(2rem, 4vw, 3rem); }
.storyfoot nav { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-bottom: 1.25rem; }
.storyfoot nav a { color: var(--on-dark); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.storyfoot nav a:hover { color: var(--signal); }
.storyfoot .xsmall a { color: var(--on-dark-muted); }
/* ═══════════════════════════════════════════════════════════════════════════
   /lp/beginners-guide-to-carry — paid-traffic lead magnet.

   The guide is the offer, so the hero is the book: generated mockup on the
   page's own near-black, no video, one CTA. Reuses the quiz components, the
   steps and the review cards; this file adds only what no other page has.
   All selectors are page-unique (lpb- prefix), same convention as t-.       */

/* ── Hero — copy beside the book ─────────────────────────────────────────── */
.lpb-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.lpb-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) {
  .lpb-hero-grid { grid-template-columns: 1fr; }
  /* On a phone the book leads — it is the ad creative, seen before the copy. */
  .lpb-hero-book { order: -1; max-width: 300px; margin-inline: auto; }
}

/* The mockup is rendered on the page's own background colour, so it needs no
   frame — just a soft glow so it reads as an object, not a rectangle. */
.lpb-hero-book { margin: 0; }
.lpb-hero-book img { width: 100%; height: auto; border-radius: var(--radius);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55)); }

/* Contents checklist — the pack tick, sized for prose lines. */
.lpb-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.lpb-list li { position: relative; padding-left: 1.7rem; line-height: 1.5; }
.lpb-list li::before {
  content: ''; position: absolute; left: 0; top: .32em; width: 1rem; height: 1rem;
  background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Final CTA — a quiet dark band, one button ───────────────────────────── */
.lpb-cta { background: var(--dark); color: var(--on-dark); }
.lpb-cta .wrap { padding-block: clamp(3rem, 6vw, 5rem); }
.lpb-cta h2, .lpb-cta .lede { color: var(--on-dark); }

/* ── Micro footer — the landing chrome renders none; ads need the links ──── */
.lpb-foot { background: var(--dark); color: var(--on-dark-muted);
  padding-block: clamp(1.5rem, 3vw, 2.25rem); font-size: .8rem; }
.lpb-foot .wrap { display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  align-items: center; justify-content: space-between; }
.lpb-foot a { color: var(--on-dark); }
.lpb-foot nav { display: flex; gap: 1.25rem; }
.lpb-foot nav a { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; }
.lpb-foot nav a:hover { color: var(--signal); }

/* ── /quiz/finish — the opt-in, and the footer shared by the quiz pages (2026-09-24) ── */
.qf-hero .lpb-hero-grid { align-items: start; }
.qf-form { margin-top: 1.75rem; }
.qf-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: .75rem; }
@media (max-width: 560px) { .qf-fields { grid-template-columns: 1fr; } }
.qf-form .field { margin: 0; }
.qf-book { position: relative; max-width: 380px; margin-inline: auto; }
.qf-book img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.qf-free { position: absolute; top: -.6rem; left: -.6rem; z-index: 1; background: var(--signal); color: var(--on-signal, #fff);
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .45rem .7rem; border-radius: 4px; transform: rotate(-4deg); }
.qf-book figcaption { margin-top: .9rem; text-align: center; font-size: .9rem; color: var(--ink-muted); }
@media (max-width: 860px) { .qf-book { max-width: 220px; margin-top: 1.5rem; } }
.qf-proof .ix-revs { margin-top: 1.5rem; }
.qf-foot .wrap { display: grid; justify-items: center; text-align: center; gap: .6rem; }
.qf-foot nav { justify-content: center; }
.qf-foot-disclaimer { max-width: 62ch; margin: 0; font-size: .8rem; line-height: 1.5; }

/* ── /quiz/check-results: the LTC page with a "you qualify" banner under the bare masthead ── */
.qf-banner { background: var(--confirm); color: #fff; }
.qf-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-block: .8rem; font-size: .95rem; line-height: 1.4; }
.qf-banner .qf-banner-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--confirm); display: grid; place-items: center; }
.qf-banner .qf-banner-mark svg { width: 15px; height: 15px; }
.qf-banner b { font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; }
.qf-banner a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) { .qf-banner .wrap { font-size: .88rem; } .qf-banner a { margin-left: 0; } }

/* ── the licensed-student reviews on /quiz/finish (2026-09-24) ──────────── */
.qf-licrev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.qf-licrev-card { margin: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--rule); }
.qf-licrev-card picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.qf-licrev-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.qf-licrev-card figcaption { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; }
.qf-licrev-card .stars { color: var(--signal); letter-spacing: .05em; font-size: .9rem; }
.qf-licrev-card blockquote { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.qf-licrev-card b { font-family: var(--font-display); font-size: .95rem; margin-top: .25rem; }
.qf-licrev-card b small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-top: .15rem; }
@media (max-width: 900px) { .qf-licrev { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  /* one row you swipe: six cards stacked would be a wall on a phone */
  .qf-licrev { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .qf-licrev::-webkit-scrollbar { display: none; }
  .qf-licrev-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ── Templated pages: /ltc/{town}, /carry/{state}, /for/{who}, /non-resident ──
   These pages are built from the shared components (hero stats, big steps,
   ticks, notes, cards) that were tuned as accents on the dense class pages.
   Here they are the whole page and were reading at 11–16px on a 17px body.
   Keyed on the body class the templated Blade files set, so the class pages
   keep their tuning. Imported after the theme so ties go this way. */
.page--tpl .hero-stat b { font-size: 1.7rem; }
.page--tpl .hero-stat > span { font-size: .92rem; letter-spacing: 0; }
.page--tpl .hero-body { font-size: 1.12rem; }
.page--tpl .eyebrow { font-size: .8rem; }
.page--tpl .lede { font-size: 1.18rem; line-height: 1.6; }
.page--tpl .bigstep h3 { font-size: 1.32rem; }
.page--tpl .bigstep p { font-size: 1.04rem; line-height: 1.6; }
.page--tpl .bigstep .who { font-size: .76rem; letter-spacing: .12em; }
.page--tpl .ticks { gap: .8rem; }
.page--tpl .ticks li { font-size: 1.08rem; line-height: 1.6; padding-left: 1.85rem; }
.page--tpl .ticks li::before { font-size: 1.25rem; }
.page--tpl .note { font-size: .95rem; line-height: 1.6; }
.page--tpl .card .small, .page--tpl .card p.small { font-size: 1rem; line-height: 1.6; }
.page--tpl .card .d-sm { font-size: 1.22rem; }
.page--tpl .faq details > div { font-size: 1.06rem; }
.page--tpl .faq summary { font-size: 1.1rem; }
.page--tpl .reach-card p, .page--tpl .reach-card li { font-size: 1.02rem; }

/* ═══ v5 · the reduction layer (all widths) ═══════════════════════════════
   A section is either on the page in full or not on it. data-m="hide" marks
   the ones whose job is done elsewhere on the same page; data-m-text carries
   a shorter line where one was written. */
[data-m="hide"] { display: none !important; }
.hero .herotrust [data-scarcity] { display: none; }
.hero .hero-cta .btn--ghost { display: none; }
.apsec .inc, .apsec .apsec-alt { display: none; }
.foot .about, .foot p.small { display: none; }
/* hero video: the range line behind the words */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; z-index: 0; }
.hero--video::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(16,35,58,.92) 0%, rgba(16,35,58,.78) 42%, rgba(16,35,58,.25) 100%); }
.hero--video .wrap { position: relative; z-index: 1; }
@media (max-width: 720px) { .hero--video::after { background: linear-gradient(180deg, rgba(16,35,58,.9) 0%, rgba(16,35,58,.7) 100%); } }
@media (max-width: 720px) {
  .section { padding-block: clamp(2.6rem, 9vw, 3.5rem); }
  .lede { font-size: 1.02rem; line-height: 1.55; }
  h2.d-lg { font-size: clamp(1.6rem, 7.2vw, 2rem); }
  .hero .hero-body { max-width: none; }
}