/* rr.css: the one shared ReRun visual system. Loaded after each page's own <style>,
   so these tokens and components win. Dark-first palette, follows the OS unless the
   visitor picks a theme (rr-theme.js). One accent colour, spent on the primary action. */
:root{
  --ink:#ffffff; --ink2:#f5f5f7; --panel:#ffffff; --panel2:#fafafa;
  --line:#e3e3e6; --text:#1d1d1f; --muted:#6e6e73;
  --green:#0a7d43; --sky:#0a6fc2; --gold:#7a5b00; --rose:#a3203c;
  --go:#0a7d43; --go-ink:#ffffff;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter var",Inter,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --t1:120ms; --t2:200ms; --t3:320ms; --t4:600ms;
  --r-s:12px; --r-l:20px; --r-pill:999px;
  --stroke:1px solid var(--line);
  --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --e1:var(--hi), 0 1px 2px rgba(0,0,0,.05);
  --e2:var(--hi), 0 8px 24px rgba(0,0,0,.08);
  --e3:var(--hi), 0 24px 64px rgba(0,0,0,.12);
  --shadow:var(--e2);
  --glow:color-mix(in srgb,var(--go) 22%,transparent);
  --pad:22px; --pad-l:32px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ink:#000000; --ink2:#0b0b0c; --panel:#111113; --panel2:#0b0b0c;
  --line:#26262a; --text:#f5f5f7; --muted:#a1a1a6;
  --green:#2fd27a; --sky:#5ab4ff; --gold:#e0b84a; --rose:#ff6b86;
  --go:#2fd27a; --go-ink:#03140a;
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
  --e1:var(--hi), 0 1px 2px rgba(0,0,0,.3);
  --e2:var(--hi), 0 8px 24px rgba(0,0,0,.5);
  --e3:var(--hi), 0 24px 64px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#000000; --ink2:#0b0b0c; --panel:#111113; --panel2:#0b0b0c;
  --line:#26262a; --text:#f5f5f7; --muted:#a1a1a6;
  --green:#2fd27a; --sky:#5ab4ff; --gold:#e0b84a; --rose:#ff6b86;
  --go:#2fd27a; --go-ink:#03140a;
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
  --e1:var(--hi), 0 1px 2px rgba(0,0,0,.3);
  --e2:var(--hi), 0 8px 24px rgba(0,0,0,.5);
  --e3:var(--hi), 0 24px 64px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (min-width:768px){ :root{ --pad:30px; } }

/* Base */
body{background:var(--ink); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55}
h1,h2,h3{letter-spacing:-.022em; line-height:1.1; text-wrap:balance}
h1{font-weight:700; letter-spacing:-.03em}
a{color:var(--sky)}
::selection{background:var(--glow)}

/* Buttons: one filled primary, everything else quiet */
.btn,.play,.funnel-cta,button.rr-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 24px; border-radius:var(--r-pill); font-weight:600; font-size:16px;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:transform var(--t1) var(--ease), opacity var(--t2) var(--ease), box-shadow var(--t2) var(--ease)}
.btn:not(.ghost),.play,.funnel-cta{background:var(--go); color:var(--go-ink); border:0}
.btn.ghost,.rr-quiet{background:transparent; color:var(--text); border:var(--stroke)}
.btn:active,.play:active,.funnel-cta:active{transform:scale(.98)}
@media(hover:hover){ .btn:hover,.play:hover,.funnel-cta:hover{opacity:.9} }

/* Inputs: 16px so phones don't zoom */
input[type=search],input[type=email],input[type=text],input[type=url],input[type=number],textarea,select{
  font-size:16px; color:var(--text); background:var(--panel2); border:var(--stroke); border-radius:var(--r-s);
  padding:13px 16px; transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease)}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--go); box-shadow:0 0 0 4px var(--glow)}

/* Surfaces: one stroke, subtle depth, real padding (nothing touches a border) */
.rr-card,.panel,.box,.calc,.transcript,.moment,.related-card,.stat,.kpi{
  background:var(--panel); border:var(--stroke); border-radius:var(--r-l); box-shadow:var(--e1);
  padding:var(--pad)}
.chip{padding:7px 13px; border-radius:var(--r-pill); border:var(--stroke)}

/* Theme toggle injected by rr-theme.js where a page has none */
.rr-toggle{position:fixed; top:14px; right:14px; z-index:50; width:40px; height:40px; border-radius:var(--r-pill);
  border:var(--stroke); background:var(--panel); color:var(--muted); box-shadow:var(--e2); cursor:pointer;
  font-size:15px; display:grid; place-items:center}

/* pSEO + server-rendered pages hardcode a navy palette; route them through tokens */
.topbar,footer,.funnel,.facts td,.rank td{border-color:var(--line) !important}
.searchcta{border-color:var(--go) !important; border-radius:var(--r-l); padding:var(--pad)}
.calc output,.moment .when{color:var(--go)}
.thumb,.embed{border-color:var(--line) !important; border-radius:var(--r-l)}
.transcript{background:var(--panel)}
.wrap{padding-left:22px; padding-right:22px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important}
}

/* ---- Buttons, pills, kickers: one Apple-style spec, site-wide ----------------------
   html-prefixed so it wins over page-level <style> blocks loaded before or after. */
html .btn, html .play, html .funnel-cta, html button.rr-btn, html .cta-btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; height:auto; padding:0 20px; white-space:nowrap;
  font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1; border-radius:var(--r-pill)}
html .btn.lg, html .fn-big{min-height:48px; padding:0 24px; font-size:17px}
html .btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line, rgba(127,127,127,.35)); box-shadow:none}
/* Kickers / eyebrows: small sans, accent, no box */
html .kicker, html .eyebrow{display:inline-block; font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.01em; text-transform:none; color:var(--go); padding:0; border:0; border-radius:0;
  box-shadow:none; background:none}
/* Chips, tags, status pills: one size */
html .chip, html .tag, html .pill, html .demo-chip, html .qchip{display:inline-flex; align-items:center;
  min-height:30px; padding:0 12px; font-size:13px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap; border-radius:var(--r-pill); line-height:1}
/* Mobile sticky bars: primary ~62%, quiet secondary, both single-line 48px */
@media(max-width:719px){
  html .mcta{gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); align-items:center}
  html .mcta .btn{flex:0 0 auto; min-height:48px; padding:0 16px; font-size:16px}
  html .mcta .btn.go, html .mcta .btn:not(.ghost){flex:1 1 62%}
  html .mcta .btn.ghost{flex:0 1 38%; border-color:var(--line, rgba(127,127,127,.35))}
  html .fn-sticky .cta-btn{width:100%; min-height:48px}
}
@media(max-width:359px){ html .mcta .btn{font-size:15px; padding:0 12px} }
.sm-only{display:none}
@media(max-width:389px){ .mcta .lg-only{display:none} .mcta .sm-only{display:inline} }