:root {
  --paper: #F6EFE3;
  --paper-deep: #EFE5D3;
  --card: #FFFDF8;
  --line: #E0D3BD;
  --ink: #2B2016;
  --ink-soft: #6B5A4A;
  --faint: #9A8770;
  --rust: #CC785C;
  --rust-deep: #B85C3F;
  --safe: #2E7D4F;
  --stretch: #C13A2A;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}
h1, h2, h3, .time { font-family: "Space Grotesk", "Inter", sans-serif; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.num { font-variant-numeric: tabular-nums; }
section h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.3px; }
.lede { color: var(--ink-soft); max-width: 640px; margin-top: 10px; font-size: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
}

/* ---------- nav ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50; padding: 14px 0;
  background: rgba(246, 239, 227, 0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(224, 211, 189, 0.6);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand span { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: 3px; font-size: 15px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover { color: var(--rust-deep); }
.cta {
  display: inline-block; background: var(--rust-deep); color: var(--paper);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 17px;
  padding: 15px 38px; border-radius: 14px; text-decoration: none; border: none; cursor: pointer;
}
.cta:hover { background: var(--rust); }
.cta.small { font-size: 14px; padding: 10px 22px; border-radius: 11px; color: var(--paper) !important; }
.ghost {
  display: inline-block; font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 17px; padding: 15px 26px; border-radius: 14px; text-decoration: none;
  color: var(--rust-deep); border: 1.5px solid var(--line);
}
.ghost:hover { border-color: var(--rust); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 64px; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.eyebrow {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 2.5px; color: var(--rust-deep); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 700; line-height: 1.05; letter-spacing: -1px; }
.hero h1 em { font-style: normal; color: var(--rust-deep); }
.hero .sub { margin-top: 22px; font-size: 18px; color: var(--ink-soft); max-width: 540px; }
.hero-ctas { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.trust { margin-top: 26px; font-size: 13.5px; color: var(--faint); }
.trust b { color: var(--ink-soft); }

/* the phone: the app's plan screen, in the app's own paper palette */
.phone {
  background: var(--card); border: 1px solid var(--line); border-radius: 28px;
  padding: 26px 22px 22px; max-width: 400px; justify-self: end; width: 100%;
  box-shadow: 0 30px 60px rgba(43, 32, 22, 0.16);
}
.pc-mark {
  display: block; text-align: center; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 4px; color: var(--rust-deep);
}
.pc-race { display: block; text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.pc-label {
  text-align: center; font-size: 11px; letter-spacing: 2px; font-weight: 600;
  color: var(--faint); margin-top: 20px;
}
.pc-time {
  text-align: center; font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 52px; line-height: 1.1; letter-spacing: -1px;
}
.pc-bandlabel { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.pc-band { position: relative; height: 84px; margin-top: 16px; }
.pc-band .track, .pc-band .range, .pc-band .core {
  position: absolute; top: 16px; height: 10px; border-radius: 5px;
}
.pc-band .track { left: 0; right: 0; background: var(--paper-deep); }
.pc-band .range { background: var(--rust); opacity: 0.28; }
.pc-band .core { background: var(--rust); opacity: 0.55; }
.tickwrap { position: absolute; top: 6px; width: 80px; margin-left: -40px; text-align: center; }
.tickwrap i { display: block; width: 3px; height: 28px; border-radius: 2px; margin: 0 auto; }
.tickwrap b { display: block; font-size: 11px; margin-top: 5px; font-weight: 600; }
.tickwrap .tt { display: block; font-size: 12px; color: var(--ink); }
.pc-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.pc-chip {
  font-size: 11.5px; color: var(--ink-soft); background: var(--paper-deep);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.pc-rows { margin-top: 16px; border-top: 1px solid var(--line); }
.pc-row {
  display: flex; justify-content: space-between; padding: 8px 2px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.pc-row span:first-child { color: var(--ink-soft); }
.pc-row span:last-child { font-weight: 600; }
.pc-row.finish span:last-child { color: var(--rust-deep); font-family: "Space Grotesk", sans-serif; }

/* ---------- convergence band ---------- */
.converge { padding: 72px 0 20px; }
.big-band { margin-top: 30px; padding: 30px 34px 24px; }
.bb-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.bb-stage { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; }
.bb-src {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  color: var(--faint); margin-left: 10px;
}
.bb-width { font-size: 15px; color: var(--ink-soft); }
.bb-width b { color: var(--ink); font-size: 18px; font-family: "Space Grotesk", sans-serif; }
.bb-viz { position: relative; height: 64px; margin-top: 18px; }
.bb-track, .bb-range, .bb-core { position: absolute; top: 22px; height: 14px; border-radius: 7px; }
.bb-track { left: 0; right: 0; background: var(--paper-deep); }
.bb-range { background: var(--rust); opacity: 0.28; transition: left 1.1s ease, width 1.1s ease; }
.bb-core { background: var(--rust); opacity: 0.55; transition: left 1.1s ease, width 1.1s ease; }
.bb-tick { position: absolute; top: 10px; width: 120px; margin-left: -60px; text-align: center; }
.bb-tick i { display: block; width: 4px; height: 38px; border-radius: 2px; background: var(--rust-deep); margin: 0 auto; }
.bb-tick b { display: block; font-size: 13px; margin-top: 6px; font-family: "Space Grotesk", sans-serif; }
.bb-scale {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--faint);
  border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 26px;
}
.bb-stages { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.bb-dot {
  font-size: 12.5px; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px; background: none;
  font-family: "Inter", sans-serif; cursor: pointer; transition: all 0.3s ease;
}
.bb-dot.on { background: var(--rust-deep); border-color: var(--rust-deep); color: var(--paper); }

/* ---------- course / elevation ---------- */
.course { padding: 72px 0 20px; }
.elev-card { margin-top: 30px; padding: 26px 8px 10px; position: relative; }
.elev-hint { text-align: center; font-size: 12px; color: var(--faint); padding-bottom: 12px; }
#elev { display: block; width: 100%; height: auto; cursor: crosshair; }
.elev-readout {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--paper);
  font-size: 12.5px; line-height: 1.5; border-radius: 10px; padding: 8px 12px;
  transform: translate(-50%, -115%); white-space: nowrap; opacity: 0; transition: opacity 0.15s;
}
.elev-readout b { font-family: "Space Grotesk", sans-serif; font-size: 14px; }

/* ---------- weather + fueling duo ---------- */
.duo { padding: 72px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo .card { padding: 30px 32px; }
.duo h3 { font-size: 21px; }
.duo .blurb { color: var(--ink-soft); font-size: 15px; margin-top: 8px; }
.lab-read { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.lab-time { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 40px; letter-spacing: -0.5px; }
.lab-delta { font-size: 15px; font-weight: 600; color: var(--stretch); }
.lab-delta.cool { color: var(--safe); }
input[type="range"] {
  width: 100%; margin-top: 20px; appearance: none; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--paper-deep), var(--rust));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--rust-deep); border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(43,32,22,0.3); cursor: pointer;
}
.lab-temp { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--faint); margin-top: 8px; }
.lab-note { font-size: 13px; color: var(--ink-soft); margin-top: 16px; }
.lab-note b { color: var(--ink); }

.fuel-line { position: relative; height: 74px; margin-top: 28px; }
.fuel-track { position: absolute; top: 26px; left: 0; right: 0; height: 8px; border-radius: 4px; background: var(--paper-deep); }
.gel { position: absolute; top: 18px; width: 40px; margin-left: -20px; text-align: center; }
.gel i {
  display: block; width: 14px; height: 22px; border-radius: 5px;
  background: var(--rust); margin: 0 auto; border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(43,32,22,0.25);
}
.gel span { display: block; font-size: 10.5px; color: var(--faint); margin-top: 6px; font-variant-numeric: tabular-nums; }
.fuel-sum { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.fuel-sum b { color: var(--rust-deep); }
.fuel-note { font-size: 12.5px; color: var(--faint); margin-top: 12px; }

/* ---------- how ---------- */
.how { padding: 72px 0 8px; }
.how h2 { text-align: center; }
.steps { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); margin-top: 34px; }
.step { text-align: center; padding: 0 8px; }
.step .n {
  width: 42px; height: 42px; border-radius: 13px; background: var(--rust-deep); color: var(--paper);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.step p { color: var(--ink-soft); font-size: 15px; }

/* ---------- tri teaser ---------- */
.tri { padding: 76px 0 8px; }
.tri-card { margin-top: 30px; padding: 30px 34px; position: relative; overflow: hidden; }
.tri-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.tri-head h3 { font-size: 21px; }
.soon {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 1.5px; color: var(--rust-deep); border: 1.5px solid var(--rust);
  border-radius: 999px; padding: 4px 12px;
}
.tri-legs { display: flex; gap: 4px; margin-top: 22px; height: 46px; }
.leg {
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden;
}
.leg.swim { background: var(--ink-soft); }
.leg.t { background: var(--paper-deep); color: var(--faint); font-size: 10px; }
.leg.bike { background: var(--rust); }
.leg.run { background: var(--rust-deep); }
.tri-total { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--ink-soft); flex-wrap: wrap; gap: 6px; }
.tri-total b { font-family: "Space Grotesk", sans-serif; font-size: 17px; color: var(--ink); }

/* ---------- signup + footer ---------- */
.signup { padding: 84px 0 88px; text-align: center; }
.signup h2 { font-size: clamp(26px, 3vw, 34px); }
.signup p { color: var(--ink-soft); margin-top: 8px; }
.signup form { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.signup input[type="email"] {
  font-family: "Inter", sans-serif; font-size: 16px; padding: 14px 18px;
  border: 1.5px solid #D8CBB6; border-radius: 14px; background: var(--card);
  color: var(--ink); min-width: 300px;
}
.signup input[type="email"]:focus { outline: 2px solid var(--rust); border-color: var(--rust); }
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
footer, footer a { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
footer a:hover { color: var(--rust-deep); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .phone { justify-self: center; }
  .duo { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .nav-links a:not(.cta) { display: none; }
}