/* ------------------------------------------------------------------
   ALTN Everett x LA Fitness Everett - Wellness Pass campaign
   Section 1 is the approved Design Spec v6 stylesheet, verbatim.
   Section 2 holds production-only additions (documented at the top of
   that section). Do not edit section 1 to change behaviour - override
   in section 2 so the design baseline stays diffable.
   ------------------------------------------------------------------ */

/* ==================== 1. DESIGN SPEC v6 (verbatim) ==================== */
:root{
--altn-blue:#0981c5;--altn-teal:#00a79d;--altn-green:#8dc63f;--altn-cyan:#00a5be;--altn-orange:#fd7736;
--altn-teal-dark:#00778f;--altn-petrol:#0a586c;--altn-navy:#005579;--altn-green-dark:#09632e;
--gray-0:#fff;--gray-50:#f5f8fa;--gray-100:#eaeff3;--gray-200:#d7dfe6;--gray-300:#b9c5ce;--gray-400:#8b9aa6;--gray-500:#61707c;--gray-600:#43525d;--gray-700:#2c3942;--gray-900:#0d1418;
--bg:#fff;--bg-subtle:var(--gray-50);--bg-muted:var(--gray-100);--surface:#fff;
--fg1:var(--gray-900);--fg2:var(--gray-600);--fg3:var(--gray-400);--fg-on-dark:#fff;--fg-on-dark-muted:rgba(255,255,255,.74);
--primary:var(--altn-blue);--primary-hover:#0a6fa8;--primary-active:#085d8c;--primary-tint:#e6f2fa;
--accent:var(--altn-orange);--accent-hover:#e9692c;--success:var(--altn-green);--link:var(--altn-blue);
--border:var(--gray-200);--border-strong:var(--gray-300);--divider-on-dark:rgba(255,255,255,.16);
--font-display:'Oswald','Trade Gothic Next LT Pro Bold Condensed','Arial Narrow',Arial,sans-serif;
--font-sans:'Archivo','Trade Gothic Next LT Pro',Arial,'Helvetica Neue',sans-serif;
--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:28px;--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(13,20,24,.06),0 1px 3px rgba(13,20,24,.08);
--shadow-md:0 4px 10px rgba(13,20,24,.08),0 2px 4px rgba(13,20,24,.06);
--shadow-lg:0 12px 28px rgba(13,20,24,.12),0 4px 10px rgba(13,20,24,.08);
--shadow-blue:0 10px 24px rgba(9,129,197,.28);
--ease-out:cubic-bezier(.22,1,.36,1);
--maxw:1160px;--err:#c0392b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg1);font-family:var(--font-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--primary-hover);text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.05;letter-spacing:.01em;margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--primary);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-pill);padding:17px 30px;min-height:56px;transition:background .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);text-align:center}
.btn:hover{text-decoration:none}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(253,119,54,.32)}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-accent:active{background:#d55d24;transform:scale(.985)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn-primary:active{background:var(--primary-active);transform:scale(.985)}
.btn-quiet{background:transparent;color:var(--fg2);border:1.5px solid var(--border-strong)}
.btn-quiet:hover{background:var(--bg-subtle);color:var(--fg1)}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.btn-block{width:100%}
.btn:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:3px}
.only-desk{display:none}
.flagged{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8a5a00;background:#fff4dd;border:1px dashed #e0b25c;border-radius:var(--radius-sm);padding:4px 8px;line-height:1.35}

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--altn-navy);border-bottom:1px solid var(--divider-on-dark)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.hdr img{height:26px;width:auto;flex:none}
.hdr .loc{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--fg-on-dark-muted);padding-left:10px;margin-left:10px;border-left:1px solid var(--divider-on-dark);white-space:nowrap}
.hdr-left{display:flex;align-items:center;min-width:0;flex:0 1 auto;overflow:hidden}
.hdr-home{display:inline-flex;align-items:center;flex:none;border-radius:var(--radius-sm)}
.hdr-home:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:4px}
.hdr .btn{padding:11px 16px;min-height:44px;font-size:12.5px;flex:none}
@media(max-width:359px){.hdr .loc{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--altn-navy);color:#fff;overflow:hidden}
.motif{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cap{position:absolute;border-radius:var(--radius-pill)}
.hero-in{position:relative;z-index:2;padding:34px 26px 40px}
.partner-tag{display:inline-flex;align-items:center;gap:9px;background:rgba(141,198,63,.14);border:1px solid rgba(141,198,63,.45);border-radius:var(--radius-pill);padding:8px 15px;margin:0 0 22px}
.partner-tag span{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:#e6f6d4;line-height:1.3}
.partner-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--altn-green);flex:none}
.hero h1{font-size:clamp(38px,10.5vw,52px);letter-spacing:.005em}
.hero h1 .l2{display:block;color:var(--altn-green)}
.hero-sub{font-size:17px;line-height:1.55;color:var(--fg-on-dark-muted);margin:18px 0 0;max-width:540px}
.hero-sub b{color:#fff;font-weight:600}
.hero-cta{margin:26px 0 0;display:flex;flex-direction:column;gap:12px;max-width:440px}
.hero-offer{margin:24px 0 0;max-width:440px;background:rgba(255,255,255,.08);border:1px solid var(--divider-on-dark);border-radius:var(--radius-lg);padding:16px 18px}
.hero-offer .hol{margin:0;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:#e6f6d4}
.hero-offer .hov{margin:6px 0 0;display:flex;align-items:baseline;gap:9px}
.hero-offer .pct{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:.9;color:#fff}
.hero-offer .off{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:22px;color:var(--altn-green)}
.hero-offer .hoq{margin:5px 0 0;font-size:13px;line-height:1.4;color:#dff0c4}
.hero-offer .hoq b{color:#fff;font-weight:700}
.hero-offer .hod{margin:6px 0 0;font-size:14px;color:var(--fg-on-dark-muted);line-height:1.4}
.hero-offer .hod b{color:#fff;font-weight:700}
.strip{display:flex;flex-wrap:wrap;gap:9px 16px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--divider-on-dark);list-style:none}
.strip li{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:#fff;display:flex;align-items:center;gap:9px}
.strip li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--altn-cyan);flex:none}
.hero-by{display:flex;flex-direction:column;gap:4px;margin:20px 0 0;font-size:14.5px;color:var(--fg-on-dark-muted)}
.hero-by b{color:#fff;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:16px}
.hero-photo{display:none}

/* ---------- HERO CLAIM CARD ---------- */
/* Every claim CTA on the page targets #claim, which is this element -- the
   top of the whole claim component, so the heading and the interest tiles are
   what a member lands on, never a text input. The header is sticky at 64px,
   so the anchor needs to clear it; scroll-margin-top is also what
   scrollIntoView() honours, which keeps the Fitness DNA button's programmatic
   scroll on the same offset as a plain anchor jump. */
.hero-claim{margin:30px 0 0;scroll-margin-top:92px}
.hero-claim .card{max-width:none}
.claim-micro{margin:12px 0 0;text-align:center;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;color:var(--fg-on-dark-muted)}
.consent-wrap{display:flex;flex-direction:column;gap:14px}
.card-top .ctk{margin:0 0 7px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;color:var(--primary)}
.card-top .ctd{margin:8px 0 0;font-size:14px;color:var(--fg2);line-height:1.45}
.int-blk{display:flex;flex-direction:column;gap:9px}
.ilabel{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--fg2)}
.ilabel span{font-weight:400;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--fg3);white-space:nowrap}
.int-blk .err{display:none;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--err)}
.int-blk .err svg{width:15px;height:15px;flex:none}
.int-blk.invalid .err{display:flex}
.int-blk.invalid .int-grid{outline:1.5px solid var(--err);outline-offset:5px;border-radius:var(--radius-md)}
.int-note{margin:0;font-size:11.5px;color:var(--fg2);line-height:1.45}
.int-note a{font-weight:600}

/* ---------- OFFER CARD ---------- */
.offer-sec{background:var(--bg-subtle);padding:0 0 44px}
.offer{position:relative;margin-top:-26px;background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;max-width:620px}
.offer-strip{height:6px;background:linear-gradient(90deg,var(--altn-blue) 0 40%,var(--altn-teal) 40% 70%,var(--altn-green) 70% 100%)}
.offer-body{padding:24px 24px 24px}
.pass-label{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--primary);margin:0 0 14px;line-height:1.4}
.big-off{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.big-off .pct{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(58px,17vw,84px);line-height:.86;color:var(--fg1);letter-spacing:-.01em}
.big-off .off{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,7.5vw,36px);line-height:1;color:var(--altn-navy);letter-spacing:.03em}
.big-q{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:var(--fg2)}
.big-q b{color:var(--fg1);font-weight:700}
/* The three pricing tiers, stated as a rule rather than a headline claim.
   A member reads down this list to find which one their test falls under. */
.tiers{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.tiers li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line,var(--border))}
.tiers li:first-child{border-top:0}
.tiers li b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:19px;color:var(--altn-navy);min-width:86px;flex:none}
.tiers li span{font-size:14.5px;color:var(--fg2);line-height:1.4}
.save-pill{display:inline-flex;align-items:center;margin:14px 0 0;background:var(--altn-green);color:#fff;border-radius:var(--radius-pill);padding:8px 18px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:16px}
.offer-what{margin:16px 0 0;font-size:17px;color:var(--fg1);line-height:1.45}
.offer-what b{font-weight:700}
.deadline{display:inline-flex;align-items:center;gap:9px;background:var(--primary-tint);border-radius:var(--radius-pill);padding:9px 16px;margin:18px 0 0;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--altn-navy)}
.deadline svg{width:15px;height:15px;flex:none}
.terms{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.terms li{font-size:12.5px;color:var(--fg3);line-height:1.45;padding-left:13px;position:relative}
.terms li b{color:var(--fg2);font-weight:700}
.terms li::before{content:"·";position:absolute;left:3px;color:var(--border-strong);font-weight:700}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.dates .d{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}
.dates .dk{display:block;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;color:var(--primary)}
.dates .dv{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.15;color:var(--fg1);margin-top:5px}
.dates .dn{display:block;font-size:12px;color:var(--fg3);margin-top:3px;line-height:1.35}

/* ---------- SECTIONS ---------- */
.sec{padding:56px 0}
.sec-head{max-width:640px}
.sec h2.big{font-size:clamp(28px,7.6vw,38px);margin:12px 0 0;letter-spacing:.01em}
.sec-lead{font-size:16.5px;color:var(--fg2);margin:12px 0 0}
.sec-lead b{color:var(--fg1);font-weight:600}

/* ---------- WHY ---------- */
.why-sec{background:var(--bg)}
.why{display:grid;grid-template-columns:1fr;gap:2px;margin:28px 0 0;list-style:none;padding:0;background:var(--border);border-radius:var(--radius-lg);overflow:hidden}
.why li{background:#fff;padding:20px}
.why .k{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:17px;color:var(--fg1);display:flex;align-items:center;gap:11px}
.why .k::before{content:"";width:10px;height:26px;border-radius:var(--radius-pill);background:var(--dot,var(--altn-blue));flex:none}
.why p{margin:8px 0 0 21px;font-size:14.5px;color:var(--fg2);line-height:1.5}

/* ---------- INTERESTS ---------- */
.int-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.counter{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--fg2)}
.counter b{color:var(--primary)}
.counter.full b{color:var(--altn-green-dark)}
.clear{font-size:13px;font-weight:600;color:var(--fg3);text-decoration:underline;text-underline-offset:3px}
.clear:hover{color:var(--fg1)}
.int-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;list-style:none;margin:0;padding:0}
.int-grid li.full{grid-column:1/-1}
.tile{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;width:100%;text-align:left;min-height:52px;padding:9px 11px;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out),background .18s var(--ease-out)}
.tile.full{grid-column:1/-1}
.tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tile .swatch{width:6px;height:24px;border-radius:var(--radius-pill);flex:none}
.tile .body{min-width:0}
.tile .tname{min-width:0;overflow-wrap:break-word;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;line-height:1.05;color:var(--fg1);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tile .feat{flex:none;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:8.5px;color:#fff;background:var(--accent);border-radius:var(--radius-pill);padding:3px 7px}
.tile .check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex:none;transition:all .18s var(--ease-out)}
.tile .check svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:all .18s var(--ease-out)}
.tile[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-tint);box-shadow:var(--shadow-md)}
.tile[aria-pressed="true"] .check{background:var(--primary);border-color:var(--primary)}
.tile[aria-pressed="true"] .check svg{opacity:1;transform:scale(1)}
.tile:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.tile:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:2px}

/* ---------- FORM ---------- */
.card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;color:var(--fg1);max-width:560px}
.card-top{padding:24px 22px 0}
.card-top h3{font-family:var(--font-display);font-size:24px;text-transform:uppercase;font-weight:700;color:var(--fg1)}
.card-top p{margin:8px 0 0;font-size:14.5px;color:var(--fg2)}
form{padding:20px 22px 24px;display:flex;flex-direction:column;gap:18px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld[hidden]{display:none}
.fld label{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--fg2)}
.fld input{font-family:var(--font-sans);font-size:16.5px;color:var(--fg1);background:var(--bg-subtle);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:16px;min-height:56px;transition:border-color .15s,background .15s,box-shadow .15s}
.fld input::placeholder{color:var(--fg3)}
.fld input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(9,129,197,.16)}
.fld .err{display:none;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--err)}
.fld .err svg{width:15px;height:15px;flex:none}
.fld.invalid input{border-color:var(--err);background:#fdf3f2}
.fld.invalid .err{display:flex}
.fld .helper{font-size:12.5px;color:var(--fg3)}
.consent{display:flex;gap:11px;align-items:flex-start;padding:0;cursor:pointer;background:none;border:none}
.consent:hover .consent-txt{color:var(--fg1)}
.consent input{appearance:none;-webkit-appearance:none;width:24px;height:24px;min-width:24px;margin:1px 0 0;border:2px solid var(--border-strong);border-radius:5px;background:#fff;position:relative;cursor:pointer;flex:none;transition:background .15s,border-color .15s}
.consent input:checked{background:var(--altn-green);border-color:var(--altn-green)}
.consent input:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.consent input:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:2px}
.consent-txt{font-size:13px;color:var(--fg2);line-height:1.4}
.sms-fine{margin:-6px 0 0;font-size:11.5px;color:var(--fg2);line-height:1.5}
.sms-fine a{color:var(--primary-hover);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.sms-fine a:hover{color:var(--link)}
.sms-fine .flagged{margin-top:6px}

.consent.checked .consent-txt{color:var(--fg1)}
.form-fine{font-size:11.5px;color:var(--fg2);text-align:center;margin:0;line-height:1.5}
.form-fine a{color:var(--primary-hover);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.form-fine a:hover{color:var(--link)}
.form-alert{display:none;gap:11px;align-items:flex-start;background:#fdf3f2;border:1.5px solid #f0c8c2;border-radius:var(--radius-md);padding:14px 16px;font-size:14px;color:#8f2a1e;line-height:1.4}
.form-alert.show{display:flex}
.form-alert svg{width:18px;height:18px;flex:none;color:var(--err);margin-top:2px}

/* ---------- SUCCESS ---------- */
.success{display:none;padding:34px 24px 30px;text-align:center}
.success.show{display:block}
form.hide,.card-top.hide{display:none}
.badge{width:74px;height:74px;border-radius:50%;background:var(--altn-green);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(141,198,63,.45);animation:pop .5s var(--ease-out) both}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.badge svg{width:38px;height:38px;color:#fff}
.success h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,6.6vw,30px);line-height:1.08;color:var(--fg1);margin:0 0 12px}
.success .conf{font-size:15.5px;color:var(--fg2);margin:0 auto;max-width:400px}
.success .conf b{color:var(--fg1);font-weight:700}
.claimed{text-align:left;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin:24px 0 0}
.claimed-hd .ck{display:block;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--primary)}
.claimed-hd .cv{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.15;color:var(--fg1);margin-top:6px}
.claimed-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.claimed-dates>div{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px}
.claimed-dates .dk{display:block;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--fg3)}
.claimed-dates .dv{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:16px;color:var(--fg1);margin-top:3px}
.codebar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:14px 0 0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}
.codebar .cnote{font-size:12.5px;color:var(--fg2);line-height:1.4}
.codebar .cl{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--fg3)}
.codebar code{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;font-size:20px;color:var(--fg1)}
.copy{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--primary-tint);color:var(--altn-navy);border-radius:var(--radius-pill);padding:8px 14px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;min-height:36px;transition:background .18s var(--ease-out)}
.copy:hover{background:#d3e9f7}
.copy.done{background:var(--altn-green);color:#fff}
.claimed-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.claimed-meta span{flex:none;white-space:nowrap;font-size:11.5px;line-height:1.2;color:var(--fg2);background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 11px}
.recs{text-align:left;margin:26px 0 0}
.recs-h{margin:0 0 14px;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:16px;color:var(--fg1);line-height:1.25}
.rec-grid{display:grid;grid-template-columns:1fr;gap:12px}
.rec{border:1.5px solid var(--border);border-left:5px solid var(--dot,var(--altn-blue));border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.rec .rcat{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--dot,var(--altn-blue))}
.rec .rnm{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:18px;line-height:1.12;color:var(--fg1);margin:6px 0 0}
.rec .rdc{font-size:13.5px;color:var(--fg2);line-height:1.45;margin:6px 0 0}
.rec .rpr{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:12px 0 0}
.rec .rw{font-size:13.5px;color:var(--fg3);text-decoration:line-through}
.rec .rm{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:.95;color:var(--fg1)}
.rec .rs{display:inline-flex;background:var(--altn-green);color:#fff;border-radius:var(--radius-pill);padding:4px 11px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.rec .rnote{font-size:12px;color:var(--fg3);margin:8px 0 0;line-height:1.4}
.rec .rcode{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0 0;background:var(--bg-subtle);border-radius:var(--radius-md);padding:9px 12px}
.rec .rcode .copy{margin-left:auto;padding:6px 11px;min-height:30px;font-size:9.5px}
.rec .rcode .cl{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:9.5px;color:var(--fg3)}
.rec .rcode code{font-family:var(--font-display);font-weight:700;letter-spacing:.07em;font-size:16px;color:var(--fg1)}
.rec .btn{margin-top:12px;width:100%;min-height:50px;font-size:14px}
.unsure-blk{display:none;text-align:left;background:var(--primary-tint);border:1px solid rgba(9,129,197,.28);border-radius:var(--radius-lg);padding:18px;margin:24px 0 0}
.unsure-blk.show{display:block}
.unsure-blk .uh{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:17px;line-height:1.15;color:var(--altn-navy)}
.unsure-blk .ud{margin:8px 0 0;font-size:14px;color:var(--fg2);line-height:1.5}
.tabs{display:flex;gap:7px;overflow-x:auto;padding:12px;background:var(--bg-subtle);border-bottom:1px solid var(--border);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:9px 14px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;color:var(--fg2);min-height:38px;transition:all .18s var(--ease-out)}
.tab[aria-selected="true"]{background:var(--altn-navy);border-color:var(--altn-navy);color:#fff}
.tab-body{padding:16px}
/* "For you" -- the claimed guide's opening panel. The tab reads as the
   member's own, so it carries the accent the category tabs do not; the chips
   echo back the areas they chose and are labels, never findings. */
.tab-foryou[aria-selected="true"]{background:var(--primary);border-color:var(--primary)}
.tab-foryou:not([aria-selected="true"]){border-color:var(--primary);color:var(--primary)}
.foryou-lede{margin:0 0 10px;font-size:13px;color:var(--fg2)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-left:3px solid var(--chip,var(--primary));border-radius:var(--radius-pill);padding:5px 12px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:10px;line-height:1.4;color:var(--fg2);background:#fff}
.plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin:0 0 4px;padding:0;list-style:none;align-items:start}
/* Testing Guide card, with the same restrained category accent the
   recommendation cards carry: a colour-coded left edge from the decorative
   --dot, and a small uppercase eyebrow in the contrast-safe --dot-text (four
   of the six category colours fail AA as type -- see the note beside
   `.rec .rcat`). Nothing else on the card takes a category colour, so the
   grid still reads as one flat plane. box-sizing is border-box globally, so
   the 5px edge costs the card no footprint and the `auto-fit minmax(300px)`
   track sizing is unchanged. The eyebrow runs a step smaller than `.rcat`,
   matching this card's smaller type throughout. */
.pitem{display:flex;flex-direction:column;height:100%;border:1px solid var(--border);border-left:5px solid var(--dot,var(--altn-blue));border-radius:var(--radius-md);padding:14px}
.pbadge{align-self:flex-start;margin:0 0 8px;background:var(--primary-tint);color:var(--primary);border-radius:var(--radius-pill);padding:3px 10px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;line-height:1.4}
.pitem .pcat{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;line-height:1.4;color:var(--dot-text,var(--dot,var(--altn-blue)));margin:0 0 5px}
.pitem .pn2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:15.5px;line-height:1.15;color:var(--fg1)}
.pitem .pd2{font-size:12.5px;color:var(--fg2);line-height:1.4;margin:5px 0 0}
.pitem .pp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:9px 0 0}
.pitem .pw{font-size:12.5px;color:var(--fg3);text-decoration:line-through}
.pitem .pm{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;color:var(--fg1)}
.pitem .ps{font-size:11.5px;font-weight:700;color:var(--altn-green-dark)}
.pitem .prow2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:auto 0 0;padding-top:10px}
.pitem .pcode{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:13px;color:var(--fg2);background:#fff;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:4px 9px}
.pitem .plink{margin-left:auto;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.browse-fine{margin:16px 0 0;font-size:11.5px;color:var(--fg2);line-height:1.5}
.next{border-top:1px solid var(--border);padding-top:22px;margin-top:4px}
.next .q{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--fg1);margin:0 0 4px}
.next .qs{font-size:14px;color:var(--fg2);margin:0 0 16px}
.next .btns{display:flex;flex-direction:column;gap:10px}

/* ---------- FITNESS DNA ----------
   Five bands, not a card: hero (navy), topics (tint), how it works (white),
   proof (tint), price (navy). The six invented "scale bar" cards this section
   used to carry are gone -- every visual here is a real page of the sample
   report. See docs/FITNESS-DNA-SECTION.md.                                  */
.dband{position:relative;padding:52px 0;overflow:hidden}
.dband.navy{background:var(--altn-navy);color:#fff}
.dband.tint{background:var(--bg-subtle)}
.dband.tint + .dband.tint{padding-top:0}
.dband.white{background:#fff}
.dband-in{position:relative;z-index:2}
.dna .kicker{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--primary);margin:0}
.dna h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.05;font-size:clamp(30px,8.4vw,44px);margin:14px 0 0;color:#fff}
.dna h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.05;font-size:clamp(24px,6.4vw,32px);margin:12px 0 0;color:var(--fg1)}
.hdr-rule{width:52px;height:3px;background:var(--altn-green)}
.dna .lede{margin:18px 0 0;font-size:15.5px;line-height:1.65;color:var(--fg2);max-width:620px}
.dna .fine{font-size:11.5px;line-height:1.6;color:var(--fg3);margin:0}

/* --- band 1: hero --- */
.hero-dna{display:grid;gap:26px}
.dna-hook{font-family:var(--font-sans);font-style:normal;font-weight:500;font-size:clamp(17px,4.4vw,21px);line-height:1.45;color:var(--fg-on-dark-muted);margin:18px 0 0;max-width:22em}
.dna-lead{margin:0;font-size:16.5px;line-height:1.65;color:var(--fg-on-dark-muted);max-width:34em}
.dna-lead b{color:#fff;font-weight:600}
.factline{display:flex;flex-wrap:wrap;gap:12px 0;margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--divider-on-dark);list-style:none}
.factline li{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13.5px;font-weight:600;color:#dff0c4;padding:0 20px;border-left:1px solid var(--divider-on-dark)}
.factline li:first-child{padding-left:0;border-left:0}
.factline svg{width:14px;height:14px;flex:none;color:var(--altn-green)}

/* --- band 2: what can your DNA tell you --- */
.topics-grid{margin:30px 0 0}
.topics{margin:0;padding:0;list-style:none}
.topics li{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:start;padding:16px 0;border-top:1px solid var(--border)}
.topics li:first-child{border-top:0;padding-top:0}
.topics .tico{width:34px;height:34px;color:var(--primary);margin-top:1px}
.topics h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.1;font-size:18px;letter-spacing:.045em;color:var(--fg1);margin:0}
.topics p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--fg2);max-width:46em}
.topics-note{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border);max-width:900px}

/* --- band 3: how it works --- */
.flow{display:grid;gap:0;margin:28px 0 0;padding:0;list-style:none}
.flow li{position:relative;padding:22px 0;border-top:1px solid var(--border)}
.flow li:first-child{border-top:0;padding-top:0}
.flow .n{display:block;font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;color:var(--altn-green);position:relative;background:#fff;width:max-content;padding-right:12px}
.flow h4{margin:10px 0 0;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.045em;color:var(--fg1)}
.flow p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--fg2)}

/* --- band 4: proof --- */
.proof{display:grid;gap:26px;margin:26px 0 0}
.proof.is-gated .proof-fig,.proof.is-gated .proof-act{display:none}
.proof-gate{margin:20px 0 0}
.proof-gate[hidden]{display:none}
.proof-fig{margin:0}
.proof-lbl{margin:0 0 9px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--fg2)}
.proof-frame{display:block;width:100%;padding:0;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;cursor:zoom-in;text-align:left;font:inherit;transition:box-shadow .2s var(--ease-out)}
.proof-frame img{width:100%;height:auto}
.proof-frame:hover{box-shadow:var(--shadow-md)}
.proof-frame:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:3px}
.proof-stat{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(21px,5.4vw,25px);line-height:1.12;color:var(--fg1);margin:14px 0 0}
.proof-body{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--fg2);max-width:38em}
.proof-body b{color:var(--fg1);font-weight:600}
.proof-act{margin:20px 0 0}
.proof-act button{font-family:var(--font-sans);font-size:14.5px;font-weight:700;color:var(--primary);letter-spacing:.02em}
.proof-act button:hover{color:var(--primary-hover);text-decoration:underline}
.proof-act button:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:3px}
.proof-fine{margin:20px 0 0}

/* --- band 5: member price --- */
.dna-offer{display:grid;gap:26px;align-items:end}
.dna-offer .plbl{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--green-on-dark);margin:0}
.dna-offer .prow{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px;margin:12px 0 0}
.dna-offer .now{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,15vw,88px);line-height:.85;color:#fff}
.dna-offer .was{font-size:15px;color:var(--fg-on-dark-muted);text-decoration:line-through}
.dna-offer .saved{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:15px;color:var(--green-on-dark)}
.dna-offer-acts{display:flex;flex-direction:column;gap:12px}
.dna-offer-fine{margin:18px 0 0;font-size:12px;line-height:1.6;color:var(--fg-on-dark-muted);max-width:44em;padding-top:16px;border-top:1px solid var(--divider-on-dark)}

/* --- full-screen sample-report viewer --- */
.srv{position:fixed;inset:0;z-index:80;background:rgba(13,20,24,.95);display:flex;flex-direction:column}
.srv[hidden]{display:none}
.srv-bar{flex:none;display:flex;align-items:center;gap:14px;padding:12px 14px;background:#0d1418;border-bottom:1px solid rgba(255,255,255,.14)}
.srv-bar .a{margin:0;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:#fff}
.srv-bar .b{margin:2px 0 0;font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.35}
.srv-ttl{flex:1;min-width:0}
.srv-x{flex:none;width:42px;height:42px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.srv-x:hover{background:rgba(255,255,255,.14)}
.srv-x:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:2px}
.srv-body{flex:1;overflow:auto;padding:16px 12px 44px;display:flex;flex-direction:column;align-items:center;gap:24px;-webkit-overflow-scrolling:touch}
.srv-pg{width:100%;max-width:840px}
.srv-pg .lb{margin:0 0 8px;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;color:rgba(255,255,255,.86)}
.srv-pg img{display:block;width:100%;height:auto;background:#fff;border-radius:var(--radius-xs);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.srv-foot{width:100%;max-width:840px;color:rgba(255,255,255,.72);font-size:12px;line-height:1.6}

/* ---------- CONTACT TOGGLE ---------- */
.contact-note{margin:-4px 0 0;font-size:11.5px;color:var(--fg2);line-height:1.5}
.swap{display:inline;margin-left:5px;font-family:var(--font-sans);font-weight:700;font-size:11.5px;color:var(--primary-hover);text-decoration:underline;text-underline-offset:2px}
.swap:hover{color:var(--altn-navy)}
.sms-block{display:flex;flex-direction:column;gap:14px}
.sms-block[hidden]{display:none}
/* The opt-in is optional, so a blank box is never an error. This styles the
   one server-side problem that can still involve it -- opting in without a
   usable mobile number -- and nothing else. */
.sms-block .err{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--err)}
.sms-block .err svg{width:15px;height:15px;flex:none}

/* Second-chance prompt: an offer, so it borrows the card's own surface rather
   than an alert treatment. Sits inside the form, below the button it
   interrupts, and never covers the disclosure it refers to. */
/* Compact redemption steps on the activation page. Deliberately quieter
   than the Testing Guide's full box: a line of instruction above the cards,
   not a second hero competing with the pass itself. */
.howto-mini{margin:22px 0 0;padding:14px 16px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);text-align:left}
.hmk{margin:0;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;color:var(--fg3)}
.hmd{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--fg2)}
.hmd a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sms-nudge{margin:14px 0 0;padding:16px 18px;background:var(--primary-tint);border:1px solid var(--primary);border-radius:var(--radius-lg)}
.sms-nudge[hidden]{display:none}
.nudge-h{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:16px;line-height:1.2;color:var(--altn-navy)}
.nudge-d{margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--fg2)}
.nudge-btns{display:flex;flex-direction:column;gap:9px;margin:14px 0 0}
.nudge-btns .btn{width:100%;min-height:46px;font-size:14px}
@media(min-width:520px){.nudge-btns{flex-direction:row}.nudge-btns .btn{flex:1}}
.help-line{margin:14px 0 0;font-size:12px;color:var(--fg2);line-height:1.5;text-align:center}
.help-line a{color:var(--primary-hover);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- TESTING GUIDE ---------- */
.guide-bar{display:flex;flex-direction:column;gap:14px;margin:26px 0 0;background:#fff;border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.guide-bar[hidden]{display:none}
.guide-bar.claimed{border-left-color:var(--altn-green)}
.gb-txt{margin:0;font-size:13.5px;color:var(--fg2);line-height:1.5}
.gb-txt b{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:17px;line-height:1.15;color:var(--fg1);margin-bottom:5px}
.guide-bar .btn{align-self:flex-start}
.guide-panel{margin:18px 0 0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.pitem .pmem{font-size:12px;color:var(--fg2);font-weight:600}
.pitem .pnote{margin:8px 0 0;font-size:11px;color:var(--fg2);line-height:1.4}
.pitem .copy{margin-left:0;padding:6px 11px;min-height:30px;font-size:9.5px}

.fast{display:inline-flex;align-items:center;margin:9px 0 0;background:var(--bg-muted);color:var(--fg2);border-radius:var(--radius-pill);padding:4px 11px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:10px}

/* ---------- TRUST ---------- */
.trust-sec{background:var(--bg)}
.trust-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:26px}
.trust-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.trust-card .k{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:17px;color:var(--fg1);margin:0 0 8px}
.trust-card p{margin:0;font-size:14.5px;color:var(--fg2);line-height:1.55}
.est{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.est .yr{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1;color:var(--primary)}
.est .yl{font-size:14px;color:var(--fg2);max-width:220px}

/* ---------- PRICE PROOF (public landing) ----------
   Deliberately not a product card. There is no code, no copy button and no
   per-product CTA before a claim, so a row only has to carry a name and the
   two prices. Member price dominates, regular price is present but demoted
   and struck, and the saving reuses the same filled pill the guide uses so
   one saving looks like a saving everywhere.                              */
.price-sec{background:var(--bg-subtle)}
.ppx{display:grid;grid-template-columns:1fr;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.ppx-row{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-sm)}
.ppx-nm{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:17px;line-height:1.15;color:var(--fg1)}
.ppx-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0}
.ppx-k{display:block;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:10px;line-height:1.3;color:var(--fg3);margin-bottom:1px}
.ppx-now .ppx-k{color:var(--primary)}
.ppx-was s{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1;color:var(--fg2);text-decoration-thickness:1.5px;text-underline-offset:2px}
.ppx-now b{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:.95;color:var(--fg1);letter-spacing:-.01em}
.ppx-pr .save-badge{align-self:center}
.ppx-close{margin:26px 0 0}
.ppx-close .btn{width:100%}
.ppx-note{margin:12px 0 0;font-size:14px;color:var(--fg2);line-height:1.5}
.ppx-note a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- GOOGLE REVIEWS ----------
   Three excerpts and a rating line. No carousel, no widget, no fetch: the
   quotes and the rating are static content from app/campaign.py, and the
   only outbound piece is the profile link.                                */
.reviews{margin:34px 0 0}
.rev-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px}
.rev-rating{margin:0;font-size:15px;color:var(--fg2);line-height:1.4}
.rev-rating b{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--fg1)}
.rev-more,.lf-link{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--link);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rev-more:focus-visible,.lf-link:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:3px}
.rev-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.rev{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px}
.rev-stars{margin:0;font-size:14px;letter-spacing:.16em;line-height:1;color:var(--star)}
.rev-q{margin:11px 0 0;font-size:14.5px;line-height:1.55;color:var(--fg1)}
.rev-by{margin:12px 0 0;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:var(--fg3)}
.rev-fine{margin:14px 0 0;font-size:11.5px;color:var(--fg3);line-height:1.5}

/* ---------- FIND US ---------- */
.local-find{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--border)}
.lf-addr{margin:0;font-size:14.5px;color:var(--fg2);line-height:1.5}

/* ---------- CLOSING CTA ----------
   The page's last word. It links to the claim form that is already on the
   page; there is no second claim implementation anywhere here.            */
.close-sec{background:var(--altn-navy);color:#fff;text-align:center}
.close-in{max-width:620px}
.close-sec h2.big{color:#fff}
.close-sub{margin:14px 0 22px;font-size:16.5px;line-height:1.55;color:var(--fg-on-dark-muted)}
.close-fine{margin:16px 0 0;font-size:12px;color:var(--fg-on-dark-muted);line-height:1.5}

/* ---------- FOOTER ---------- */
.ftr{background:var(--altn-navy);color:var(--fg-on-dark-muted);padding:34px 0 96px}
.ftr img{height:26px;margin-bottom:18px}
.ftr .fname{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#fff;font-size:15px;margin:0 0 6px}
.ftr p{font-size:13px;line-height:1.6;margin:0 0 10px;max-width:640px}
.ftr-contact{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-size:13.5px;line-height:1.5}
.ftr-contact span:first-child{color:#fff;font-weight:600}
.ftr-contact a{color:var(--altn-green);font-weight:600}
.ftr-contact a:hover{color:#fff}
.ftr .legal{font-size:12px;color:rgba(255,255,255,.55);border-top:1px solid var(--divider-on-dark);padding-top:16px;margin-top:18px}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:12px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .3s var(--ease-out);box-shadow:0 -8px 24px rgba(13,20,24,.1)}
.sticky-cta.show{transform:none}
.sticky-cta .row{display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto}
.sticky-cta .lbl{flex:1;min-width:0}
.sticky-cta .l1{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--fg1);line-height:1.2}
.sticky-cta .l2{font-size:11.5px;color:var(--fg3)}
.sticky-cta .btn{padding:14px 20px;min-height:48px;font-size:13.5px;flex:none}

/* ---------- DESKTOP ---------- */
@media(min-width:900px){
body{font-size:18px}
.only-desk{display:block}
.wrap{padding:0 40px}
.hdr-in{height:76px}
.hdr img{height:32px}
.hero-in{padding:46px 40px 66px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.hero-grid.is-claimed{grid-template-columns:1fr;max-width:1000px;margin:0 auto}
.hero-grid.is-claimed .hero-left{display:none}
.hero-claim{margin:0}
.hero-cta{display:none}
.hero h1{font-size:clamp(54px,5.6vw,74px)}
.hero-sub{font-size:20px;margin-top:22px}
.hero-cta{flex-direction:row;align-items:center;max-width:none}
.hero-offer{margin-top:28px}
.hero-photo{display:block;position:relative;height:440px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.strip{gap:10px 24px}
.strip li{font-size:13.5px}
.offer-sec{padding-bottom:64px}
.offer{margin-top:-46px;max-width:none;display:grid;grid-template-columns:1.2fr .8fr}
.offer-strip{grid-column:1/-1}
.offer-body{padding:34px 36px 32px}
.offer-side{border-left:1px solid var(--border);padding:34px 36px;display:flex;flex-direction:column;justify-content:center;background:var(--bg-subtle)}
.sec{padding:88px 0}
.sec h2.big{font-size:clamp(38px,3.6vw,50px)}
.why{grid-template-columns:repeat(3,1fr)}
.why li{padding:26px 24px}

.claim-grid{display:grid;grid-template-columns:1fr}
.card{max-width:none}
.card-top{padding:24px 30px 0}
.card-top h3{font-size:25px}
form{padding:18px 30px 26px;gap:12px}
.sms-fine{padding-left:35px}
.fld .helper{display:none}
.int-grid{gap:7px}
.tile{min-height:46px;padding:8px 11px}
.fld input{min-height:50px;padding:13px}
.fld .helper{font-size:11.5px}
.card-top .ctd{display:none}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.success{padding:44px 40px 40px}
.rec-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rec .btn{margin-top:auto}
.rec{display:flex;flex-direction:column}
.tab-body{padding:22px 26px}
.guide-bar{flex-direction:row;align-items:center;justify-content:space-between;gap:26px;padding:20px 24px}
.guide-bar .btn{align-self:auto;flex:none}
.next .btns{flex-direction:row}
.next .btns .btn{flex:1}
.dband{padding:72px 0}
.dband.tight{padding:56px 0}
.dna h2{font-size:clamp(46px,4.4vw,60px)}
.dna h3{font-size:clamp(30px,2.9vw,38px)}
.hero-dna{grid-template-columns:1.15fr .85fr;gap:64px;align-items:end}
.hero-dna .col-b{padding-bottom:6px}
.topics{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);column-gap:56px}
.topics li{padding:20px 0}
.topics li:nth-child(4){border-top:0;padding-top:0}
.topics h4{font-size:20px}
.flow{grid-template-columns:repeat(3,1fr)}
.flow li{padding:0 34px 0 0;border-top:0}
.flow li:not(:last-child)::after{content:"";position:absolute;left:0;right:0;top:17px;height:1px;background:var(--border);z-index:0}
.flow li:last-child{padding-right:0}
.flow li+li{padding-left:34px}
.flow li+li::before{content:"";position:absolute;left:-24px;top:11px;width:12px;height:12px;border-top:1.5px solid var(--border-strong);border-right:1.5px solid var(--border-strong);transform:rotate(45deg)}
.flow .n{z-index:1}
.proof{grid-template-columns:.55fr .45fr;grid-template-areas:"fig copy" "fig act";column-gap:52px;row-gap:20px;align-content:start}
.proof.is-gated{grid-template-columns:1fr;grid-template-areas:"copy"}
.proof-fig{grid-area:fig}
.proof-copy{grid-area:copy}
.proof-act{grid-area:act;align-self:start;margin:0}
.dna-offer{grid-template-columns:1fr auto;gap:56px}
.dna-offer-acts{flex-direction:row;align-items:center}
.dna-offer-acts .btn{min-width:250px}
.trust-grid{grid-template-columns:repeat(3,1fr)}
.ppx{grid-template-columns:repeat(2,1fr);gap:14px}
.ppx-row{padding:20px 22px}
.ppx-close{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.ppx-close .btn{width:auto;min-width:290px}
.ppx-close .ppx-note{margin:0;flex:1 1 260px}
.rev-grid{grid-template-columns:repeat(3,1fr);gap:16px}
.ftr{padding-bottom:44px}
.sticky-cta{display:none}
}

/* ==================== 2. PRODUCTION ADDITIONS ====================
   Everything below exists because the production build needs behaviour the
   static design file did not: real checkbox semantics for the interest
   tiles (so the form works and is keyboard-navigable without JS), the
   server-rendered claimed/closed/expired states, tab panels that degrade
   without JS, and slots for approved artwork. Visual output is unchanged.
   ================================================================= */

/* ---------- a11y utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--altn-navy);padding:12px 18px;border-radius:0 0 var(--radius-md) 0;font-weight:700}
.skip-link:focus{left:0}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- interest tiles as real checkboxes ---------- */
/* The design used aria-pressed buttons; production uses a hidden checkbox
   inside the label so the selector submits without JavaScript and gets
   native keyboard + screen-reader behaviour. Appearance is identical. */
.tile{cursor:pointer}
.tile input[type="checkbox"]{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.tile:has(input:checked){border-color:var(--primary);background:var(--primary-tint);box-shadow:var(--shadow-md)}
.tile:has(input:checked) .check{background:var(--primary);border-color:var(--primary)}
.tile:has(input:checked) .check svg{opacity:1;transform:scale(1)}
.tile:has(input:disabled){opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.tile:has(input:disabled):hover{transform:none;box-shadow:none}
.tile:has(input:focus-visible){outline:3px solid var(--altn-cyan);outline-offset:2px}

/* ---------- claim window closed / offer expired ---------- */
.state-panel{background:var(--bg-subtle);border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:var(--radius-lg);padding:20px 22px;margin:0}
.state-panel.is-expired{border-left-color:var(--gray-400)}
.state-panel .sp-k{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:17px;line-height:1.15;color:var(--fg1)}
.state-panel p{margin:8px 0 0;font-size:14px;color:var(--fg2);line-height:1.5}
.state-panel .btn{margin-top:16px}
.card .state-panel{margin:20px 22px 24px;border-radius:var(--radius-lg)}
@media(min-width:900px){.card .state-panel{margin:20px 30px 26px}}

.expired-bar{display:flex;gap:11px;align-items:flex-start;background:var(--bg-muted);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:14px 16px;margin:0 0 18px;font-size:13.5px;color:var(--fg2);line-height:1.45;text-align:left}
.expired-bar b{color:var(--fg1);display:block;margin-bottom:3px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:15px}

/* ---------- product CTA with no resolved product link ---------- */
.btn.is-pending,.plink.is-pending{opacity:.55;cursor:not-allowed;pointer-events:none;text-decoration:none}
.link-pending{display:block;margin:8px 0 0;font-size:11.5px;color:var(--fg3);line-height:1.4}

/* ---------- guide tabs: server-rendered panels, JS-switched ---------- */
.cat-heading{margin:0 0 12px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:19px;color:var(--fg1)}
html.js .cat-heading{display:none}
html.js .tab-panel[hidden]{display:none}
html:not(.js) .tab-panel{display:block!important}
html:not(.js) .tabs{display:none}
.tab-panel+.tab-panel{margin-top:26px}
html.js .tab-panel+.tab-panel{margin-top:0}

/* ---------- legal documents ----------
   Text-first and deliberately plain. These pages are read, not marketed from,
   so they borrow the campaign's type scale and nothing else. Measure is held
   near 70 characters because legal prose is scanned for a clause, not read
   left to right. */
.legal-page{background:var(--bg);padding:34px 0 72px}
@media(min-width:900px){.legal-page{padding:56px 0 96px}}
.legal-doc{max-width:44rem}
.legal-hd{border-bottom:2px solid var(--fg1);padding-bottom:18px}
.legal-hd h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.06;font-size:clamp(27px,5.4vw,40px);margin:10px 0 0;color:var(--fg1);text-wrap:balance}
.legal-eff{margin:12px 0 0;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--fg2)}
.legal-intro{margin:26px 0 0;font-size:17px;line-height:1.65;color:var(--fg1)}
.legal-sec{margin:24px 0 0}
.legal-sec h2{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.045em;font-size:16px;line-height:1.2;color:var(--fg1);margin:0 0 6px}
.legal-sec p{margin:0;font-size:15.5px;line-height:1.68;color:var(--fg2)}
.legal-ft{margin:38px 0 0;padding-top:22px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.legal-ft p{margin:0;font-size:14.5px;line-height:1.6;color:var(--fg2)}
.legal-ft a{text-decoration:underline;text-underline-offset:2px}
.legal-siblings a{font-weight:600}

/* ---------- standalone Testing Guide page ---------- */
.guide-page-sec{background:var(--bg-subtle);padding:34px 0 70px}
@media(min-width:900px){.guide-page-sec{padding:52px 0 88px}}
.guide-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--fg2)}
.guide-back:hover{color:var(--fg1)}

/* ---------- misc production bits ---------- */
.noscript-note{background:#fff4dd;border-bottom:1px solid #e0b25c;color:#6b4400;font-size:13.5px;line-height:1.45;padding:12px 20px;text-align:center}
.form-alert[data-open="true"]{display:flex}
.fld[data-invalid="true"] input{border-color:var(--err);background:#fdf3f2}
.fld[data-invalid="true"] .err{display:flex}
.int-blk[data-invalid="true"] .err{display:flex}
.int-blk[data-invalid="true"] .int-grid{outline:1.5px solid var(--err);outline-offset:5px;border-radius:var(--radius-md)}
.success[data-open="true"]{display:block}
.copy:focus-visible,.clear:focus-visible,.tab:focus-visible,.swap:focus-visible,.skip-link:focus-visible{outline:3px solid var(--altn-cyan);outline-offset:2px}
.pass-note{margin:14px 0 0;font-size:12px;color:var(--fg3);line-height:1.5;text-align:center}

/* ---------- no-JS fallbacks ---------- */
html:not(.js) .sticky-cta{display:none}

/* ---------- accent contrast (approved change, 2026-08-25) ----------
   The design's --accent #fd7736 gives white text only 2.67:1, and the
   primary CTA is 16px bold uppercase, which WCAG counts as normal text
   (large = 18.66px bold / 24px normal) -- so it needs 4.5:1, not 3:1.

   Darkened, not recoloured: hue 19.6deg and saturation .98 are both
   preserved exactly, only lightness drops. White now sits at 4.63:1 on
   the resting state, and the hover/active steps stay proportional to the
   design's own so the button still feels the same to press.

   Overridden here rather than edited above, so the design baseline in
   section 1 stays diffable against the source artboard.

       resting  #d04502   4.63:1
       hover    #c14002   5.25:1
       active   #ae3a02   6.17:1

   This also lifts the "Featured" pill on the Fitness DNA tile, which is
   8.5px bold white on the same colour.                                  */
:root{
  --accent:#d04502;
  --accent-hover:#c14002;
}
.btn-accent{box-shadow:0 10px 24px rgba(208,69,2,.32)}
.btn-accent:active{background:#ae3a02}

/* ---------- category label contrast (approved change, 2026-08-25) ----------
   A category colour plays two roles: a decorative swatch/bar, and the small
   uppercase label naming the category. As 10.5px bold text on white, five of
   the six failed AA -- General Wellness worst at 2.04:1.

   Same rule as the accent: hue and saturation preserved, lightness dropped
   until white-background contrast clears 4.5:1, so each label reads as the
   same colour as the bar beside it rather than a different one.

     swatch (unchanged)        label text        contrast
     #005579 Fitness DNA       #005579           8.15  (already passing)
     #0981c5 Hormones          #0879ba   4.24 -> 4.71
     #fd7736 Energy & Metab.   #ce4402   2.67 -> 4.72
     #8dc63f General Wellness  #597e26   2.04 -> 4.73
     #00a79d Thyroid & Nutr.   #00817a   2.99 -> 4.75
     #00a5be B12 / Injections  #007f93   2.95 -> 4.71

   --dot still drives every decorative use (bars, borders, swatches, the DNA
   report scales) and is untouched. --dot-text is set alongside it only where
   the colour becomes type, and falls back to --dot if a category omits it.  */
.rec .rcat{color:var(--dot-text,var(--dot,var(--altn-blue)))}

/* ---------- group 1: the brand green (approved change, 2026-08-25) ----------
   --altn-green #8dc63f plays three roles and needs opposite treatment in two
   of them, so the token itself is left alone and the roles are split out.

   1a. As a FILL behind white text it gave 2.04:1 -- the worst ratio on the
       page, and it sits on the headline savings message. Reusing the
       palette's own --altn-green-dark #09632e (7.41:1) rather than inventing
       a colour: the design already chose that exact green for savings type
       (.pitem .ps), so the guide's "Save $19.80" text and a card's "Save
       $19.80" badge now agree instead of being two different greens.

   1b. As TEXT ON NAVY it needed the opposite -- lightening, not darkening.
       #8dc63f gave 3.99:1, fine for the large hero line (needs 3:1) but not
       for the 12-13px footer link, the DNA kicker, or the DNA price band's
       "LA Fitness member price" label and "Save $83". #a3d163 clears 4.6:1
       with hue and saturation preserved.

   1c. Decorative uses are untouched: the partner-tag dot, the offer strip
       gradient, the claimed guide-bar border, category swatches, and the
       hero headline, which passes as large text.                            */
:root{
  --success-fill:#09632e;   /* white text / white glyphs sit on this */
  --green-on-dark:#a3d163;  /* small green type over --altn-navy      */
  /* Review stars. --altn-orange #fd7736 gives 2.67:1 on white, which fails
     even the 3:1 floor for a graphic that carries meaning -- and a star
     rating carries meaning whatever the aria-label says. #ce4402 is the same
     darkened orange the Energy & Metabolism label already uses (4.72:1), so
     this introduces no new colour to the palette.                          */
  --star:#ce4402;
}
.save-pill,
.rec .rs,
.copy.done{background:var(--success-fill)}
.badge{background:var(--success-fill);box-shadow:0 14px 30px rgba(9,99,46,.38)}
.consent input:checked{background:var(--success-fill);border-color:var(--success-fill)}
.ftr-contact a{color:var(--green-on-dark)}
.dband.navy .kicker{color:var(--green-on-dark)}

/* ---------- group 2: tertiary text (approved change, 2026-08-25) ----------
   --fg3 was --gray-400 #8b9aa6: 2.89:1 on white and 2.54:1 on the featured
   tint. It carries most of the fine print -- the Claim by / Redeem by keys,
   "Your exclusive savings code", tier headings, offer terms, struck-through
   regular prices.

   Retargeted to #5e6d79, the lightest colour in the palette's own cool-grey
   family that clears 4.5:1 against every surface it actually sits on:

       white 5.33 | bg-subtle 5.00 | bg-muted 4.60 | primary-tint 4.68

   Still clearly lighter than --fg2 #43525d, so the three-level type
   hierarchy the design relies on is preserved. --gray-400 itself is
   unchanged and still drives the "Not Sure Yet" swatch and borders.        */
:root{ --fg3:#5e6d79; }

/* ---------- pricing hierarchy (correction pass, 2026-08-25) ----------
   Replaces the old .pp / .rpr rows, where a tiny struck-through regular
   price and small green savings text under-sold the promotion.

   Now: a labelled REGULAR line that stays readable, the Wellness Pass price
   as the dominant numeral, and the saving as a filled pill. Fitness DNA
   carries its own label ("LA Fitness member price") so the 20% offer is
   never implied to apply to it.                                          */
.pricing{margin:12px 0 0;display:flex;flex-direction:column;gap:7px}
.price-line{display:block}
.price-label{display:block;margin-bottom:1px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:10px;line-height:1.3;color:var(--fg3)}
.price-line.is-member .price-label{color:var(--primary)}
.price-reg{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1;color:var(--fg2);text-decoration:line-through;text-decoration-thickness:1.5px;text-underline-offset:2px}
.price-mem{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:.95;color:var(--fg1);letter-spacing:-.01em}
.save-badge{align-self:flex-start;display:inline-flex;margin-top:3px;background:var(--success-fill);color:#fff;border-radius:var(--radius-pill);padding:5px 13px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;line-height:1.2}

/* Guide cards run tighter than the three-up recommendation cards. Every card
   in a category now shares one treatment -- the tier hierarchy is gone. */
.pitem .pricing{margin-top:10px}
.pitem .price-mem{font-size:26px}
.pitem .price-reg{font-size:16px}
.pitem .save-badge{font-size:10px;padding:4px 11px}
.rec .pricing{margin-top:12px}

/* ---------- claimed hero on mobile (fix, 2026-08-25) ----------
   The design hid the hero's left column when claimed, but only at
   >=900px. That was right when claiming transformed the page in place:
   the member was already scrolled to the card. Claiming is now a real
   navigation to /la-fitness/pass/<token>, so on mobile the browser
   landed at the top of the marketing hero and the success card -- the
   checkmark, the pass summary and the savings codes -- sat below the
   fold, requiring a scroll nobody prompted.

   Applying the design's own claimed-state rule at every width puts the
   card first, which is what the claimed state was always meant to show.
   The marketing copy has done its job by this point.                    */
.hero-grid.is-claimed .hero-left{display:none}
.hero-grid.is-claimed{grid-template-columns:1fr}
@media(max-width:899px){
  .hero-grid.is-claimed{margin:0}
  .hero.is-claimed-hero .hero-in{padding-top:22px}
}

/* ---------- redemption steps (added 2026-08-25) ----------
   Shown on claimed surfaces only. The codes do not auto-apply, so this
   closes the gap between copying one and finding the coupon field. */
.howto{margin:14px 0 0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px}
.howto .hk{margin:0;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--primary)}
.howto ol{margin:9px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px}
.howto li{font-size:13px;color:var(--fg2);line-height:1.45}
/* Each step now leads with what to do and follows with what to expect, so the
   lead gets its own line. A class rather than `li b`, which would also break
   the "Coupon Code" and "Apply" labels inside step three onto their own. */
.howto li .sk{display:block;margin-bottom:2px;color:var(--fg1);font-weight:700}
.howto li b{color:var(--fg1);font-weight:700}
.howto .hn{margin:10px 0 0;font-size:11.5px;color:var(--fg3);line-height:1.45}
.guide-page-sec .howto{margin-top:12px;max-width:620px}
.howto .hn b{color:var(--fg1);font-weight:700}
.howto .hn a{color:var(--primary-hover);font-weight:600;text-decoration:underline;text-underline-offset:2px}