/* ClearRun marketing site — getclearrun.com
   Tokens are the app's design language (web/src/theme.css), scoped to the
   short names the landing design uses. Dark is the default register. */

:root {
  --canvas:#0a1215; --panel:#0d181d; --bar:#101b20; --field:#16242b;
  --hair:rgba(148,180,190,.14);
  --t1:#e4edf0; --t2:#93aab3; --t3:#5f7883;
  --cyan:#63cbdd; --cyanB:#8adcea; --teal:#0c6b7d; --wash:rgba(99,203,221,.13);
  --clearC:#a6bac2; --clearBg:#1e2f36;
  --modC:#eec25c;   --modBg:#31290f;
  --highC:#ffa075;  --highBg:#392012;
  --sevC:#ff9d96;   --sevBg:#3f1a19;
  --onTeal:#eafcff;
  --shadow:0 28px 70px -30px rgba(0,0,0,.65);

  --mono:ui-monospace,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:Barlow,sans-serif;
  color-scheme: dark;
}

[data-crtheme="light"] {
  --canvas:#eef2f3; --panel:#f6f9fa; --bar:#e7eef0; --field:#ffffff;
  --hair:rgba(20,60,70,.16);
  --t1:#14262d; --t2:#46606a; --t3:#6c8892;
  --cyan:#0f8ba3; --cyanB:#0c7183; --teal:#0f8ba3; --wash:rgba(15,139,163,.1);
  --clearC:#46606a; --clearBg:#dde7ea;
  --modC:#8a6410;   --modBg:#fbf0d3;
  --highC:#9c4a1c;  --highBg:#fde3d2;
  --sevC:#b03a32;   --sevBg:#fddddb;
  --shadow:0 24px 60px -34px rgba(20,60,70,.5);
  color-scheme: light;
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0;
  background:var(--canvas);
  color:var(--t1);
  font:500 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.015em; text-wrap:pretty; }
h1 { font-size:clamp(40px,6.2vw,68px); line-height:1.02; }
h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.1; }
p  { margin:0; }

a { color:var(--cyan); text-decoration:none; }
a:hover { color:var(--cyanB); }

button { font-family:inherit; }

:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--teal); color:var(--onTeal); padding:10px 16px; border-radius:0 0 9px 0;
  font:700 13px var(--sans);
}
.skip:focus { left:0; color:var(--onTeal); }

/* ── layout ───────────────────────────────────────────── */

.wrap { max-width:1160px; margin:0 auto; padding-inline:clamp(16px,4vw,40px); }
.wrap.narrow { max-width:820px; }

.stack { display:flex; flex-direction:column; gap:26px; padding-block:clamp(44px,7vw,80px); }
.stack.center { align-items:center; text-align:center; gap:18px; }

.band-section { border-top:1px solid var(--hair); background:var(--bar); }
.closing { border-top:1px solid var(--hair); }
.closing .stack { padding-block:clamp(48px,8vw,92px); }

.grid { display:grid; gap:14px; }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:stretch; }

.kicker {
  font:700 11px var(--mono); letter-spacing:.09em; color:var(--cyan);
}
.lede { font-size:16.5px; line-height:1.65; color:var(--t2); max-width:50ch; text-wrap:pretty; }
.body { font-size:15.5px; line-height:1.7; color:var(--t2); max-width:46ch; text-wrap:pretty; }
.mono-label { font:700 10px var(--mono); letter-spacing:.09em; color:var(--t2); }
.mono-label.muted { color:var(--t3); }
.mono-label.wide { letter-spacing:.09em; }

/* ── nav ──────────────────────────────────────────────── */

.nav {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px clamp(16px,4vw,40px);
  background:var(--bar); border-bottom:1px solid var(--hair);
}
.nav-brand { display:flex; align-items:center; gap:10px; color:var(--t1); }
.nav-brand:hover { color:var(--t1); }
.mark { flex:none; border-radius:8px; }
.nav-word { font:800 18px var(--display); letter-spacing:.01em; }
.nav-word.sm { font-size:16px; }

.nav-right { display:flex; align-items:center; gap:16px; flex-wrap:nowrap; margin-left:auto; }
/* display:contents lets the cluster's children share nav-right's gap on desktop;
   the whole cluster collapses into the hamburger menu at ≤760px. */
.nav-desktop { display:contents; }
.nav-links { display:flex; align-items:center; gap:16px; }
.nav-link { color:var(--t2); font:600 13px var(--sans); white-space:nowrap; }
.nav-link:hover { color:var(--t1); }
.nav-login { padding:9px 4px; }              /* "Log in" — sits between the theme toggle and the CTA */
.m-login { color:var(--t2); }                /* muted vs the primary mobile links */

/* hamburger — hidden on desktop, revealed by the ≤760px media query */
.hamburger {
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:38px;
  border:1px solid var(--hair); background:transparent; color:var(--t1);
  border-radius:8px; cursor:pointer;
}
.hamburger:hover { border-color:var(--cyan); }

/* mobile dropdown — a full-width row below the bar (header wraps it down) */
.nav-mobile { flex-basis:100%; flex-direction:column; border-top:1px solid var(--hair); padding-top:6px; }
.nav-mobile[hidden] { display:none; }
.nav-mobile:not([hidden]) { display:flex; }
.m-link { color:var(--t1); font:700 15px var(--sans); padding:13px 4px; }
.m-link:hover { color:var(--cyanB); }
.m-controls {
  display:flex; align-items:center; gap:14px;
  padding:12px 4px 10px; border-top:1px solid var(--hair); margin-top:6px;
}
.m-controls .seg-btn.lg { padding:12px 14px; font-size:11px; }
.icon-btn.lg { min-width:44px; min-height:41px; justify-content:center; }

.seg { display:inline-flex; border:1px solid var(--hair); border-radius:8px; overflow:hidden; }
.seg-btn {
  border:none; cursor:pointer; background:transparent; color:var(--t3);
  font:700 10px var(--mono); letter-spacing:.09em; padding:7px 9px;
}
.seg-btn[aria-pressed="true"] { background:var(--wash); color:var(--cyanB); }
.seg-btn:hover { color:var(--t1); }

.icon-btn {
  border:1px solid var(--hair); background:transparent; color:var(--t2);
  padding:7px 10px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center;
}
.icon-btn:hover { color:var(--t1); border-color:var(--cyan); }
.i-moon { display:none; }
[data-crtheme="light"] .i-sun { display:none; }
[data-crtheme="light"] .i-moon { display:inline; }

/* ── buttons ──────────────────────────────────────────── */

.btn {
  display:inline-block; text-align:center;
  font:700 14.5px var(--sans); padding:13px 22px; border-radius:10px;
  border:1px solid transparent;
}
.btn-primary { background:var(--teal); color:var(--onTeal); }
.btn-primary:hover { filter:brightness(1.15); color:#fff; }
.btn-ghost { border-color:var(--hair); color:var(--t1); padding:12px 20px; }
.btn-ghost:hover { border-color:var(--cyan); color:var(--t1); }
.btn-sm { font-size:13px; padding:9px 16px; border-radius:9px; white-space:nowrap; }
.btn-lg { font-size:15px; padding:14px 26px; }

.row-btns { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ── hero ─────────────────────────────────────────────── */

.hero {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(28px,5vw,64px);
  padding-block:clamp(48px,8vw,100px) clamp(40px,6vw,72px);
}
/* min(Npx,100%) so a column never forces horizontal overflow on a narrow phone */
.hero-copy { flex:1.1; min-width:min(300px,100%); display:flex; flex-direction:column; gap:20px; }
.hero-console { flex:1; min-width:min(300px,100%); max-width:480px; }

.console {
  background:var(--panel); border:1px solid var(--hair); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow);
}
.console-head {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; background:var(--bar); border-bottom:1px solid var(--hair);
}
.console-lane { font:800 15px var(--display); }
.console-body { display:flex; flex-direction:column; gap:15px; padding:18px 16px; }
.console-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.depart-chip {
  font:700 12.5px var(--mono); padding:6px 10px; border-radius:8px;
  border:1px solid var(--cyan); background:var(--wash); color:var(--cyanB);
}
.console-row .sev-chip { margin-left:auto; }

.console-note {
  display:flex; align-items:center; gap:9px; min-height:16px;
  font:600 10.5px var(--mono); letter-spacing:.05em; color:var(--t2);
}
.note-dot {
  flex:none; width:8px; height:8px; border-radius:2px;
  background:var(--sev-bg); border:1px solid var(--sev-c);
  transition:background .5s, border-color .5s;
}

/* ── severity ─────────────────────────────────────────── */

[data-sev] { --sev-c:var(--clearC); --sev-bg:var(--clearBg); }
[data-sev="MODERATE"] { --sev-c:var(--modC);  --sev-bg:var(--modBg); }
[data-sev="HIGH"]     { --sev-c:var(--highC); --sev-bg:var(--highBg); }
[data-sev="SEVERE"]   { --sev-c:var(--sevC);  --sev-bg:var(--sevBg); }

.sev-chip {
  display:inline-flex; align-items:center;
  font:700 11px var(--mono); letter-spacing:.09em;
  padding:7px 12px; border-radius:8px;
  background:var(--sev-bg); color:var(--sev-c);
  transition:background .5s, color .5s;
}
.sev-chip.sm { font-size:9.5px; padding:4px 9px; border-radius:6px; }
.sev-chip.banded { border-left:3px solid var(--sev-c); }

.t-high { color:var(--highC); }

/* ── timeline ─────────────────────────────────────────── */

.timeline-group { display:flex; flex-direction:column; gap:6px; }
.timeline {
  position:relative; height:38px;
  background:var(--field); border:1px solid var(--hair);
  border-radius:8px; overflow:hidden;
}
.timeline.sm { height:26px; background:var(--panel); border-radius:6px; }

.band { position:absolute; top:0; bottom:0; }
.band-mod { background:repeating-linear-gradient(135deg,rgba(238,194,92,.28) 0 6px,rgba(185,138,26,.28) 6px 9px); }
.band-sev { background:repeating-linear-gradient(135deg,rgba(224,82,74,.3) 0 6px,rgba(201,67,60,.3) 6px 9px); }
.band-best {
  position:absolute; top:0; bottom:0;
  background:var(--wash); border-left:2px solid var(--cyan); border-right:2px solid var(--cyan);
}
.marker {
  position:absolute; top:6px; bottom:6px; width:3px; border-radius:2px;
  background:var(--cyanB); transition:left .9s cubic-bezier(.6,0,.3,1);
}
.timeline-ticks {
  display:flex; justify-content:space-between;
  font:600 9.5px var(--mono); color:var(--t3);
}

/* ── story ────────────────────────────────────────────── */

.split {
  display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,72px);
  padding-block:clamp(48px,8vw,96px);
}
.split-copy { flex:1; min-width:min(280px,100%); display:flex; flex-direction:column; gap:16px; }

.timeline-story { flex:1.1; min-width:min(300px,100%); margin:0; padding:0; list-style:none; }
.timeline-story li {
  position:relative; display:grid; grid-template-columns:auto 1fr;
  column-gap:16px; padding:0 0 22px 0;
}
.timeline-story .dot {
  grid-row:1 / span 2; align-self:start;
  width:10px; height:10px; border-radius:50%; margin-top:5px;
  background:var(--t3);
}
/* connector between dots */
.timeline-story li:not(:last-child)::before {
  content:""; position:absolute; left:4.5px; top:19px; bottom:0;
  width:1px; background:var(--hair);
}
.timeline-story time {
  font:700 12px var(--mono); letter-spacing:.07em; color:var(--t3);
  display:block; margin-bottom:4px;
}
.timeline-story span:not(.dot) { font-size:14px; line-height:1.6; color:var(--t2); }
.timeline-story .hot .dot  { background:var(--cyan); }
.timeline-story .hot time  { color:var(--cyanB); }

/* ── cards ────────────────────────────────────────────── */

.card {
  background:var(--panel); border:1px solid var(--hair); border-radius:12px;
  padding:20px; display:flex; flex-direction:column; gap:12px;
}
.card h3 { font-size:17px; letter-spacing:0; }
.card-title { font-size:18px; }
.card p { font-size:13.5px; line-height:1.6; color:var(--t2); }

.step-n {
  font:800 13px var(--display); color:var(--cyan);
  border:1px solid var(--hair); width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}

.vignette {
  margin-top:auto; display:flex; flex-direction:column; gap:8px;
  background:var(--field); border:1px solid var(--hair);
  border-radius:9px; padding:12px;
}
.lane-row { display:flex; align-items:center; gap:10px; }
.lane { font:700 11px var(--mono); color:var(--t2); flex:1; }

.rule-line {
  display:flex; align-items:center; gap:8px;
  font:700 10px var(--mono); letter-spacing:.07em; color:var(--t2);
}
.rule-dot { width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:none; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.tag {
  font:700 9px var(--mono); letter-spacing:.09em; padding:4px 8px; border-radius:5px;
  border:1px solid var(--hair); color:var(--t3);
}
.tag.on { background:var(--wash); color:var(--cyanB); border-color:transparent; }

/* ── pricing ──────────────────────────────────────────── */

.pricing-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.pricing-head > div { display:flex; flex-direction:column; gap:10px; }
.pricing-head .seg { margin-left:auto; border-radius:9px; }
.pricing-head .seg-btn { padding:8px 14px; font-size:11px; letter-spacing:.07em; }

.plan { position:relative; padding:22px 20px; gap:12px; }
.plan.popular { border-color:var(--cyan); }
.pop-flag {
  position:absolute; top:-10px; left:18px;
  background:var(--teal); color:var(--onTeal);
  font:700 9px var(--mono); letter-spacing:.11em;
  padding:4px 9px; border-radius:6px;
}
.plan-name { font-size:19px; }
.plan-tag { font-size:13px; color:var(--t2); }
.plan-price { display:flex; align-items:baseline; gap:8px; }
.plan-price .amount { font:800 38px var(--display); color:var(--t1); }
.plan-price .per { font:600 12px var(--sans); color:var(--t3); }
.plan-bill { font-size:10px; }
.plan-limits {
  font:700 10.5px var(--mono); letter-spacing:.07em; color:var(--t2); line-height:1.9;
}
.plan-cta { margin-top:auto; padding:11px 0; border-radius:9px; font-size:13.5px; }

/* ── faq ──────────────────────────────────────────────── */

.faq { border:1px solid var(--hair); border-radius:12px; background:var(--panel); overflow:hidden; }
.faq-item + .faq-item { border-top:1px solid var(--hair); }
.faq h3 { margin:0; font:inherit; letter-spacing:normal; }
.faq-q {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:15px 18px; border:none; background:transparent; cursor:pointer;
  text-align:left; font:700 14px var(--sans); color:var(--t1);
}
.faq-q:hover { background:var(--bar); }
.faq-q > span:first-child { flex:1; }
.faq-q[aria-expanded="true"] { color:var(--cyanB); }
.chev { flex:none; font-size:10px; color:var(--t3); }
.chev::before { content:"\25B8"; }
.faq-q[aria-expanded="true"] .chev::before { content:"\25BE"; }
.faq-a { padding:0 18px 16px; }
.faq-a p { font-size:13.5px; line-height:1.7; color:var(--t2); }

/* ── footer ───────────────────────────────────────────── */

.footer { border-top:1px solid var(--hair); background:var(--bar); }
.footer-in {
  display:flex; flex-wrap:wrap; gap:24px; align-items:center;
  padding-block:32px 40px;
}
.footer-links { display:flex; gap:18px; flex-wrap:wrap; font:600 12.5px var(--sans); }
.footer-links a { color:var(--t2); }
.footer-links a:hover { color:var(--t1); }
.footer-meta {
  margin-left:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  font:600 10.5px var(--mono); letter-spacing:.09em; color:var(--t3); text-align:right;
}
.footer-meta a { color:var(--t3); }
.footer-meta a:hover { color:var(--t1); }

/* ── legal pages (privacy, terms) ─────────────────────── */

.legal { max-width:800px; padding-block:clamp(36px,6vw,64px); }
.legal-head { display:flex; flex-direction:column; gap:12px; margin-bottom:8px; }
.legal-head h1 { font-size:clamp(30px,4.4vw,44px); }
.legal-updated { font:700 10.5px var(--mono); letter-spacing:.09em; color:var(--t3); }

.legal-note {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--hair);
  border-left:3px solid var(--modC);
  border-radius:10px; padding:14px 16px; margin:22px 0 30px;
  font-size:13px; line-height:1.6; color:var(--t2);
}
.legal-note b { color:var(--t1); }

.legal-toc {
  display:flex; flex-wrap:wrap; gap:8px 18px;
  padding:16px 0 4px; margin-bottom:22px; border-top:1px solid var(--hair);
  font:600 13px var(--sans);
}

.legal h2 {
  font-size:clamp(19px,2.4vw,23px); letter-spacing:-.01em;
  margin:34px 0 12px; scroll-margin-top:76px;
}
.legal h2 .sec-n { color:var(--t3); font-size:.8em; margin-right:8px; }
.legal h3 { font-size:15.5px; margin:20px 0 8px; color:var(--t1); }
.legal p { font-size:14.5px; line-height:1.72; color:var(--t2); margin:0 0 12px; }
.legal ul { margin:0 0 12px; padding-left:20px; }
.legal li { font-size:14.5px; line-height:1.7; color:var(--t2); margin-bottom:6px; }
.legal strong { color:var(--t1); font-weight:700; }
.legal a { text-decoration:underline; text-underline-offset:2px; }

.legal-table { overflow-x:auto; margin:6px 0 16px; }
.legal-table table { border-collapse:collapse; width:100%; min-width:520px; }
.legal-table th, .legal-table td {
  text-align:left; padding:9px 12px; border:1px solid var(--hair);
  font-size:13px; line-height:1.5; color:var(--t2); vertical-align:top;
}
.legal-table th { background:var(--bar); color:var(--t1); font-weight:700; }
.legal-table td:first-child { font-weight:700; color:var(--t1); white-space:nowrap; }

.legal-emph {
  background:var(--panel); border:1px solid var(--hair); border-radius:10px;
  padding:16px 18px; margin:14px 0 18px;
}
.legal-emph p:last-child { margin-bottom:0; }

/* ── motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

@media (max-width:760px) {
  .nav-desktop { display:none; }
  .hamburger { display:inline-flex; }
  .footer-meta { margin-left:0; align-items:flex-start; text-align:left; }
  .pricing-head .seg { margin-left:0; }
}
/* keep the mobile menu out of the desktop layout even if left open on resize */
@media (min-width:761px) {
  .nav-mobile { display:none !important; }
}