/* RunRoutes landing page.
   Tokens mirror the app's AppTheme.swift design system v2, so the site and
   the app read as one product. Layout rules follow ~/.claude/rules/ui-ux.md:
   no decorative gradients, no scroll reveals, no frosted glass, nested radii,
   44px tap targets. */

/* Self-hosted, subset to Latin and instanced to the two axis ranges this
   stylesheet uses. Google Fonts served 192 KB across two faces at a priority
   above the hero image, and the swap from the fallback was the entire source
   of the desktop CLS. Rebuilt by scripts/landing-font/build.py. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-subset.woff2") format("woff2");
  font-weight: 500 900;
  font-stretch: 79% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0C0B0A;
  --surface: #161412;
  --text: #F5F1EC;
  --muted: #A9A29A;
  --accent: #FF5A00;
  --accent-deep: #EE3400;
  --accent-hi: #FA5D00;
  --on-accent: #1C0A02;
  --success: #3BC479;
  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-control: rgba(255, 255, 255, 0.36);
  --card-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --accent-grad: linear-gradient(135deg, var(--accent-hi), var(--accent-deep));

  /* Radii nest: inner = outer minus the padding between them. */
  --radius-card: 20px;      /* card, 12px padding  */
  --radius-inner: 8px;      /* anything inside one */
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --shadow-soft: 0 20px 40px -15px rgba(12, 8, 4, 0.55);
  --shadow-accent: 0 16px 40px -12px rgba(255, 90, 0, 0.35);
  --tap-min: 44px;

  /* The app sets every title, big number and eyebrow in the CONDENSED cut of
     the system font and keeps body copy in the regular cut (AppTheme.swift).
     Archivo is one variable family with a width axis, so the site can do the
     same thing with the same face rather than a rounded one. */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --width-body: 100;
  --width-display: 79;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-variation-settings: "wdth" var(--width-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A hair of grain over the flat ground, for warmth. Not over a gradient. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.container.narrow { width: min(760px, calc(100% - 48px)); }
.container.center { text-align: center; }

/* The display cut: narrower and less round, the width sport products set
   their titles and numbers in. Same family, different point on the axis. */
h1, h2, h3 {
  margin: 0;
  font-variation-settings: "wdth" var(--width-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(42px, 6vw, 70px); }
h2 { font-size: clamp(31px, 3.8vw, 45px); }
h3 { font-size: 23px; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Flat accent on the emphasised words. Never a gradient in text. */
.accent-text { color: var(--accent); }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 60;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

.skip-link:focus {
  left: var(--space-4);
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 14px var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:active { background: var(--accent-deep); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--stroke-control);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.55); }

.btn-small { padding: 10px var(--space-6); font-size: 15px; }
.btn-large { padding: 18px var(--space-12); font-size: 19px; }
.btn-block { width: 100%; }

.apple-glyph { margin-top: -2px; flex: none; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  font-variation-settings: "wdth" var(--width-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img { border-radius: var(--radius-inner); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* The hit area extends past the label: the floor is 44 in both directions. */
.nav-links a,
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-inner);
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover,
.footer-links a:hover { color: var(--text); }

.nav-links a:focus-visible,
.footer-links a:focus-visible,
.brand:focus-visible,
.section-footnote a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Small screens lose the inline nav but keep every link one tap away, in a
   disclosure rather than nowhere. No JavaScript: details does the work. */

.nav-more { display: none; margin-left: auto; position: relative; }

.nav-more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-inner);
  list-style: none;
  cursor: pointer;
}

.nav-more summary::-webkit-details-marker { display: none; }

.nav-more summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Three dots, drawn rather than imported. */
.nav-more summary span {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text);
  box-shadow: 0 -8px 0 var(--text), 0 8px 0 var(--text);
}

.nav-more-links {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.nav-more-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: 12px; /* panel 20px minus its 8px padding */
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.nav-more-links a:hover { background: rgba(255, 255, 255, 0.06); }

.nav-more-links a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

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

.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--space-16) var(--space-12);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}

.hero-copy h1 { margin-bottom: var(--space-6); }

.hero-sub {
  max-width: 46ch;
  color: var(--muted);
  font-size: 19px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero-note {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 15px;
}

.hero-shot { display: flex; justify-content: center; }

/* ---------- Phone frames ---------- */

/* The device is a real 3D render from the same engine the App Store shots use,
   exported with a transparent background. No CSS frame: drawing one around a
   rendered phone would put a second bezel on the first. The shadow is on the
   image itself so it follows the phone's silhouette, not a rectangle. */
.phone {
  margin: 0;
  line-height: 0;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(12, 8, 4, 0.55));
}

.phone-lean { max-width: 340px; width: 100%; }
.phone-small { max-width: 230px; width: 100%; }
.hero-shot .phone { max-width: 400px; width: 100%; }

/* ---------- Sections ---------- */

.section { padding-block: var(--space-16); }

.section-feature { background: rgba(255, 255, 255, 0.02); }

.section-head { margin-bottom: var(--space-12); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p { max-width: 62ch; color: var(--muted); }
.section-head .lede { font-size: 19px; margin-bottom: var(--space-4); }

.section-footnote {
  margin-top: var(--space-8);
  color: var(--muted);
  font-size: 15px;
}

.section-footnote a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

.step-index {
  color: var(--accent);
  font-variation-settings: "wdth" var(--width-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.step-copy h3 { margin-block: var(--space-2) var(--space-3); }
.step-copy p:last-child { color: var(--muted); }

/* ---------- The export how-to ---------- */

.howto { margin-top: var(--space-16); }

.howto > h3 { margin-bottom: var(--space-3); }
.howto > p { max-width: 68ch; color: var(--muted); }

.howto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.howto-card {
  padding: var(--space-6);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--card-grad);
}

.howto-card h4 {
  margin: 0 0 var(--space-4);
  font-variation-settings: "wdth" var(--width-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Numbered, because the order is the whole point. */
.howto-card ol {
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}

.howto-card li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  counter-increment: step;
}

.howto-card li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}

.howto-note {
  margin-top: var(--space-4);
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
}

.howto-card .howto-note { margin-top: var(--space-3); font-size: 14px; }

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

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-16);
  align-items: center;
}

.split-reverse { grid-template-columns: 0.85fr 1.15fr; }
.split figure { justify-self: center; }

.split-copy h2 { margin-bottom: var(--space-6); }
.split-copy p { color: var(--muted); margin-bottom: var(--space-4); }
.split-copy p:last-of-type { margin-bottom: 0; }

/* ---------- Checklists ---------- */

.checklist {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.card {
  padding: var(--space-3);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--card-grad);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  height: 100%;
}

.price-card h3 {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The number is the loudest thing on the card; its label is small and quiet. */
.price-figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 58px;
  font-variation-settings: "wdth" var(--width-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 11.9 degrees is tan(0.21), the slant AppTheme.swift applies to its
   numbers. The unit label stays upright, so it is a separate element. */
.price-value {
  display: inline-block;
  transform: skewX(-11.9deg);
}

.price-unit {
  max-width: 8ch;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
}

.price-note {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 15px;
}

.price-card .checklist { margin-top: var(--space-6); margin-bottom: var(--space-8); }
.price-card .checklist li { font-size: 15px; }
.price-card .btn { margin-top: auto; }

.price-card-featured {
  border-color: rgba(255, 90, 0, 0.45);
  box-shadow: var(--shadow-soft);
}

/* ---------- FAQ ---------- */

.faq { display: grid; gap: var(--space-2); }

.faq-item {
  padding: var(--space-3);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--card-grad);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-inner);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--muted);
  border-bottom: 2.5px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.faq-item summary:hover::after { border-color: var(--text); }

.faq-item summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.faq-item p {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--muted);
}

/* ---------- Final CTA ---------- */

.cta-section { padding-block: var(--space-16) 96px; }

.cta-icon {
  border-radius: 22px;
  margin-bottom: var(--space-8);
}

.cta-section h2 { margin-bottom: var(--space-4); }
.cta-section p { color: var(--muted); margin-bottom: var(--space-8); }

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

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: var(--space-12);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.footer-note {
  width: 100%;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero { min-height: 0; padding-block: var(--space-12); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-sub { max-width: none; }
  .split, .split-reverse { grid-template-columns: 1fr; gap: var(--space-12); }
  .split-reverse figure { order: 2; }
  .steps { grid-template-columns: 1fr; gap: var(--space-12); }
  .step { flex-direction: row; align-items: center; gap: var(--space-8); }
  .phone-small { max-width: 168px; flex: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .howto-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-more { display: block; }
}

@media (max-width: 560px) {
  .container, .container.narrow { width: calc(100% - 32px); }
  .nav { gap: var(--space-3); }
  .brand { font-size: 17px; }
  .btn-small { padding: 10px var(--space-4); }
  .section { padding-block: var(--space-12); }
  .hero-actions .btn { width: 100%; }
  .btn-large { width: 100%; padding: 16px var(--space-6); font-size: 17px; }
  .step { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .phone-small { max-width: 208px; }
  .price-figure { font-size: 46px; }
  .howto-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}