/* RunChasr marketing site — shared styles.
   Rebuilt to match the approved Figma design (node 358:596, "runchasr-website-v2"): full-bleed
   120px-gutter layout (not a centered 980px column), Geist/Geist Mono via Google Fonts, a real
   photorealistic iPhone frame image behind every screenshot instead of CSS-drawn bezel chrome. */

:root {
  --bg: #FFFFFF;
  --bg-alt: #F5F7F9;       /* split-loop and feature-grid section bands */
  --bg-card-step: #F5F5F0;
  --bg-card-feature: #EDEDEA;
  --bg-footer: #EDEDEA;
  --border: #DCDCD6;

  --text: #090A0C;
  --text-dim: #6B7280;
  --muted: #8A8D97;

  --accent: #82C300;
  --accent-badge-text: #62A000;
  --accent-badge-bg: rgba(130, 195, 0, 0.13);
  --accent-badge-border: rgba(130, 195, 0, 0.5);

  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(20px, 6vw, 120px);
  --max: 1600px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Nav ---------- */

.site-nav {
  border-bottom: 1px solid var(--border);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* top/bottom only — .wrap already sets left/right via --gutter on this same element; a
     shorthand `padding: 24px 0` here would zero that back out. */
  padding-top: 24px;
  padding-bottom: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand:hover { text-decoration: none; opacity: 0.8; }
.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
}
.wordmark-link {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.nav-links {
  display: flex;
  gap: 32px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav-links a { color: var(--text-dim); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent-badge-text); }

/* ---------- Typography ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
}
h1 .hl { color: var(--accent); }
h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Base h3 is the small mono "kicker" role (see .split-copy h3) — a system label above a human
   statement. Content-heading contexts (FAQ questions, card titles) override to sans below. */
h3 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-badge-text);
}
p { max-width: 62ch; color: var(--text-dim); }
.lede { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 52ch; margin: 0 0 40px; }

/* ---------- Phone mock ---------- */
/* A real photorealistic iPhone frame image composited over the screenshot, matching the Figma
   design's own device asset — not CSS-drawn bezel chrome. The screenshot sits in `.phone-screen`
   (clipped, rounded); `.phone-chrome` is the frame PNG (transparent screen cutout) absolutely
   positioned slightly oversized on top, since the physical bezel extends beyond the screen glass. */
.phone-mock {
  position: relative;
  width: 100%;
  max-width: 270px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.46));
}
.phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 270 / 587;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-chrome {
  position: absolute;
  left: -6%;
  top: -2.4%;
  width: 112%;
  max-width: none;
  height: 105%;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Hero ---------- */

.hero { padding: 0; }
.hero-media {
  width: 100%;
  aspect-ratio: 1096 / 216;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
  display: block;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: start;
  /* padding-top/bottom only — .wrap already sets left/right via --gutter; a shorthand
     `padding: 24px 0 96px` here would zero that back out since both classes hit the same div. */
  padding-top: 24px;
  padding-bottom: 96px;
}
.hero-copy { order: 1; }
.hero-shot { order: 2; justify-self: center; margin-top: -170px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
.btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 56px;
  padding: 0 28px;
  border-radius: 100px;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-store {
  background: var(--text);
  color: #FFFFFF;
  gap: 12px;
  border-color: var(--text);
}
.btn-store:hover { text-decoration: none; filter: brightness(1.3); transform: translateY(-1px); }
.btn-store-icon { flex: none; }
.btn-store-copy { display: flex; flex-direction: column; gap: 1px; font-family: var(--sans); text-transform: none; letter-spacing: normal; }
.btn-store-copy small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.btn-store-copy strong { font-size: 15px; font-weight: 700; }
.btn-ghost { color: var(--text); border-color: var(--text); }
.btn-ghost:hover { color: var(--accent-badge-text); border-color: var(--accent-badge-text); text-decoration: none; }
.cta-note { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin: 0; }

/* ---------- Split sections ---------- */

.split {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}
.split .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split.reverse { border-top: none; background: var(--bg-alt); }
.split.reverse .split-copy { order: 2; }
.split.reverse .split-shot { order: 1; }
.split-shot .phone-mock { margin: 0 auto; }
.split-copy p { margin: 16px 0 0; font-size: 16px; }
.split-copy p + p { margin-top: 16px; }

/* ---------- Three-step process ---------- */

.steps {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}
.steps .wrap { display: flex; flex-direction: column; gap: 64px; }
.steps .head h2, .feature-grid .head h2 { font-size: 36px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.step {
  background: var(--bg-card-step);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.step .num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 36px;
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
}
.step h3 {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.step p { font-size: 14px; line-height: 1.5; margin: 12px 0 0; }

/* ---------- Feature grid ---------- */

.feature-grid {
  padding: 96px 0;
  background: var(--bg-alt);
}
.feature-grid .wrap { display: flex; flex-direction: column; gap: 64px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.feature {
  background: var(--bg-card-feature);
  border-radius: 20px;
  padding: 36px;
}
.feature-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature h3 {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.feature p { font-size: 15px; line-height: 1.5; margin: 16px 0 0; }

.badge-soon {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-badge-text);
  background: var(--accent-badge-bg);
  border: 1px solid var(--accent-badge-border);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  flex: none;
}

/* ---------- Footer ---------- */

footer.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border);
}
footer.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.foot-copy {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
}
.foot-links { display: flex; gap: 32px; font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.foot-links a { color: var(--text-dim); }
.foot-links a:hover { color: var(--text); }

/* ---------- Simple content pages (FAQ / Privacy / Support) ---------- */

.page-head { padding: 64px 0 36px; border-bottom: 1px solid var(--border); }
.page-body { padding-top: 48px; padding-bottom: 88px; max-width: 74ch; }

.qa { padding: 26px 0; border-top: 1px solid var(--border); }
.qa:first-child { border-top: none; padding-top: 0; }
.qa h3 {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.qa p { font-size: 15px; }

.legal h2 {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 14.5px; color: var(--text-dim); }
.legal ul { padding-left: 20px; }
.legal .updated { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.support-card {
  background: var(--bg-card-feature);
  border-radius: 16px;
  padding: 26px 28px;
  margin-top: 24px;
}
.support-card h3 { font-family: var(--sans); text-transform: none; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.support-card p { font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

@media (max-width: 860px) {
  /* Figma's 1096:216 aspect ratio was designed at desktop width — held literally on a narrow
     phone viewport it shrinks the banner to a near-invisible sliver almost entirely covered by
     the overlapping phone. A fixed, taller band keeps the artwork actually visible here. */
  .hero-media { aspect-ratio: auto; height: clamp(220px, 62vw, 320px); }
  .hero-inner, .split .wrap, .features-grid, .steps-grid { grid-template-columns: 1fr; }
  .split.reverse .split-copy, .split.reverse .split-shot { order: unset; }
  /* On a single stacked column the phone needs to come BEFORE the copy, not after — its negative
     margin is meant to pull it up into the header image above, and doing that while it sits below
     the copy text would drag it into the text instead. */
  .hero-shot { order: 1; max-width: 220px; margin-top: -90px; }
  .hero-copy { order: 2; }
  .split-shot .phone-mock { max-width: 240px; }
  h2 { font-size: 32px; }
  .steps .head h2, .feature-grid .head h2 { font-size: 28px; }
  .split, .steps, .feature-grid { padding: 64px 0; }
  .hero-inner { padding-top: 24px; padding-bottom: 64px; }
}

@media (max-width: 560px) {
  .nav-wrap { padding-top: 18px; padding-bottom: 18px; }
  .wordmark-link { display: none; }
  .nav-links { gap: 18px; }
  .cta-row { gap: 12px; }
}