/* ============================================================
   signup_style.css
   ------------------------------------------------------------
   Part 1 below is your existing WELLINTEL_STYLE, copied as-is
   from wellintel_style.py so the sign-up wizard matches every
   other WellIntel report exactly (same font, cards, shadows,
   margins). If WELLINTEL_STYLE changes in Python later, this
   block should be updated to match.

   Part 2 (further down, clearly marked) is new CSS written
   specifically for the sign-up wizard — plan cards, the split
   panel, form fields, the progress bar, etc.
   ============================================================ */

/* ---------- PART 1: existing WELLINTEL_STYLE ---------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',Helvetica,Arial,sans-serif;background:#f0f0f0;color:#222;padding:24px}

.page-header{margin-bottom:39px;background:#111111;padding:20px 24px;border-radius:8px;display:flex;align-items:center;gap:20px;min-height:148px}
@media(max-width:768px){
  .page-header{min-height:80px;padding:14px 16px;margin-bottom:20px}
  .page-header svg{height:65px!important}
}
@media(max-width:768px){body{padding:12px}}
.mobile-br{display:inline}
@media(max-width:768px){
  .wizard-info-login{white-space:normal;text-align:right}
  .mobile-br{display:inline}
}

.pill{font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;background:#f0f0f0;color:#666;border:1px solid #666}
.pill.green{background:#eaf3de;color:#3b6d11;border:1px solid #97c459}
.pill.blue{background:#e8f0fb;color:#1a4fa0;border:1px solid #1a6b9a}
.pill.gold{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
.pill.purple{background:#f3e8fb;color:#6b21a8;border:1px solid #7c3aed}
.pill.lilac{background:#f5f0ff;color:#6d3fc9;border:1px solid #a78bfa}
.pill.red{background:#fdecea;color:#a32d2d;border:1px solid #e74c3c}
.pill.orange{background:#fff3f0;color:#c44b00;border:1px solid #FF6B00}

.summary-strip{background:#fff;border-radius:8px;padding:12px 20px;margin-bottom:24px;display:flex;gap:12px;flex-wrap:wrap;border:1px solid #e8e8e8;align-items:center;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
.info-bar{background:#fff;border-radius:6px;padding:10px 14px;font-size:12px;color:#666;margin-bottom:20px;display:flex;gap:20px;flex-wrap:wrap;border:1px solid #e8e8e8;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
.info-bar strong{color:#1a1a1a}
.perf-panel{background:#fff;border-radius:8px;padding:16px 18px;margin-bottom:20px;box-shadow:0 3px 10px rgba(0,0,0,0.10);border:1px solid #e8e8e8}
.perf-panel-title{font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:12px}
.perf-period-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.perf-period-btn{font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;background:#fff3f0;color:#c44b00;border:1px solid #FF6B00;cursor:pointer;transition:all 0.15s}
.perf-period-btn:hover{background:#f5f5f5}
.perf-period-btn.active{background:#FF6B00;color:#fff;border-color:#FF6B00}
.perf-stat-row{display:flex;gap:16px}
.perf-stat{background:#f7f7f7;border-radius:8px;padding:14px 20px;flex:1}
.perf-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#aaa;font-weight:600;margin-bottom:6px}
.perf-stat-value{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}

.course-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:#888;margin:16px 0 8px}

.horse-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;border-left:3px solid #639922;margin-bottom:12px;overflow:hidden;transition:opacity 0.3s;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
.fr-container{margin:0 15vw}
@media(max-width:768px){.fr-container{margin:0}}
.horse-card.removed{opacity:0.4;border-left-color:#ccc}
.horse-card.qr{border-left-color:#639922}
.horse-card.qr.tier2{border-left-color:#639922}
.horse-card.tier2{border-left-color:#639922}
.horse-card.cd{border-left-color:#1a6b9a}
.horse-card.ty{border-left-color:#a78bfa}
.horse-card.three-yo{border-left-color:#7c3aed}
.horse-card.lt{border-left-color:#e74c3c}
.horse-card.cs{border-left-color:#7c3aed}
.horse-card.fth{border-left-color:#FF6B00}
.horse-card.cx{border-left-color:#e74c3c}
.horse-card.code-switch{border-left-color:#7aaaf0}
.horse-card.hot{box-shadow:0 0 0 2px #f0c040;border-color:#f0c040}
.horse-card.spotlight{border-left-color:#f0c040;border-left-width:4px;box-shadow:0 2px 8px rgba(240,192,64,0.15)}
.horse-card.sl{border-left-color:#f0c040;border-left-width:4px}

.card-header{padding:12px 16px;border-bottom:1px solid #f0f0f0}
.card-header-flex{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-header-main{flex:1;min-width:0}
.horse-name{font-size:16px;font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hot-badge{font-size:12px;padding:2px 8px;border-radius:12px;background:#fff3cd;color:#9a6700;border:1px solid #f0c040;font-weight:700}
.race-info{font-size:12px;color:#1a1a1a;font-weight:700;margin-top:3px}
.badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.signal-comment{font-size:12px;color:#1a1a1a;font-weight:700;margin-top:10px;line-height:1.5}

.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px}
.badge-qr{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
.badge-cd{background:#e0eaf5;color:#1a6b9a;border:1px solid #1a6b9a}
.badge-ty{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
.badge-lt{background:#fdecea;color:#a32d2d;border:1px solid #f09595}
.badge-sl{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
.badge-cs{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
.badge-repeat{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
.badge-pen{background:#fdecea;color:#a32d2d;border:1px solid #f09595}
.badge-or{background:#faeeda;color:#854f0b;border:1px solid #ef9f27}
.badge-hot{background:#fff3cd;color:#9a6700;border:1px solid #f0c040}
.badge-cx{background:#fff3e0;color:#c44b00;border:1px solid #FF6B00}
.badge-fth{background:#fff3e0;color:#c44b00;border:1px solid #FF6B00}
.badge-drop{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
.badge-well{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
.badge-adv{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
.badge-class{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}
.badge-switch{background:#ede8fb;color:#5b21b6;border:1px solid #a78bfa}
.badge-tier2{background:#fff3cd;color:#856404;border:1px solid #f0a500}
.badge-age{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
.badge-dist{background:#fdecea;color:#a32d2d;border:1px solid #f09595}
.badge-course{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
.badge-going{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
.badge-avg{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}
.badge-spotlight{background:#fef9e7;color:#9a6700;border:1px solid #f0c040;font-size:12px}
.badge-claim{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}
.badge-odds{background:#eaf3de;color:#3b6d11;border:1px solid #639922}

.odds-pill-inline{background:#FF6B00;border:1px solid #FF6B00;color:#fff;font-size:13px;font-weight:900;letter-spacing:1px;padding:2px 10px;border-radius:20px}
.odds-pill-label-inline{font-size:9px;font-weight:600;letter-spacing:0.5px;color:#888;text-transform:uppercase}

.card-body{display:grid;grid-template-columns:1fr 1fr 1fr}
.spotlight-system-block{background:#fff;padding:12px 16px;border-right:1px solid #f0f0f0}
.spotlight-system-block:last-child{border-right:none}
.spotlight-system-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#aaa;margin-bottom:8px;font-weight:600}
.match-tick{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:#3b6d11}
.card-body.four-col{grid-template-columns:1fr 1fr 1fr 1fr}
.card-body.five-col{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.card-section{padding:12px 16px;border-right:1px solid #f0f0f0}
.card-section:last-child{border-right:none}
.section-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#aaa;margin-bottom:8px;font-weight:600}
.data-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #f8f8f8}
.data-row:last-child{border-bottom:none}
.data-label{font-size:12px;color:#888}
.data-val{font-size:13px;font-weight:600;color:#1a1a1a}
.data-val.green{color:#3b6d11}
.data-val.blue{color:#1a4fa0}
.data-val.purple{color:#6b21a8}
.data-val.gold{color:#9a6700}

.or-compare{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.or-box{text-align:center}
.or-num{font-size:20px;font-weight:600;color:#1a1a1a}
.or-num.green{color:#3b6d11}
.or-lbl{font-size:11px;color:#aaa;margin-top:2px}
.or-arrow{font-size:16px;color:#888}
.pen-num{font-size:20px;font-weight:600;color:#a32d2d}
.pen-lbl{font-size:11px;color:#aaa;margin-top:2px}

.adv-pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px;margin-top:8px;display:inline-block}
.adv-green{background:#eaf3de;color:#3b6d11;border:1px solid #97c459}
.adv-amber{background:#faeeda;color:#854f0b;border:1px solid #ef9f27}
.adv-blue{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}

.win-box{background:#f3e8fb;border-radius:6px;padding:10px 12px;margin-top:8px;border:1px solid #c084fc}
.win-box-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#6b21a8;margin-bottom:6px;font-weight:700}
.win-box-race{font-size:12px;color:#1a1a1a;font-weight:600}
.win-box-detail{font-size:11px;color:#888;margin-top:3px}

.form-chars{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.fc{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.fc-win{background:#eaf3de;color:#3b6d11}
.fc-place{background:#faeeda;color:#854f0b}
.fc-unpl{background:#f0f0f0;color:#888}
.fc-incident{background:#fbe9e7;color:#a32d2d}

.last-run{font-size:11px;color:#aaa;margin-top:8px}
.last-run strong{color:#1a1a1a}
.none-msg{color:#888;font-style:italic;padding:16px 0;font-size:14px}
.pl-section{background:#fff;border-radius:8px;padding:20px 24px;margin-top:32px;margin-bottom:24px;border:1px solid #e8e8e8}
.pl-title{font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:16px}
.footer{font-size:11px;color:#aaa;margin-top:24px;padding-top:12px;border-top:1px solid #e8e8e8}

.wi-footer{background:#fff;border-top:1px solid #e8e8e8;margin-top:40px;padding:32px 24px 58px}
.wi-footer-inner{max-width:1200px;margin:0 auto}
.wi-footer-logo{height:43px;width:auto;display:block;margin-bottom:24px;margin-left:-16px}
.wi-footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.wi-footer-col-title{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:12px}
.wi-footer-link{display:block;font-size:13px;color:#666;text-decoration:none;margin-bottom:10px}
.wi-footer-link:hover{color:#FF6B00}
.wi-footer-link.disabled{color:#ccc;pointer-events:none;display:flex;align-items:center;gap:6px}
.wi-footer-soon-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;background:#f0f0f0;color:#999;border:1px solid #ddd;text-transform:uppercase;letter-spacing:0.3px}
.wi-back-to-top{position:fixed;bottom:24px;right:24px;width:48px;height:48px;
  border-radius:50%;background:#fff3e8;border:2px solid #FF6B00;display:none;
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);z-index:1000;transition:opacity 0.2s}
.wi-back-to-top:hover{background:#ffe8d6}
.wi-back-to-top svg{width:20px;height:20px}
@media(max-width:900px){.wi-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.wi-footer-grid{grid-template-columns:1fr}}

@media(max-width:900px){.card-body.four-col{grid-template-columns:1fr 1fr}.card-body.five-col{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.card-body{grid-template-columns:1fr}.card-body.four-col{grid-template-columns:1fr}.card-body.five-col{grid-template-columns:1fr}.card-section{border-right:none;border-bottom:1px solid #f0f0f0}}
.recent-form-block{margin-top:10px}
.recent-form-label-inline{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#1a1a1a;font-weight:600}
.recent-form-text{font-size:14px;color:#888;font-weight:700;letter-spacing:1px}
.recent-form-toggle{cursor:pointer;font-size:12px;margin-top:6px;font-weight:600;display:inline-block}
.recent-form-more{color:#1a1a1a;display:inline-flex;align-items:center;gap:10px}
.recent-form-less{color:#FF6B00;display:inline-flex;align-items:center;gap:10px}
.rf-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:11px;font-weight:700;line-height:1;flex-shrink:0}
.rf-icon-more{background:#1a1a1a;color:#fff}
.rf-icon-less{background:#FF6B00;color:#fff}
.recent-form-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;color:#1a1a1a}
.recent-form-table th{text-align:left;padding:6px 8px;border-bottom:1px solid #e8e8e8;font-weight:700;color:#1a1a1a;font-size:10px;text-transform:uppercase;letter-spacing:0.5px}
.recent-form-table td{padding:6px 8px;border-bottom:1px solid #f0f0f0;color:#1a1a1a}
.racecard-link{color:inherit;text-decoration:none;border-bottom:1px dotted #ccc;transition:border-bottom-color 0.15s, border-bottom-style 0.15s}
.racecard-link:hover{border-bottom:1px solid #1a1a1a}
.race-header-block{padding:16px 20px;background:#f7f7f7;border-radius:8px;position:relative}
.wi-selection-badge{position:absolute;bottom:12px;right:16px;width:32px;height:32px}
.race-header-date{font-size:12px;color:#888;font-weight:400}
.race-header-timecourse{display:flex;align-items:baseline;gap:9px;margin-top:16px}
.race-header-time{font-size:23px;font-weight:700;color:#1a1a1a}
.race-header-course{font-size:23px;font-weight:700;color:#1a1a1a}
.race-header-name{font-size:14px;font-weight:700;color:#1a1a1a;margin-top:5px}
.race-header-details-row{display:flex;justify-content:space-between;margin-top:7px;flex-wrap:wrap;gap:12px}
.race-header-details{font-size:12px;color:#888}
.race-header-compact{border-bottom:1px solid #f0f0f0;padding-bottom:14px;margin-bottom:0}
.race-header-compact .race-header-time{font-size:21px}
.race-header-compact .race-header-course{font-size:21px}
.race-header-compact .race-header-name{font-size:13px}
.race-header-val{color:#1a1a1a;font-weight:700}

/* ============================================================
   PART 2: NEW — sign-up wizard specific styles
   ============================================================ */

.wizard-shell{width:100%}

/* Top row: back arrow / logo mark  —  progress bar  —  close button */
.wizard-topnav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}

.wizard-back{width:36px;height:36px;border-radius:50%;border:2px solid #FF6B00;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}
.wizard-back:hover{background:#fff3ec}
.wizard-back svg{width:16px;height:16px}

.wizard-logo-mark{height:26px;width:auto;display:block;flex-shrink:0}

.wizard-progress-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.wizard-progress-track{width:100%;max-width:280px;height:4px;border-radius:4px;background:#e8e8e8;overflow:hidden}
.wizard-progress-fill{height:100%;background:#FF6B00;border-radius:4px}
.wizard-progress-label{font-size:11px;color:#aaa;font-weight:600;letter-spacing:0.3px}

/* Close button: orange outline, white fill, orange X — per Steve's spec (24 Aug) */
.wizard-close{width:36px;height:36px;border-radius:6px;border:2px solid #FF6B00;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}
.wizard-close:hover{background:#fff3ec}
.wizard-close svg{width:14px;height:14px}

/* Info-bar style header, matching every other WellIntel report */
.wizard-info-bar{background:#fff;border-radius:6px;padding:14px 18px;margin-bottom:10px;border:1px solid #e8e8e8;border-left:3px solid #FF6B00;box-shadow:0 3px 10px rgba(0,0,0,0.10);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

.wizard-info-title{font-size:18px;font-weight:700;color:#1a1a1a}
.wizard-info-meta{font-size:12px;font-weight:400;color:#666;margin-top:6px}
.wizard-info-meta strong{color:#1a1a1a}
.wizard-info-login{font-size:12px;color:#666;text-align:right;margin-top:2px}
.wizard-info-login a{color:#FF6B00;font-weight:600;text-decoration:none}
.wizard-info-login a:hover{text-decoration:underline}

/* Second stacked info-bar: card-styled nav row holding back/progress/close */
.wizard-nav-bar{background:#fff;border-radius:6px;padding:14px 18px;margin-bottom:24px;border:1px solid #e8e8e8;border-left:3px solid #FF6B00;box-shadow:0 3px 10px rgba(0,0,0,0.10);display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Step 1 — plan cards */
.plan-grid{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.plan-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;border-left:3px solid #ccc;box-shadow:0 3px 10px rgba(0,0,0,0.10);padding:18px 20px;cursor:pointer;transition:box-shadow 0.15s,border-left-color 0.15s;position:relative}
.plan-card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.14)}
.plan-card.selected{border-left-color:#FF6B00;box-shadow:0 0 0 2px #FF6B00,0 3px 10px rgba(0,0,0,0.10)}
.plan-card.free.selected{border-left-color:#FF6B00}
.plan-card.free{border-left-color:#ccc}
.plan-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-right:32px}
.plan-name{font-size:16px;font-weight:700;color:#888;transition:color 0.15s}
.plan-card.selected .plan-name{color:#1a1a1a}
.plan-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:#fff3ec;color:#c44b00;border:1px solid #FF6B00}
.plan-price-row{display:flex;align-items:baseline;gap:8px;margin-top:10px;flex-wrap:wrap}
.plan-price{font-size:26px;font-weight:800;color:#888;transition:color 0.15s}
.plan-card.selected .plan-price{color:#1a1a1a}
.plan-price-period{font-size:12px;color:#888;font-weight:600}
.plan-price-strike{font-size:13px;color:#aaa;text-decoration:line-through}
.plan-renew-note{font-size:11px;color:#888;margin-top:6px}
.plan-features{margin-top:12px;list-style:none;display:flex;flex-direction:column;gap:6px}
.plan-features li{font-size:13px;color:#888;line-height:1.5;text-indent:-26px;padding-left:26px;transition:color 0.15s}
.plan-card.selected .plan-features li{color:#1a1a1a}
.plan-features li strong{color:inherit}
.plan-features li .plan-check{vertical-align:-3px;margin-right:6px}
.plan-features li.unavailable{color:#ccc}
.plan-check{width:16px;height:16px;flex-shrink:0}
.plan-check{color:#bbb;transition:color 0.15s}
.plan-card.selected .plan-check{color:#639922}

.plan-radio{position:absolute;top:18px;right:20px;width:20px;height:20px;border-radius:50%;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plan-card.selected .plan-radio{border-color:#FF6B00}
.plan-radio-dot{width:10px;height:10px;border-radius:50%;background:#FF6B00;display:none}
.plan-card.selected .plan-radio-dot{display:block}

/* Step 2 — split panel (plan summary left, account form right) */
.split-panel{display:flex;gap:24px;flex-wrap:wrap}
.split-panel-left{flex:1;min-width:220px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;border-left:3px solid #FF6B00;box-shadow:0 3px 10px rgba(0,0,0,0.10);padding:18px 20px;height:fit-content}
.split-panel-right{flex:1.4;min-width:280px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.10);padding:20px 22px}
.summary-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#aaa;font-weight:600;margin-bottom:6px}
.summary-plan-name{font-size:14px;font-weight:700;color:#1a1a1a}
.summary-plan-price{font-size:20px;font-weight:800;color:#1a1a1a;margin-top:6px}
.summary-plan-price span{font-size:12px;font-weight:600;color:#888}
.summary-divider{border:none;border-top:1px solid #f0f0f0;margin:14px 0}
.summary-line{display:flex;justify-content:space-between;font-size:12px;color:#666;padding:4px 0}
.summary-change-link{font-size:11px;color:#FF6B00;text-decoration:none;font-weight:600}
.summary-change-link:hover{text-decoration:underline}

.social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:6px;border:1px solid #ddd;background:#fff;font-size:13px;font-weight:600;color:#1a1a1a;cursor:pointer;margin-bottom:10px;font-family:inherit}
.social-btn:hover{background:#f7f7f7}
.social-btn svg{width:18px;height:18px}

.form-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:0.5px}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:#eee}

.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:600;color:#1a1a1a;margin-bottom:6px}
.form-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:inherit;color:#1a1a1a}
.form-input:focus{outline:none;border-color:#FF6B00;box-shadow:0 0 0 3px rgba(255,107,0,0.12)}
.form-hint{font-size:11px;color:#aaa;margin-top:4px}

/* Step 3 — payment */
.stripe-placeholder{border:1px solid #ddd;border-radius:6px;padding:14px;background:#fafafa;font-size:12px;color:#999;font-style:italic}
.promo-link{font-size:12px;color:#888;text-decoration:none;display:inline-block;margin-top:6px}
.promo-link:hover{color:#FF6B00}

/* Shared action row */
.wizard-actions{display:flex;justify-content:flex-end;margin-top:24px}
.btn-primary{background:#FF6B00;color:#fff;border:none;border-radius:6px;padding:12px 26px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background 0.15s;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
.btn-primary:hover{background:#e05f00}
.btn-secondary-link{font-size:12px;color:#888;text-decoration:none;text-align:center;display:block;margin-top:14px}
.btn-secondary-link:hover{color:#FF6B00}

/* Confirmation screen */
.confirmation-wrap{text-align:center;padding:40px 20px}
.confirmation-icon{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid #639922;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.confirmation-title{font-size:22px;font-weight:800;color:#1a1a1a}
.confirmation-sub{font-size:14px;color:#666;margin-top:8px;max-width:380px;margin-left:auto;margin-right:auto}
.confirmation-actions{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:10px}

@media(max-width:768px){
  .split-panel{flex-direction:column}
  .split-panel-left,.split-panel-right{min-width:0;width:100%}
}

/* Shared trust strip: quiet reassurance, reused on Step 1 and Step 3 */
.trust-strip{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid #f0f0f0}
.trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#888}
@media(max-width:768px){
  .trust-strip{align-items:flex-start}
  .trust-item{max-width:300px}
}
.trust-item svg{width:14px;height:14px;flex-shrink:0}
.trust-item strong{color:#1a1a1a;font-weight:700}

/* Offer text inside the second info-bar (Step 1 only) */
.offer-headline{font-size:18px;font-weight:700;color:#1a1a1a}
.offer-sub{font-size:13px;color:#666;margin-top:4px;line-height:1.5}

/* Featured plan card (PLUS Annual): visually larger, stronger shadow */
.plan-card.featured{transform:scale(1.03);box-shadow:0 10px 26px rgba(0,0,0,0.16);border-left-width:4px;margin:8px 0;position:relative}
/* Higher-specificity combined rule so the orange selection ring still shows
   when the featured card is also selected — without this, .featured's shadow
   silently wins over .selected's ring since they'd otherwise tie on specificity */
.plan-card.featured.selected{box-shadow:0 0 0 2px #FF6B00,0 10px 26px rgba(0,0,0,0.16)}
/* Login page */
.login-wrap{background:#fff;border:1px solid #e8e8e8;border-left:3px solid #FF6B00;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.10);padding:28px 32px;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box}
.login-title{font-size:16px;font-weight:700;color:#1a1a1a;text-align:center;margin-bottom:22px}
.login-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#aaa;font-size:12px}
.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:#e8e8e8}
.input-with-icon{position:relative;display:flex;align-items:center}
.input-with-icon .form-input{padding-right:40px}
.reveal-btn{position:absolute;right:10px;background:none;border:none;padding:0;cursor:pointer;color:#888;display:flex}
.reveal-btn:hover{color:#FF6B00}
.reveal-btn svg{width:18px;height:18px}
.login-forgot{display:inline-block;font-size:12px;color:#FF6B00;text-decoration:none;margin-bottom:20px}
.login-forgot:hover{text-decoration:underline}
.login-submit{width:100%}
.login-footer{text-align:center;font-size:12px;color:#666;margin-top:18px}
.login-footer a{color:#FF6B00;text-decoration:none;font-weight:600}
.login-footer a:hover{text-decoration:underline}
.login-sub{font-size:13px;color:#666;text-align:center;margin:-14px 0 20px;line-height:1.5}

.wi-slogan{font-family:'Inter',Helvetica,Arial,sans-serif;font-weight:200;font-size:18px;
  line-height:1.03;letter-spacing:0.073em;color:#fff;margin-left:-28px;white-space:nowrap;
  align-self:flex-end;margin-bottom:30px}
@media(max-width:768px){.wi-slogan{display:none}}
.account-menu-wrap{position:relative;flex-shrink:0}
.account-menu-icon{width:36px;height:36px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.account-menu-icon.is-plus{border:2px solid #FF6B00}
.account-menu-icon.is-free{border:2px solid #fff}
.account-menu-icon svg{width:23px;height:23px}
@media(min-width:701px){
  .account-menu-icon{width:47px;height:47px}
  .account-menu-icon svg{width:30px;height:30px}
}
.account-menu-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:260px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.18);z-index:20;overflow:hidden}
.account-menu-tabs{display:flex;padding:8px;gap:8px;border-bottom:1px solid #f0f0f0}
.account-tab{flex:1;text-align:center;padding:7px 0;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.15s;background:transparent;color:#666;border:1px solid #e8e8e8}
.account-tab.active{background:#fff3e0;color:#FF6B00;border:2px solid #FF6B00;box-shadow:0 2px 6px rgba(255,107,0,0.15)}
.account-menu-banner{background:#fff3ec;color:#c44b00;font-size:11px;font-weight:600;padding:8px 14px;text-align:center;border-bottom:1px solid #ffe4d1}
.account-menu-row{padding:9px 14px;font-size:13px;font-weight:600}
.account-menu-footer{display:flex;border-top:1px solid #f0f0f0;background:#fafafa}
.account-menu-footer-item{flex:1;text-align:center;padding:11px 0;font-size:13px;font-weight:700;cursor:pointer}
.account-menu-footer-item:hover{color:#FF6B00!important}

.wi-footer-base{margin-top:32px;padding-top:24px;text-align:center}
.wi-footer-social{display:flex;justify-content:center;gap:18px;margin-bottom:14px}
.wi-social-link{color:#444;display:inline-flex;transition:color 0.15s}
.wi-social-link:hover{color:#FF6B00}
.wi-social-link svg{width:22px;height:22px;display:block}
.wi-footer-legal{font-size:11px;color:#666;line-height:1.6}
.wi-inline-link{color:inherit;text-decoration:none;border-bottom:1px solid #ccc;transition:color 0.15s}
.wi-inline-link:hover{color:#FF6B00;border-bottom-color:#FF6B00}
.wi-footer-chev{display:none}
@media(max-width:768px){
  .wi-footer-grid{grid-template-columns:1fr;gap:0}
  .wi-footer-hide-mobile{display:none}
  .wi-footer-col{border-bottom:1px solid #666}
  .wi-footer-col-title{margin:0;padding:14px 0;cursor:pointer;display:flex;
    justify-content:space-between;align-items:center}
  .wi-footer-chev{display:inline-block;font-size:20px;color:#666;
    transition:transform 0.2s;line-height:1}
  .wi-footer-col.open .wi-footer-chev{transform:rotate(90deg)}
  .wi-footer-col .wi-footer-link{display:none}
  .wi-footer-col.open .wi-footer-link{display:block}
  .wi-footer-col.open .wi-footer-link.disabled{display:flex}
  .wi-footer-col.open{padding-bottom:8px}
  .wi-footer-link:active{color:#FF6B00}
  .wi-footer-col-title:active{color:#FF6B00}
  .wi-footer-col-title:active .wi-footer-chev{color:#FF6B00}
}

.summary-includes{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#aaa;font-weight:600;margin-top:14px}
.summary-features{margin-top:8px;list-style:none;display:flex;flex-direction:column;gap:6px}
.summary-features li{font-size:13px;color:#1a1a1a;line-height:1.4}
.summary-features li .plan-check{color:#639922;vertical-align:-3px;margin-right:6px}
.summary-features li.summary-soon{color:#aaa}
.summary-features li.summary-soon .plan-check{color:#ccc}

/* ------------------------------------------------------------------
   Appended from WELLINTEL_STYLE. This file is a stale copy of the
   shared stylesheet from late August, so shared changes have to be
   pasted rather than imported. The proper fix is converting these
   pages; until then, at least the header, footer and background match.
   ------------------------------------------------------------------ */

.page-header{position:relative;z-index:20;
  margin:0 -24px 39px;border-radius:0}
.wi-footer{position:relative;z-index:1;margin:40px -24px -24px}
@media(max-width:768px){
  .page-header{margin:0 -12px 20px}
  .wi-footer{margin:40px -12px -12px}
}

/* Three large blurred shapes drifting slowly behind the panel. Colour
   and light rather than objects - atmosphere, not decoration. No images
   and no library: three divs and a blur. */
.wi-blobs{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.wi-blob{position:absolute;border-radius:50%;filter:blur(55px);opacity:0.7}
.wi-blob-1{width:46vw;height:46vw;background:#ffc79e;top:-12vw;left:-8vw;
  animation:wiFloat1 16s ease-in-out infinite}
.wi-blob-2{width:38vw;height:38vw;background:#dcdce8;bottom:-10vw;right:-6vw;
  animation:wiFloat2 20s ease-in-out infinite}
.wi-blob-3{width:30vw;height:30vw;background:#bcd4e4;top:40%;right:20%;
  animation:wiFloat3 24s ease-in-out infinite}
@keyframes wiFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(14vw,10vw) scale(1.2)}
}
@keyframes wiFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-12vw,-9vw) scale(1.15)}
}
@keyframes wiFloat3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-10vw,8vw) scale(0.85)}
}
@media(prefers-reduced-motion:reduce){.wi-blob{animation:none}}
.fr-container{position:relative;z-index:1}



  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;600;700&display=swap');
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',Helvetica,Arial,sans-serif;background:#f0f0f0;color:#222;padding:24px}

  .page-header{margin-bottom:39px;background:#111111;padding:20px 24px;border-radius:8px;display:flex;align-items:center;gap:20px;min-height:148px}
  .wi-slogan{font-family:'Inter',Helvetica,Arial,sans-serif;font-weight:200;font-size:18px;
    line-height:1.03;letter-spacing:0.073em;color:#fff;margin-left:-28px;white-space:nowrap;
    align-self:flex-end;margin-bottom:30px}
  @media(max-width:768px){.wi-slogan{display:none}}
  @media(max-width:768px){
    .page-header{min-height:80px;padding:14px 16px;margin-bottom:20px}
    .page-header svg{height:65px!important}
  }
  .mobile-system-dropdown{display:none}
  @media(max-width:768px){
    .mobile-system-dropdown{display:block;position:relative;margin-bottom:10px;width:100%}
    .dd-trigger{background:#fff;border:1px solid #e8e8e8;border-radius:6px;padding:12px 16px;box-shadow:0 3px 10px rgba(0,0,0,0.10);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;color:#1a1a1a}
    .dd-chevron{transition:transform 0.2s;flex-shrink:0}
    .dd-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.10);overflow:hidden;z-index:10}
    .dd-list{max-height:min(460px,65vh);overflow-y:auto;
      background:
        linear-gradient(#fff 30%,rgba(255,255,255,0)) center top/100% 24px no-repeat local,
        linear-gradient(rgba(255,255,255,0),#fff 70%) center bottom/100% 24px no-repeat local,
        radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.14),transparent) center top/100% 8px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.14),transparent) center bottom/100% 8px no-repeat scroll}
    .dd-row{padding:10px 16px;font-size:14px;font-weight:600;color:#1a1a1a;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
  }

  .pill{font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;background:#f0f0f0;color:#666;border:1px solid #666}
  .pill.green{background:#eaf3de;color:#3b6d11;border:1px solid #97c459}
  .pill.blue{background:#e8f0fb;color:#1a4fa0;border:1px solid #1a6b9a}
  .pill.gold{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
  .pill.purple{background:#f3e8fb;color:#6b21a8;border:1px solid #7c3aed}
  .pill.lilac{background:#f5f0ff;color:#6d3fc9;border:1px solid #a78bfa}
  .pill.red{background:#fdecea;color:#a32d2d;border:1px solid #e74c3c}
  .pill.orange{background:#fff3f0;color:#c44b00;border:1px solid #FF6B00}

  .summary-strip{background:#fff;border-radius:8px;padding:12px 20px;margin-bottom:24px;display:flex;gap:12px;flex-wrap:wrap;border:1px solid #e8e8e8;align-items:center;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
  .info-bar{background:#fff;border-radius:6px;padding:10px 14px;font-size:12px;color:#666;margin-bottom:20px;display:flex;gap:20px;flex-wrap:wrap;border:1px solid #e8e8e8;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
  .info-bar strong{color:#1a1a1a}
  /* Report heading (shared), built by build_report_heading() */
  .rh{background:#fff;border-left:3px solid var(--rh);border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.10);overflow:hidden;color:#1a1a1a;margin-bottom:10px}
  .rh strong{color:#1a1a1a}
  .rh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 10px}
  .rh-title{display:flex;align-items:center;font-size:18px;font-weight:700}
  .rh-date{font-size:12px;font-weight:700}
  .rh-rule{margin:0 18px;height:2px;background:var(--rh)}
  .rh-stats{margin:0 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .rh-stat{padding:9px 14px;border-right:1px solid #e4e4e4}
  .rh-stat:first-child{padding-left:0}
  .rh-stat:last-child{padding-right:0;border-right:0}
  .rh-datecell{display:none}
  .rh-datecell + .rh-stat{padding-left:0}
  .rh-label{font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#666}
  .rh-val{margin-top:2px;font-size:12px;font-weight:700}
  .rh-hl .rh-label,.rh-hl .rh-val{color:color-mix(in srgb,var(--rh) 65%,#000)}
  .rh-hair{margin:0 18px;height:1px;background:#e4e4e4}
  .rh-lines{padding:9px 18px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#666}
  .rh-text{margin:0;padding:9px 18px 12px;font-size:12px;line-height:1.6;color:#666}
  .rh-hint{display:block;font-weight:700;color:#1a1a1a}
  .rh-qa{margin:0 18px;padding-bottom:4px;display:grid;grid-template-columns:150px minmax(0,1fr);font-size:12px;line-height:1.6}
  .rh-q{padding:8px 14px 8px 0;font-weight:700;border-bottom:1px solid #e4e4e4}
  .rh-a{padding:8px 0;color:#666;border-bottom:1px solid #e4e4e4}
  .rh-qa > :nth-last-child(-n+2){border-bottom:0}
  @media(max-width:768px){
    .rh-top{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px 10px}
    .rh-rule,.rh-stats,.rh-hair,.rh-qa{margin-left:14px;margin-right:14px}
    .rh-date{display:none}
    .rh-datecell{display:block}
    .rh-stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
    .rh-stat,.rh-stat:first-child,.rh-stat:last-child{padding:8px 10px 8px 0;border-right:0;border-bottom:1px solid #eee}
    .rh-lines,.rh-text{padding-left:14px;padding-right:14px}
    .rh-qa{grid-template-columns:1fr}
    .rh-q{padding-bottom:0;border-bottom:0}
    .rh-a{padding-top:2px}
  }
  .perf-panel{background:#fff;border-radius:8px;padding:16px 14px;margin-bottom:20px;box-shadow:0 3px 10px rgba(0,0,0,0.10);border:1px solid #e8e8e8}
  .perf-panel-title{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:12px}
  .perf-period-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .perf-period-btn{font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;background:#fff3f0;color:#c44b00;border:1px solid #FF6B00;cursor:pointer;transition:all 0.15s}
  .perf-period-btn:hover{background:#f5f5f5}
  .perf-period-btn.active{background:#FF6B00;color:#fff;border-color:#FF6B00}
  .perf-stat-row{display:flex;gap:16px}
  .perf-stat{background:#f7f7f7;border-radius:8px;padding:14px 20px;flex:1}
  .perf-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#aaa;font-weight:600;margin-bottom:6px}
  .perf-stat-value{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}

  .course-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:#888;margin:16px 0 8px}

  .horse-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;border-left:3px solid #10b981;margin-bottom:12px;overflow:hidden;transition:opacity 0.3s;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
  .fr-container{margin:0 15vw}
  @media(max-width:768px){.fr-container{margin:0}}

  /* Pages carrying a skyscraper opt in with .with-ad. Content and rail are
     centred together as one block, so on a wide monitor there is equal space
     either side rather than the content sitting left of centre.
     Deliberately not applied to racecards, which need the full width for
     their eleven-column grid, nor to the legal, About and contact pages. */
  .fr-container.with-ad{margin:0 auto;max-width:1200px;padding-right:200px;
    position:relative;box-sizing:border-box;min-height:640px}
  .wi-ad-rail{position:absolute;top:0;right:0;width:160px}
  .wi-ad-rail .wi-ad-slot{position:sticky;top:20px;width:160px;height:600px;
    display:flex;align-items:center;justify-content:center;
    background:#fafafa;border:1px solid #eee;border-radius:4px;
    font-size:11px;color:#bbb}
  @media(max-width:1200px){
    .fr-container.with-ad{padding-right:0;max-width:none;margin:0 15vw}
    .wi-ad-rail{display:none}
  }
  @media(max-width:768px){.fr-container.with-ad{margin:0}}
  /* Mobile-only inline ad slot - the skyscraper is hidden below 1200px
     with nothing to replace it on a phone; this gives mobile visitors
     the same kind of placeholder, inline rather than sticky, at the
     standard 300x50 mobile banner size. Hidden above 768px, where the
     skyscraper is doing the job instead. */
  .wi-mobile-ad{display:none}
  @media(max-width:768px){
    .wi-mobile-ad{display:flex;justify-content:center;margin:14px 0}
    .wi-mobile-ad .wi-ad-slot{width:300px;height:50px;max-width:calc(100% - 32px);
      display:flex;align-items:center;justify-content:center;
      background:#fafafa;border:1px solid #eee;border-radius:4px;
      font-size:11px;color:#bbb}
  }
  @media(max-width:768px){body{padding:12px}}
/* Header and footer run edge to edge. The body's 24px padding insets
   everything, so both are pulled back out at the sides rather than
   restructuring every page. The header keeps its top margin, leaving a
   band of background above it; the footer is flush to the foot. */
.page-header{position:relative;z-index:20;
  margin:0 -24px 39px;border-radius:0}
/* Dot-matrix texture behind the banner - data building from left to right.
   Darkened slightly overall so the logo reads, and a little more on the
   right so the menu button stays clear. Photo: Unsplash. */
.page-header{background:#080808}
.wi-footer{position:relative;z-index:1;margin:40px -24px -24px}
@media(max-width:768px){
  .page-header{margin:0 -12px 20px}
  .wi-footer{margin:40px -12px -12px}
}
  /* Fading the card itself would take the Restore button with it -
     opacity on a parent cannot be undone by a child. So the contents
     fade and the button is excluded, leaving the one thing worth
     clicking at full strength. */
  .horse-card.removed{border-left-color:#ccc;background:#fafafa}
  .horse-card.removed > *:not(.btn-row){opacity:0.4}
  .horse-card.removed .btn-row > *:not(.btn-accept){opacity:0.4}
  .horse-card.qr{border-left-color:#10b981}
  .horse-card.qr.tier2{border-left-color:#10b981}
  .horse-card.tier2{border-left-color:#10b981}
  .horse-card.cd{border-left-color:#1a6b9a}
  .horse-card.ty{border-left-color:#a78bfa}
  .horse-card.three-yo{border-left-color:#7c3aed}
  .horse-card.lt{border-left-color:#e74c3c}
  .horse-card.cs{border-left-color:#7c3aed}
  .horse-card.fth{border-left-color:#f59e0b}
  .horse-card.cx{border-left-color:#e74c3c}
  .horse-card.code-switch{border-left-color:#7aaaf0}
  .horse-card.hot{box-shadow:0 0 0 2px #f0c040;border-color:#f0c040}
  .horse-card.spotlight{border-left-color:#f0c040;border-left-width:4px;box-shadow:0 2px 8px rgba(240,192,64,0.15)}
  .horse-card.sl{border-left-color:#f0c040;border-left-width:4px}

  .card-header{padding:12px 16px;border-bottom:1px solid #f0f0f0}
  .card-header-flex{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .card-header-main{flex:1;min-width:0}
  .horse-name{font-size:16px;font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .hot-badge{font-size:12px;padding:2px 8px;border-radius:12px;background:#fff3cd;color:#9a6700;border:1px solid #f0c040;font-weight:700}
  .race-info{font-size:12px;color:#1a1a1a;font-weight:700;margin-top:3px}
  .badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .signal-comment{font-size:12px;color:#1a1a1a;font-weight:700;margin-top:10px;line-height:1.5}

  /* inline-flex and centring, so a badge with plain text sits level
     with one carrying an emoji - the emoji sets a taller line box. */
  .badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;
    display:inline-flex;align-items:center;justify-content:center}
  .badge-qr{background:#ecfdf5;color:#047857;border:1px solid #10b981}
  .badge-cd{background:#e0eaf5;color:#1a6b9a;border:1px solid #1a6b9a}
  .badge-ty{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
  .badge-lt{background:#fdecea;color:#a32d2d;border:1px solid #f09595}
  .badge-sl{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
  .badge-cs{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
  .badge-repeat{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
  .badge-pen{background:#fdecea;color:#a32d2d;border:1px solid #f09595}
  .badge-or{background:#faeeda;color:#854f0b;border:1px solid #ef9f27}
  .badge-hot{background:#fff3cd;color:#9a6700;border:1px solid #f0c040}
  .badge-cx{background:#fff3e0;color:#c44b00;border:1px solid #FF6B00}
  .badge-fth{background:#fffbeb;color:#b45309;border:1px solid #f59e0b}
  .badge-drop{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
  .badge-well{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
  .badge-adv{background:#eaf3de;color:#3b6d11;border:1px solid #639922}
  .badge-class{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}
  .badge-switch{background:#ede8fb;color:#5b21b6;border:1px solid #a78bfa}
  .badge-tier2{background:#fff3cd;color:#856404;border:1px solid #f0a500}
  .badge-age{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
  .badge-dist{background:#fdecea;color:#a32d2d;border:1px solid #f09595}
  .badge-course{background:#f3e8fb;color:#7c3aed;border:1px solid #7c3aed}
  .badge-going{background:#fef9e7;color:#9a6700;border:1px solid #f0c040}
  .badge-avg{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}
  .badge-spotlight{background:#fef9e7;color:#9a6700;border:1px solid #f0c040;font-size:12px}
  .badge-claim{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}
  .badge-odds{background:#eaf3de;color:#3b6d11;border:1px solid #639922}

  .odds-pill-inline{background:#FF6B00;border:1px solid #FF6B00;color:#fff;font-size:13px;font-weight:900;letter-spacing:1px;padding:2px 10px;border-radius:20px}
  .odds-pill-label-inline{font-size:9px;font-weight:600;letter-spacing:0.5px;color:#888;text-transform:uppercase;text-align:center}

  .card-body{display:grid;grid-template-columns:1fr 1fr 1fr}
  .spotlight-system-block{background:#fff;padding:12px 16px;border-right:1px solid #f0f0f0}
  .spotlight-system-block:last-child{border-right:none}
  .spotlight-system-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#aaa;margin-bottom:8px;font-weight:600}
  .match-tick{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:#3b6d11}
  .card-body.four-col{grid-template-columns:1fr 1fr 1fr 1fr}
  .card-body.two-col{grid-template-columns:1fr 1fr}
  .card-body.five-col{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
  .card-section{padding:12px 16px;border-right:1px solid #f0f0f0}
  .card-section:last-child{border-right:none}
  .section-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#aaa;margin-bottom:8px;font-weight:600}
  .data-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #f8f8f8}
  .data-row:last-child{border-bottom:none}
  .data-label{font-size:12px;color:#888}
  .data-val{font-size:13px;font-weight:600;color:#1a1a1a;text-align:right}
  .data-val.green{color:#3b6d11}
  .data-val.blue{color:#1a4fa0}
  .data-val.purple{color:#6b21a8}
  .data-val.gold{color:#9a6700}

  .or-compare{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
  .or-box{text-align:center}
  .or-num{font-size:20px;font-weight:600;color:#1a1a1a}
  .or-num.green{color:#3b6d11}
  .or-lbl{font-size:11px;color:#aaa;margin-top:2px}
  .or-arrow{font-size:16px;color:#888}
  .pen-num{font-size:20px;font-weight:600;color:#a32d2d}
  .pen-lbl{font-size:11px;color:#aaa;margin-top:2px}

  .adv-pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px;margin-top:8px;display:inline-block}
  .tier2-header{background:#fff3cd;color:#856404;border:1px solid #f0a500}
  .adv-green{background:#eaf3de;color:#3b6d11;border:1px solid #97c459}
  .adv-amber{background:#faeeda;color:#854f0b;border:1px solid #ef9f27}
  .adv-blue{background:#e8f0fb;color:#1a4fa0;border:1px solid #7aaaf0}

  .win-box{background:#f3e8fb;border-radius:6px;padding:10px 12px;margin-top:8px;border:1px solid #c084fc}
  .win-box-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#6b21a8;margin-bottom:6px;font-weight:700}
  .win-box-race{font-size:12px;color:#1a1a1a;font-weight:600}
  .win-box-detail{font-size:11px;color:#888;margin-top:3px}

  .form-chars{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
  .fc{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
  .fc-win{background:#eaf3de;color:#3b6d11}
  .fc-place{background:#faeeda;color:#854f0b}
  .fc-unpl{background:#f0f0f0;color:#888}
  .fc-incident{background:#fbe9e7;color:#a32d2d}

  .last-run{font-size:11px;color:#aaa;margin-top:8px}
  .last-run strong{color:#1a1a1a}
  /* Lines up with the info bar's text above it, which sits 14px in
     past its 3px left trim. */
  .none-msg{color:#888;padding:16px 0 16px 17px;font-size:14px}
  .pl-section{background:#fff;border-radius:8px;padding:20px 24px;margin-top:32px;margin-bottom:24px;border:1px solid #e8e8e8}
  .pl-title{font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:16px}
  .pl-hide-mobile{display:table-cell}
  @media(max-width:768px){
    .pl-hide-mobile{display:none}
    .pl-section{padding:16px 10px}
    .pl-section table td,.pl-section table th{padding:8px 4px!important}
  }
  .footer{font-size:11px;color:#aaa;margin-top:24px;padding-top:12px;border-top:1px solid #e8e8e8}
  .wi-footer{background:#fff;border-top:1px solid #e8e8e8;margin-top:40px;padding:32px 24px 58px}
  .wi-footer-inner{max-width:1200px;margin:0 auto}
  .wi-footer-logo{height:43px;width:auto;display:block;margin-bottom:24px;margin-left:-16px}
  .wi-footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
  .wi-footer-col-title{font-size:13px;font-weight:700;color:#666;margin-bottom:12px}
  .wi-footer-link{display:block;font-size:13px;color:#666;text-decoration:none;margin-bottom:10px}
  .wi-footer-link:hover{color:#FF6B00}
  .wi-footer-link.disabled{color:#ccc;pointer-events:none;display:flex;align-items:center;gap:6px}
  .wi-footer-soon-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;background:#f0f0f0;color:#999;border:1px solid #ddd;text-transform:uppercase;letter-spacing:0.3px}
  .wi-back-to-top{position:fixed;bottom:24px;right:24px;width:48px;height:48px;
    border-radius:50%;background:#fff;border:2px solid #FF6B00;display:none;
    align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);z-index:1000;transition:opacity 0.2s}
  @media(hover:hover){.wi-back-to-top:hover{background:#ffe8d6}}
  .wi-back-to-top svg{width:20px;height:20px}
  @media(max-width:900px){.wi-footer-grid{grid-template-columns:repeat(2,1fr)}}
  .wi-inline-link{color:inherit;text-decoration:none;border-bottom:1px solid #ccc;transition:color 0.15s}
  .wi-inline-link:hover{color:#FF6B00;border-bottom-color:#FF6B00}
  .wi-footer-base{margin-top:32px;padding-top:24px;text-align:center}
  .wi-footer-social{display:flex;justify-content:center;gap:18px;margin-bottom:14px}
  .wi-social-link{color:#444;display:inline-flex;transition:color 0.15s}
  .wi-social-link:hover{color:#FF6B00}
  .wi-social-link svg{width:22px;height:22px;display:block}
  .wi-footer-legal{font-size:11px;color:#666;line-height:1.6}
  .wi-footer-chev{display:none}
  @media(max-width:768px){
    .wi-footer-grid{grid-template-columns:1fr;gap:0}
    .wi-footer-hide-mobile{display:none}
    .wi-footer-col{border-bottom:1px solid #666}
    .wi-footer-col-title{margin:0;padding:14px 0;cursor:pointer;display:flex;
      justify-content:space-between;align-items:center}
    .wi-footer-chev{display:inline-block;font-size:20px;color:#666;
      transition:transform 0.2s;line-height:1}
    .wi-footer-col.open .wi-footer-chev{transform:rotate(90deg)}
    .wi-footer-col .wi-footer-link{display:none}
    .wi-footer-col.open .wi-footer-link{display:block}
    .wi-footer-col.open .wi-footer-link.disabled{display:flex}
    .wi-footer-col.open{padding-bottom:8px}
    .wi-footer-link:active{color:#FF6B00}
    .wi-footer-col-title:active{color:#FF6B00}
    .wi-footer-col-title:active .wi-footer-chev{color:#FF6B00}
  }


  @media(max-width:900px){.card-body.four-col{grid-template-columns:1fr 1fr}.card-body.five-col{grid-template-columns:1fr 1fr}}
  @media(max-width:768px){.card-body.two-col{grid-template-columns:1fr}}
  @media(max-width:768px){.card-body{grid-template-columns:1fr}.card-body.four-col{grid-template-columns:1fr}.card-body.five-col{grid-template-columns:1fr}.card-section{border-right:none;border-bottom:1px solid #f0f0f0}}
  .recent-form-block{margin-top:10px}
  .recent-form-label-inline{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#1a1a1a;font-weight:600}
  .recent-form-text{font-size:14px;color:#888;font-weight:700;letter-spacing:1px}
  .recent-form-toggle{cursor:pointer;font-size:12px;margin-top:6px;font-weight:600;display:inline-block}
  .recent-form-more{color:#1a1a1a;display:inline-flex;align-items:center;gap:10px}
  .recent-form-less{color:#FF6B00;display:inline-flex;align-items:center;gap:10px}
  .rf-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:11px;font-weight:700;line-height:1;flex-shrink:0}
  .rf-icon-more{background:#1a1a1a;color:#fff}
  .rf-icon-less{background:#FF6B00;color:#fff}
  .recent-form-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;color:#1a1a1a}
  .recent-form-table th{text-align:left;padding:6px 8px;border-bottom:1px solid #e8e8e8;font-weight:700;color:#1a1a1a;font-size:10px;text-transform:uppercase;letter-spacing:0.5px}
  .recent-form-table td{padding:6px 8px;border-bottom:1px solid #f0f0f0;color:#1a1a1a}
  .recent-form-table td:nth-child(3){white-space:nowrap}
  .desktop-only{display:table-cell}
  @media(max-width:1200px){.desktop-only{display:none}}
  .cl-mobile{display:none}
  .cl-desktop{display:inline}
  @media(max-width:1200px){.cl-mobile{display:inline}.cl-desktop{display:none}}
  @media(max-width:768px){
    .recent-form-table th{padding:4px 3px;font-size:9px}
    .recent-form-table th:first-child{padding-left:8px}
    .recent-form-table td{padding:4px 3px;font-size:11px}
    .recent-form-table td:first-child{padding-left:8px}
  }
  .racecard-link{color:inherit;text-decoration:none;border-bottom:1px dotted #ccc;transition:border-bottom-color 0.15s, border-bottom-style 0.15s}
  .racecard-link:hover{border-bottom:1px solid #1a1a1a}
  .race-header-block{padding:16px 20px;background:#f7f7f7;border-radius:8px;position:relative}
  .wi-selection-badge{position:absolute;bottom:12px;right:16px;width:32px;height:32px}
  .race-header-date{font-size:12px;color:#888;font-weight:400}
  .race-header-timecourse{display:flex;align-items:baseline;gap:9px;margin-top:16px}
  .race-header-time{font-size:23px;font-weight:700;color:#1a1a1a}
  .race-header-course{font-size:23px;font-weight:700;color:#1a1a1a}
  .race-header-name{font-size:14px;font-weight:700;color:#1a1a1a;margin-top:5px}
  .race-header-details-row{display:flex;justify-content:space-between;margin-top:7px;flex-wrap:wrap;gap:12px}
  .race-header-details{font-size:12px;color:#888}
  .race-header-compact{border-bottom:1px solid #f0f0f0;padding-bottom:14px;margin-bottom:0}
  .race-header-compact .race-header-time{font-size:21px}
  .race-header-compact .race-header-course{font-size:21px}
  .race-header-compact .race-header-name{font-size:13px}
  .race-header-val{color:#1a1a1a;font-weight:700}
  .account-menu-wrap{position:relative;flex-shrink:0}
  .account-menu-icon{width:36px;height:36px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .wi-bookmark-header-icon{width:36px;height:36px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
  .wi-bookmark-header-icon.is-plus{border:2px solid #FF6B00}
  .wi-bookmark-header-icon.is-free{border:2px solid #fff}
  .wi-bookmark-header-icon svg{width:22px;height:22px}
  .wi-bookmark-header-badge{position:absolute;top:2px;right:2px;background:#fff;color:#FF6B00;font-size:10px;font-weight:600;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #111111}
  .wi-notepad-wrap{position:relative;flex-shrink:0;margin-left:auto}
  .wi-notepad-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:340px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.18);z-index:20;overflow:hidden}
  @media(max-width:768px){
    .wi-notepad-panel{position:fixed;top:70px;left:50%;right:auto;transform:translateX(-50%);width:90vw;max-width:340px}
  }
  .wi-notepad-header{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e8e8}
  .wi-notepad-title{color:#1a1a1a;font-weight:700;font-size:14px}
  .wi-notepad-sub{color:#888;font-size:12px;font-weight:600}
  .wi-notepad-row{display:flex;align-items:center;gap:13px;padding:13px 20px;border-left:4px solid #FF6B00;border-bottom:1px solid #f0f0f0}
  .wi-notepad-silk{width:30px;height:30px;border-radius:6px;flex-shrink:0;background:#f7f7f7;object-fit:cover}
  .wi-notepad-name{font-weight:600;font-size:13px;color:#1a1a1a}
  .wi-notepad-meta{font-size:12px;color:#888;font-weight:600;margin-top:2px}
  .wi-notepad-pill{background:#FF6B00;color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:16px;flex-shrink:0;white-space:nowrap}
  .wi-notepad-pill.empty{background:#f0f0f0;color:#999}
  .wi-notepad-remove{background:#f0f0f0;color:#888;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .wi-notepad-remove:hover{color:#fff;background:#e74c3c}
  .wi-notepad-footer{background:#fafafa;border-top:1px solid #e8e8e8;padding:13px 20px;display:flex;align-items:center;justify-content:space-between}
  .wi-notepad-clear{background:none;border:none;color:#1a1a1a;font-size:13px;font-weight:700;cursor:pointer;padding:0;font-family:inherit}
  .wi-notepad-clear:hover{color:#FF6B00}
  .wi-notepad-empty{padding:24px 20px;text-align:center;color:#888;font-size:13px;font-weight:600}
  .account-menu-icon.is-plus{border:2px solid #FF6B00}
  .account-menu-icon.is-free{border:2px solid #fff}
  .account-menu-icon svg{width:23px;height:23px}
  @media(min-width:701px){
    .account-menu-icon{width:47px;height:47px}
    .wi-bookmark-header-icon{width:47px;height:47px}
    .wi-bookmark-header-icon svg{width:24px;height:24px}
    .account-menu-icon svg{width:30px;height:30px}
  }
  .account-menu-badge{position:absolute;top:50%;left:-11px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:#fff3e0;border:1.5px solid #FF6B00;display:flex;align-items:center;justify-content:center}
  .account-menu-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:260px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.18);z-index:20;overflow:hidden}
  /* On mobile, anchoring to the hamburger's own position leaves the
     panel sitting off toward the right edge rather than centred on
     the screen. Shown/hidden via style.display, not a class, so this
     targets the id directly - same fix as the notepad panel. */
  @media(max-width:768px){
    #account-panel{position:fixed!important;top:70px;left:50%!important;
      right:auto!important;transform:translateX(-50%);width:90vw;max-width:320px}
  }
  .account-menu-tabs{display:flex;padding:10px;gap:8px;background:#fff;border-bottom:1px solid #f3e2d6}
  .account-tab{flex:1;text-align:center;padding:7px 0;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.15s;background:transparent;color:#888;border:2px solid transparent;text-transform:uppercase;letter-spacing:0.06em}
  .account-tab:not(.active):hover{color:#1a1a1a;background:#f7f7f7}
  .account-tab.active{background:#FF6B00;color:#fff;border:2px solid #FF6B00;box-shadow:0 3px 10px rgba(0,0,0,0.10)}
  .account-menu-banner{background:#fff3ec;color:#c44b00;font-size:11px;font-weight:600;padding:8px 14px;text-align:center;border-bottom:1px solid #ffe4d1}
  .account-menu-row{padding:9px 14px;font-size:13px;font-weight:600}
  .account-menu-footer{display:flex;border-top:1px solid #f0f0f0;background:#fafafa}
  .account-menu-footer-item{flex:1;text-align:center;padding:11px 0;font-size:13px;font-weight:700;cursor:pointer}
  .account-menu-footer-item:hover{color:#FF6B00 !important}
  /* Slide-in menu panel (replaces the old dropdown) */
  .account-menu-icon{position:relative;z-index:30;color:#fff;transition:background .3s}
  .account-menu-icon.is-plus{color:#FF6B00}
  .account-menu-icon.is-open{border-color:#FF6B00;background:#fff;color:#FF6B00}
  .account-menu-icon svg path{transition:transform .3s ease,opacity .2s ease;transform-origin:12px 12px}
  .account-menu-icon.is-open .wi-l1{transform:rotate(45deg) translateY(5px)}
  .account-menu-icon.is-open .wi-l2{opacity:0}
  .account-menu-icon.is-open .wi-l3{transform:rotate(-45deg) translateY(-5px)}
  .wi-sp-overlay{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s}
  .wi-sp-overlay.is-open{opacity:1;pointer-events:auto}
  .wi-sp{--sp-bg:#fff;--sp-tx:#1a1a1a;--sp-ln:#ececec;--sp-gr:#b5b5b5;--sp-lk:#444;--sp-hv:#f7f7f7;
    position:fixed;top:0;right:0;bottom:0;width:min(280px,80vw);z-index:20;background:var(--sp-bg);
    box-shadow:-8px 0 28px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow-y:auto;
    transform:translateX(105%);visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
  .wi-sp.is-open{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
  .wi-sp-tabs{display:flex;flex-direction:column;gap:4px;padding:31px 28px 0;font-family:Hiragino Mincho ProN,Hiragino Mincho Pro,Georgia,Times New Roman,serif;font-size:20px;font-weight:600;letter-spacing:.013em}
  .wi-sp-tab{background:none;border:0;padding:2px 0;text-align:left;font:inherit;line-height:1.2;color:var(--sp-gr);cursor:pointer}
  .wi-sp-tab.on{color:#FF6B00}
  .wi-sp-tab:not(.on)::after{content:'›';color:#FF6B00;font-family:Inter,Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;margin-left:8px;display:inline-block;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
  @media(hover:hover){.wi-sp-tab:not(.on):hover{color:var(--sp-tx)}.wi-sp-tab:not(.on):hover::after{opacity:1;transform:translateX(0)}}
  .wi-sp-list{display:none;flex:none;padding:14px 28px 0}
  .wi-sp-list.on{display:block}
  .wi-sp-row{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--sp-ln);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--sp-tx);text-decoration:none}
  .wi-sp-row:last-child{border-bottom:none}
  .wi-sp-row.cur{color:#FF6B00}
  .wi-sp-row.dim{color:var(--sp-gr)}
  .wi-sp-row.lock{color:#bbb}
  .wi-sp-row.dim .wi-sp-ic,.wi-sp-row.lock .wi-sp-ic{opacity:.45}
  .wi-sp-ic{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
  .wi-sp-ic svg{width:16px;height:16px}
  .wi-sp-hole{fill:var(--sp-bg)}
  .wi-sp-soon{margin-left:6px;font-size:9px;font-weight:700;background:var(--sp-ln);color:var(--sp-gr);padding:2px 6px;border-radius:8px}
  a.wi-sp-row::after,.wi-sp-links a::after{content:'›';color:#FF6B00;font-size:18px;font-weight:700;line-height:1;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
  .wi-sp-links a::after{margin-left:8px}
  @media(hover:hover){a.wi-sp-row:hover::after,.wi-sp-links a:hover::after{opacity:1;transform:translateX(0)}}
  a.wi-sp-row:active::after,.wi-sp-links a:active::after{opacity:1;transform:translateX(0)}
  .wi-sp-links{border-top:1px solid var(--sp-ln);margin:0 28px;padding:28px 0 28px;display:flex;flex-direction:column;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
  .wi-sp-links a{color:var(--sp-lk);text-decoration:none;display:block;padding:9px 0}
  .wi-sp-links a:last-child{border-bottom:none}
  .wi-sp-note{display:flex;align-items:center;gap:7px;padding:2px 0 13px;border-bottom:1px solid var(--sp-ln);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--sp-gr)}
  .wi-sp-note a{color:#FF6B00;font-weight:700;text-decoration:none}
  .wi-sp-hint{padding:2px 0 13px;border-bottom:1px solid var(--sp-ln);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--sp-gr)}
  @media(max-width:480px){.wi-sp{width:80vw}}
  @media(min-width:769px){.wi-sp{width:448px}.wi-sp-tabs{padding-top:77px}.wi-sp-tabs,.wi-sp-list{padding-left:calc(50% - 140px);padding-right:calc(50% - 140px)}.wi-sp-links{margin:0 calc(50% - 140px)}}


/* Three large blurred shapes drifting slowly behind the panel. Colour
   and light rather than objects - atmosphere, not decoration. No images
   and no library: three divs and a blur. */
.wi-blobs{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.wi-blob{position:absolute;border-radius:50%;filter:blur(55px);opacity:0.20}
.wi-blob-1{width:46vw;height:46vw;background:#ffc79e;top:-12vw;left:-8vw;
  animation:wiFloat1 16s ease-in-out infinite}
.wi-blob-2{width:38vw;height:38vw;background:#dcdce8;bottom:-10vw;right:-6vw;
  animation:wiFloat2 20s ease-in-out infinite}
.wi-blob-3{width:30vw;height:30vw;background:#bcd4e4;top:40%;right:20%;
  animation:wiFloat3 24s ease-in-out infinite}
@keyframes wiFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(14vw,10vw) scale(1.2)}
}
@keyframes wiFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-12vw,-9vw) scale(1.15)}
}
@keyframes wiFloat3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-10vw,8vw) scale(0.85)}
}
@media(prefers-reduced-motion:reduce){.wi-blob{animation:none}}
.fr-container{position:relative;z-index:1}