/* Section 4 — Join the Club. Consumes tokens.css. Amendment 1 + rulings 2026-09-03.
   No photograph. The mark is the section's only object: coachb-logo-full-cream.svg, full colour — the
   shared artwork with the keyline set to the ground rather than to section 1's sky. See SPEC §3.
   Mobile: mark and everything below it left-aligned on the 24px page margin — one alignment for the
   whole section (option B, ruled 2026-09-03). The two legal links were removed round seven: they
   were never a footer, and the real footer now carries Privacy and Terms once, site-wide.
   Desktop: two-part row, mark left and the column right, top-aligned, on section 2's arithmetic —
   64 + 400 + 80 + 480 + 64 = 1088, so the breakpoint is section 2's and the page carries one row
   pattern. Standard section boundary: 1px #E8E8E4 top border. See SPEC §3, §4, §10. */
/* ROUND NINE. Every component selector below is scoped to .s4-host — all 52 rules, confirmed
   against the live CSSOM rather than against the source text. `.card` collided with section-3.css's
   own `.card` in the assembled page; .card__line, .card__row, .card__input, .card__btn, .card__err,
   .card__done, .prices, .price, .price__*, .get, .slot and .slot--* were audited and scoped at the
   same time. Nothing else changed: no value, no breakpoint, no state. */
.s4-host,.s4-host *,.s4-host *::before,.s4-host *::after{box-sizing:border-box}
.s4{background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;border-top:1px solid var(--line);padding:32px var(--margin) 40px;display:flex;flex-direction:column;align-items:flex-start}
.s4 a{color:var(--purple);text-decoration:none}
.s4 a:hover{color:var(--pink)}

/* 2 — the mark. 288px on phone: derived in SPEC §3, trading against the 812px budget at 375 the way
   the photograph's height used to. Left on the page margin at every width, ruled 2026-09-03:
   one alignment for the whole section.
   The rejected centred option is recorded in Section 4 - Mobile alignment options.html, which
   applies it to its own iframes; there is deliberately no live class for it here. */
.s4__mark{display:flex;flex-direction:column;align-items:flex-start}
.s4__logo{width:288px;height:auto;display:block}

.s4__col{width:100%}

/* 3 — the title and the step, left on the margin */
.s4__title{margin:22px 0 0;font-family:var(--cond);font-weight:700;font-size:35px;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.s4__step{margin:18px 0 0;font-size:var(--fs-lede);line-height:1.5;text-wrap:pretty;max-width:34em}
.s4__soon{margin:14px 0 0;font-size:var(--fs-body);line-height:1.5;color:var(--ink2)}
/* §3 comparison only, exercised by the review canvas: line 1 at body scale. */
.s4--body-scale .s4__step{font-size:var(--fs-body)}

/* 4 — the sign-up block. One bordered object. min-height is the default state's own height, so
   success does not shrink the card and no state leaves dead space inside it. The error line is NOT
   reserved: reserving it left a visible empty band under the button in the three states that have no
   error — 48px at 375, where the sentence wraps to two lines. The card grows downward on error and
   the elements below it move; nothing above the block is touched. See SPEC §7. */
.s4__slot{width:100%;max-width:390px;margin-top:22px}
.s4-host .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-16);padding:16px;min-height:var(--card-h,170px);display:flex;flex-direction:column;justify-content:flex-start}
.s4-host .card__line{margin:0;font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}
/* Stacked at every width: a 390px column has no room for a 44px field beside a 110px button. */
.s4-host .card__row{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.s4-host .card__input{width:100%;height:44px;padding:0 14px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-8);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.s4-host .card__input::placeholder{color:var(--ink3)}
.s4-host .card__input:focus{outline:none;border-color:var(--purple)}
/* Barlow at 16px, not 17: the design system puts positive tracking on the display face only at UI
   scale, 16px and below, and this label carries +0.04em. See SPEC §1, item 6. */
.s4-host .card__btn{height:44px;padding:0 20px;border:1px solid var(--purple);border-radius:var(--r-8);background:var(--purple);color:var(--card);font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
/* The error line appears in the error state only; it is not reserved. */
.s4-host .card__err{margin:10px 0 0;font-size:var(--fs-body);line-height:1.4;color:var(--ink2)}
.s4-host .card__done{margin:0;font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}
.s4-host .card__done strong{font-weight:600}

/* states */
.s4__form,.s4__done{display:none;flex-direction:column}
.s4[data-state="default"] .s4__form,.s4[data-state="submitting"] .s4__form,.s4[data-state="error"] .s4__form{display:flex}
.s4[data-state="success"] .s4__done{display:flex;justify-content:center;flex:1}
.s4:not([data-state="error"]) .card__err{display:none}
.s4[data-state="error"] .card__input{border-color:var(--ink)}
.s4[data-state="submitting"] .card__btn{opacity:.55;cursor:default}

/* 5 — post-launch block: same slot, same construction. No hover, selection or highlight. */
.s4-host .prices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.s4-host .price{background:var(--card);border:1px solid var(--line);border-radius:var(--r-16);padding:14px}
.s4-host .price__label{font-family:var(--cond);font-weight:700;font-size:15px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.s4-host .price__amt{margin:6px 0 0;font-family:var(--cond);font-weight:700;font-size:34px;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.s4-host .price__sec{margin:6px 0 0;font-size:15px;line-height:1.35;color:var(--ink2);text-wrap:pretty}
.s4-host .get{display:flex;margin-top:16px}
/* 6 — the QR, post-launch and desktop only. Not paired with the badge: the badge is the action, in
   the column with the price; the QR is the way to move that action to a phone, so it sits in the
   left column under the mark, on the mark's own left edge. Mobile gets none — a reader cannot scan
   their own screen. Size and position derived in SPEC §5. */
.s4__qr{display:none}
.s4-host .slot{border:1px solid var(--line2);border-radius:var(--r-8);background:var(--card);display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;color:var(--ink3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.3;flex:none}
.s4-host .slot--badge{width:120px;height:40px}
.s4-host .slot--qr{width:112px;height:112px}
.s4__qr p{margin:10px 0 0;font-size:15px;line-height:1.4;color:var(--ink2);max-width:160px;text-wrap:pretty}
/* 160px measure: at 15px SF Pro that is about 21 characters, so the 41-character caption sets to two
   even lines under a 112px symbol. The 10px margin is the card's existing small step, not a new
   value. See SPEC §1. */

@media(min-width:1088px){
/* The row: 64 + 400 + 80 + 480 + 64 = 1088. Same order and gap as section 2 — object left, copy
   right. Top-aligned rather than centred: centring floated the two columns independently and landed
   the post-launch QR's top edge within 4px of the badge's, which is the pairing the QR ruling
   forbids. Top-aligned, each object is anchored to its own column and the two sit 77px apart. */
.s4{flex-direction:row;align-items:flex-start;justify-content:center;gap:80px;padding:64px;--card-h:180px}
.s4__logo{width:400px;flex:none}
.s4__mark{flex:none;gap:32px}
.s4__qr{display:block}
.s4__col{width:480px;flex:none}
.s4__title{margin-top:0;font-size:56px}
.s4__step{margin-top:20px;font-size:var(--fs-lede-d);line-height:1.55}
.s4--body-scale .s4__step{font-size:var(--fs-body-d)}
.s4__soon{margin-top:14px;font-size:var(--fs-body-d);line-height:1.55}
.s4__slot{margin-top:24px;max-width:420px}
.s4-host .card{padding:20px}
.s4-host .card__line,.s4-host .card__done,.s4-host .card__err{font-size:var(--fs-body-d);line-height:1.55}
.s4-host .card__input{font-size:var(--fs-body-d)}
}