/* ==========================================================================
   Funnel v2 - dark, mobile-first checkout
   ==========================================================================

   Loaded ONLY when config('FUNNEL_V2') is on, in addition to styles.css. Keeping it
   separate (rather than retokenizing styles.css) is deliberate: the v1 funnel stays
   byte-identical while the flag is off, so rollback is a flag flip with no visual risk.

   Driveline brand rules enforced here (see the driveline-baseball-design skill):
     - canvas is pure black, surfaces are #111 / #1A1A1A, never a gray page background
     - goldenrod #FFA300 is the only accent
     - ZERO shadows: no box-shadow, text-shadow, filter, or backdrop-filter anywhere
     - border-radius 8px; never a pill button
     - Gotham for display, Lato for body, with a documented fallback stack

   Fonts: no licensed Gotham/Lato webfont files ship with this repo, and CSP font-src is
   'self' https://cdn.jsdelivr.net data: - so a Google Fonts or Typekit URL would be blocked
   without a CSP edit. Drop the licensed .woff2 files into assets/fonts/ and add the
   @font-face blocks marked below; font-src 'self' already covers them, no CSP change needed.
   Until then the stack below degrades to the platform grotesque rather than to a banned
   font chosen at random.
   ========================================================================== */

.funnel-v2 {
    /* ---- palette ---- */
    --v2-canvas:        #000000;
    --v2-surface:       #111111;
    --v2-surface-raised:#1A1A1A;
    --v2-border:        #2A2A2A;
    --v2-border-strong: #3A3A3A;

    --v2-accent:        #FFA300;
    --v2-accent-hover:  #FFB733;
    --v2-accent-ink:    #000000;

    --v2-text:          #FFFFFF;
    --v2-text-muted:    #A0A0A0;
    --v2-text-dim:      #808080;

    --v2-danger:        #FF4D4D;
    --v2-success:       #4ADE80;

    /* ---- type ---- */
    --v2-font-display: "Gotham", "Gotham Bold", "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --v2-font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

    /* ---- rhythm ---- */
    --v2-gap-xs: 4px;
    --v2-gap-sm: 8px;
    --v2-gap:    16px;
    --v2-gap-lg: 24px;
    --v2-gap-xl: 32px;
    --v2-radius: 8px;
    --v2-tap:    44px;   /* minimum touch target */
}

/* ==========================================================================
   Shell
   ========================================================================== */

/* Paint the document canvas too; body-only black can expose a light canvas in transitions. */
html.funnel-v2-root { background: #000; color-scheme: dark; }

body.funnel-v2 {
    background: var(--v2-canvas);
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.funnel-v2 .v2-shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--v2-gap) var(--v2-gap) var(--v2-gap-xl);
    box-sizing: border-box;
}

.funnel-v2 .v2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-gap);
    padding: var(--v2-gap-sm) 0 var(--v2-gap-lg);
}

/* The mark is 1740x576 (~3:1). The <img> carries those intrinsic dimensions so the browser
   reserves a correctly-shaped box and nothing shifts on load; height here does the sizing. */
.funnel-v2 .v2-logo { height: 30px; width: auto; display: block; }

@media (min-width: 480px) {
    .funnel-v2 .v2-logo { height: 36px; }
}

/* "STEP 2 OF 3" - replaces the v1 progress bar, whose /4 denominator never matched the
   number of steps actually in the flow. */
.funnel-v2 .v2-step-label {
    font-family: var(--v2-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
    white-space: nowrap;
}

.funnel-v2 .v2-eyebrow {
    font-family: var(--v2-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-accent);
    margin: 0 0 var(--v2-gap-sm);
}

.funnel-v2 h1,
.funnel-v2 .v2-title {
    font-family: var(--v2-font-display);
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 var(--v2-gap);
    color: var(--v2-text);
}

.funnel-v2 .v2-lede {
    font-size: 15px;
    line-height: 1.5;
    color: var(--v2-text-muted);
    margin: 0 0 var(--v2-gap-lg);
}

.funnel-v2 .v2-fineprint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: var(--v2-gap) 0 0;
    text-align: center;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.funnel-v2 .v2-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: var(--v2-gap-lg);
    margin-bottom: var(--v2-gap);
}

.funnel-v2 .v2-card-tight { padding: var(--v2-gap); }

.funnel-v2 .v2-card-title {
    font-family: var(--v2-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--v2-gap-xs);
}

.funnel-v2 .v2-card-meta {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin: 0 0 var(--v2-gap);
}

/* Inline text links (picker "Change location or focus", support mailto links). Without an
   explicit color they render in the browser's default blue on the black canvas. Scoped to
   the prose containers rather than a bare `a` rule so calendar cells and arrows, which are
   also anchors, keep their own styling. */
.funnel-v2 .v2-card-meta a,
.funnel-v2 .v2-fineprint a,
.funnel-v2 .v2-alert a {
    color: var(--v2-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.funnel-v2 .v2-card-meta a:hover,
.funnel-v2 .v2-fineprint a:hover,
.funnel-v2 .v2-alert a:hover {
    color: var(--v2-accent);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.funnel-v2 .v2-field { margin-bottom: var(--v2-gap); }

.funnel-v2 .v2-label {
    display: block;
    font-family: var(--v2-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
    margin-bottom: var(--v2-gap-sm);
}

.funnel-v2 .v2-input,
.funnel-v2 .v2-select {
    width: 100%;
    min-height: var(--v2-tap);
    padding: 12px 14px;
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    font-size: 16px; /* >=16px stops iOS Safari zooming the page on focus */
    box-sizing: border-box;
    appearance: none;
}

.funnel-v2 .v2-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--v2-text-muted) 50%),
                      linear-gradient(135deg, var(--v2-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.funnel-v2 .v2-input::placeholder { color: var(--v2-text-dim); }

.funnel-v2 .v2-input:focus,
.funnel-v2 .v2-select:focus,
.funnel-v2 .v2-btn:focus-visible,
.funnel-v2 .v2-combo-option:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
    border-color: var(--v2-accent);
}

.funnel-v2 .v2-input[aria-invalid="true"] { border-color: var(--v2-danger); }

.funnel-v2 .v2-field-error {
    display: block;
    font-size: 12px;
    color: var(--v2-danger);
    margin-top: var(--v2-gap-xs);
}

.funnel-v2 .v2-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-gap);
}

@media (max-width: 380px) {
    .funnel-v2 .v2-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Radio tiles (location / focus)
   ==========================================================================
   Two independent groups rather than one combined select. A dependent facility->track pair
   would need JavaScript to repopulate; two radio groups render fully server-side, so the
   control works with JS disabled and the PAIR is validated on submit.

   The input is visually hidden but stays in the tab order and keeps its :focus-visible ring
   on the tile - never display:none, which removes it from keyboard navigation entirely. */

.funnel-v2 .v2-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--v2-gap);
    min-width: 0;   /* Chrome/Safari give fieldset an intrinsic min-width that breaks grids */
}

.funnel-v2 .v2-legend {
    display: block;
    padding: 0;
    font-family: var(--v2-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
    margin-bottom: var(--v2-gap-sm);
}

.funnel-v2 .v2-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--v2-gap-sm);
}

.funnel-v2 .v2-radio-item { position: relative; display: block; }

.funnel-v2 .v2-age-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--v2-tap);
    padding: 14px;
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    background: var(--v2-surface-raised);
    color: var(--v2-text);
    font-weight: 700;
    cursor: pointer;
}

.funnel-v2 .v2-age-option input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--v2-accent);
}

.funnel-v2 .v2-age-option:focus-within { outline: 2px solid var(--v2-accent); outline-offset: 2px; }

.funnel-v2 .v2-radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.funnel-v2 .v2-radio-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--v2-tap);
    padding: 10px 8px;
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    color: var(--v2-text);
    font-family: var(--v2-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.funnel-v2 .v2-radio-tile:hover { border-color: var(--v2-accent); }

.funnel-v2 .v2-radio-input:checked + .v2-radio-tile {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-accent-ink);
}

.funnel-v2 .v2-radio-input:focus-visible + .v2-radio-tile {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

/* A track offered at some facilities but not the selected one. Config is uniform today, so
   this is dormant - it exists so a future divergence degrades visibly instead of letting a
   visitor pick a pair the server then rejects. */
.funnel-v2 .v2-radio-input:disabled + .v2-radio-tile {
    opacity: 0.35;
    cursor: not-allowed;
    border-style: dashed;
}

.funnel-v2 .v2-radio-input:disabled + .v2-radio-tile:hover { border-color: var(--v2-border-strong); }

.funnel-v2 .v2-account-email-note {
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--v2-accent);
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-text-muted);
}
.funnel-v2 .v2-account-email-note strong {
    display: block;
    color: var(--v2-text);
    margin-bottom: 4px;
}

/* Focus artwork inherits the selected state without replacing the text labels. */
.funnel-v2 .v2-focus-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.funnel-v2 .v2-focus-group .v2-radio-item { min-width: 0; }

.funnel-v2 .v2-focus-tile {
    flex-direction: row;
    gap: 3px;
    min-height: 72px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 4px;
    background: var(--v2-surface);
    font-size: clamp(10px, 2.5vw, 11px);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.funnel-v2 .v2-focus-icon {
    display: block;
    flex-shrink: 0;
    width: 26px;
    height: 40px;
    color: var(--v2-text-dim);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 150ms ease;
}

.funnel-v2 .v2-focus-body { fill: #343434; transition: fill 180ms ease; }
.funnel-v2 .v2-focus-grain { stroke-width: 0.7; opacity: 0.5; }
.funnel-v2 .v2-focus-detail,
.funnel-v2 .v2-focus-seam { stroke: #111; stroke-width: 1; }
.funnel-v2 .v2-focus-stitches { stroke-width: 1.5; }

.funnel-v2 .v2-radio-input:checked + .v2-focus-tile {
    background: rgba(255, 163, 0, 0.06);
    color: var(--v2-text);
}

.funnel-v2 .v2-radio-input:checked + .v2-focus-tile .v2-focus-icon {
    color: var(--v2-accent);
}

.funnel-v2 .v2-radio-input:checked + .v2-focus-tile .v2-focus-body {
    fill: var(--v2-accent);
}

.funnel-v2 .v2-radio-input:checked + .v2-focus-tile .v2-focus-stitches,
.funnel-v2 .v2-radio-input:checked + .v2-focus-tile .v2-focus-grain {
    stroke: var(--v2-accent-ink);
}

/* State silhouettes stay decorative; the entire labeled tile is a native radio target. */
.funnel-v2 .v2-facility-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.funnel-v2 .v2-facility-group .v2-radio-item { min-width: 0; }

.funnel-v2 .v2-facility-tile {
    position: relative;
    flex-direction: column;
    gap: 12px;
    min-height: 148px;
    height: 100%;
    padding: 24px 6px 14px;
    box-sizing: border-box;
    font-size: clamp(9px, 2.5vw, 11px);
    letter-spacing: 0.02em;
    background: var(--v2-surface);
}

.funnel-v2 .v2-state-icon {
    display: block;
    width: 100%;
    max-width: 140px;
    height: 82px;
    overflow: visible;
    fill: #343434;
    stroke: var(--v2-text-dim);
    stroke-width: 1.2;
    stroke-linejoin: round;
    transition: fill 180ms ease, stroke 180ms ease, transform 180ms ease;
}

.funnel-v2 .v2-facility-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.funnel-v2 .v2-facility-city {
    color: var(--v2-text-dim);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.funnel-v2 .v2-facility-star {
    fill: var(--v2-accent);
    stroke: var(--v2-accent-ink);
    stroke-width: 1;
    transition: fill 180ms ease;
}

.funnel-v2 .v2-radio-input:checked + .v2-facility-tile .v2-facility-star {
    fill: var(--v2-accent-ink);
}

.funnel-v2 .v2-facility-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    font-size: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 180ms ease, transform 180ms ease;
}

.funnel-v2 .v2-facility-tile:hover .v2-state-icon,
.funnel-v2 .v2-radio-input:focus-visible + .v2-facility-tile .v2-state-icon {
    stroke: var(--v2-accent);
    transform: scale(1.04);
}

.funnel-v2 .v2-radio-input:checked + .v2-facility-tile {
    background: rgba(255, 163, 0, 0.06);
    color: var(--v2-text);
}

.funnel-v2 .v2-radio-input:checked + .v2-facility-tile .v2-state-icon {
    fill: var(--v2-accent);
    stroke: var(--v2-accent);
    transform: scale(1.04);
}

.funnel-v2 .v2-radio-input:checked + .v2-facility-tile .v2-facility-check {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 350px) {
    /* Keep three compact, readable choices when inline artwork and text cannot fit. */
    .funnel-v2 .v2-focus-tile {
        flex-direction: column;
        min-height: 64px;
        padding: 8px 4px;
    }
    .funnel-v2 .v2-focus-icon { width: 28px; height: 28px; }
    .funnel-v2 .v2-facility-group { grid-template-columns: 1fr; }
    .funnel-v2 .v2-facility-tile {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 88px;
        padding: 12px 16px;
        gap: 16px;
        font-size: 12px;
    }
    .funnel-v2 .v2-state-icon { width: 70px; height: 60px; }
}

/* Verification code: monospace-ish tracking so six digits read as six digits. */
.funnel-v2 .v2-code-input {
    font-size: 22px;
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Buttons  (8px radius, never pills; text lives on the button element itself)
   ========================================================================== */

.funnel-v2 .v2-btn {
    display: block;
    width: 100%;
    min-height: var(--v2-tap);
    padding: 14px 20px;
    border: 1px solid transparent;
    border-radius: var(--v2-radius);
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    font-family: var(--v2-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.funnel-v2 .v2-btn:hover:not(:disabled) { background: var(--v2-accent-hover); }

.funnel-v2 .v2-btn:disabled,
.funnel-v2 .v2-btn[aria-disabled="true"] {
    background: var(--v2-border-strong);
    color: var(--v2-text-dim);
    cursor: not-allowed;
}

.funnel-v2 .v2-btn-secondary {
    background: transparent;
    border-color: var(--v2-border-strong);
    color: var(--v2-text);
}

.funnel-v2 .v2-btn-secondary:hover:not(:disabled) {
    background: var(--v2-surface-raised);
    border-color: var(--v2-accent);
}

.funnel-v2 .v2-btn-link {
    display: inline-block;
    width: auto;
    min-height: 0;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--v2-accent);
    font-family: var(--v2-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    cursor: pointer;
}

.funnel-v2 .v2-back {
    display: inline-block;
    color: var(--v2-text-muted);
    font-size: 13px;
    text-decoration: none;
    margin-top: var(--v2-gap-lg);
}

.funnel-v2 .v2-back:hover { color: var(--v2-accent); }

/* ==========================================================================
   Two-day combo cards
   ==========================================================================
   One row per COMPLETE bookable option. Each row is a real submit button inside a form,
   so the picker works with JavaScript disabled and a tap books the whole two-day set.
   Day 1 averages ~1 slot/day in live data, so most cards render exactly one row. */

.funnel-v2 .v2-combo {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: var(--v2-gap);
    margin-bottom: var(--v2-gap-sm);
}

.funnel-v2 .v2-combo-days {
    font-family: var(--v2-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.funnel-v2 .v2-combo-dates {
    font-size: 12px;
    color: var(--v2-text-muted);
    margin: 2px 0 var(--v2-gap);
}

.funnel-v2 .v2-combo-option {
    display: block;
    width: 100%;
    min-height: var(--v2-tap);
    padding: 10px 12px;
    margin-bottom: var(--v2-gap-sm);
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.funnel-v2 .v2-combo-option:last-child { margin-bottom: 0; }

.funnel-v2 .v2-combo-option:hover {
    border-color: var(--v2-accent);
    background: #202020;
}

.funnel-v2 .v2-combo-leg {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    font-size: 13px;
    line-height: 1.6;
}

.funnel-v2 .v2-combo-leg-label { color: var(--v2-text-muted); }

.funnel-v2 .v2-combo-leg-time {
    font-weight: 700;
    color: var(--v2-text);
    white-space: nowrap;
}

.funnel-v2 .v2-combo-go {
    display: block;
    margin-top: var(--v2-gap-sm);
    font-family: var(--v2-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-accent);
}

.funnel-v2 .v2-empty {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: var(--v2-gap-lg);
    text-align: center;
    color: var(--v2-text-muted);
}

.funnel-v2 .v2-empty a { color: var(--v2-accent); }

/* ==========================================================================
   Day sections (pick day 1, then day 2)
   ==========================================================================
   Day 1 and day 2 are chosen independently on one page. Each start time is a real submit
   button inside its own form, so a tap books that exact slot and the page needs no
   JavaScript. */

.funnel-v2 .v2-section {
    margin-bottom: var(--v2-gap-lg);
    padding-bottom: var(--v2-gap);
    border-bottom: 1px solid var(--v2-border);
}

.funnel-v2 .v2-section:last-of-type { border-bottom: none; }
.funnel-v2 .v2-section.is-locked { opacity: 0.45; }

.funnel-v2 #development { scroll-margin-top: 24px; }
.funnel-v2 .v2-handoff-context {
    margin: 0 0 12px;
    color: var(--v2-text-muted);
    font-size: 12px;
}
.funnel-v2 .v2-handoff-instruction {
    margin: 0 0 16px;
    color: var(--v2-text);
    font-size: 14px;
    line-height: 1.5;
}

.funnel-v2 .v2-section-title {
    display: flex;
    align-items: center;
    gap: var(--v2-gap-sm);
    font-family: var(--v2-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 var(--v2-gap);
}

.funnel-v2 .v2-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: var(--v2-radius);
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    font-size: 12px;
}

.funnel-v2 .v2-development-title { font-size: 22px; margin-bottom: 12px; }
.funnel-v2 #development-heading:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 4px; }

.funnel-v2 .v2-section-note,
.funnel-v2 .v2-section-hint {
    font-family: var(--v2-font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-text-muted);
}

.funnel-v2 .v2-section-hint { display: block; margin: 0 0 var(--v2-gap); }
.funnel-v2 .v2-locked-note { font-size: 13px; color: var(--v2-text-muted); margin: 0; }

.funnel-v2 .v2-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-gap);
    padding: 12px 14px;
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-accent);
    border-radius: var(--v2-radius);
}

.funnel-v2 .v2-chosen-when { font-weight: 700; font-size: 14px; }

.funnel-v2 .v2-daterow {
    display: flex;
    align-items: baseline;
    gap: var(--v2-gap);
    padding: 10px 0;
    border-bottom: 1px solid var(--v2-border);
}

.funnel-v2 .v2-daterow:last-child { border-bottom: none; }

.funnel-v2 .v2-daterow-date {
    flex: 0 0 92px;
    margin: 0;
    font-family: var(--v2-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.funnel-v2 .v2-time-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-gap-sm);
    flex: 1 1 auto;
}

.funnel-v2 .v2-time-btn {
    min-height: var(--v2-tap);
    padding: 10px 14px;
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.funnel-v2 .v2-time-btn-pair {
    display: grid;
    gap: 6px;
    text-align: left;
}

.funnel-v2 .v2-time-session {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.funnel-v2 .v2-time-discipline {
    font-weight: 400;
}

.funnel-v2 .v2-time-btn:hover {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-accent-ink);
}

.funnel-v2 .v2-time-btn:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

.funnel-v2 .v2-time-btn.is-pending {
    background: rgba(255, 163, 0, 0.06);
    border-color: var(--v2-accent);
    color: var(--v2-accent);
    transition: none;
}

.funnel-v2 .v2-time-btn[aria-disabled="true"] { cursor: wait; }
.funnel-v2 .v2-time-btn[aria-disabled="true"]:not(.is-pending) { opacity: 0.4; }
.funnel-v2 .v2-time-status {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--v2-text-muted);
}

/* ==========================================================================
   Day-1 month calendar
   ==========================================================================
   Replaces a paginated date+time list. Against live availability most day-1 dates offer a
   single start time, and usually the SAME time, so the list spent a column repeating itself
   across three or four pages. A month grid carries the same information in one screen and
   shows a facility's weekly rhythm.

   Open days and month navigation are ordinary links; choosing a time submits a real form,
   so the whole control works with JavaScript disabled. Both assessment days share this UI. */

.funnel-v2 .v2-cal {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: var(--v2-gap);
}

.funnel-v2 .v2-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    margin-bottom: var(--v2-gap);
}

.funnel-v2 .v2-cal-month {
    font-family: var(--v2-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.funnel-v2 .v2-cal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--v2-tap);
    height: var(--v2-tap);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    color: var(--v2-text);
    text-decoration: none;
    font-size: 16px;
}

.funnel-v2 .v2-cal-arrow:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

.funnel-v2 .v2-cal-arrow.is-disabled {
    opacity: 0.25;
    border-style: dashed;
    cursor: not-allowed;
}

.funnel-v2 .v2-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.funnel-v2 .v2-cal-wd {
    text-align: center;
    font-family: var(--v2-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--v2-text-dim);
    padding-bottom: 4px;
}

.funnel-v2 .v2-cal-cell {
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--v2-radius);
    background: transparent;
    color: var(--v2-text-dim);
    font-family: var(--v2-font-body);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.funnel-v2 .v2-cal-cell.is-blank { visibility: hidden; }

.funnel-v2 .v2-cal-cell.is-off {
    color: #4a4a4a;
    font-weight: 400;
}

.funnel-v2 .v2-cal-cell.is-open {
    background: var(--v2-surface-raised);
    border-color: var(--v2-border-strong);
    color: var(--v2-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.funnel-v2 .v2-cal-cell.is-open:hover {
    border-color: var(--v2-accent);
    color: var(--v2-accent);
}

.funnel-v2 .v2-cal-cell.is-open.is-active {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-accent-ink);
}

.funnel-v2 .v2-cal-cell.is-open:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

/* Reference markers do not make an unavailable date bookable. */
.funnel-v2 .v2-cal-cell.is-today,
.funnel-v2 .v2-cal-cell.is-testing-day {
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}
.funnel-v2 .v2-cal-cell.is-today {
    border-color: var(--v2-text-muted);
    color: var(--v2-text);
}
.funnel-v2 .v2-cal-cell.is-testing-day {
    border: 1px dashed var(--v2-accent);
    color: var(--v2-accent);
}
.funnel-v2 .v2-cal-cell.is-active { color: var(--v2-accent-ink); }
.funnel-v2 .v2-cal-marker {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.funnel-v2 .v2-cal-reference {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--v2-text-muted);
}

/* Tap feedback. The day being loaded fills in immediately; the rest of the grid dims so a
   second tap cannot race the first. Purely additive - with JavaScript off none of it applies. */
.funnel-v2 .v2-cal-cell.is-pending {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-accent-ink);
}

.funnel-v2 .v2-cal-pending .v2-cal-cell:not(.is-pending) {
    opacity: 0.4;
}

.funnel-v2 .v2-cal-pending + .v2-cal-note::after {
    content: ' Loading times\2026';
    color: var(--v2-accent);
}

.funnel-v2 .v2-cal-note,
.funnel-v2 .v2-cal-hint {
    margin: var(--v2-gap) 0 0;
    font-size: 12px;
    color: var(--v2-text-muted);
    text-align: center;
}

.funnel-v2 .v2-cal-note a { color: var(--v2-accent); }

.funnel-v2 .v2-times {
    margin-top: var(--v2-gap);
    padding: var(--v2-gap);
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-accent);
    border-radius: var(--v2-radius);
}

.funnel-v2 .v2-times-head {
    margin: 0 0 var(--v2-gap-sm);
    font-family: var(--v2-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
}

@media (max-width: 400px) {
    .funnel-v2 .v2-daterow { flex-direction: column; gap: var(--v2-gap-sm); }
    .funnel-v2 .v2-daterow-date { flex: none; }
}

/* ==========================================================================
   Summary + price rows
   ========================================================================== */

.funnel-v2 .v2-summary-legs {
    list-style: none;
    margin: 0 0 var(--v2-gap);
    padding: 0;
    border-bottom: 1px solid var(--v2-border);
    padding-bottom: var(--v2-gap);
}

.funnel-v2 .v2-summary-legs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    font-size: 13px;
    line-height: 1.9;
}

.funnel-v2 .v2-summary-legs .leg-label { color: var(--v2-text-muted); }
.funnel-v2 .v2-summary-legs .leg-when { font-weight: 700; white-space: nowrap; }

.funnel-v2 .v2-overview-days {
    list-style: none;
    padding: 0;
    margin: var(--v2-gap-lg) 0 var(--v2-gap);
}

.funnel-v2 .v2-overview-days li {
    border-left: 2px solid var(--v2-border-strong);
    padding-left: var(--v2-gap);
    margin-bottom: var(--v2-gap);
}

.funnel-v2 .v2-overview-days h3 {
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 var(--v2-gap-xs);
    color: var(--v2-text);
}

.funnel-v2 .v2-overview-days p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--v2-text-muted);
    margin: 0;
}

.funnel-v2 .v2-overview-price-note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--v2-text-muted);
}

.funnel-v2 .v2-overview .v2-price-row { margin-top: 10px; line-height: 1.5; }
.funnel-v2 .v2-overview .v2-price-row strong,
.funnel-v2 .v2-overview .amount { white-space: nowrap; }
.funnel-v2 .v2-overview-cta { margin-top: var(--v2-gap); box-sizing: border-box; }
.funnel-v2 #testing { scroll-margin-top: 24px; }

.funnel-v2 .v2-coupon summary { cursor: pointer; font-weight: 700; }
.funnel-v2 .v2-coupon-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.funnel-v2 .v2-coupon-entry .v2-btn { width: auto; box-sizing: border-box; }
.funnel-v2 #v2-coupon-help { margin-top: 8px; }
.funnel-v2 #coupon-section { scroll-margin-top: 24px; }

.funnel-v2 .v2-price-row {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    font-size: 13px;
    line-height: 2;
    color: var(--v2-text-muted);
}

.funnel-v2 .v2-price-total {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    margin-top: var(--v2-gap-sm);
    padding-top: var(--v2-gap-sm);
    border-top: 1px solid var(--v2-border);
    font-family: var(--v2-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v2-text);
}

.funnel-v2 .v2-price-total .amount { color: var(--v2-accent); font-size: 18px; }

.funnel-v2 .v2-price-later {
    margin-top: var(--v2-gap);
    padding-top: var(--v2-gap-sm);
    border-top: 1px dashed var(--v2-border-strong);
}

.funnel-v2 .v2-price-later-note {
    margin: var(--v2-gap-xs) 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-text-muted);
}

.funnel-v2 .v2-price-sum {
    margin-top: var(--v2-gap-sm);
    padding-top: var(--v2-gap-sm);
    border-top: 1px solid var(--v2-border);
    color: var(--v2-text);
    font-weight: 700;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.funnel-v2 .v2-alert {
    border: 1px solid var(--v2-danger);
    border-radius: var(--v2-radius);
    background: rgba(255, 77, 77, 0.08);
    color: var(--v2-text);
    padding: var(--v2-gap);
    margin-bottom: var(--v2-gap);
    font-size: 13px;
    line-height: 1.5;
}

.funnel-v2 .v2-alert ul { margin: var(--v2-gap-xs) 0 0; padding-left: 18px; }

.funnel-v2 .v2-note {
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-radius);
    background: var(--v2-surface-raised);
    padding: var(--v2-gap);
    margin-bottom: var(--v2-gap);
    font-size: 13px;
    line-height: 1.5;
    color: var(--v2-text-muted);
}

.funnel-v2 .success-icon {
    font-size: 3rem;
    line-height: 1;
    color: var(--v2-success);
    margin-bottom: var(--v2-gap);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.funnel-v2 .v2-center { text-align: center; }
.funnel-v2 .v2-mt { margin-top: var(--v2-gap); }
.funnel-v2 .v2-mt-lg { margin-top: var(--v2-gap-lg); }

.funnel-v2 .v2-lock {
    display: inline-block;
    margin-right: 6px;
}

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

/* ==========================================================================
   Consent banner, rebranded for the dark funnel
   ==========================================================================
   templates/analytics.php ships its own <style> with an amber (#ffc107) banner. Overriding
   it here rather than editing that file keeps the PostHog init block byte-identical, which
   tests/test_checkout_cookie_isolation.php greps for the literal persistence and
   cross_subdomain_cookie settings. Also drops its box-shadow: zero shadows is a brand rule. */

.funnel-v2 .tpf-consent {
    background: var(--v2-surface);
    color: var(--v2-text);
    border-top: 1px solid var(--v2-border-strong);
    box-shadow: none;
}

.funnel-v2 .tpf-consent__text a { color: var(--v2-accent); }

.funnel-v2 .tpf-consent__btn {
    border-radius: var(--v2-radius);
    min-height: var(--v2-tap);
    font-family: var(--v2-font-display);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.funnel-v2 .tpf-consent__btn--accept {
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
}

.funnel-v2 .tpf-consent__btn--decline {
    background: transparent;
    color: var(--v2-text);
    border: 1px solid var(--v2-border-strong);
}