/* 2026-09-03  STOP ANDROID FORCE-DARK FROM REPAINTING THIS PAGE.
   index.html only, has a real prefers-color-scheme:dark palette.
   The testers' "text is too dark / blends into the background" reports
   (pictures 19-22 and 54) are force-dark inverting backgrounds more
   reliably than it recolours text. Declaring what we actually support
   makes the browser stop guessing. */
:root{ color-scheme: light dark; }

/* ============================================================================
   ZEME AI — REDESIGN 2026 (UAT)  ·  css/redesign.css
   Global design-system override. Loaded AFTER main.css (injected by main.js),
   so it re-themes every page at once: refined tokens, elegant nav / buttons /
   cards / tables / footer, plus reusable concept components (hero, snapshot
   band, feature grid, pills). UAT ONLY until owner approves for PROD.
   ============================================================================ */

/* ── 1. TOKENS — refine the palette toward the approved concept ─────────────── */
:root{
  --bg:#ffffff; --bg2:#f6f8fc; --bg3:#eef2f9;
  --card:#ffffff; --border:#e6ebf3; --border2:#d7dEEA;
  --navy:#0b1a3a; --ink:#0b1220;
  --blue:#1d4ed8; --blue2:#0ea5e9; --blue-lt:#eff5ff; --teal:#0891b2;
  --green:#0f9d6b; --green-bg:#e7f7f0; --green-bd:#b7ebd5;
  --red:#dc2626; --red-bg:#fef2f2; --red-bd:#fecaca;
  --yellow:#b45309; --yellow-bg:#fffbeb;
  --text:#0b1220; --text2:#425169; --text3:#5b6b85; --text4:#c2ccdb;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --shadow-sm:0 1px 2px rgba(11,18,32,.06),0 2px 8px rgba(11,18,32,.05);
  --shadow:0 4px 14px rgba(11,18,32,.08),0 10px 30px rgba(11,18,32,.06);
  --shadow-lg:0 12px 40px rgba(11,18,32,.10),0 24px 60px rgba(11,18,32,.08);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --ring:0 0 0 4px rgba(29,78,216,.14);
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070d18; --bg2:#0b1424; --bg3:#0f1a2e; --card:#0f1a2e;
    --border:#1a2740; --border2:#243652; --navy:#060c1a; --ink:#eaf1fb;
    --blue:#4f8cff; --blue2:#38bdf8; --blue-lt:#0e1c34; --green:#2fd39a; --green-bg:#0e2b22;
    --text:#eaf1fb; --text2:#b8c4d8; --text3:#8698b6; --text4:#33425c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 34px rgba(0,0,0,.5); --shadow-lg:0 20px 60px rgba(0,0,0,.6);
  }
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────────── */
body{ background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; letter-spacing:-.005em; }
.container,.page-wrap>.container{ max-width:var(--maxw); }
h1,h2,h3{ letter-spacing:-.022em; }
h1{ text-wrap:balance; }
a{ color:var(--blue); }

/* ── 3. TOP NAV — glassy, refined ────────────────────────────────────────────── */
.nav,.navbar,nav.nav{
  background:color-mix(in srgb,var(--bg) 86%,transparent)!important;
  backdrop-filter:saturate(1.1) blur(12px); -webkit-backdrop-filter:saturate(1.1) blur(12px);
  border-bottom:1px solid var(--border)!important; box-shadow:none!important;
}
.nav-logo,.nav-brand,.brand{ font-weight:850; letter-spacing:-.02em; }
.nav-link,.navlinks a,.nav-links a{ font-weight:600; }
.nav-link:hover{ color:var(--blue)!important; }

/* ── 4. BUTTONS ──────────────────────────────────────────────────────────────── */
.btn,.btn-primary,.btn-secondary{ border-radius:var(--r)!important; font-weight:750; letter-spacing:-.005em;
  transition:transform .15s, box-shadow .15s, background .15s; }
.btn-primary{ background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important;
  box-shadow:0 6px 20px rgba(29,78,216,.28)!important; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(29,78,216,.34)!important; }
.btn-secondary{ background:transparent!important; border:1.5px solid var(--border2)!important; color:var(--text)!important; }
.btn-secondary:hover{ border-color:var(--blue)!important; color:var(--blue)!important; }
.btn:focus-visible{ outline:none; box-shadow:var(--ring)!important; }

/* ── 5. CARDS & PANELS ───────────────────────────────────────────────────────── */
.card,.metric-card,.panel,.tbl-wrap.card{
  background:var(--card)!important; border:1px solid var(--border)!important;
  border-radius:var(--r-lg)!important; box-shadow:var(--shadow-sm)!important;
}
.card:hover{ box-shadow:var(--shadow)!important; }

/* ── 6. PAGE HEADER / hero band ──────────────────────────────────────────────── */
.page-header{
  background:linear-gradient(180deg,var(--bg2),var(--bg))!important; border-bottom:1px solid var(--border)!important;
  position:relative; overflow:hidden;
}
.page-header::before{ content:''; position:absolute; inset:-40% -10% auto 40%; height:320px; z-index:0;
  background:radial-gradient(50% 60% at 70% 10%, color-mix(in srgb,var(--blue2) 16%,transparent), transparent 70%); pointer-events:none; }
.page-header .container{ position:relative; z-index:1; }
.page-header h1{ font-weight:850; font-size:clamp(1.5rem,3vw,2.15rem); }
.breadcrumb a{ color:var(--text3); } .breadcrumb a:hover{ color:var(--blue); }

/* ── 7. DATA TABLES ──────────────────────────────────────────────────────────── */
.data-table thead th{ background:var(--bg2)!important; color:var(--text3)!important;
  font-size:.68rem!important; text-transform:uppercase; letter-spacing:.06em; font-weight:800!important;
  border-bottom:1px solid var(--border)!important; }
.data-table td{ border-bottom:1px solid var(--border)!important; }
.data-table tbody tr:hover{ background:var(--bg2)!important; }

/* ── 8. PILLS / BADGES (phase, status) ───────────────────────────────────────── */
.pill,.phase-pill,.badge,.chip{ border-radius:99px!important; font-weight:800; letter-spacing:.02em; }

/* ── 9. FORMS ────────────────────────────────────────────────────────────────── */
.input,input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{
  border-radius:var(--r)!important; border:1.5px solid var(--border)!important; background-color:var(--bg2)!important; color:var(--text)!important;
}
.input:focus,input:focus,select:focus,textarea:focus{ border-color:var(--blue)!important; box-shadow:var(--ring)!important; background-color:var(--card)!important; outline:none; }

/* ── 10. FOOTER ──────────────────────────────────────────────────────────────── */
.footer{ background:var(--navy)!important; border-top:1px solid var(--border)!important; }
.footer, .footer a, .footer p, .footer h5{ color:#c6d4ee; }
.footer a:hover{ color:#fff; }
.footer-logo{ font-weight:850; }

/* ── 11. TICKER ──────────────────────────────────────────────────────────────── */
.ticker-bar{ background:var(--navy)!important; border:0!important; }

/* ============================================================================
   REUSABLE CONCEPT COMPONENTS  (for bespoke rebuilt pages — prefix zr-)
   ============================================================================ */
.zr-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.zr-eyebrow{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.zr-h2{ font-size:clamp(1.5rem,3.2vw,2.15rem); font-weight:850; line-height:1.12; text-wrap:balance; margin:10px 0 0; }
.zr-lead{ font-size:1.02rem; color:var(--text3); max-width:60ch; margin-top:12px; line-height:1.65; }
.zr-pad{ padding:clamp(46px,6.5vw,80px) 0; }
.zr-center{ text-align:center; margin:0 auto; } .zr-center .zr-lead{ margin-inline:auto; }

/* hero */
.zr-hero{ padding:clamp(44px,6vw,78px) 0 clamp(28px,4vw,44px); position:relative; overflow:hidden; }
.zr-hero::before{ content:''; position:absolute; inset:-20% -10% auto -10%; height:480px; z-index:0;
  background:radial-gradient(60% 60% at 78% 18%, color-mix(in srgb,var(--blue2) 20%,transparent), transparent 70%),
             radial-gradient(50% 50% at 8% 0%, color-mix(in srgb,var(--blue) 14%,transparent), transparent 70%); }
.zr-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; }
.zr-hero h1{ font-size:clamp(2rem,4.6vw,3.15rem); font-weight:880; line-height:1.06; }
.zr-hl{ background:linear-gradient(120deg,var(--blue),var(--blue2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.zr-slogan{ margin-top:15px; font-size:1.1rem; color:var(--text2); font-weight:600; max-width:34ch; }
.zr-sub{ margin-top:11px; font-size:.98rem; color:var(--text3); max-width:46ch; line-height:1.65; }
.zr-cta{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.zr-trust{ display:flex; align-items:center; gap:8px; margin-top:15px; font-size:.82rem; color:var(--text3); flex-wrap:wrap; }
.zr-trust b{ color:var(--text2); } .zr-trust .d{ width:4px;height:4px;border-radius:50%;background:var(--green); }
@media(max-width:820px){ .zr-hero-grid{ grid-template-columns:1fr; gap:28px; } }

/* pick card */
.zr-pick{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:20px; position:relative; }
.zr-live{ position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.zr-live i{ width:7px;height:7px;border-radius:50%;background:var(--green); animation:zrpulse 2s infinite; }
@keyframes zrpulse{70%{box-shadow:0 0 0 8px rgba(15,157,107,0)}100%{box-shadow:0 0 0 0 rgba(15,157,107,0)}}
.zr-cap{ font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text3); }
.zr-sym{ display:flex; align-items:baseline; gap:10px; margin-top:8px; } .zr-sym b{ font-size:1.7rem;font-weight:850; }
.zr-sym span{ font-size:.86rem; color:var(--text3); }
.zr-phase{ display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:var(--green-bg);padding:5px 10px;border-radius:99px;margin-top:12px; }
.zr-meter{ height:8px;border-radius:99px;background:var(--bg2);margin-top:7px;overflow:hidden;border:1px solid var(--border); }
.zr-meter i{ display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--green)); }
.zr-levels{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px; }
.zr-levels > div{ background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:10px; }
/* child combinator is REQUIRED: a descendant selector also matched the inner
   .k and .v divs, rendering three stacked boxes per level instead of one. */
.zr-levels .k{ font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:700; }
.zr-levels .v{ font-size:1rem;font-weight:800;margin-top:3px; }

/* snapshot band + feature grid */
.zr-snapgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.zr-scard{ background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column; }
.zr-scard .st{ font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text3); }
.zr-scard .big{ font-size:1.65rem;font-weight:850;margin-top:8px; }
@media(max-width:900px){ .zr-snapgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .zr-snapgrid{ grid-template-columns:1fr; } }
.zr-feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.zr-fcard{ background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);transition:.16s; }
.zr-fcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.zr-fcard .ic{ width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.25rem;background:color-mix(in srgb,var(--blue) 12%,transparent);margin-bottom:14px; }
@media(max-width:860px){ .zr-feat{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .zr-feat{ grid-template-columns:1fr; } }
.zr-up{ color:var(--green); } .zr-dn{ color:var(--red); }

/* ============================================================================
   MOBILE-APP / UX / ACCESSIBILITY BEST-PRACTICE LAYER (2026)
   The Android app is a TWA over zeme.app, so the web IS the app — these rules
   make it feel native: comfortable touch targets, no sideways scroll, safe-area
   insets, respectful motion, and visible focus for keyboard/AT users.
   ============================================================================ */
/* never let any page scroll sideways on a phone */
html,body{ overflow-x:hidden; max-width:100%; }
img,video,canvas,svg,table{ max-width:100%; }
/* comfortable tap targets on touch devices (Apple/Google HIG ≈ 44px) */
@media (pointer:coarse){
  .btn,.nav-link,.pill,a.chart-btn,button,.tab,.quick-q,select,input[type=checkbox]{ min-height:44px; }
  .btn{ padding-block:12px; }
}
/* honour the notch / home indicator on installed PWA + modern phones */
@supports(padding:max(0px)){
  .nav,.navbar,nav.nav{ padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .footer{ padding-bottom:max(24px,env(safe-area-inset-bottom)); }
}
/* visible keyboard focus everywhere (a11y / WCAG 2.2) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}
/* skip-to-content link (injected site-wide by main.js) for keyboard users */
.zr-skip{ position:absolute; left:-9999px; top:0; z-index:9999; background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; }
.zr-skip:focus{ left:0; }
/* wide tables must SCROLL inside their wrapper, never get clipped by the
   body's overflow-x:hidden above (systemic fix — .tbl-wrap was undefined in
   main.css, so unwrapped wide tables were being cut off). */
.tbl-wrap,.scr-wrap{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
[style*="overflow-x"]{ -webkit-overflow-scrolling:touch; }

/* ============================================================================
   CONCEPT SECTIONS — ported from the approved 2026-07-26 artifacts
   "ZEME AI — Homepage Concept" + "ZEME AI — Full Website Concept".
   Namespaced zr- so nothing collides with main.css. Used by index-concept.html.
   ============================================================================ */

/* trust strip */
.zr-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg2); }
.zr-strip-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:22px 0; }
.zr-strip .item{ text-align:center; }
.zr-strip .num{ font-size:1.5rem; font-weight:850; letter-spacing:-.02em; }
.zr-strip .lbl{ font-size:.72rem; color:var(--text3); margin-top:2px; font-weight:600; }
@media(max-width:760px){ .zr-strip-row{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .zr-strip .item:last-child{ grid-column:1/-1; } }

/* the problem (navy) */
.zr-problem{ background:var(--navy); color:#eaf1fb; }
.zr-problem .zr-eyebrow{ color:var(--blue2); }
.zr-problem .zr-h2{ color:#fff; }
.zr-problem .zr-lead{ color:#aebdd6; }
.zr-chaos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px; }
/* NOTE: these were once .zr-chaos .card — but redesign.css section 5 styles a
   GLOBAL .card with !important, so the translucent navy panel was overridden to
   solid white while the text stayed #a7b6d0: light grey on white, ~1.9:1
   contrast, unreadable. Namespaced to .zr-ccard so nothing can override it. */
.zr-chaos .zr-ccard{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:22px; }
.zr-chaos .zr-ccard h4{ font-size:1rem; margin-bottom:8px; color:#fff; display:flex; gap:9px; align-items:center; }
.zr-chaos .zr-ccard p{ font-size:.9rem; color:#c3d0e4; line-height:1.65; }
.zr-chaos .x{ color:#f2748a; }
.zr-verdict{ margin-top:26px; font-size:1.25rem; font-weight:800; text-align:center; color:#fff; text-wrap:balance; }
.zr-verdict span{ color:#f2748a; }
@media(max-width:760px){ .zr-chaos{ grid-template-columns:1fr; } }

/* how it works */
.zr-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; counter-reset:s; }
.zr-step{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 22px; position:relative; box-shadow:var(--shadow-sm); }
.zr-step::before{ counter-increment:s; content:counter(s); position:absolute; top:-14px; left:22px;
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff; display:grid; place-items:center; font-weight:850; font-size:1rem; box-shadow:var(--shadow-sm); }
.zr-step h4{ margin:14px 0 8px; font-size:1.08rem; font-weight:800; }
.zr-step p{ font-size:.92rem; color:var(--text3); line-height:1.65; }
@media(max-width:760px){ .zr-steps{ grid-template-columns:1fr; gap:26px; } }

/* proof: tiles + public ledger */
.zr-proofbg{ background:var(--bg2); }
.zr-proofgrid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:36px; }
.zr-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.zr-tile{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.zr-tile .n{ font-size:2rem; font-weight:880; letter-spacing:-.02em; color:var(--green); }
.zr-tile .n.blue{ color:var(--blue); }
.zr-tile .l{ font-size:.82rem; color:var(--text3); margin-top:4px; font-weight:600; }
.zr-ledger{ background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.zr-ledger .lh{ padding:14px 18px; border-bottom:1px solid var(--border); font-weight:800; font-size:.9rem; display:flex; justify-content:space-between; align-items:center; }
.zr-ledger .lh .tag{ font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--green); background:var(--green-bg); padding:4px 9px; border-radius:99px; }
.zr-lrow{ display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); font-size:.88rem; align-items:center; }
.zr-lrow:last-child{ border-bottom:0; }
.zr-lrow .s{ font-weight:800; } .zr-lrow .d{ font-size:.74rem; color:var(--text3); }
.zr-lrow .g{ font-weight:800; color:var(--green); text-align:right; }
@media(max-width:760px){ .zr-proofgrid{ grid-template-columns:1fr; gap:26px; } }

/* why traders trust ZEME (navy band) */
.zr-band{ background:var(--navy); color:#eaf1fb; }
.zr-band .zr-eyebrow{ color:var(--blue2); } .zr-band .zr-h2{ color:#fff; }
.zr-bandgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; }
.zr-bcard{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:20px; }
.zr-bcard .ic{ font-size:1.3rem; }
.zr-bcard h4{ font-size:.98rem; margin:10px 0 6px; color:#fff; }
.zr-bcard p{ font-size:.84rem; color:#a7b6d0; line-height:1.6; }
@media(max-width:860px){ .zr-bandgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .zr-bandgrid{ grid-template-columns:1fr; } }

/* Ask ZEME promo band */
.zr-askband{ background:linear-gradient(135deg,var(--navy),#1e40af); border-radius:24px; padding:clamp(26px,4vw,44px); color:#fff; position:relative; overflow:hidden; }
.zr-askband::after{ content:'💬'; position:absolute; right:-10px; bottom:-24px; font-size:150px; opacity:.08; }
.zr-askband .zr-eyebrow{ color:var(--blue2); }
.zr-askband h3{ font-size:clamp(1.35rem,2.8vw,1.9rem); font-weight:850; letter-spacing:-.02em; margin-top:8px; text-wrap:balance; }
.zr-askband p{ color:#c6d4ee; margin-top:10px; max-width:52ch; }
.zr-langpills{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.zr-lp{ font-size:.78rem; font-weight:800; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:6px 13px; border-radius:99px; }
.zr-askband .btn-primary{ background:#fff!important; color:#1e40af!important; border-color:#fff!important; margin-top:20px; }

/* pricing */
.zr-plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:38px; max-width:720px; margin-inline:auto; }
.zr-plan{ background:var(--card); border:1.5px solid var(--border); border-radius:18px; padding:28px; position:relative; }
.zr-plan.blue{ border-color:var(--blue); box-shadow:0 12px 40px rgba(29,78,216,.16); }
.zr-plan .badge{ position:absolute; top:-11px; left:28px; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--blue); color:#fff; padding:4px 11px; border-radius:99px; }
.zr-plan h4{ font-size:1.05rem; font-weight:850; }
.zr-plan .price{ font-size:2rem; font-weight:880; margin:8px 0 2px; letter-spacing:-.02em; }
.zr-plan .price small{ font-size:.8rem; font-weight:600; color:var(--text3); }
.zr-plan ul{ list-style:none; margin:16px 0 20px; display:grid; gap:9px; padding:0; }
.zr-plan li{ font-size:.88rem; color:var(--text2); display:flex; gap:9px; align-items:flex-start; }
.zr-plan li::before{ content:'✓'; color:var(--green); font-weight:900; }
@media(max-width:620px){ .zr-plans{ grid-template-columns:1fr; } }

/* final CTA */
.zr-final{ background:linear-gradient(135deg,var(--navy),#1e40af); color:#fff; text-align:center; border-radius:26px; padding:clamp(40px,6vw,64px) 24px; margin:clamp(40px,6vw,70px) 0; }
.zr-final h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:880; letter-spacing:-.02em; text-wrap:balance; }
.zr-final p{ color:#c6d4ee; margin-top:12px; font-size:1.02rem; }
.zr-final .btn-primary{ background:#fff!important; color:#1e40af!important; border-color:#fff!important; margin-top:24px; }
.zr-final small{ display:block; margin-top:14px; color:#9fb2d6; font-size:.8rem; }
.zr-disc{ background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; font-size:.74rem; color:var(--text3); line-height:1.6; margin-top:24px; }

/* ── "Today on PSX" snapshot band (Full Website Concept) ─────────────────────
   zr-snapgrid / zr-scard were already ported; these are the card internals:
   breadth bar, fear-greed gauge, verdict pill and stat rows.               */
.zr-snaphead{ display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.zr-snaphead .live{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:var(--green); }
.zr-snaphead .live i{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:zrpulse 2s infinite; }
.zr-scard .sub{ font-size:.8rem; color:var(--text3); margin-top:2px; }
.zr-scard .chg.up{ color:var(--green); } .zr-scard .chg.dn{ color:var(--red); }
.zr-scard .cta{ margin-top:auto; padding-top:13px; font-size:.8rem; font-weight:700; color:var(--blue); }
.zr-barrow{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--text3); margin-top:11px; }
.zr-barrow b{ color:var(--text); }
.zr-vpill{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:99px; }
.zr-vpill.bull{ color:var(--green); background:var(--green-bg); }
.zr-vpill.bear{ color:var(--red); background:var(--red-bg); }
.zr-vpill.flat{ color:var(--yellow); background:var(--yellow-bg); }
.zr-breadthbar{ height:8px; border-radius:99px; overflow:hidden; display:flex; margin-top:10px; border:1px solid var(--border); }
.zr-breadthbar .up{ background:var(--green); } .zr-breadthbar .dn{ background:var(--red); }
.zr-fggauge{ height:10px; border-radius:99px; position:relative; margin:16px 0 7px;
  background:linear-gradient(90deg,#dc2626,#f59e0b,#eab308,#22c55e,#16a34a); }
.zr-fggauge .mk{ position:absolute; top:-4px; width:4px; height:18px; background:var(--text);
  border-radius:2px; box-shadow:0 0 0 3px var(--card); }
.zr-fgscale{ display:flex; justify-content:space-between; font-size:.62rem; color:var(--text3); }
.zr-asof{ font-size:.68rem; color:var(--text3); margin-top:10px; font-style:italic; }

/* ── SuperCharts showcase + bilingual Ask ZEME (owner request 2026-07-27) ──── */
.zr-showcase{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; margin-top:36px; }
@media(max-width:900px){ .zr-showcase{ grid-template-columns:1fr; gap:28px; } }
.zr-chartcard{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow); padding:18px; position:relative; overflow:hidden; }
.zr-chartcard .hd{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.zr-chartcard .hd b{ font-size:1.35rem; font-weight:850; letter-spacing:-.02em; }
.zr-chartcard .hd span{ font-size:.82rem; color:var(--text3); }
.zr-chartsvg{ width:100%; height:auto; display:block; margin-top:8px; }
.zr-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:.72rem; color:var(--text3); font-weight:600; }
.zr-legend i{ display:inline-block; width:14px; height:0; border-top-width:2px; border-top-style:solid; margin-right:5px; vertical-align:middle; }
.zr-why{ display:grid; gap:14px; margin-top:22px; }
.zr-why .row{ display:flex; gap:12px; align-items:flex-start; }
.zr-why .n{ flex:0 0 30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:.95rem;
  background:color-mix(in srgb,var(--blue) 12%,transparent); }
.zr-why h4{ font-size:.97rem; font-weight:800; margin-bottom:3px; }
.zr-why p{ font-size:.88rem; color:var(--text3); line-height:1.6; }

/* bilingual Ask ZEME */
.zr-chat{ background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.zr-chathead{ display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg2); }
.zr-chathead .av{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff; display:grid; place-items:center; font-weight:900; font-size:.82rem; }
.zr-chathead b{ font-size:.93rem; } .zr-chathead span{ font-size:.72rem; color:var(--green); font-weight:700; display:flex; align-items:center; gap:5px; }
.zr-chathead span i{ width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; }
.zr-chatbody{ padding:20px 18px; display:flex; flex-direction:column; gap:14px; }
.zr-bub{ max-width:84%; padding:12px 15px; border-radius:16px; font-size:.9rem; line-height:1.6; }
.zr-bub.u{ align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:5px; }
.zr-bub.z{ align-self:flex-start; background:var(--bg2); border:1px solid var(--border); border-bottom-left-radius:5px; }
.zr-bub.rtl{ direction:rtl; text-align:right; font-size:.95rem; }
.zr-bub.u.rtl{ border-bottom-right-radius:16px; border-bottom-left-radius:5px; }
.zr-lang{ display:inline-flex; background:var(--bg2); border:1px solid var(--border); border-radius:11px; padding:3px; margin-top:16px; }
.zr-lang button{ font:inherit; font-weight:750; font-size:.84rem; color:var(--text3); background:transparent; border:0;
  padding:8px 20px; border-radius:8px; cursor:pointer; }
.zr-lang button.on{ background:var(--blue); color:#fff; }
.zr-chips{ display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }
.zr-chip{ font-size:.72rem; font-weight:800; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:5px 9px; }
.zr-chip small{ color:var(--text3); font-weight:600; }

/* ── nav: Ask ZEME / Go Blue overlap — REAL fix ─────────────────────────────
   First attempt only added margins, which did nothing: the cause is not
   spacing. .nav-links is a flex child holding 8 items (incl. a search box) and
   a flex child's default min-width is auto, so it REFUSES to shrink below its
   content and simply overflows on top of .nav-right — "Ask ZEME" landing over
   "Go Blue". The fix is min-width:0 so it may shrink, plus a non-shrinking
   .nav-right. (Same root cause as the USA_AI 2026-07-21 responsive bug.)   */
.nav-inner{ display:flex; align-items:center; gap:14px; }
.nav-links{ flex:1 1 auto; min-width:0; }
.nav-right{ flex:0 0 auto; display:flex; align-items:center; gap:9px; }
.nav-right > a{ white-space:nowrap; }
.nav-links .nav-chat{ margin-right:4px; white-space:nowrap; }
.nav-chat .zblue-tag{ margin-left:5px; }
/* the search field is the only elastic item — let it give up space first */
.nav-search{ flex:0 1 auto; min-width:0; }
/* min-width:0 so the input can never exceed its own 36px collapsed
   parent. It measured 96px wide against a 36px container and painted
   50px over the Ask ZEME pill (1440x900, 2026-08-28). main.css asks for
   min-width:0 at >=1201px, but this file loads AFTER it at equal
   specificity, so this declaration is the one that decides. Both halves
   of the behaviour are stated here so they cannot drift apart again. */
.nav-search input{ width:100%; min-width:0; }
.nav-search:focus-within input{ min-width:96px; }
/* visually separate the two CTAs so they never read as one run-on item */
.nav-right a[href="blue.html"]{ padding-left:11px!important; border-left:1px solid var(--border); }
@media(max-width:1200px){ .nav-search{ display:none; } }
@media(max-width:1100px){ .nav-right a[href="blue.html"]{ border-left:0; } }

/* ── heatmap snapshot (mini treemap) ───────────────────────────────────────── */
.zr-hmwrap{ display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:stretch; margin-top:30px; }
@media(max-width:860px){ .zr-hmwrap{ grid-template-columns:1fr; } }
.zr-hm{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:14px; }
.zr-hmgrid{ display:grid; grid-template-columns:repeat(10,1fr); gap:3px; }
@media(max-width:700px){ .zr-hmgrid{ grid-template-columns:repeat(6,1fr); } }
.zr-cell{ aspect-ratio:1/1; border-radius:5px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; font-weight:800; line-height:1.1;
  font-size:.58rem; letter-spacing:-.01em; overflow:hidden; padding:2px; text-decoration:none; }
.zr-cell b{ font-size:.62rem; }
.zr-cell small{ font-size:.5rem; opacity:.9; font-weight:700; }
.zr-hmlegend{ display:flex; align-items:center; gap:6px; margin-top:11px; font-size:.66rem; color:var(--text3); font-weight:700; }
.zr-hmlegend .sw{ width:16px; height:9px; border-radius:2px; }
.zr-hmside{ display:flex; flex-direction:column; justify-content:center; }
.zr-hmside h4{ font-size:1.02rem; font-weight:850; margin-bottom:8px; }
.zr-hmside p{ font-size:.9rem; color:var(--text3); line-height:1.6; }
.zr-hmstat{ display:flex; gap:16px; margin-top:16px; }
.zr-hmstat div{ flex:1; }
.zr-hmstat .n{ font-size:1.35rem; font-weight:850; }
.zr-hmstat .l{ font-size:.68rem; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

/* ── month ledger: all of the month's daily picks, best one badged ─────────── */
.zr-ledger .lbody{ max-height:326px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.zr-lrow.best{ background:color-mix(in srgb,var(--green) 9%,transparent); }
.zr-lrow .besttag{ display:inline-block; font-size:.54rem; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; background:var(--green); padding:2px 6px; border-radius:99px;
  margin-left:7px; vertical-align:middle; }
.zr-ledger .lfoot{ padding:11px 18px; border-top:1px solid var(--border); background:var(--bg2);
  font-size:.76rem; color:var(--text3); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.zr-ledger .lfoot b{ color:var(--text); }

/* ── icon system ────────────────────────────────────────────────────────────
   Emoji were being used as UI icons. Emoji render differently on every OS,
   carry a cartoon tone that undercuts a financial product, and read as
   machine-assembled. Replaced with a single stroked line-icon set: one weight,
   one corner radius, currentColor so they inherit context.                  */
.zi{ width:1.05em; height:1.05em; flex:none; stroke:currentColor; fill:none;
     stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em; }
.zr-why .n .zi, .zr-fcard .ic .zi, .zr-bcard .ic .zi{ width:19px; height:19px; }
.zr-why .n, .zr-fcard .ic{ color:var(--blue); }
/* 2026-09-03 (testing doc, day 4, pictures 20-22: "the text colour is too dark
   or blending into the background"). .zr-fcard is an <a> and set no colour, so
   every heading inherited the global a{color:var(--blue)}. Inherited link
   colour is state-dependent, and inside the Android TWA force-dark can rewrite
   it -- one heading came out near-black on the same dark card where its
   identical sibling was bright blue. Pin it on every state; the look is
   unchanged, only the ambiguity is gone. */
.zr-fcard,.zr-fcard:link,.zr-fcard:visited,.zr-fcard:hover,.zr-fcard:active{ color:var(--blue); }
.zr-fcard h4{ color:var(--blue); font-size:1rem; margin:0 0 6px; font-weight:800; }
.zr-fcard p{ color:var(--text2); margin:0; }
.zr-bcard .ic{ color:var(--blue2); }
.zr-scard .st .zi{ width:14px; height:14px; color:var(--text3); margin-right:5px; }
.zr-phase .zi{ width:13px; height:13px; margin-right:4px; }
/* treemap: area = market cap, colour = today's move (Finviz/TradingView idiom) */
.zr-tmap{ width:100%; height:auto; display:block; border-radius:10px; overflow:hidden; }
.zr-tmap text{ font-family:inherit; font-weight:800; fill:#fff; pointer-events:none; }
.zr-tmap .t-sym{ font-size:13px; letter-spacing:-.02em; }
.zr-tmap .t-chg{ font-size:11px; font-weight:700; opacity:.92; }
.zr-tmap rect{ stroke:var(--card); stroke-width:1.5; transition:opacity .14s; }
.zr-tmap a:hover rect{ opacity:.82; }
.zr-phasebar{ display:flex; height:7px; border-radius:99px; overflow:hidden; margin-top:11px; border:1px solid var(--border); }
.zr-phasebar i{ display:block; height:100%; }

/* ── heatmap: horizon toggle + grid (mobile-first) ─────────────────────────
   The market-cap treemap read well on a desktop and badly on a phone: tiny
   tiles, unreadable labels. With ~80% mobile traffic the equal-cell grid is
   the right default, and the period toggle gives back the 1D-1Y comparison. */
.zr-hzrow{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.zr-hzrow button{ font:inherit; font-size:.78rem; font-weight:800; color:var(--text3);
  background:var(--bg2); border:1px solid var(--border); border-radius:9px;
  padding:7px 13px; cursor:pointer; min-height:38px; }
.zr-hzrow button.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.zr-hmgrid{ display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.zr-cell{ aspect-ratio:1/1; border-radius:6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; font-weight:800; line-height:1.1;
  overflow:hidden; padding:2px; text-decoration:none; }
.zr-cell b{ font-size:.62rem; letter-spacing:-.02em; }
.zr-cell small{ font-size:.52rem; opacity:.94; font-weight:700; }
@media(max-width:900px){ .zr-hmgrid{ grid-template-columns:repeat(6,1fr); } }
@media(max-width:560px){ .zr-hmgrid{ grid-template-columns:repeat(4,1fr); gap:5px; }
  .zr-cell b{ font-size:.7rem; } .zr-cell small{ font-size:.58rem; }
  .zr-hzrow button{ flex:1 1 auto; min-width:46px; } }

/* ── conversion additions (2026-07-28) ──────────────────────────────────── */
/* proof above the fold: the track record was buried far down the page */
.zr-proofline{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.86rem;
  color:var(--text2); background:var(--green-bg); border:1px solid var(--green-bd);
  border-radius:99px; padding:8px 15px; width:fit-content; max-width:100%; flex-wrap:wrap; }
/* 2026-09-03 (pictures 4 and 13: "the text inside the 94% box is not properly
   centered" / "all the text in the 94 box is going outside and is not centered").
   The line had no layout rule at all -- only a colour on its <b> -- so it fell
   to left alignment inside a section whose own intro block uses .zr-center.
   balance keeps the last line from stranding one short word on a phone. */
.zr-proofline{ text-align:center; text-wrap:balance; }
.zr-proofline b{ color:var(--green); font-weight:850; }
.zr-realnote{ font-size:.72rem; color:var(--text3); margin-top:4px; }
.zr-freebadge{ display:inline-block; margin-top:14px; font-size:.78rem; font-weight:800;
  color:var(--green); background:var(--green-bg); border:1px solid var(--green-bd);
  border-radius:99px; padding:6px 14px; }
/* sticky CTA: on a phone almost nobody scrolls to the final call to action */
.zr-stickycta{ position:fixed; left:0; right:0; bottom:0; z-index:6000; display:none;
  align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--card) 94%,transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--border); box-shadow:0 -6px 24px rgba(11,18,32,.10); }
.zr-stickycta span{ font-size:.82rem; color:var(--text2); font-weight:600; }
.zr-stickycta b{ color:var(--text); font-weight:850; }
.zr-stickycta .btn{ padding:10px 16px; font-size:.86rem; white-space:nowrap; }
@media(max-width:760px){ .zr-stickycta{ display:flex; } body{ padding-bottom:64px; } }

/* ── CHAT BUBBLE vs THE STICKY CTA ──────────────────────────────────────
   .zr-stickycta (above) is a ~64px fixed bar at bottom:0, shown on phones.
   chatbot-widget.js pins #zc-bubble at bottom:24px — so the bubble sat INSIDE
   the bar and covered its right end, which is the See button the bar exists
   to deliver. Reported from a phone 2026-08-16; reproduced at 390px and 414px
   (bubble x432-488 y676-732 over bar y685-748).

   env(safe-area-inset-bottom) mirrors the padding the bar itself uses, so this
   clears the iPhone home indicator by the same amount the bar grows.

   'body #zc-bubble' outranks the widget's own '#zc-bubble', which is injected
   into <head> at RUNTIME and would otherwise win on source order.

   Deliberately scoped to this stylesheet: only the homepage loads it, and the
   sticky bar exists nowhere else, so the bubble must NOT move on other pages. */
@media (max-width: 760px) {
  body #zc-bubble { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  body #zc-panel  { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
}