/* ——— Mtaa Tips — phone-first ——— */
:root {
  --pitch: #07130c;
  --pitch-2: #0f3d24;
  --green: #1db954;
  --green-dark: #178a44;
  --mpesa: #00a651;
  --mpesa-dark: #007a3d;
  --orange: #f5a623;
  --bg: #f2f7f3;
  --surface: #ffffff;
  --ink: #10251a;
  --muted: #5f7a6a;
  --line: rgba(15, 61, 36, 0.12);
  --bronze: #b86b24; --bronze-bg: rgba(184,107,36,.14);
  --silver: #6b7580; --silver-bg: rgba(107,117,128,.12);
  --gold: #c9a227; --gold-bg: rgba(201,162,39,.16);
  --danger: #d64545;
  --accent-soft: #d9f7e5;
  --radius: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  --bottom-nav-h: 62px;
  --pad-x: clamp(.85rem, 4vw, 1.5rem);
  --max: 960px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); color: var(--ink); line-height: 1.45;
  min-height: 100dvh; overflow-x: hidden; width: 100%;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 1rem);
  background:
    radial-gradient(ellipse 90% 34% at 50% -4%, #d9f7e5 0%, transparent 60%),
    linear-gradient(180deg, #eef8f0 0%, var(--bg) 30%);
}
img { max-width: 100%; height: auto; display: block; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Header — logo centered, never cropped */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); box-shadow: 0 2px 14px rgba(7,19,12,.08); }
.header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; min-height: 64px; padding: calc(.4rem + var(--safe-t)) .7rem .4rem; max-width: var(--max); margin-inline: auto; }
.brand { grid-column: 2; justify-self: center; align-self: center; display: flex; align-items: center; justify-content: center; width: auto; height: auto; overflow: visible; line-height: 0; }
.logo-header { display: block; width: min(168px, 48vw); height: auto; margin: 0; object-fit: contain; object-position: center; }
.header-pay { grid-column: 3; justify-self: end; font-family: var(--font-display); font-size: .9rem; letter-spacing: .05em; color: #111; text-decoration: none; background: linear-gradient(180deg,#ffc94a,#f5a623); padding: .35rem .65rem; border-radius: 8px; box-shadow: 0 2px 0 #c47a00; white-space: nowrap; }
.header-pay:active { transform: translateY(1px); box-shadow: none; }

/* Hero */
.hero { max-width: var(--max); margin: .7rem auto 0; width: calc(100% - 2 * var(--pad-x)); background: radial-gradient(120% 160% at 85% -20%, #2ee06f33, transparent 55%), linear-gradient(135deg, var(--pitch) 0%, var(--pitch-2) 58%, #14532d 100%); color: #eafff1; border-radius: 20px; padding: 1.1rem 1.1rem 1rem; box-shadow: 0 14px 34px rgba(7,19,12,.22); overflow: hidden; }
.hero-kicker { display:flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:800; letter-spacing:.14em; color:#8df0ae; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#2ee06f; animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 #2ee06f55} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.hero-title { font-family: var(--font-display); font-size: clamp(2.2rem, 9vw, 3.4rem); line-height:.92; letter-spacing:.03em; margin:.45rem 0 .4rem; }
.hero-title span { color: #2ee06f; }
.btn-check-free { margin-top:.95rem; width:100%; background:#fff; color:var(--pitch); box-shadow:0 8px 20px #00000033; }
.btn-check-free:active { background:#eafff1; }

/* Sections */
.section { padding: 1.15rem var(--pad-x) .4rem; max-width: var(--max); margin-inline: auto; width: 100%; }
.section-head { margin-bottom:.85rem; }
.section-head h2, .contact h2 { font-family: var(--font-display); font-size: clamp(1.7rem,6vw,2.3rem); letter-spacing:.04em; line-height:1; color: var(--pitch-2); }
.section-head p { color: var(--muted); font-size:.9rem; margin-top:.25rem; }
.section-kicker { font-size:.66rem !important; font-weight:800; letter-spacing:.16em; color: var(--green-dark) !important; margin:0 0 .2rem !important; }

/* Boards stacked vertically — no tabs */
.tier-stack { display:flex; flex-direction:column; gap:1.15rem; }
.tier-board { display:flex; flex-direction:column; gap:.7rem; }
.tier-board + .tier-stack { margin-top:1.15rem; }
.tier-board[hidden] { display:none !important; }
.locked-note { color:var(--muted); font-size:.86rem; margin:-.15rem 0 .7rem; }
.vip-games { display:flex; flex-direction:column; gap:1.15rem; }
.vip-games[hidden] { display:none !important; }
.board-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.board-head h2 { font-family:var(--font-display); font-size:clamp(1.6rem,6vw,2.1rem); letter-spacing:.04em; line-height:1; color:var(--pitch-2); }
.win-chip { flex:none; font-size:.72rem; font-weight:800; letter-spacing:.04em; color:#0c6b31; background:var(--accent-soft); border-radius:999px; padding:.35rem .65rem; }
.win-chip[hidden] { display:none !important; }

/* Unlock banner */
.unlock-banner { margin-bottom:.9rem; padding:1rem; border-radius: var(--radius); color:#eafff1; background: linear-gradient(135deg, var(--pitch) 0%, #14532d 70%); border:1px solid #2ee06f33; box-shadow: 0 12px 28px rgba(7,19,12,.18); }
.tier-board[data-tier="bronze"] .unlock-banner { background: linear-gradient(135deg,#3a210c 0%,#8c4f16 60%,#cd7f32 100%); border-color:#f3c39a66; }
.tier-board[data-tier="bronze"] .unlock-price span { color:#ffd9ae; }
.tier-board[data-tier="silver"] .unlock-banner { background: linear-gradient(135deg,#1c262e 0%,#546370 60%,#93a5b1 100%); border-color:#dbe5ec66; }
.tier-board[data-tier="silver"] .unlock-price span { color:#e6eef4; }
.tier-board[data-tier="gold"] .unlock-banner { background: linear-gradient(135deg,#33270a 0%,#a87e10 60%,#f2c94c 100%); border-color:#ffe98a80; color:#fffbe8; }
.tier-board[data-tier="gold"] .unlock-price span { color:#ffedb5; }
.tier-board[data-tier="bronze"] .games-table tr.section-row td { background: linear-gradient(90deg,#5a3410,#cd7f32); }
.tier-board[data-tier="silver"] .games-table tr.section-row td { background: linear-gradient(90deg,#2c3944,#7e8c96); }
.tier-board[data-tier="gold"] .games-table tr.section-row td { background: linear-gradient(90deg,#6b4e08,#d9a521); }
.unlock-banner[hidden]{ display:none !important; }
.unlock-price { font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.3rem); line-height:1; }
.unlock-price span { display:block; font-family:var(--font-body); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8df0ae; margin-bottom:.25rem; }
.unlock-banner p { color:#c9e8d2; font-size:.9rem; margin:.35rem 0 .7rem; }
.unlock-note { font-size:.72rem !important; color:#8df0ae !important; margin:.5rem 0 0 !important; }

/* Table — always a real table */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 28px rgba(15,61,36,.07); }
.games-table { width:100%; min-width:520px; border-collapse:collapse; font-size:.84rem; }
.games-table td { padding:.68rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.games-table tbody tr:last-child td { border-bottom:none; }
.games-table tr.is-won { background:#1db9540d; } .games-table tr.is-lost { background:#d645450d; }
.games-table tr.is-pending { background:#c9a2270a; } .games-table tr.is-locked { background:#fff8e0; }
.games-table .vs { font-size:.68rem; color:var(--muted); font-weight:700; margin:0 .15rem; }
.league-tag { margin-top:.15rem; font-size:.68rem; color:var(--muted); }
.games-table .empty-state { text-align:center; color:var(--muted); padding:1.5rem .75rem; }
.games-table .empty-state.soft { padding:.85rem; font-size:.85rem; }
.games-table tr.section-row td { background:linear-gradient(90deg,var(--pitch),#14532d); color:#eafff1; font-family:var(--font-display); font-size:1.08rem; letter-spacing:.07em; padding:.55rem .75rem; border-bottom:none; }
.games-table tr.unlock-row td { padding:.7rem; background:#fff8e0; }
.games-table tr.unlock-row .btn { min-height:44px; }
.kick-time { font-variant-numeric:tabular-nums; font-weight:700; color:var(--green-dark); white-space:nowrap; font-size:.75rem; width:1%; }
.pred-pick { font-weight:800; color:var(--green-dark); white-space:nowrap; }
.pred-locked { color:var(--muted); font-style:italic; }
.odds { font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; width:1%; }
.vip-chip { display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#7a5a00; background:var(--gold-bg); padding:.1rem .3rem; border-radius:4px; }
.vip-chip.bronze { background:#cd7f3226; color:#9a5a14; }
.vip-chip.silver { background:#7e8c9626; color:#4c5a64; }
.vip-chip.gold { background:#f2c94c33; color:#8a6d0d; }
.status-pill { display:inline-block; font-size:.65rem; font-weight:800; padding:.18rem .5rem; border-radius:999px; white-space:nowrap; }
.status-pill.is-won{background:var(--accent-soft);color:#0c6b31}.status-pill.is-lost{background:#d645451f;color:var(--danger)}
.status-pill.is-pending{background:#c9a22729;color:#8a6d0d}.status-pill.is-postponed{background:var(--silver-bg);color:var(--silver)}
.status-pill.is-vip{background:var(--gold-bg);color:#7a5a00}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.1rem; font-family:var(--font-body); font-size:.95rem; font-weight:800; border-radius:12px; border:2px solid transparent; cursor:pointer; text-decoration:none; width:100%; -webkit-tap-highlight-color:transparent; }
.btn:active{ transform:scale(.97); } .btn:disabled{ opacity:.6; cursor:wait; }
.btn-mpesa { background:linear-gradient(180deg,#12c463,#009444); color:#fff; box-shadow:0 6px 16px #00a65140; }
.btn-outline { background:#fff; border-color:var(--line); color:var(--ink); }
.btn-block{ width:100%; }

/* Packages */
.package-grid { display:flex; flex-direction:column; gap:.8rem; }
.package { position:relative; overflow:hidden; width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:.75rem; row-gap:.1rem; padding:.7rem .85rem .75rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 16px rgba(15,61,36,.05); }
.package::before { content:""; position:absolute; inset:0 0 auto 0; height:8px; }
.package[data-plan="bronze"]::before { background: linear-gradient(90deg,#8c4f16,#f3c39a,#cd7f32); }
.package[data-plan="silver"]::before { background: linear-gradient(90deg,#7e8c96,#ffffff,#aebbc4); }
.package[data-plan="gold"]::before { background: linear-gradient(90deg,#b8860b,#fff3b0,#f2c94c); }
.package[data-plan="bronze"] { border-color:#cd7f3252; background:linear-gradient(170deg,#fff6ea,#fff 55%); }
.package[data-plan="gold"] { border-color:#d9a52159; background:linear-gradient(170deg,#fffbe8,#fff 55%); }
.package-featured { background:linear-gradient(165deg,#232f38 0%,#546370 55%,#7e8c96 100%) !important; color:#f4f9fc; border-color:#dbe5ec59; box-shadow:0 16px 34px rgba(28,38,46,.3); }
.package-featured .package-tag,.package-featured .package-list{ color:#dde8ef; }
.package-featured .package-price span{ color:#cfdde7 !important; }
.btn-bronze { background:linear-gradient(180deg,#e59a52,#b0661d); color:#fff; box-shadow:0 6px 16px #cd7f3245; }
.btn-silver { background:linear-gradient(180deg,#ffffff,#b9c6ce); color:#16202a; box-shadow:0 6px 16px #7e8c9640; }
.btn-gold { background:linear-gradient(180deg,#ffd968,#d9a521); color:#2a1d00; box-shadow:0 6px 16px #f2c94c50; }
.package-badge { position:static; grid-column:2; grid-row:1; justify-self:end; align-self:center; background:#f2c94c; color:#231a00; font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.15rem .4rem; border-radius:999px; }
.package-odds { grid-column:1; font-family:var(--font-display); font-size:1.45rem; line-height:.9; letter-spacing:.03em; margin:.05rem 0 0; }
.package-odds span { font-family:var(--font-body); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-left:.15rem; }
.package-tier { grid-column:1; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.package-tier.bronze{color:var(--bronze)} .package-tier.silver{color:#9fb3a8} .package-tier.gold{color:var(--gold)}
.package-price { grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--font-display); font-size:1.35rem; line-height:1; margin:0; }
.package .btn { grid-column:1 / -1; min-height:40px; margin-top:.4rem; padding:.45rem .8rem; font-size:.88rem; }
.package-price span { font-family:var(--font-body); font-size:.72rem; font-weight:700; color:var(--muted); vertical-align:super; }
.package-featured .package-price span{ color:#9fd8ae; }
.package-tag { color:var(--muted); font-size:.9rem; }
.package-list { list-style:none; margin:.6rem 0 .9rem; color:var(--muted); font-size:.86rem; display:grid; gap:.25rem; }
.package-list li::before{ content:"✓ "; color:var(--green); font-weight:800; }

/* How / contact */
.steps { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.steps li { display:flex; gap:.85rem; padding:.95rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.step-num { font-family:var(--font-display); font-size:1.7rem; color:var(--green); line-height:1; }
.steps strong{ display:block; } .steps p,.contact-lead{ color:var(--muted); font-size:.9rem; }
.contact-lead{ margin:.35rem 0 .85rem; max-width:38ch; }
.subscribe-form { display:flex; flex-direction:column; gap:.55rem; }
.subscribe-form input,.modal-panel input { width:100%; min-height:48px; padding:.75rem .95rem; font:inherit; font-size:16px; color:var(--ink); background:#fbfefc; border:1px solid var(--line); border-radius:12px; outline:none; }
.subscribe-form input:focus,.modal-panel input:focus{ border-color:var(--green); box-shadow:0 0 0 3px #1db95426; }

.site-footer { padding:2rem var(--pad-x) 1rem; text-align:center; color:var(--muted); font-size:.8rem; max-width:var(--max); margin-inline:auto; }
.footer-social { display:none; }

/* Floating social */
.float-social { position:fixed; right:.85rem; bottom:calc(var(--bottom-nav-h) + var(--safe-b) + .85rem); z-index:130; display:flex; flex-direction:column; gap:.55rem; }
.float-btn { width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.24); -webkit-tap-highlight-color:transparent; }
.float-btn:active{ transform:scale(.94); } .float-btn svg{ width:26px; height:26px; }
.float-whatsapp{ background:#25d366; } .float-telegram{ background:#229ed9; }

/* Bottom nav */
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:120; display:grid; grid-template-columns:repeat(3,1fr); height:calc(var(--bottom-nav-h) + var(--safe-b)); padding-bottom:var(--safe-b); background:rgba(7,19,12,.96); backdrop-filter:blur(12px); box-shadow:0 -6px 22px rgba(7,19,12,.2); }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12rem; color:#8fb89b; text-decoration:none; font-size:.7rem; font-weight:700; }
.bottom-nav-item svg{ width:22px; height:22px; } .bottom-nav-item.is-active,.bottom-nav-item:active{ color:#2ee06f; }

/* Modal */
.modal { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; }
.modal[hidden]{ display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(4,15,9,.6); backdrop-filter:blur(3px); }
.modal-panel { position:relative; width:100%; max-width:480px; max-height:92dvh; overflow-y:auto; padding:1.35rem 1.15rem calc(1.35rem + var(--safe-b)); background:var(--surface); border-radius:20px 20px 0 0; animation:up .3s var(--ease); }
@keyframes up{ from{transform:translateY(60px);opacity:.4} to{transform:none;opacity:1} }
.modal-close { position:absolute; top:.6rem; right:.8rem; background:none; border:0; color:var(--muted); font-size:1.8rem; min-width:44px; min-height:44px; cursor:pointer; }
.modal-badge { display:inline-block; background:var(--accent-soft); color:#0c6b31; font-size:.66rem; font-weight:800; letter-spacing:.12em; padding:.3rem .55rem; border-radius:999px; }
.modal-panel h2 { font-family:var(--font-display); font-size:1.75rem; letter-spacing:.04em; margin:.45rem 0 .15rem; padding-right:2rem; }
.modal-plan { color:var(--green-dark); font-weight:800; margin-bottom:1rem; }
.modal-panel form{ display:flex; flex-direction:column; gap:.85rem; }
.modal-panel form[hidden],
.pay-wait[hidden],
.pay-success[hidden],
.modal-fine[hidden],
.restore-box[hidden],
.pay-error[hidden] { display:none !important; }
.pay-error { color:var(--danger); font-size:.84rem; font-weight:700; }
.pay-wait, .pay-success { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.45rem; padding:.4rem 0 1rem; }
.pay-wait h3, .pay-success h3 { font-family:var(--font-display); font-size:2rem; letter-spacing:.04em; line-height:1; }
.pay-wait p, .pay-success p { color:var(--muted); font-size:.92rem; max-width:32ch; }
.pay-wait .pay-spinner { width:56px; height:56px; margin-bottom:.45rem; }
#paySpinner[hidden] { display:none !important; }
#payRetry { width:auto; min-width:160px; margin-top:.4rem; }
#payRetry[hidden] { display:none !important; }
.pay-mark { width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:#e6f7ee; color:#0c6b31; font-size:2rem; font-weight:800; margin-bottom:.25rem; }
.modal-panel label{ display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; font-weight:700; color:var(--muted); }
.modal-fine{ margin-top:.85rem; font-size:.72rem; color:var(--muted); }
.pay-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; margin-top:1rem; }
.pay-steps[hidden]{ display:none; }
.pay-step { display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; color:var(--muted); }
.pay-step span { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; background:#eef3f0; border:2px solid var(--line); }
.pay-step small { font-size:.62rem; font-weight:700; letter-spacing:.02em; line-height:1.1; }
.pay-step.is-active { color:var(--ink); }
.pay-step.is-active span { border-color:var(--mpesa); background:#e6f7ee; animation:stepPulse 1.1s ease-in-out infinite; }
.pay-step.is-done { color:#0c6b31; }
.pay-step.is-done span { background:var(--mpesa); border-color:var(--mpesa); color:#fff; }
.pay-step.is-failed { color:var(--danger); }
.pay-step.is-failed span { background:var(--danger); border-color:var(--danger); color:#fff; }
@keyframes stepPulse { 0%,100%{ box-shadow:0 0 0 0 #00a65135; } 50%{ box-shadow:0 0 0 6px transparent; } }
.pay-status { display:flex; align-items:center; gap:.7rem; margin-top:.9rem; padding:.8rem; background:#f0faf3; border:1px solid #1db95430; border-radius:12px; font-size:.88rem; font-weight:600; }
.pay-status[hidden]{ display:none; }
.pay-status.is-paid { background:#e6f7ee; border-color:var(--mpesa); }
.pay-status.is-failed { background:#fdf0f0; border-color:#d6454555; color:var(--danger); }
.pay-status.is-paid .pay-spinner, .pay-status.is-failed .pay-spinner { display:none; }
.pay-timer { font-size:.72rem; font-weight:600; color:var(--muted); margin-top:.15rem; }
.restore-box { margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--line); }
.restore-title { font-weight:800; font-size:.92rem; }
.restore-text { font-size:.8rem; color:var(--muted); margin:.25rem 0 .7rem; }
.restore-box form { display:flex; flex-direction:column; gap:.7rem; }
.pay-spinner { width:56px; height:56px; flex:none; box-sizing:border-box; border-radius:50%; border:5px solid #c8efd6; border-top-color:#009444; border-right-color:#12c463; animation:spin .75s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.toast { position:fixed; left:var(--pad-x); right:var(--pad-x); bottom:calc(var(--bottom-nav-h) + var(--safe-b) + .75rem); z-index:300; padding:.85rem 1rem; background:#fff; border:1px solid var(--green); border-radius:12px; font-size:.88rem; font-weight:700; text-align:center; box-shadow:0 12px 32px rgba(7,19,12,.18); max-width:420px; margin-inline:auto; }
.toast[hidden]{ display:none; } .toast.is-error{ border-color:var(--danger); color:var(--danger); }

@media (max-width:720px){
  .header-pay{ font-size:.8rem; padding:.32rem .5rem; }
  .hero{ width:calc(100% - 1.2rem); margin-top:.55rem; padding:1rem .95rem .95rem; border-radius:16px; }
  .hero-title{ font-size:clamp(2rem, 11vw, 2.8rem); }
  .section{ padding:1rem .7rem .3rem; }
  .package-grid{ gap:.7rem; }
  .package{ padding:.65rem .75rem .7rem; }
  .float-social{ display:none; }
  .footer-social{ display:flex; justify-content:center; gap:.5rem; margin-top:.85rem; }
  .footer-chat{ flex:1; max-width:160px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; font-weight:800; font-size:.85rem; text-decoration:none; }
  #footerWhatsapp{ background:#25d366; }
  #footerTelegram{ background:#229ed9; }
  .table-wrap{ overflow:visible; }
  .games-table{ min-width:0; font-size:.88rem; }
  .games-table tr:not(.section-row):not(.unlock-row):not(:has(.empty-state)){
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "time status"
      "teams teams"
      "pick odds"
      "result result";
    gap:.12rem .55rem;
    padding:.75rem .8rem;
  }
  .games-table tr:not(.section-row):not(.unlock-row):not(:has(.empty-state)) td{
    display:block; width:auto; padding:0; border:0; white-space:normal;
  }
  .games-table .kick-time{ grid-area:time; white-space:normal; font-size:.72rem; }
  .games-table td:nth-child(2){ grid-area:teams; }
  .games-table td:nth-child(3){ grid-area:pick; }
  .games-table td.odds{ grid-area:odds; justify-self:end; align-self:end; }
  .games-table td:nth-child(5){ grid-area:result; font-size:.8rem; color:var(--muted); }
  .games-table td:nth-child(5):empty{ display:none; }
  .games-table td:nth-child(6){ grid-area:status; justify-self:end; }
  .games-table tr.section-row,
  .games-table tr.unlock-row,
  .games-table tr:has(.empty-state){ display:block; }
  .games-table tr.section-row td,
  .games-table tr.unlock-row td,
  .games-table .empty-state{ display:block; width:100%; }
  .pred-pick{ white-space:normal; }
}
@media (min-width:640px){
  .package-grid{ display:flex; flex-direction:column; gap:.85rem; width:100%; }
  .btn-check-free{ width:auto; min-width:220px; }
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); } .steps li{ flex-direction:column; }
  .subscribe-form{ flex-direction:row; max-width:520px; } .subscribe-form .btn{ width:auto; min-width:130px; } .subscribe-form input{ flex:1; }
  .hero{ padding:1.4rem 1.5rem 1.2rem; }
}
@media (min-width:900px){
  :root{ --bottom-nav-h:0px; } body{ padding-bottom:2rem; } .bottom-nav{ display:none; }
  .logo-header{ width:min(210px, 24vw); }
  .float-social{ bottom:1.25rem; right:1.25rem; } .float-btn{ width:56px; height:56px; }
  .modal{ align-items:center; padding:1rem; } .modal-panel{ border-radius:18px; padding:1.6rem; }
  .toast{ left:50%; right:auto; transform:translateX(-50%); bottom:1.5rem; width:min(420px,calc(100% - 2rem)); }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .pay-spinner{ animation:spin .75s linear infinite !important; animation-duration:.75s !important; }
}