/* ============================================================
   indoorbike.app - promo site
   Slate design system: five slate-blue surfaces, cool-white
   foreground, one typeface (Manrope), no accent colour.
   Power zones are the only saturated colour on the site.
   ============================================================ */

/* Self-hosted font (OFL, the same file the app ships). No CDN:
   this site makes zero third-party requests, matching the app's posture. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope_variable.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* ---------- Type ---------- */
  --font: "Manrope", system-ui, sans-serif;
  /* Slate is a one-family system. These aliases exist only so the tool
     pages keep resolving; they all point at the same face. */
  --font-body:    var(--font);
  --font-display: var(--font);
  --font-mono:    var(--font);

  /* ---------- Surfaces (the five slates, ascending) ---------- */
  --bg-0: #313e50;  /* Charcoal Blue   - canvas, alternating sections */
  --bg-1: #3a435e;  /* Twilight Indigo - cards, alternating sections */
  --bg-2: #455561;  /* Charcoal Blue 2 - icon wells, chips, dividers */
  --bg-3: #5c6672;  /* Blue Slate      - pressed, dashed outline */
  --bg-4: #6c6f7f;  /* Slate Grey      - disabled ink, inactive dot */

  /* Hairlines. Kept translucent so a border never reads as an outline. */
  --line-1: rgba(242,244,247,0.06);
  --line-2: rgba(242,244,247,0.10);
  --line-3: rgba(242,244,247,0.18);

  /* ---------- Foreground ---------- */
  --fg-1: #F2F4F7;  /* headings, body strong, primary button fill */
  --fg-2: #C5CAD6;  /* body copy, nav links */
  --fg-3: #9AA1B0;  /* eyebrows, captions, meta */
  --fg-4: #6c6f7f;  /* disabled */
  --on-inverse: #313e50;  /* text on an fg-1 fill */

  /* ---------- Power zones (the only colour) ----------
     Retuned for Slate. The app's ramp was mixed on a near-black canvas; on
     #313e50 the old Z1 sank into the surfaces, and Z2 / Z6 / Z7 glared. These
     sit in one lightness band so the ramp reads as a family and the dark
     zone labels stay legible on every block. Same seven hues, same order. */
  --zone-1: #8FA8C0;
  --zone-2: #5B9CF2;
  --zone-3: #3FC08A;
  --zone-4: #F0C419;
  --zone-5: #FF9A3D;
  --zone-6: #EF6B62;
  --zone-7: #CE6BF0;

  --success: var(--zone-3);
  --warning: var(--zone-4);
  --danger:  var(--zone-6);

  /* ---------- Spacing ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* ---------- Radii ---------- */
  --r-sm: 8px;    /* chips, tiny tiles */
  --r-md: 12px;   /* inputs, small tiles */
  --r-lg: 16px;   /* inner tiles, list rows */
  --r-xl: 20px;   /* cards */
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Icons (inline Material Symbols sprite) ---------- */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
  display: inline-block;
  vertical-align: -0.14em;
}
.icon-14 { font-size: 14px; }
.icon-16 { font-size: 16px; }
.icon-18 { font-size: 18px; }
.icon-20 { font-size: 20px; }
.icon-22 { font-size: 22px; }
.icon-24 { font-size: 24px; }
.icon-40 { font-size: 40px; }
.icon-ok { color: var(--zone-3); }

/* ---------- Layout primitives ---------- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

section { padding: var(--s-10) 0; }
/* Alternating band. bg-1 sections lift their inner cards to bg-0. */
.section-alt { background: var(--bg-1); }

.eyebrow {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: var(--fg-3);
  margin: 0 0 var(--s-3);
}

.section-title {
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--s-3);
  color: var(--fg-1);
}

.section-lead {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0 0 var(--s-8);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(49, 62, 80, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img { width: 30px; height: 30px; }
.brand span {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2) var(--s-6);
}
.nav a {
  position: relative;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--fg-1); }
/* The underline grows out from the left on hover and stays put on the
   current page, so the nav shows where you are and where you are pointing
   with the same mark. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--fg-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* The header only draws a line under itself once there is content behind
   it, which is when the line has something to separate. */
.site-header { transition: box-shadow var(--dur-base) var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--bg-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* A button lifts a hair under the pointer and gives under the click: the
   same firm, no-bounce answer the app gives a finger. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.btn .icon { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn:hover .icon:first-child:not(:last-child) { transform: translateY(1px); }
.btn-lg { height: 52px; padding: 0 24px; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.site-header .btn { height: 44px; padding: 0 20px; font-size: 14px; }

.btn-primary {
  background: var(--fg-1);
  color: var(--on-inverse);
}
.btn-primary:hover { background: var(--fg-2); color: var(--on-inverse); }
.btn-primary[aria-disabled="true"] {
  background: var(--bg-2);
  color: var(--fg-3);
  cursor: not-allowed;
}

/* Secondary sits one step above whatever surface it is on. */
.btn-secondary {
  background: var(--bg-1);
  color: var(--fg-1);
}
.btn-secondary:hover { background: var(--bg-2); }
.section-alt .btn-secondary,
.card .btn-secondary { background: var(--bg-2); }
.section-alt .btn-secondary:hover,
.card .btn-secondary:hover { background: var(--bg-3); }

/* Inline "more" link, arrow included. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-more:hover { color: var(--fg-2); }
.link-more .icon { transition: transform var(--dur-base) var(--ease-out); }
.link-more:hover .icon { transform: translateX(4px); }

.btn-tag {
  display: inline-block;
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 700;
}
.btn-primary .btn-tag {
  background: rgba(49, 62, 80, 0.14);
  color: var(--on-inverse);
}

/* ---------- Chips and badges ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--fg-1);
  color: var(--on-inverse);
  font-size: 11px;
  font-weight: 700;
}
.badge-quiet { background: var(--bg-2); color: var(--fg-2); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-1);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}
.section-alt .card { background: var(--bg-0); }

/* Icon well: a circle one step above the card it sits on. */
.well {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg-1);
  display: grid;
  place-items: center;
  flex: none;
}
/* The "destination" well - the rider's phone, the recommended installer. */
.well-dest { background: var(--fg-1); color: var(--on-inverse); }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 var(--s-10); }
.hero .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 14px 0 var(--s-5);
}
.hero p.lead {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0 0 var(--s-7);
}
.hero-cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}

/* Trust strip under the hero buttons. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Phone mock (the app's Home screen, drawn in CSS) ---------- */
.device {
  justify-self: center;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 412 / 892;
  border-radius: 36px;
  background: #232b38;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.device-screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--bg-0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.m-status {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-weight: 700;
  font-size: 12px;
}
.m-head { padding: 12px 18px 6px; }
.m-day { font-weight: 600; font-size: 10px; color: var(--fg-3); }
.m-title {
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.m-body {
  flex: 1;
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.m-label {
  font-weight: 600;
  font-size: 10px;
  color: var(--fg-3);
  padding: var(--s-3) 4px 0;
}
.m-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px;
  background: var(--bg-1);
  border-radius: var(--r-lg);
}
.m-well {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  flex: none;
}
.m-row-text { flex: 1; min-width: 0; }
.m-row-text b { display: block; font-weight: 700; font-size: 13px; }
.m-row-text span { display: block; font-weight: 500; font-size: 10.5px; color: var(--fg-2); margin-top: 2px; }
.m-list { background: var(--bg-1); border-radius: var(--r-lg); padding: 4px 0; }
.m-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.m-list-row b { display: block; font-weight: 700; font-size: 11px; }
.m-list-row span { display: block; font-weight: 500; font-size: 10px; color: var(--fg-3); }
.m-list-row > div { flex: 1; min-width: 0; }
.m-divider { height: 1px; background: var(--bg-2); margin: 0 14px; }
.m-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.m-dot.on { background: var(--zone-3); }
.m-dot.off { background: var(--bg-4); }
.m-repo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-1);
  border-radius: var(--r-lg);
}
.m-repo > div { flex: 1; min-width: 0; }
.m-repo b { display: block; font-weight: 700; font-size: 11px; }
.m-repo span { display: block; font-weight: 500; font-size: 10px; color: var(--fg-3); }
.m-new {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--fg-1);
  color: var(--on-inverse);
  font-weight: 700;
  font-size: 9px;
}
.m-tabbar {
  margin: 10px 12px 14px;
  background: var(--bg-1);
  border-radius: var(--r-pill);
  padding: 4px;
  display: flex;
}
.m-tabbar span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px;
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-weight: 600;
  font-size: 8px;
}
.m-tabbar span.on {
  background: var(--fg-1);
  color: var(--on-inverse);
  font-weight: 700;
}

/* ---------- Three ways to ride ---------- */
.ride-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.ride-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ride-visual {
  height: 120px;
  border-radius: var(--r-md);
  background: var(--bg-0);
  padding: 18px;
}
.ride-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ride-card h3 {
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.ride-card p {
  margin: 10px 0 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}

/* Stepped zone profile (Workout). */
.zone-profile {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}
.zone-profile i {
  display: block;
  border-radius: 3px 3px 0 0;
}

/* Elevation profile (Route). */
.elev {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  height: 100%;
}
.elev svg { width: 100%; height: 56px; display: block; }
.elev-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-weight: 600;
  font-size: 11px;
  color: var(--fg-3);
}

/* Power stepper (Just ride). */
.stepper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}
.stepper b {
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stepper b em {
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-3);
}
.stepper i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-1);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
}

/* ---------- Two-column copy + aside ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: start;
}
.split .section-lead { max-width: none; margin-bottom: var(--s-5); }

/* ---------- Community repositories ---------- */
.repo-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.repo-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: var(--s-5);
}
.flow-node { text-align: center; }
.flow-node .well { margin: 0 auto var(--s-2); }
.flow-node b { display: block; font-weight: 700; font-size: 14px; }
.flow-node span { display: block; font-weight: 500; font-size: 12px; color: var(--fg-3); }
.flow-sep { color: var(--fg-3); justify-self: center; }
.repo-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-3);
  padding: var(--s-2) 4px 0;
}
.repo-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.repo-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
a.repo-row:hover { background: var(--bg-2); transform: translateY(-2px); }
a.repo-row > .icon { transition: transform var(--dur-base) var(--ease-out); }
a.repo-row:hover > .icon { transform: translateX(3px); }
.repo-row > div { flex: 1; min-width: 0; }
.repo-row b { display: block; font-weight: 700; font-size: 15px; }
.repo-row .repo-by { display: block; font-weight: 500; font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.repo-row .repo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.repo-row > .icon { color: var(--fg-3); }
.repo-empty {
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-3);
  padding: var(--s-4) var(--s-5);
}

/* ---------- Editor and tools ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}
.tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
}
.tool-card h3 {
  margin: 6px 0 10px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.tool-card p {
  margin: 0 0 var(--s-4);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}
.tool-visual {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  background: var(--bg-0);
  display: grid;
  place-items: center;
  color: var(--fg-2);
}
.qr-grid {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  background: var(--bg-0);
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.qr-grid i { border-radius: 2px; }
.qr-grid i.on { background: var(--fg-1); }

/* ---------- Any Android ---------- */
.os-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}
.os-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--s-4);
  background: var(--bg-0);
  border-radius: 14px;
}
.install-card { padding: 28px; }
.install-card h3 {
  margin: 6px 0 var(--s-5);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.install-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.install-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 18px;
  background: var(--bg-1);
  border-radius: var(--r-lg);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
a.install-row:hover { background: var(--bg-2); transform: translateY(-2px); }
a.install-row > .icon { transition: transform var(--dur-base) var(--ease-out); }
a.install-row:hover > .icon { transform: translate(2px, -2px); }
.install-row > div { flex: 1; min-width: 0; }
.install-row .install-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: 15px;
}
.install-row p {
  margin: 2px 0 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}
.install-row > .icon { color: var(--fg-3); }
.install-row .well { background: var(--bg-2); }
.install-row .well-dest { background: var(--fg-1); }
.install-row.soon {
  background: none;
  border: 1px dashed var(--bg-3);
}
.install-row.soon .well { background: var(--bg-1); color: var(--fg-3); }
.install-row.soon .install-name { color: var(--fg-2); }
.install-note {
  margin: 18px 0 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}
.install-note b { color: var(--fg-2); }

/* ---------- The deal ---------- */
.deal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--bg-2);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.deal-list li {
  display: flex;
  gap: 14px;
  padding: 18px var(--s-5);
  background: var(--bg-1);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
}
.deal-list .icon { color: var(--fg-2); }
.deal-list b { color: var(--fg-1); font-weight: 700; }

/* ---------- FAQ ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 760px;
  margin: 0 auto;
}
details.faq-item {
  background: var(--bg-0);
  border-radius: var(--r-lg);
  padding: 0 var(--s-5);
}
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: 18px 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--fg-1);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary .icon {
  color: var(--fg-3);
  transition: transform var(--dur-base) var(--ease-out);
}
details.faq-item[open] summary .icon { transform: rotate(180deg); }
details.faq-item p {
  margin: 0;
  padding: 0 0 18px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}
details.faq-item p a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Closing CTA ---------- */
.cta {
  text-align: center;
  padding: 88px 0;
}
.cta .container { max-width: 720px; }
.cta h2 {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.cta p {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 auto 28px;
  max-width: 56ch;
}
.cta .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--bg-2);
  padding: var(--s-7) 0;
  color: var(--fg-3);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-weight: 500;
  font-size: 14px;
}
.site-footer .brand-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer .brand-line img { width: 22px; height: 22px; }
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-weight: 600;
  color: var(--fg-2);
}
.site-footer a { color: var(--fg-2); transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--fg-1); }

/* ---------- Shared bits the tool pages lean on ---------- */
code {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.94em;
  background: var(--bg-2);
  color: var(--fg-2);
  padding: 1px 6px;
  border-radius: 6px;
}
.code-block {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-0);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.code-block code {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-2);
  background: none;
  padding: 0;
  white-space: pre;
}
.code-block code b { color: var(--fg-1); font-weight: 700; }

/* Zone legend, still used by the editor and community pages. */
.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-7);
}
.zone-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 12px;
}
.zone-badge .swatch { width: 8px; height: 8px; border-radius: 50%; }

/* Simple page shells (privacy, api, badges, community). */
.page-title {
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 var(--s-3);
  color: var(--fg-1);
}
.page-lead {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 64ch;
  text-wrap: pretty;
  margin: 0 0 var(--s-6);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .repo-flow {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--s-3);
  }
  .flow-sep { transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .hero .container { gap: var(--s-8); }
  .device { margin: 0 auto; }
  .tool-card { grid-template-columns: 1fr; }
  .tool-visual, .qr-grid { justify-self: start; }
  /* A wrapped five-link nav would make the sticky header eat a third of a
     phone screen, so below this width the header is just mark and Install. */
  .site-header .nav { display: none; }
  .site-header .container { min-height: 60px; }
}
@media (max-width: 600px) {
  section { padding: var(--s-9) 0; }
  .hero { padding-top: var(--s-8); }
  .cta { padding: var(--s-10) 0; }
}

/* ---------- Motion ----------
   The page reveals itself as you scroll to it: a block fades and rises the
   first time it comes into view, siblings a beat apart. Charts draw
   themselves - zone bars grow, the elevation line is traced, a number counts
   up - so what the app does is shown happening rather than already done.
   All of it is decoration; with JavaScript off or reduced motion on, every
   element is simply there. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Every page arrives with a short settle rather than a cut. */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
}
main { animation: page-in 0.45s var(--ease-out) both; }

/* The phone in the hero drifts, very slowly, the way a held phone does. */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.device { animation: float 7s ease-in-out infinite; }
.js .device.reveal { animation: none; }
.js .device.reveal.is-in { animation: float 7s ease-in-out 0.6s infinite; }

/* The connected dot on the mock breathes, as it does in the app. */
@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.m-dot.on { animation: breathe 2.4s var(--ease-out) infinite; }

/* Zone bars stand up left to right; the elevation line is traced over its
   fill; the power number counts (see the script). */
.js .zone-profile i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(0.15s + var(--i, 0) * 55ms);
}
.js .is-in .zone-profile i { transform: none; }
.js .elev polygon {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out) 0.7s;
}
.js .elev polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-out) 0.2s;
}
.js .is-in .elev polygon { opacity: 1; }
.js .is-in .elev polyline { stroke-dashoffset: 0; }
.stepper i { transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.stepper:hover i { background: var(--bg-2); }
.stepper i:hover { transform: scale(1.08); }

/* A scan line sweeps the QR mock, the way the phone camera would. */
.qr-grid { position: relative; overflow: hidden; }
.qr-grid::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-1), transparent);
  opacity: 0.85;
  animation: scan 2.8s ease-in-out infinite alternate;
}
@keyframes scan {
  from { top: 14px; }
  to { top: calc(100% - 16px); }
}

/* Flow-node arrows nudge forward, one after another, to say which way. */
@keyframes nudge {
  0%, 60%, 100% { transform: translateX(0); opacity: 1; }
  30% { transform: translateX(4px); opacity: 0.6; }
}
.repo-flow .flow-sep { animation: nudge 3.2s var(--ease-out) infinite; }
.repo-flow .flow-sep:last-of-type { animation-delay: 0.35s; }

/* Cards that open somewhere lift under the pointer. */
a.card, .tool-card, .os-list li, .deal-list li {
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tool-card:hover { transform: translateY(-3px); }
.tool-card .tool-visual, .tool-card .qr-grid { transition: transform var(--dur-base) var(--ease-out); }
.tool-card:hover .tool-visual { transform: rotate(-4deg) scale(1.04); }

/* FAQ answers slide open and closed instead of appearing; the script wraps
   each answer in .faq-body and toggles the attribute after the slide. */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out);
}
.faq-body > p { overflow: hidden; min-height: 0; }
details.faq-item[open]:not(.is-closing) .faq-body { grid-template-rows: 1fr; }
details.faq-item summary { transition: color var(--dur-fast) var(--ease-out); }
details.faq-item summary:hover { color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .zone-profile i { transform: none; }
  .js .elev polygon { opacity: 1; }
  .js .elev polyline { stroke-dashoffset: 0; }
  .qr-grid::after { display: none; }
}