/* How It Works: shared by the app (/app) and the landing page (/) */
/* How It Works v2: picture-first, 5th-grade words */
.hw-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:8px 0 20px}
.hw-eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.hw-h1{font-size:clamp(28px,4vw,42px);font-weight:900;line-height:1.05;letter-spacing:-.02em}
.hw-h1 em{font-style:normal;color:var(--gold)}
.hw-lead{font-size:17px;line-height:1.55;color:#c9c9d1;margin-top:12px;max-width:34em}
.g{color:var(--green)} .gold{color:var(--gold)}
.hw-anim{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;animation:hwCard 8s infinite}
.hw-anim-top{display:flex;align-items:center;gap:8px;position:relative}
.hw-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--card2);animation:hwWatch 8s infinite}
.hw-badge.fire{position:absolute;left:0;opacity:0;background:rgba(245,184,46,.12);color:var(--gold);border-color:rgba(245,184,46,.4);animation:hwFire 8s infinite}
.hw-clock{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.hw-anim-boxes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hw-anim-boxes span{font-size:12px;font-weight:600;padding:8px;border-radius:9px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.hw-anim-boxes span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid #3a3a42;margin-right:6px;vertical-align:-1px}
.hw-anim-boxes span:nth-child(1){animation:hwB1 8s infinite} .hw-anim-boxes span:nth-child(2){animation:hwB2 8s infinite}
.hw-anim-boxes span:nth-child(3){animation:hwB3 8s infinite} .hw-anim-boxes span:nth-child(4){animation:hwB4 8s infinite}
.hw-anim-boxes span:nth-child(1)::before{animation:hwD1 8s infinite} .hw-anim-boxes span:nth-child(2)::before{animation:hwD2 8s infinite}
.hw-anim-boxes span:nth-child(3)::before{animation:hwD3 8s infinite} .hw-anim-boxes span:nth-child(4)::before{animation:hwD4 8s infinite}
.hw-anim-call{font-size:18px;font-weight:800;color:var(--green);padding:10px;border-radius:10px;background:var(--bg);border:1px solid var(--line);opacity:0;animation:hwCall 8s infinite}
@keyframes hwB1{0%,12%{color:var(--muted);border-color:var(--line)}15%,92%{color:var(--text);border-color:rgba(43,214,123,.4)}100%{color:var(--muted)}}
@keyframes hwB2{0%,27%{color:var(--muted);border-color:var(--line)}30%,92%{color:var(--text);border-color:rgba(43,214,123,.4)}100%{color:var(--muted)}}
@keyframes hwB3{0%,42%{color:var(--muted);border-color:var(--line)}45%,92%{color:var(--text);border-color:rgba(43,214,123,.4)}100%{color:var(--muted)}}
@keyframes hwB4{0%,57%{color:var(--muted);border-color:var(--line)}60%,92%{color:var(--text);border-color:rgba(43,214,123,.4)}100%{color:var(--muted)}}
@keyframes hwD1{0%,12%{background:none;border-color:#3a3a42}15%,92%{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}}
@keyframes hwD2{0%,27%{background:none;border-color:#3a3a42}30%,92%{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}}
@keyframes hwD3{0%,42%{background:none;border-color:#3a3a42}45%,92%{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}}
@keyframes hwD4{0%,57%{background:none;border-color:#3a3a42}60%,92%{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}}
@keyframes hwWatch{0%,62%{opacity:1}65%,92%{opacity:0}100%{opacity:1}}
@keyframes hwFire{0%,62%{opacity:0}65%,92%{opacity:1}100%{opacity:0}}
@keyframes hwCall{0%,64%{opacity:0}68%,92%{opacity:1}100%{opacity:0}}
@keyframes hwCard{0%,62%{border-color:var(--line);box-shadow:none}65%,92%{border-color:rgba(245,184,46,.6);box-shadow:0 0 26px -10px rgba(245,184,46,.7)}100%{border-color:var(--line)}}
@media (prefers-reduced-motion:reduce){ .hw-anim,.hw-anim *,.hw-anim *::before{animation:none!important} .hw-anim-call{opacity:1} }
.hw-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.hw-flow div{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:4px}
.hw-flow div:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--gold);font-weight:900;z-index:1}
.hw-flow i{font-style:normal;font-size:26px}
.hw-flow b{font-size:16px;font-weight:800}
.hw-flow span{font-size:14px;color:var(--muted)}
.hw-h2{font-size:22px;font-weight:900;margin:36px 0 12px;letter-spacing:-.01em}
.hw-golden{background:var(--card);border:1px solid rgba(245,184,46,.45);border-radius:16px;padding:18px;display:grid;gap:14px}
.hw-golden p{font-size:16px;line-height:1.5;color:#c9c9d1}
.hw-line{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hw-line > div{border-radius:12px;padding:14px;background:var(--bg);border:1px solid var(--line);display:grid;gap:2px;text-align:center}
.hw-line span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hw-line b{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums}
.hw-line em{font-style:normal;font-size:14px;font-weight:700}
.hw-pm{border-color:rgba(245,184,46,.5)!important} .hw-pm b{color:var(--gold)}
.hw-bk.ok{border-color:rgba(43,214,123,.45)} .hw-bk.ok em{color:var(--green)}
.hw-bk.no{border-color:rgba(242,84,91,.4)} .hw-bk.no em{color:var(--red)} .hw-bk.no b{color:var(--muted)}
.hw-tabs{display:inline-flex;flex-wrap:wrap;gap:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:12px}
.hw-tabs button{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:8px;font-weight:700;font-size:14px;color:var(--muted)}
.hw-tabs button.on{background:#2a2a30;color:var(--text)}
.hw-model{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:14px}
.hw-what{font-size:18px;line-height:1.45}
.hw-when{justify-self:start;font-size:14px;padding:8px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:#c9c9d1}
.hw-sub{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.hw-steps{display:grid;gap:8px}
.hw-steps div{display:flex;gap:12px;align-items:center;font-size:16px;line-height:1.4}
.hw-steps > div > b{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(245,184,46,.1);color:var(--gold);border:1px solid rgba(245,184,46,.35)}
.hw-calls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hw-calls div{border-radius:12px;padding:12px;background:var(--bg);border:1px solid var(--line);display:grid;gap:4px}
.hw-calls div > b{font-size:20px;font-weight:900}
.hw-calls span{font-size:14px;color:#c9c9d1;line-height:1.4}
.c-over{border-color:rgba(43,214,123,.4)!important} .c-over > b{color:var(--green)}
.c-under{border-color:rgba(242,84,91,.4)!important} .c-under > b{color:var(--red)}
.c-stay > b{color:var(--muted)}
.hw-boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hw-boxes div{display:grid;gap:3px;padding:12px 12px 12px 40px;position:relative;border-radius:12px;background:var(--bg);border:1px solid rgba(43,214,123,.3)}
.hw-boxes div::before{content:"✓";position:absolute;left:12px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--green);color:var(--bg);font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 8px rgba(43,214,123,.7)}
.hw-boxes b{font-size:15px;font-weight:800}
.hw-boxes span{font-size:14px;color:#b9b9c2;line-height:1.4}
.hw-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.hw-times div{border-radius:12px;padding:12px;background:var(--bg);border:1px solid rgba(245,184,46,.35);text-align:center;display:grid;gap:2px}
.hw-times span{font-size:12px;font-weight:700;color:var(--muted)}
.hw-times b{font-size:24px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.hw-num{font-size:16px;line-height:1.6;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid rgba(245,184,46,.35)}
.hw-num b{color:var(--gold)}
.hw-small{font-size:14px;color:var(--muted)}
.hw-ctabs{margin-bottom:14px}
.nb-call{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid rgba(43,214,123,.5);border-radius:10px;padding:10px}
.nb-call b{font-size:24px;font-weight:900;color:var(--green);text-shadow:0 0 16px rgba(43,214,123,.45)}
.nb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nb-tiles div{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px}
.nb-tiles span{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nb-tiles b{display:block;font-size:17px;font-weight:800}
.nb-tiles small{font-size:11px;color:var(--muted)}
.nb-tiles .best b{color:var(--gold)}
.nb-tiles .pin{top:-8px}
.hw-meter{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.hw-meter span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hw-meter div{height:10px;border-radius:10px;background:var(--card2);overflow:hidden}
.hw-meter i{display:block;height:100%;background:var(--green);border-radius:10px;box-shadow:0 0 12px rgba(43,214,123,.5)}
.hw-meter b{font-size:22px;font-weight:900;color:var(--green)}
#how{max-width:980px}
@media (max-width:860px){ .hw-hero{grid-template-columns:1fr} .hw-flow{grid-template-columns:1fr 1fr} .hw-flow div::after{display:none} .hw-calls,.hw-line{grid-template-columns:1fr} }
@media (max-width:520px){ .hw-boxes{grid-template-columns:1fr} .hw-flow{grid-template-columns:1fr 1fr} .hw-tabs{display:grid;grid-template-columns:1fr;width:100%} }
/* How It Works (side panel) */
#how{max-width:980px}
.how-read{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:18px;align-items:start}
.how-card{position:relative;background:var(--card);border:1px solid rgba(245,184,46,.6);border-radius:16px;padding:14px;display:grid;gap:10px}
.how-card .pin{position:absolute;right:-9px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#111;font-size:11px;font-weight:900;font-style:normal;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg)}
.how-card > div{position:relative}
.hc-top{display:flex;align-items:center;gap:8px}
.hc-top .pin{right:auto;left:-26px;top:0} .hc-top .pin.p2{left:auto;right:92px;top:-18px}
.hc-fire{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(245,184,46,.1);color:var(--gold);border:1px solid rgba(245,184,46,.35)}
.hc-stars{color:var(--gold);font-size:12px;margin-left:auto} .hc-clock{font-size:12px;font-weight:700;color:var(--muted)}
.hc-team{display:flex;font-weight:600} .hc-team b{margin-left:auto;font-size:20px;font-weight:800} .hc-team.trail{color:var(--muted)}
.hc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.hc-strip div{position:relative;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;justify-content:space-between;gap:3px}
.hc-strip b{font-size:15px;color:var(--text);text-transform:none;letter-spacing:0} .hc-strip .pm b{color:var(--gold)}
.hc-strip .pin{top:-14px;right:auto;left:auto;position:absolute;right:4px}
.hc-boxes{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.hc-boxes span{font-size:11px;font-weight:600;padding:6px 8px;border-radius:8px;background:var(--bg);border:1px solid rgba(43,214,123,.35)}
.hc-boxes span::before{content:"✓ ";color:var(--green);font-weight:900}
.hc-books{display:flex;flex-wrap:wrap;gap:5px}
.hc-books span{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.hc-books .best{border-color:var(--gold);color:var(--gold)} .hc-books .high{border-color:var(--red);color:var(--red)}
.hc-call{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px}
.hc-call b{font-size:18px;font-weight:800;color:var(--green)}
.how-legend{counter-reset:n;list-style:none;display:grid;gap:8px}
.how-legend li{counter-increment:n;position:relative;padding-left:30px;font-size:14px;line-height:1.45;color:#c9c9d1}
.how-legend li::before{content:counter(n);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#111;font-size:11px;font-weight:900;display:grid;place-items:center}
.how-legend b{color:var(--text)}
.how-extras{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:24px}
.how-extras div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.how-extras b{font-size:15px} .how-extras span{font-size:13px;color:var(--muted);line-height:1.45}
@media (max-width:860px){ .how-idea{grid-template-columns:1fr 1fr} .how-models{grid-template-columns:1fr} .how-read{grid-template-columns:1fr} .how-card{margin-left:26px} }
@media (max-width:480px){ .how-idea,.how-extras{grid-template-columns:1fr} }

/* The Best Time to Bet */
.hw-clock4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hw-clock4 > div{border-radius:12px;padding:10px 6px;background:var(--bg);border:1px solid var(--line);display:grid;gap:2px;text-align:center}
.hw-clock4 span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hw-clock4 b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.hw-clock4 .best{border-color:rgba(245,184,46,.6)} .hw-clock4 .best b{color:var(--gold)}
.hw-rules{margin:0;padding-left:22px;display:grid;gap:6px;font-size:15px;color:#c9c9d1}
.hw-rules li::marker{color:var(--gold);font-weight:800}