﻿/* Standalone strategy sales page. No scripts, fonts or remote assets. */
:root { color-scheme: light; --bg:#fff; --surface:#fff; --ink:#182333; --muted:#627084; --line:#e3e8ef; --accent:#175cd3; --accent-soft:#edf4ff; --radius:12px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
a { color:var(--accent); }
a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.wrap { width:100%; max-width:1200px; margin:auto; padding-inline:32px; }
.top { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:1.2rem; font-weight:750; text-decoration:none; white-space:nowrap; }
.brand-mark { width:23px; height:23px; border-radius:7px; background:var(--accent); box-shadow:inset -7px -7px 0 #ffffff35; transform:rotate(-8deg); }
.tabs { display:flex; gap:26px; }
.tabs a { color:var(--muted); text-decoration:none; font-size:.875rem; font-weight:600; }
.tabs a:hover { color:var(--accent); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:12px 20px; border:1px solid #cdd5df; border-radius:8px; background:#fff; color:var(--ink); font-weight:650; font-size:.9375rem; line-height:1.4; text-decoration:none; box-shadow:0 1px 2px #1018280d; }
.button:hover { background:#f7faff; border-color:var(--accent); }
.button-primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.button-primary:hover { color:#fff; background:#124ba9; }
.intro { border-block:1px solid #dbe5f2; background-color:#f0f6ff; background-image:linear-gradient(#3978c709 1px,transparent 1px),linear-gradient(90deg,#3978c709 1px,transparent 1px); background-size:28px 28px; }
.intro-inner { padding-block:65px 52px; text-align:center; }
.eyebrow, .label { margin:0 0 10px; color:var(--accent); font-size:.72rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.25rem,4.8vw,3.75rem); line-height:1.13; letter-spacing:-.045em; font-weight:720; }
h1 span { color:var(--accent); }
.intro-copy { max-width:650px; margin:22px auto 26px; color:#56667d; font-size:1.125rem; }
.intro-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.intro-foot { margin:24px 0 0; color:var(--muted); font-size:.75rem; }
.page-section { padding-block:64px; border-bottom:1px solid var(--line); }
.strategy-layout { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:64px; align-items:start; }
.strategy-body { min-width:0; }
.strategy-heading { display:flex; align-items:center; gap:16px; }
.strategy-icon { display:grid; place-items:center; flex:none; width:64px; height:64px; border-radius:14px; background:#e1f4ef; }
.strategy-icon svg { width:36px; height:36px; fill:none; stroke:#16866c; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.strategy-heading .eyebrow { margin-bottom:3px; color:var(--muted); }
h2 { margin:0; font-size:1.9rem; line-height:1.25; letter-spacing:-.025em; }
.strategy-description { color:var(--muted); font-size:1.05rem; margin:20px 0 16px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tags span { border:1px solid var(--line); border-radius:6px; padding:3px 9px; font-size:.72rem; font-weight:600; color:#5b6778; background:#fafbfc; }
.plan-title { font-size:1.05rem; margin:30px 0 18px; }
.strategy-plan { list-style:none; padding:0; margin:0 0 28px; counter-reset:plan; }
.strategy-plan li { position:relative; padding-left:37px; margin-bottom:15px; counter-increment:plan; }
.strategy-plan li::before { content:counter(plan); position:absolute; left:0; top:2px; width:23px; height:23px; display:grid; place-items:center; border:1px solid #d7e1ed; border-radius:50%; color:#537191; font-size:.7rem; font-weight:700; }
.strategy-plan strong { display:block; font-size:.9rem; }
.strategy-plan span { display:block; color:var(--muted); font-size:.875rem; }
.access-card { position:sticky; top:28px; padding:26px; border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 20px #1b345208; }
.access-card h3 { margin:0; font-size:1.55rem; line-height:1.3; letter-spacing:-.025em; }
.access-price { margin:25px 0 4px; font-size:2rem; font-weight:720; line-height:1.3; }
.access-price>span { display:block; color:var(--muted); font-size:.75rem; font-weight:500; }
.access-price small { font-size:.7rem; font-weight:500; color:var(--muted); }
.access-caption { color:var(--muted); font-size:.75rem; margin:8px 0 18px; }
.access-card .button { width:100%; padding-inline:10px; font-size:.85rem; }
.access-features { padding:0; list-style:none; margin:22px 0; font-size:.8rem; }
.access-features li { margin-block:10px; }
.access-features li::before { content:'\2713'; color:#16866c; margin-right:9px; font-weight:700; }
.access-status { border-top:1px solid var(--line); padding-top:18px; color:var(--muted); font-size:.75rem; }
.status-dot { display:inline-block; width:7px; height:7px; background:#d59c28; border-radius:50%; margin-right:6px; }
.product-preview,.screenshot-card { margin:0; min-width:0; }
.screenshot-link { position:relative; display:block; overflow:hidden; border:1px solid #243040; border-radius:10px; background:#111820; }
.screenshot-link img { display:block; width:100%; height:auto; }
.image-zoom { position:absolute; right:10px; bottom:10px; padding:4px 8px; border:1px solid #607187; border-radius:5px; color:#fff; background:#182333; font-size:.65rem; }
.product-preview figcaption { margin-top:9px; color:var(--muted); font-size:.72rem; }
.product-gallery { margin-top:22px; border-top:1px solid var(--line); }
summary { cursor:pointer; }
.product-gallery summary { padding-block:16px; font-size:.875rem; font-weight:650; }
.product-gallery summary span { color:var(--muted); font-weight:400; margin-left:6px; font-size:.75rem; }
.screenshot-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:20px; }
.screenshot-card h3 { font-size:.9rem; margin:10px 0 4px; }
.screenshot-card p,.capture-note { color:var(--muted); font-size:.75rem; }
.capture-note { margin:18px 0 0; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.results { margin-top:64px; padding:32px; }
.results-heading { display:flex; justify-content:space-between; gap:20px; }
.results h2 { font-size:1.5rem; }
.result-period { color:var(--muted); font-size:.8rem; text-align:right; }
.result-metrics { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:20px; margin:28px 0; }
.result-value { display:block; font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:-.025em; }
.result-metrics span { display:block; margin-top:5px; color:var(--muted); font-size:.75rem; }
.result-caveat { margin:0; padding:14px 16px; border-radius:8px; background:var(--accent-soft); font-size:.8rem; }
.result-average { font-size:.875rem; margin:18px 0; }
.result-method { padding-top:16px; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }
.result-method summary { color:var(--ink); font-weight:650; }
.result-method li { margin-top:8px; }
.title { margin:0 0 10px; }
.lede { max-width:720px; color:var(--muted); margin:0 0 28px; font-size:1.05rem; }
.cost-explainer { background:#fafbfd; margin-bottom:28px; }
.cost-explainer h3 { margin:0 0 8px; font-size:.95rem; }
.cost-explainer p { margin:8px 0 0; font-size:.85rem; color:var(--muted); }
.steps,.packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.steps { counter-reset:step; list-style:none; padding:0; margin:0 0 20px; }
.steps li { display:flex; align-items:flex-start; gap:12px; counter-increment:step; font-size:.8rem; color:var(--muted); }
.steps li::before { content:counter(step); display:grid; place-items:center; flex:none; width:25px; height:25px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.steps strong { display:block; color:var(--ink); }
.note { color:var(--muted); font-size:.75rem; margin-bottom:24px; }
.package { display:flex; flex-direction:column; padding:26px; }
.package[data-days="20"] { border-color:#a4c5f5; background:#f7faff; }
.package h3 { font-size:1.125rem; margin:0; }
.package .for { margin:3px 0 20px; font-size:.8rem; color:var(--muted); }
.day-art { width:66px; height:52px; margin-bottom:18px; }
.day-filled { fill:var(--accent); }
.day-empty { fill:#edf1f7; stroke:#d9e2ed; stroke-width:1; }
.price { margin:0; font-size:2.7rem; font-weight:720; line-height:1.2; letter-spacing:-.04em; }
.per { margin:8px 0 24px; color:var(--muted); font-size:.8rem; }
.buy { margin-top:auto; padding:11px; border:1px solid #d9e0ea; border-radius:7px; background:#f2f4f7; color:#697587; font:600 .85rem system-ui,sans-serif; cursor:not-allowed; }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.faq h3 { margin:0 0 8px; font-size:.95rem; }
.faq p { color:var(--muted); font-size:.85rem; margin:0; }
.closing { padding:64px 0; text-align:center; }
.closing h2 { margin:0 0 24px; font-size:1.8rem; }
.risk { border-top:1px solid var(--line); padding-block:28px; display:flex; align-items:start; gap:50px; }
.risk p { color:var(--muted); font-size:.72rem; margin:0; }
@media (max-width:1000px) {
  .header-cta { display:none; }
  .strategy-layout { grid-template-columns:minmax(0,1fr) 270px; gap:32px; }
  .result-metrics { grid-template-columns:1.5fr 1fr; }
  .result-metrics>div:first-child { grid-column:1/-1; }
}
@media (max-width:720px) {
  .wrap { padding-inline:20px; }
  .top { flex-wrap:wrap; justify-content:center; gap:14px; padding-block:20px; }
  .tabs { justify-content:center; gap:22px; width:100%; }
  .tabs a { font-size:.75rem; }
  .intro-inner { padding-block:42px 34px; }
  .intro-copy { font-size:1rem; }
  .intro-foot { max-width:260px; margin-inline:auto; }
  .page-section { padding-block:38px; }
  .strategy-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .access-card { position:static; }
  .strategy-heading { gap:12px; }
  .strategy-icon { width:52px; height:52px; }
  h2 { font-size:1.65rem; }
  .results { margin-top:38px; padding:22px; }
  .results-heading { display:block; }
  .result-period { display:block; margin-top:14px; text-align:left; }
  .result-metrics { gap:20px 12px; }
  .result-value { font-size:1.2rem; }
  .steps,.packages,.faq,.screenshot-grid { grid-template-columns:minmax(0,1fr); }
  .product-gallery summary span { display:block; margin:3px 0 0 18px; }
  .closing { padding-block:40px; }
  .closing h2 { font-size:1.4rem; }
  .risk { display:block; }
  .risk p { margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Money and labels carry the visual hierarchy; the receipt stays close by. */
.gain { color:#087443; }
.loss { color:#b42318; }
.neutral { color:var(--muted); }
.tags span:nth-child(1), .tags span:nth-child(4) { color:#175cd3; background:#edf4ff; border-color:#d6e5ff; }
.tags span:nth-child(2) { color:#7a3f10; background:#fff3df; border-color:#f8dfb5; }
.tags span:nth-child(3) { color:#087443; background:#eaf7ef; border-color:#c7e9d5; }
.strategy-plan li:last-child strong { color:#087443; }
.strategy-heading .eyebrow { color:#16866c; }
.result-caveat { padding:0; background:transparent; color:var(--muted); }
.result-metrics>div:first-child { padding:16px; border-radius:10px; background:#eff9f2; }
.result-metrics { align-items:center; }
.funding-diagram { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-top:18px; }
.cost-explainer { background:transparent; }
.cost-explainer>h3 { font-size:1.25rem; }
.funding-box { border:1px solid; border-radius:12px; padding:24px; }
.funding-access { background:#eff5ff; border-color:#bcd4ff; }
.funding-capital { background:#edf8f1; border-color:#b5ddc5; }
.funding-box h4, .funding-session h4 { margin:0; font-size:1.4rem; }
.funding-box strong { display:block; margin-top:18px; font-size:.8rem; }
.funding-access h4, .access-feed { color:#175cd3; }
.funding-capital h4, .funding-capital .eyebrow, .capital-feed { color:#087443; }
.funding-feed { display:flex; flex-direction:column; align-items:center; padding:12px 0; font-size:.75rem; font-weight:700; }
.funding-feed span:last-child { font-size:1.8rem; line-height:1; }
.funding-session { grid-column:1/-1; text-align:center; padding:20px; border:1px solid #d9d0ed; border-radius:12px; background:#f7f3fc; }
.funding-session h4 { color:#6941a5; font-size:1.15rem; }
.daily-economics { margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.daily-economics h3 { font-size:1.6rem; margin:0; letter-spacing:-.025em; }
.daily-economics>p { font-size:.875rem; }
.model-label { color:#6941a5; font-weight:650; }
.economics-period { color:var(--muted); }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.table-scroll:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.economics-table { border-collapse:collapse; width:100%; min-width:680px; font-size:.85rem; font-variant-numeric:tabular-nums; }
.economics-table caption { text-align:left; padding:14px 16px; font-size:.75rem; background:#f8fafc; color:var(--muted); }
.economics-table th, .economics-table td { text-align:right; padding:14px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.economics-table th:first-child { text-align:left; }
.economics-table thead th { font-size:.75rem; }
.economics-table th small { display:block; font-size:.65rem; font-weight:500; }
.economics-table .money { font-weight:700; }
.economics-table .no-session { color:var(--muted); text-align:left; font-size:.75rem; }
.poor-label { color:#9a4e0d; }
.planned-label { color:#175cd3; }
.good-label { color:#087443; }
.best-label { color:#6941a5; }
.economics-table td:nth-child(4), .economics-table th:nth-child(4) { background:#f1f6ff; }
.week-total { background:#f8fafc; font-weight:750; }
.week-total th, .week-total td { border-bottom:0; border-top:2px solid #d1d9e3; }
.daily-economics .comparison-note { font-size:.75rem; color:var(--muted); }
@media (max-width:720px) {
  .funding-diagram { grid-template-columns:1fr; gap:0; }
  .funding-box { padding:20px; }
  .funding-access { grid-row:1; } .access-feed { grid-row:2; }
  .funding-session { grid-row:3; } .capital-feed { grid-row:4; flex-direction:column-reverse; }
  .capital-feed span:last-child { transform:rotate(180deg); }
  .funding-capital { grid-row:5; }
}

.exit-explainer { display:flex; flex-wrap:wrap; gap:6px 24px; margin:18px 0; padding:16px; background:#f8fafc; border-radius:8px; }
.exit-explainer h4 { width:100%; margin:0; font-size:.8rem; }
.exit-explainer p { margin:0; font-size:.8rem; }
