/* ==========================================================================
   Join flow — the v1.3.0 prototype's full-screen flow shell, on the real form.

   Ported from ref/sbi-frontend-v1.3.0.html: the `.flow` grid (dark rail +
   working column), the `.mk` "Which membership" cards, and the field, tier
   and summary components the steps are built from.

   Two things to know before editing.

   1. The palette is the prototype's, not the site's. The site runs on the
      --sb-* tokens in style.css (forest green, orange); the prototype runs on
      jacket green, paper and gold. Both are declared, so every token here is
      redeclared on `.sbi-flow` rather than on :root — a flow page can load the
      site's stylesheets without either palette overwriting the other.

   2. The markup underneath is the existing wizard's. The fields, the tier
      cards, the Stripe mounts and the success panel keep the class names
      member-registration.js and plan-carousel.js address them by, so the
      rules below re-skin `.sb-*` rather than replacing it. Renaming a hook
      here breaks the script, not just the look.
   ========================================================================== */

.sbi-flow {
    /* cloth */
    --jacket: #2c4349;
    --baize: #1a3a3d;
    --baize-2: #274c4f;
    --baize-3: #39676a;
    --deep: #0c1e20;
    --felt-line: rgba(244, 240, 230, .12);

    /* paper */
    --paper: #fbfaf6;
    --ivory: #f4f0e6;
    --line: #e2dccd;
    --line-soft: #eee9dd;

    /* ink */
    --ink: #121412;
    --ink-2: #2c302c;
    --ink-soft: #545a54;
    --ink-mute: #7c827b;
    --on-dark: #f4f0e6;
    --on-dark-soft: rgba(244, 240, 230, .72);
    --on-dark-mute: rgba(244, 240, 230, .5);

    /* accents + states */
    --gold: #b8860b;
    --gold-2: #d6a93a;
    --gold-soft: #f3e6c4;
    --ok: #1b7a45;
    --err: #b42318;

    /* type */
    --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* shape + motion */
    --r: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --pill: 999px;
    --shadow-1: 0 1px 2px rgba(18, 20, 18, .05), 0 4px 16px rgba(18, 20, 18, .05);
    --ease: cubic-bezier(.22, .8, .24, 1);
    --ease-card: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

body.sbi-mode-full {
    margin: 0;
    background: #fbfaf6;
    /* The flow owns the viewport; .fl-body is the only thing that scrolls. */
    overflow: hidden;
}

.sbi-flow,
.sbi-flow * { box-sizing: border-box; }

.sbi-flow {
    font-family: var(--f-body);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;

    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/*
 | The scope is written `:where(.sbi-flow)`, and that is load-bearing.
 |
 | These are the prototype's base element rules, and every component rule
 | below them — `.fl-h3`, `.pb-note`, `.sb-plan-card` — was written to sit on
 | top of a bare `h3`, `p` or `button` selector. Scoping them the obvious way,
 | as `.sbi-flow h3`, quietly raises them to (0,1,1) and they start *beating*
 | the single-class rules that are supposed to override them: the section
 | headings came out at 32px instead of 22px and lost their top margin, and the
 | tier cards would have lost their border and padding to `button { border: 0 }`.
 |
 | `:where()` contributes nothing to specificity, so these stay at (0,0,1) —
 | exactly what the prototype's own cascade assumes — while still applying only
 | inside the flow.
 */
:where(.sbi-flow) h1,
:where(.sbi-flow) h2,
:where(.sbi-flow) h3,
:where(.sbi-flow) h4 {
    font-family: var(--f-display);
    font-weight: 400;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.04;
    text-wrap: balance;
    font-variation-settings: "opsz" 144, "SOFT" 30;
}

:where(.sbi-flow) h1 { font-size: clamp(40px, 6vw, 88px); letter-spacing: -.035em; }
:where(.sbi-flow) h2 { font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -.03em; }
:where(.sbi-flow) h3 { font-size: clamp(24px, 2.2vw, 32px); }
:where(.sbi-flow) h4 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; }
/* Including on the rail, where the prototype leaves it at --baize-3 rather
   than going gold — only a club-branded flow recolours it. */
:where(.sbi-flow) h1 em,
:where(.sbi-flow) h2 em,
:where(.sbi-flow) h3 em { font-style: italic; font-weight: 300; color: var(--baize-3); }
:where(.sbi-flow) p { margin: 0; text-wrap: pretty; }
:where(.sbi-flow) a { color: inherit; text-decoration: none; }
:where(.sbi-flow) button { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
/*
 | Focus ring.
 |
 | accessibility-base.css pins a 3px #ff9811 ring on every focusable element
 | with !important, to guarantee WCAG 2.4.7 against the older stylesheets that
 | scatter `outline: none`. That guarantee is not up for negotiation, so this
 | does not relax it — same 3px, same offset, same !important. Only the hue
 | changes, to the flow's own gold, because the site's orange belongs to a
 | palette this screen does not use. Gold on paper clears 3:1, so the
 | indicator is still the one the rule was written to secure.
 */
.sbi-flow a:focus-visible,
.sbi-flow button:focus-visible,
.sbi-flow input:focus-visible,
.sbi-flow select:focus-visible,
.sbi-flow textarea:focus-visible,
.sbi-flow summary:focus-visible,
.sbi-flow [tabindex]:focus-visible,
.sbi-flow [role="button"]:focus-visible,
.sbi-flow [contenteditable="true"]:focus-visible {
    outline: 3px solid var(--gold) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
.sbi-flow [hidden] { display: none !important; }

.sbi-flow .lead { font-size: clamp(19px, 1.4vw, 22px); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.sbi-flow .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.sbi-flow .eyebrow {
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px;
}
.sbi-flow .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.sbi-flow .eyebrow.plain::before { display: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.sbi-flow .btn {
    --bg: var(--ink); --fg: var(--paper);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; padding: 0 24px; border-radius: var(--pill);
    background: var(--bg); color: var(--fg); font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
    transition: transform .25s var(--ease), background .2s, box-shadow .25s, color .2s;
    white-space: nowrap; border: 1px solid transparent; position: relative;
}
.sbi-flow .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12, 30, 32, .18); }
.sbi-flow .btn:active { transform: translateY(0); }
.sbi-flow .btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.sbi-flow .btn:hover svg.arrow { transform: translateX(3px); }
.sbi-flow .btn-baize { --bg: var(--baize); --fg: var(--on-dark); }
.sbi-flow .btn-baize:hover { --bg: var(--baize-2); }
.sbi-flow .btn-gold { --bg: var(--gold-2); --fg: var(--deep); }
.sbi-flow .btn-gold:hover { --bg: #e2b64a; }
.sbi-flow .btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.sbi-flow .btn-ghost:hover { border-color: var(--ink); box-shadow: none; }
.sbi-flow .btn-lg { height: 56px; padding: 0 30px; font-size: 15.5px; }
.sbi-flow .btn[disabled], .sbi-flow .btn.is-disabled { opacity: .45; pointer-events: none; }
/* The prototype's "not ready yet" state: the step's own validation still runs
   on the click, so this dims the button without blocking it. */
.sbi-flow .btn.is-soft { opacity: .55; }

.sbi-flow .icon-btn {
    width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink);
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.sbi-flow .icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sbi-flow .icon-btn svg { width: 18px; height: 18px; }

.sbi-flow .lnk { color: var(--baize); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sbi-flow .lnk-btn { font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.sbi-flow .lnk-btn:hover { color: var(--ink); }

.sbi-flow .badge {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
    border-radius: var(--pill); font-size: 11.5px; font-weight: 600;
    background: var(--ivory); color: var(--ink-2); white-space: nowrap;
}
.sbi-flow .badge.gold { background: var(--gold-soft); color: #7a5a06; }

/* --------------------------------------------------------------------------
   Rail
   -------------------------------------------------------------------------- */

.fl-rail {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--deep); color: var(--on-dark);
    padding: 28px 30px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
}
.fl-rail-bg { position: absolute; inset: 0; z-index: -1; opacity: .45; }
.fl-rail-bg img, .fl-rail-bg svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-rail::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(12, 30, 32, .86), rgba(12, 30, 32, .97) 55%);
}

.fl-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; color: var(--on-dark); }
.fl-brand .brand-mark { width: 42px; height: 42px; flex-shrink: 0; }
.fl-brand .brand-txt { display: grid; line-height: 1; }
.fl-brand .brand-txt b { font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.fl-brand .brand-txt span {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase;
    color: var(--on-dark-mute); margin-top: 5px;
}

.fl-head { display: grid; gap: 12px; }
.fl-head h2 { font-size: 34px; }
.fl-head .eyebrow { color: var(--gold-2); }

.fl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
.fl-steps li {
    display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 12px;
    color: var(--on-dark-mute); font-size: 14.5px; position: relative;
}
.fl-steps li + li::before { content: ""; position: absolute; left: 25px; top: -8px; height: 12px; width: 1px; background: var(--felt-line); }
.fl-steps li[data-fl-to] { cursor: pointer; }
.fl-steps li[data-fl-to]:hover { background: rgba(244, 240, 230, .06); }

/* The circle keeps member-registration.js's own hooks — .sb-step-circle is
   what syncStepper() writes the number or the tick into. */
.fl-steps .sb-step-circle {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--felt-line);
    display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px;
    flex-shrink: 0; transition: all .3s var(--ease);
}
.fl-steps .sb-step-circle svg { width: 14px; height: 14px; }
.fl-steps li.sb-active { color: var(--on-dark); background: rgba(244, 240, 230, .07); }
.fl-steps li.sb-active .sb-step-circle {
    background: var(--gold-2); border-color: var(--gold-2); color: var(--deep);
    box-shadow: 0 0 0 5px rgba(214, 169, 58, .18);
}
.fl-steps li.sb-completed { color: var(--on-dark-soft); }
.fl-steps li.sb-completed .sb-step-circle { background: var(--baize-3); border-color: var(--baize-3); color: #fff; }

.fl-sum {
    margin-top: auto; padding: 20px; border-radius: var(--r-lg);
    background: rgba(244, 240, 230, .06); border: 1px solid var(--felt-line); display: grid; gap: 14px;
}
.fl-sum .eyebrow { color: var(--gold-2); font-size: 10.5px; }
.fs-rows { display: grid; gap: 8px; }
.fs-rows > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.fs-rows span { color: var(--on-dark-mute); white-space: nowrap; }
.fs-rows b { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--felt-line); }
.fs-total span { font-size: 13px; color: var(--on-dark-soft); }
.fs-total b { font-size: 24px; color: var(--gold-2); font-weight: 500; }
.fs-total[hidden] { display: none; }

.fl-help { font-size: 12.5px; color: var(--on-dark-mute); display: flex; gap: 8px; align-items: center; }
.fl-help svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Working column
   -------------------------------------------------------------------------- */

.fl-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: var(--paper); }

.fl-top { display: flex; align-items: center; gap: 20px; padding: 18px clamp(20px, 4vw, 48px); border-bottom: 1px solid var(--line-soft); }
.fl-prog { flex: 1; display: grid; gap: 8px; }
.fl-prog .mono { font-size: 11.5px; color: var(--ink-mute); letter-spacing: .04em; }
.fl-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fl-bar i { display: block; height: 100%; background: var(--baize); border-radius: 2px; transition: width .6s var(--ease); }

.fl-body { overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.fl-inner { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px) 48px; }

/* Each panel fades in as it becomes the visible one. The wizard toggles
   .sb-visible, so the animation hangs off that rather than a redraw. */
.sbi-flow .sb-step-panel { display: none; }
.sbi-flow .sb-step-panel.sb-visible { display: block; animation: flIn .5s var(--ease) both; }
@keyframes flIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .sbi-flow .sb-step-panel.sb-visible { animation: none; }
}

.fl-title { display: grid; gap: 12px; margin-bottom: 32px; }
.fl-title h1 { font-size: clamp(36px, 4.4vw, 60px); }
.fl-title .lead { font-size: 17px; }
.fl-title .eyebrow { color: var(--gold); }

.fl-foot {
    display: flex; align-items: center; gap: 16px;
    padding: 16px clamp(20px, 4vw, 48px) calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line); background: rgba(251, 250, 246, .96); backdrop-filter: blur(10px);
}
.fl-foot[hidden] { display: none; }
.fl-foot-sum { flex: 1; display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; font-size: 13.5px; color: var(--ink-mute); min-width: 0; }
.fl-foot-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-foot-sum b { font-size: 22px; color: var(--ink); font-weight: 500; }
.fl-foot .btn-lg { min-width: 200px; }

.fl-h3 { font-size: 22px; margin: 36px 0 16px; font-family: var(--f-display); font-weight: 400; }
.fl-card { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); }

/* The old in-panel Back / Continue pairs. The footer drives the flow now, but
   the buttons stay in the markup as the no-JS fallback. */
.sbi-flow .sb-footer-actions { display: none; }

/* --------------------------------------------------------------------------
   Step 1 · Which membership
   -------------------------------------------------------------------------- */

.mk { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-c {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px;
    border-radius: 20px; border: 1.5px solid var(--line); background: var(--paper);
    text-align: left; color: inherit; text-decoration: none; cursor: pointer;
    transition: transform .5s var(--ease-card), box-shadow .5s, border-color .3s;
}
/* The card forwards its clicks to the control inside it, so the whole card
   should lift on hover and focus, not just the button. */
.mk-c:focus-within { border-color: var(--gold-2); }
.mk-c:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(12, 30, 32, .12); border-color: var(--gold-2); }
.mk-c.on-club { background: var(--deep); color: var(--on-dark); border-color: var(--deep); }
.mk-tag {
    align-self: flex-start; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 99px;
    background: rgba(214, 169, 58, .18); color: var(--gold-2);
}
.mk-tag.ext { background: var(--ivory); color: var(--ink-soft); }
.mk-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ivory); color: var(--baize); }
.on-club .mk-ico { background: rgba(244, 240, 230, .1); color: var(--gold-2); }
.mk-ico svg { width: 22px; height: 22px; }
.mk-c b { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.mk-d { font-size: 14px; color: var(--ink-soft); }
.on-club .mk-d { color: var(--on-dark-soft); }
.mk-c ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13.5px; }
.mk-c li { display: flex; gap: 8px; }
.mk-c li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); margin-top: 8px; flex-shrink: 0; }
.mk-c .btn { margin-top: auto; align-self: flex-start; }
.mk-c.on-club .btn-ghost { --fg: var(--on-dark); border-color: rgba(244, 240, 230, .28); }

.pb-note { font-size: 13px; color: var(--ink-mute); line-height: 1.55; margin-top: 4px; }

.sbi-flow .note {
    padding: 16px 18px; border-radius: var(--r); background: var(--ivory);
    font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 12px; align-items: flex-start;
}
.sbi-flow .note svg { width: 18px; height: 18px; color: var(--baize); flex-shrink: 0; margin-top: 1px; }
.sbi-flow .note.gold { background: var(--gold-soft); }
.sbi-flow .note.gold svg { color: #8a6408; }

/* --------------------------------------------------------------------------
   Fields — the wizard's own markup, in the prototype's clothes
   -------------------------------------------------------------------------- */

.sbi-flow .sb-form-grid { display: grid; gap: 20px; }
.sbi-flow .sb-form-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sbi-flow .sb-form-group { display: grid; gap: 8px; align-content: start; min-width: 0; }

.sbi-flow .sb-label {
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    display: flex; justify-content: space-between; gap: 10px; margin: 0;
}

.sbi-flow .sb-input,
.sbi-flow .sb-select,
.sbi-flow .sb-textarea {
    width: 100%; height: 52px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--paper); padding: 0 16px; font-size: 15px; font-family: inherit; color: var(--ink);
    transition: border-color .2s, box-shadow .2s; outline: none; appearance: none; -webkit-appearance: none;
}
.sbi-flow .sb-textarea { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.sbi-flow .sb-input:hover,
.sbi-flow .sb-select:hover,
.sbi-flow .sb-textarea:hover { border-color: #cfc8b6; }
.sbi-flow .sb-input:focus,
.sbi-flow .sb-select:focus,
.sbi-flow .sb-textarea:focus { border-color: var(--baize); box-shadow: 0 0 0 4px rgba(26, 58, 61, .1); }
.sbi-flow .sb-input::placeholder,
.sbi-flow .sb-textarea::placeholder { color: #a3a79f; }

/* The chevron the native select drops when appearance is cleared. Measured
   from the top of the wrapper rather than centred in it: showValidationErrors()
   puts its message inside the wrapper, and a centred chevron would slide down
   to the middle of select-plus-message the moment a field is wrong. */
.sbi-flow .sb-select-wrapper { position: relative; }
.sbi-flow .sb-select-wrapper::after {
    content: ""; position: absolute; right: 18px; top: 20px; width: 9px; height: 9px;
    border-right: 1.8px solid var(--ink-mute); border-bottom: 1.8px solid var(--ink-mute);
    transform: rotate(45deg); pointer-events: none;
}
/* Same reason: a message injected into the wrapper needs its own breathing room. */
.sbi-flow .sb-select-wrapper .invalid-feedback { margin-top: 8px; }
.sbi-flow .sb-select { padding-right: 42px; }

/* Errors. AjaxRequest.showValidationErrors() injects .invalid-feedback.d-block
   after the input, and clearValidationErrors() removes the node outright — so
   this has to read the same whether the div was printed by Blade or by jQuery. */
.sbi-flow .invalid-feedback { font-size: 12.5px; color: var(--err); display: none; }
.sbi-flow .invalid-feedback.d-block,
.sbi-flow .invalid-feedback:not(:empty) { display: block; }
/*
 | Only a control wears the "this is wrong" box, never anything else carrying
 | the class.
 |
 | This was a bare `.is-invalid`, which also matched the `.sb-field-status`
 | line that reports the verdict — so the message itself picked up the 4px red
 | halo and rendered as a pink box under the field, while the email's message
 | (marked `is-taken`) did not. Scoped to the elements that can actually be
 | filled in wrongly.
 */
.sbi-flow .sb-input.is-invalid,
.sbi-flow .sb-select.is-invalid,
.sbi-flow .sb-textarea.is-invalid,
.sbi-flow input.is-invalid,
.sbi-flow select.is-invalid,
.sbi-flow textarea.is-invalid { border-color: var(--err); box-shadow: 0 0 0 4px rgba(180, 35, 24, .08); }
.sbi-flow .sb-field-hint { font-size: 12.5px; color: var(--ink-mute); }

/* Typed-as-you-go verdict on the email and phone. Never colour alone: each
   state carries its own glyph, so it still reads without colour vision. */
.sbi-flow .sb-field-status { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.sbi-flow .sb-field-status::before { font-weight: 700; line-height: 1.45; }
.sbi-flow .sb-field-status.is-checking { color: var(--ink-mute); }
.sbi-flow .sb-field-status.is-checking::before { content: "…"; }
.sbi-flow .sb-field-status.is-free { color: var(--ok); }
.sbi-flow .sb-field-status.is-free::before { content: "✓"; }
.sbi-flow .sb-field-status.is-notice { color: #7a5a06; }
.sbi-flow .sb-field-status.is-notice::before { content: "!"; }
.sbi-flow .sb-field-status.is-taken,
.sbi-flow .sb-field-status.is-invalid { color: var(--err); }
.sbi-flow .sb-field-status.is-taken::before,
.sbi-flow .sb-field-status.is-invalid::before { content: "✕"; }
/* A field whose address is already registered is wrong now, not at step 6.
   Scoped to the control for the same reason as .is-invalid above. */
.sbi-flow input.is-taken,
.sbi-flow .sb-input.is-taken { border-color: var(--err); box-shadow: 0 0 0 4px rgba(180, 35, 24, .08); }

/* Checkboxes — consent, newsletter, media, guardian. */
.sbi-flow .sb-checkbox-label,
.sbi-flow .sb-checkbox {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start;
    font-size: 14px; color: var(--ink-soft); cursor: pointer; margin: 0;
}
.sbi-flow .sb-checkbox-input,
.sbi-flow .sb-checkbox input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0;
    border: 1.5px solid var(--line); border-radius: 7px; background: var(--paper);
    display: grid; place-items: center; cursor: pointer; transition: all .2s var(--ease);
}
.sbi-flow .sb-checkbox-input:checked,
.sbi-flow .sb-checkbox input[type="checkbox"]:checked { background: var(--baize); border-color: var(--baize); }
.sbi-flow .sb-checkbox-input:checked::after,
.sbi-flow .sb-checkbox input[type="checkbox"]:checked::after {
    content: ""; width: 11px; height: 6px; margin-top: -3px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.sbi-flow .sb-checkbox-label a { color: var(--baize); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sbi-flow .sb-consent-list { display: grid; gap: 14px; margin-top: 22px; }

/* Guardian block — the prototype's "Parent or guardian" card. */
.sbi-flow .sb-guardian { margin-top: 22px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); }
.sbi-flow .sb-guardian-note { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r); background: var(--gold-soft); margin-bottom: 18px; }
.sbi-flow .sb-guardian-note strong { font-size: 14px; color: #7a5a06; }
.sbi-flow .sb-guardian-note span { font-size: 13px; color: var(--ink-soft); }

/* The country-flag phone picker sits in the grid like a plain input. */
.sbi-flow .sb-form-group .iti { width: 100%; }
.sbi-flow .sb-form-group .iti__tel-input { transition: border-color .2s ease, box-shadow .2s ease; }
.sbi-flow .iti__country-list, .sbi-flow .iti__dropdown-content { text-align: left; font-size: 14px; }
.sbi-flow #addressEircode { text-transform: uppercase; }
.sbi-flow #addressEircode::placeholder { text-transform: none; }

/* Searchable club picker. */
.sbi-flow .sb-combo { position: relative; }
.sbi-flow .sb-combo-input { padding-right: 44px; }
.sbi-flow .sb-combo-toggle {
    position: absolute; top: 0; right: 0; height: 52px; width: 42px;
    display: flex; align-items: center; justify-content: center; color: var(--ink-mute);
}
.sbi-flow .sb-combo-list {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: 0 18px 40px rgba(12, 30, 32, .14);
}
.sbi-flow .sb-combo-option { padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.sbi-flow .sb-combo-option:hover, .sbi-flow .sb-combo-option.is-active { background: var(--ivory); color: var(--baize); }
.sbi-flow .sb-combo-option[hidden] { display: none; }
.sbi-flow .sb-combo-empty { padding: 12px; font-size: 13px; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   Step · Membership — billing switch and tier cards
   -------------------------------------------------------------------------- */

.sbi-flow .sb-billing-toggle { display: inline-flex; border-radius: var(--pill); background: var(--ivory); padding: 4px; gap: 2px; }
.sbi-flow .sb-billing-btn { height: 36px; padding: 0 18px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sbi-flow .sb-billing-btn.active { background: var(--ink); color: var(--paper); }

.sbi-flow .sb-open-note { padding: 16px 18px; border-radius: var(--r); background: var(--gold-soft); font-size: 13.5px; color: var(--ink-soft); }

/* The tier carousel's track becomes a plain responsive grid: with the wizard
   in a 860px column there is room for two cards, and a third would only
   reintroduce the squeeze the carousel was added to solve. */
.sbi-flow .sb-plan-carousel { margin-top: 20px; overflow: visible; }
.sbi-flow .sb-plan-track {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
    transform: none !important; width: auto !important;
}
.sbi-flow .sb-plan-card {
    position: relative; display: grid; gap: 10px; align-content: start; padding: 22px;
    border-radius: var(--r-xl); border: 1.5px solid var(--line); background: var(--paper);
    text-align: left; width: auto !important; flex: none !important;
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background-color .25s;
}
.sbi-flow .sb-plan-card:hover { border-color: #c9c2b0; transform: translateY(-2px); }
.sbi-flow .sb-plan-card.active { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 4px rgba(26, 58, 61, .08); }
.sbi-flow .sb-plan-badge { display: none; }
.sbi-flow .sb-plan-check {
    position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; background: var(--baize); opacity: 0; transform: scale(.7);
    transition: all .25s var(--ease);
}
.sbi-flow .sb-plan-card.active .sb-plan-check { opacity: 1; transform: none; }
.sbi-flow .sb-plan-check svg { width: 14px; height: 14px; }
.sbi-flow .sb-plan-kicker { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.sbi-flow .sb-plan-head { display: grid; gap: 6px; padding-right: 30px; }
.sbi-flow .sb-plan-head h3 { font-family: var(--f-display); font-size: 26px; font-weight: 400; line-height: 1.1; }
.sbi-flow .sb-plan-desc {
    font-size: 13.5px; color: var(--ink-mute);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sbi-flow .sb-plan-price { display: flex; align-items: baseline; gap: 4px; font-size: 32px; font-weight: 500; font-family: var(--f-mono); }
.sbi-flow .sb-plan-price > span:not(.price-value) { font-size: 12.5px; color: var(--ink-mute); font-family: var(--f-body); font-weight: 400; }
.sbi-flow .sb-plan-price-free { font-family: var(--f-display); }
.sbi-flow .sb-plan-price-alt { font-size: 12.5px; color: var(--ink-mute); }
.sbi-flow .sb-plan-benefits { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.sbi-flow .sb-plan-benefits li { display: flex; gap: 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.sbi-flow .sb-plan-benefits li::before {
    content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    background: var(--baize) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* "Benefits to be confirmed" is not a benefit, so it does not get a tick. */
.sbi-flow .sb-plan-benefits .sb-plan-benefit-none { color: var(--ink-mute); font-style: italic; }
.sbi-flow .sb-plan-benefits .sb-plan-benefit-none::before { display: none; }
.sbi-flow .sb-plan-choose {
    margin-top: 6px; height: 42px; border-radius: var(--pill); border: 1px solid var(--line);
    font-size: 13.5px; font-weight: 600; color: var(--ink); transition: all .2s var(--ease);
}
.sbi-flow .sb-plan-card.active .sb-plan-choose { background: var(--baize); border-color: var(--baize); color: var(--on-dark); }
.sbi-flow .sb-plan-choose-picked { display: none; }
.sbi-flow .sb-plan-card.active .sb-plan-choose-pick { display: none; }
.sbi-flow .sb-plan-card.active .sb-plan-choose-picked { display: inline; }
/* The carousel's own arrows and dots have nothing left to page through. */
.sbi-flow .sb-plan-arrow, .sbi-flow .sb-plan-dots { display: none; }

/* --------------------------------------------------------------------------
   Step · Consent & submit
   -------------------------------------------------------------------------- */

/* Your order. */
.price-box { margin-top: 20px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); background: var(--ivory); display: grid; gap: 4px; }
.price-box.big { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.pb-head .eyebrow { color: var(--gold); }
.pr-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.pr-row span { color: var(--ink-soft); }
.pr-row b { font-weight: 500; white-space: nowrap; }
.pr-row.total { border-bottom: 0; padding-top: 16px; align-items: baseline; }
.pr-row.total span { color: var(--ink); font-weight: 600; font-size: 16px; }
.pr-row.total b { font-size: 30px; color: var(--baize); }

/* The picker's clothes — .pay, .pay-opt, .po-mark, .pay-note, .bank-box and
   the Stripe Elements boxes — went with the picker itself. The wizard takes no
   payment: it files an application, and the fee is collected afterwards on the
   link emailed at approval. Nothing on this page wears them any more. */
/* The line under the consents. It used to carry the Stripe promise and now
   carries the opposite — that no card is being asked for — so it keeps the
   class name the markup already uses and gains a rule for the shield beside
   it. Every icon in this file is sized explicitly; an unsized inline SVG has
   no intrinsic height and lays itself out at the browser's 300×150 default. */
.sbi-flow .sb-stripe-badge { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.sbi-flow .sb-stripe-badge svg { width: 15px; height: 15px; color: var(--baize); flex-shrink: 0; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Final step · the welcome card
   -------------------------------------------------------------------------- */

/* The prototype's done-card: two columns, the card itself on the right. */
.sbi-flow .sb-success-card { display: grid; gap: 24px; justify-items: stretch; text-align: left; padding-block: 12px 24px; }
.sbi-flow .sb-success-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.sbi-flow .sb-success-main { display: grid; gap: 20px; min-width: 0; }
.sbi-flow .sb-success-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.sbi-flow .sb-success-title em { font-style: italic; font-weight: 300; color: var(--baize-3); }
.sbi-flow .sb-success-desc { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.sbi-flow .sb-success-body { display: grid; gap: 20px; width: 100%; }

/* The membership card. */
.welcome-card { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.welcome-card .pb-note { text-align: center; }
.mcard {
    position: relative; aspect-ratio: 1.586; border-radius: 22px; overflow: hidden;
    color: var(--on-dark); padding: 22px 24px; display: grid; grid-template-rows: auto 1fr auto;
    box-shadow: 0 30px 80px rgba(12, 30, 32, .28), inset 0 0 0 1px rgba(214, 169, 58, .35);
    isolation: isolate; max-width: 440px; width: 100%;
    transform: rotate(-3deg); animation: cardIn 1s var(--ease) both .2s;
}
@media (prefers-reduced-motion: reduce) { .mcard { animation: none; } }
@keyframes cardIn { from { opacity: 0; transform: rotate(-9deg) translateY(24px) scale(.94); } to { opacity: 1; transform: rotate(-3deg); } }
.mc-bg { position: absolute; inset: 0; z-index: -1; }
.mc-bg img, .mc-bg svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(125deg, rgba(255, 255, 255, .14), transparent 40%),
                linear-gradient(0deg, rgba(12, 30, 32, .7), rgba(12, 30, 32, .15));
}
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-top .brand-mark { width: 36px; height: 36px; }
.mc-top .mono { font-size: 11px; letter-spacing: .14em; color: var(--gold-2); }
.mc-name { align-self: center; display: grid; gap: 2px; min-width: 0; }
.mc-name .eyebrow { color: var(--on-dark-mute); font-size: 9.5px; }
.mc-name b { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; }
.mc-name span:last-child { font-size: 12px; color: var(--on-dark-soft); }
.mc-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mc-bot > div { display: grid; gap: 2px; min-width: 0; }
.mc-bot .eyebrow { font-size: 9px; color: var(--on-dark-mute); }
.mc-bot b { font-size: 15px; letter-spacing: .04em; }
.mc-bot span:not(.eyebrow) { font-size: 11.5px; color: var(--on-dark-soft); }
.mc-qr { width: 64px; height: 64px; border-radius: 8px; flex-shrink: 0; background: var(--on-dark); padding: 3px; }
.mc-qr svg { width: 100%; height: 100%; display: block; }

/* Next steps and the buttons under them. */
.sbi-flow .done-act { display: flex; gap: 12px; flex-wrap: wrap; }
.sbi-flow .sb-review-wrapper { padding: 20px 22px; border-radius: var(--r-lg); background: var(--ivory); }
.sbi-flow .sb-review-header { font-family: var(--f-display); font-size: 20px; font-weight: 400; margin: 0 0 14px; }
.sbi-flow .sb-review-wrapper[hidden] { display: none; }
.sbi-flow .sb-review-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 14px; }
.sbi-flow .sb-review-label { color: var(--ink-mute); }
.sbi-flow .sb-review-value { text-align: right; font-weight: 600; }
/* Numbered pills, as the prototype draws them — the number comes from a CSS
   counter so a step added or dropped in the markup can never be misnumbered. */
.sbi-flow .sb-next-steps { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; gap: 10px; }
.sbi-flow .sb-next-steps li {
    counter-increment: n; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px;
    padding: 16px 18px; border-radius: var(--r-lg); background: var(--ivory);
}
.sbi-flow .sb-next-steps li::before {
    content: counter(n); grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 50%;
    background: var(--baize); color: var(--on-dark); display: grid; place-items: center;
    font-family: var(--f-mono); font-size: 13px;
}
.sbi-flow .sb-next-steps b { font-weight: 600; }
.sbi-flow .sb-next-steps span { font-size: 13.5px; color: var(--ink-soft); }
.sbi-flow .sb-success-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
    .sbi-flow .sb-success-hero { grid-template-columns: 1fr; gap: 28px; }
    /* The card leads on a phone: it is the thing they came away with. */
    .sbi-flow .welcome-card { order: -1; }
    .mcard { transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
   Form closed / no tiers
   -------------------------------------------------------------------------- */

.fl-empty { display: grid; gap: 18px; justify-items: start; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Accessibility launcher

   It parks 24px off the bottom of the viewport, which on the site is empty
   space and here is the navigation bar. Lifted clear of it rather than hidden
   — the prototype hides it on a phone, but an accessibility control is the
   last thing that should go missing on the smallest screen. Only the two
   bottom placements collide; a middle-left launcher is already above the bar.
   -------------------------------------------------------------------------- */

body.sbi-mode-full .sbi-a11y-toggle:not([data-position^="middle"]) {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

/* Above 860px only. Narrower than that the widget's own stylesheet drops the
   panel to a full-width sheet pinned 8px off the bottom, and lifting that
   would push its far taller box off the top of the screen. */
@media (min-width: 861px) {
    body.sbi-mode-full .sbi-a11y-panel:not([data-position^="middle"]) {
        bottom: calc(172px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 860px) {
    body.sbi-mode-full .sbi-a11y-toggle:not([data-position^="middle"]) {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
        width: 46px; height: 46px;
    }
}

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

@media (max-width: 1100px) {
    .sbi-flow { grid-template-columns: 300px minmax(0, 1fr); }
    .fl-rail { padding: 24px; }
    .fl-head h2 { font-size: 28px; }
}

@media (max-width: 860px) {
    .sbi-flow { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .fl-rail { padding: 10px 16px; min-height: 52px; gap: 0; flex-direction: row; align-items: center; justify-content: space-between; overflow: visible; }
    .fl-rail .brand-txt, .fl-head .eyebrow, .fl-steps, .fl-sum, .fl-help { display: none; }
    .fl-head h2 { font-size: 18px; }
    .fl-brand .brand-mark { width: 34px; height: 34px; }
    .fl-main { min-height: 0; }
    .fl-top { padding: 8px 12px 8px 16px; gap: 8px; }
    .fl-prog { gap: 6px; }
    .fl-prog .mono { font-size: 10.5px; }
    .fl-x { width: 38px; height: 38px; }
    .fl-inner { padding: 18px 16px 28px; }
    .fl-title { gap: 6px; margin-bottom: 18px; }
    .fl-title .eyebrow { display: none; }
    .fl-title h1 { font-size: 30px; line-height: 1.05; }
    .fl-title .lead { font-size: 14.5px; }
    .fl-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .fl-foot-sum { display: grid; justify-items: start; gap: 0; font-size: 11.5px; line-height: 1.25; }
    .fl-foot-sum b { font-size: 18px; }
    .fl-foot-sum span { max-width: 100%; }
    .fl-foot .btn-lg { min-width: 0; height: 50px; padding: 0 20px; }
    .fl-foot [data-fl-back] { width: 46px; height: 46px; padding: 0; justify-content: center; }
    .fl-foot [data-fl-back] span { display: none; }
    .mk { grid-template-columns: 1fr; }
    .mk-c { padding: 18px; }
    .mk-c b { font-size: 22px; }
    .sbi-flow .sb-form-split-grid { grid-template-columns: 1fr; }
    .sbi-flow .sb-plan-track { grid-template-columns: 1fr; }
    .price-box { padding: 16px; }
    .pr-row.total b { font-size: 26px; }
}

@media (max-width: 380px) {
    .fl-foot .btn-lg { padding: 0 14px; font-size: 14px; }
}