/*
  Protect: calm and serious, in the Protect green. No photo up top: the hero is the phone's
  motion trace, quiet while you ride until the impact. The body is the crash timeline, from
  the impact to the countdown (a ring that runs down as you scroll), the contacts, the Black
  Box and the lock screen, with the same trace running down its spine. Then riding alone,
  what it cannot do, and the validation numbers as a plain data panel.
*/

.fp--protect { --pg: var(--protect); --pg-dim: rgba(25,201,135,0.16); --tcol: clamp(220px, 15vw, 320px); }

/* ---------- Hero: status, headline, readout, motion trace ---------- */

.phero { padding-top: clamp(130px, 15vh, 200px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30rem); gap: clamp(40px, 6vw, 160px); align-items: end; }
.pstatus { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(22px, 2.4vw, 40px); font: 700 clamp(14px, 0.9vw, 17px)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--legend-dim); }
.pstatus__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pg); }
.pstatus__sep { width: 28px; height: 1px; background: var(--shoulder); }
.pstatus__state { color: var(--pg); }
.phero h1 { font-size: clamp(2.9rem, 6vw, 8.4rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; max-width: 13ch; }
.phero__lede { font-size: clamp(1.15rem, 1.3vw, 1.6rem); line-height: 1.55; color: #dcdee2; max-width: 40rem; margin: clamp(22px, 2vw, 34px) 0 clamp(26px, 2.4vw, 40px); }

.preadout { margin: 0; border-top: 1px solid var(--shoulder); }
.preadout div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: clamp(14px, 1.2vw, 20px) 0; border-bottom: 1px solid var(--shoulder); }
.preadout dt { font: 700 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--legend-mute); }
.preadout dd { margin: 0; font-size: clamp(1.3rem, 1.6vw, 2.1rem); font-weight: 700; color: var(--legend); }
.preadout div:last-child dd { color: var(--pg); }

.ptrace { position: relative; margin: clamp(50px, 6vw, 110px) 0 0; height: clamp(170px, 17vw, 380px); border-top: 1px solid var(--asphalt-3); border-bottom: 1px solid var(--asphalt-3); }
.ptrace__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ptrace__base { stroke: var(--asphalt-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ptrace__line { fill: none; stroke: var(--pg); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ptrace-draw 3.2s cubic-bezier(.4, 0, .2, 1) 0.3s forwards; }
@keyframes ptrace-draw { to { stroke-dashoffset: 0; } }
.ptrace__axis { position: absolute; left: var(--fp-gutter); top: 14px; display: flex; gap: 18px; font: 700 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--legend-mute); }
.ptrace__axis span + span { color: var(--pg); }
.ptrace__mark { position: absolute; left: 67%; top: 0; bottom: 0; padding-left: 14px; border-left: 1px solid rgba(244,243,238,0.4); display: flex; flex-direction: column; justify-content: flex-start; padding-top: 14px; gap: 6px; opacity: 0; animation: pfade 500ms ease 2.6s forwards; }
.ptrace__mark b { font: 700 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--legend); }
.ptrace__mark span { font-size: 13px; color: var(--legend-mute); }
@keyframes pfade { to { opacity: 1; } }

/* ---------- Crash timeline ---------- */

.ptl { padding: clamp(90px, 9vw, 180px) 0 clamp(40px, 4vw, 80px); }
.ptl__intro { display: grid; grid-template-columns: var(--tcol) minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 100px); margin-bottom: clamp(50px, 5vw, 90px); }
.ptl__intro h2 { grid-column: 2; font-size: clamp(2.4rem, 4vw, 5.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 0.95; }
.ptl__intro p { grid-column: 3; margin: 0; font-size: clamp(1.1rem, 1.15vw, 1.45rem); line-height: 1.6; color: #dcdee2; max-width: 44rem; }

.ptl__list { position: relative; list-style: none; margin: 0; padding: 0; }
.ptl__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; }
.ptl__spine svg { width: 100%; height: 100%; overflow: visible; }
.ptl__ghost, .ptl__trace { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ptl__ghost { stroke: var(--asphalt-3); }
.ptl__trace { stroke: var(--pg); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }

.pstep { display: grid; grid-template-columns: var(--tcol) minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 100px); align-items: start; padding: clamp(60px, 6vw, 110px) 0; border-top: 1px solid var(--asphalt-3); }
.pstep__t { margin: 0; padding-left: 74px; position: sticky; top: 110px; }
.pstep__t b { display: block; font-size: clamp(1.4rem, 1.7vw, 2.2rem); font-weight: 700; color: var(--legend); line-height: 1.1; }
.pstep__t span { display: block; margin-top: 10px; font: 700 13px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg); }
.pstep__body h2, .pstep__body h3 { font-size: clamp(2rem, 2.9vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; max-width: 16ch; margin: 0 0 22px; }
.pstep__body > p { margin: 0; font-size: clamp(1.05rem, 1.1vw, 1.35rem); line-height: 1.65; color: #cfd2d6; max-width: 40rem; }
.pstep__note { color: var(--legend-dim) !important; }
.pstep__media { justify-self: center; }
.pstep__media .phone { --pw: clamp(230px, 15vw, 320px); }

/* Countdown: the step holds while the ring runs down */
.pstep--count { min-height: 140vh; }
.pstep__stick { position: sticky; top: 120px; }
.pring { position: relative; width: clamp(240px, 19vw, 400px); aspect-ratio: 1; margin-top: clamp(30px, 3vw, 56px); }
.pring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pring circle { fill: none; stroke-width: 3; }
.pring__track { stroke: var(--asphalt-3); }
.pring__arc { stroke: var(--pg); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--left, 1)); stroke-linecap: round; }
.pring__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pring__n b { font-size: clamp(5rem, 8vw, 10rem); font-weight: 700; line-height: 0.9; color: var(--legend); letter-spacing: -0.05em; }
.pring__n span { margin-top: 10px; font: 700 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); }

.pdeliv { list-style: none; margin: 34px 0 0; padding: 0; max-width: 40rem; border-top: 1px solid var(--shoulder); }
.pdeliv li { display: grid; grid-template-columns: 7rem 1fr; padding: 15px 0; border-bottom: 1px solid var(--shoulder); }
.pdeliv span { font: 700 13px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg); }
.pdeliv b { font-weight: 600; color: var(--legend); }

/* Black Box recording */
.pbox { margin: 0; width: 100%; max-width: 900px; justify-self: stretch; padding: clamp(18px, 1.6vw, 28px); background: var(--asphalt-2); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--shoulder); }
.pbox__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.pbox__head b { font-size: 1.05rem; color: var(--legend); }
.pbox__head span { font-size: 13px; color: var(--legend-mute); }
.pbox__plot { position: relative; height: clamp(220px, 17vw, 360px); }
.pbox__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pbox__grid { stroke: var(--shoulder); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.pbox__zero { stroke: rgba(244,243,238,0.45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pbox__m, .pbox__s { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pbox__m { stroke: var(--pg); }
.pbox__s { stroke: var(--legend-dim); }
.pbox__lab { position: absolute; left: 0; font: 700 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.pbox__lab--m { top: 0; color: var(--pg); }
.pbox__lab--s { top: 58%; color: var(--legend-dim); }
.pbox__x { list-style: none; margin: 12px 0 0; padding: 0; position: relative; height: 16px; font-size: 13px; color: var(--legend-mute); }
.pbox__x li { position: absolute; transform: translateX(-50%); }
.pbox__x li:nth-child(1) { left: 0; transform: none; }
.pbox__x li:nth-child(2) { left: 25%; }
.pbox__x li:nth-child(3) { left: 50%; }
.pbox__x li:nth-child(4) { left: 75%; color: var(--legend); }
.pbox__x li:nth-child(5) { right: 0; transform: none; }

/* Stories, when the server has them */
.pstories section { padding: clamp(60px, 6vw, 110px) 0; border-top: 1px solid var(--asphalt-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 clamp(32px, 4vw, 80px); }
.pstories h2 { grid-column: 1 / -1; font-size: clamp(2rem, 2.9vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 30px; }
.pstories blockquote { margin: 0; padding: 24px 0; border-top: 1px solid var(--shoulder); }
.pstories blockquote p { margin: 0 0 12px; font-size: clamp(1.15rem, 1.3vw, 1.5rem); line-height: 1.55; color: var(--legend); }
.pstories blockquote footer { font: 700 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg); }

/* ---------- Riding alone ---------- */

.palone { background: var(--asphalt-2); border-top: 1px solid var(--asphalt-3); border-bottom: 1px solid var(--asphalt-3); }
.palone__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.palone__item { padding: clamp(60px, 5.5vw, 110px) clamp(24px, 3vw, 64px); display: flex; flex-direction: column; }
.palone__item:first-child { padding-left: 0; }
.palone__item:last-child { padding-right: 0; }
.palone__item + .palone__item { border-left: 1px solid var(--shoulder); }
.palone__ic { width: 40px; height: 40px; color: var(--pg); margin-bottom: 26px; }
.palone h2 { font-size: clamp(1.7rem, 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }
.palone p { margin: 0; font-size: clamp(1.02rem, 1.02vw, 1.25rem); line-height: 1.65; color: #cfd2d6; max-width: 36rem; }
.pscale { list-style: none; margin: auto 0 0; padding: 34px 0 0; display: flex; justify-content: space-between; gap: 10px; font: 700 13px/1 var(--mono); color: var(--legend-mute); }
.pscale li { flex: 1; padding-top: 14px; border-top: 2px solid var(--shoulder); }
.pscale li:first-child { border-top-color: var(--pg); color: var(--legend); }
.pscale li.is-on { border-top-color: var(--pg); color: var(--legend); }
.pscale:has(.is-on) li:first-child { border-top-color: var(--shoulder); color: var(--legend-mute); }
.plink { margin-top: auto !important; padding-top: 34px; font-size: 15px !important; color: var(--legend) !important; }
.plink span { color: var(--pg); }

/* ---------- Limits and validation ---------- */

.pfacts { padding: clamp(90px, 9vw, 170px) 0; }
.pfacts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 160px); align-items: start; }
.plimits { padding-left: 26px; border-left: 2px solid var(--legend-mute); }
.plimits h2, .pval h2 { font-size: clamp(2rem, 2.9vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 20px; }
.plimits p, .pval p { margin: 0 0 16px; font-size: clamp(1.05rem, 1.1vw, 1.35rem); line-height: 1.65; color: #cfd2d6; max-width: 44rem; }
.pval__eyebrow { font: 700 13px/1 var(--mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg) !important; margin: 0 0 16px !important; }
.pval__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 34px; border-top: 1px solid var(--shoulder); border-bottom: 1px solid var(--shoulder); }
.pval__nums[hidden] { display: none; }
.pval__nums div { padding: 24px 24px 24px 0; }
.pval__nums div + div { padding-left: 24px; border-left: 1px solid var(--shoulder); }
.pval__nums dt { font: 700 13px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--legend-mute); }
.pval__nums dd { margin: 14px 0 0; font-size: clamp(2.6rem, 4vw, 5.4rem); font-weight: 700; line-height: 1; color: var(--legend); letter-spacing: -0.04em; }
.pval__nums small { font-size: 0.45em; color: var(--legend-mute); margin-left: 4px; }

/* ---------- Narrower screens ---------- */

@media (max-width: 1280px) {
  .fp--protect { --tcol: 180px; }
  .pstep { grid-template-columns: var(--tcol) minmax(0, 1fr) auto; }
  .pstep--box { grid-template-columns: var(--tcol) minmax(0, 1fr); }
  .pstep--box .pbox { grid-column: 2; margin-top: 36px; }
  .ptl__intro { grid-template-columns: var(--tcol) minmax(0, 1fr); }
  .ptl__intro p { grid-column: 2; margin-top: 24px; }
}

@media (max-width: 900px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .preadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .preadout div:last-child { grid-column: 1 / -1; }
  .ptrace__mark { left: 62%; }
  .ptl__intro { display: block; }
  .ptl__spine { width: 24px; }
  .pstep { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-left: 44px; }
  .pstep--box .pbox { grid-column: auto; margin-top: 0; }
  .pstep__t { position: static; padding-left: 0; }
  .pstep__media { justify-self: start; }
  .pstep__media .phone { --pw: min(56vw, 240px); }
  .pstep--count { min-height: 0; }
  .pstep__stick { position: static; }
  .palone__grid { grid-template-columns: minmax(0, 1fr); }
  .palone__item, .palone__item:first-child, .palone__item:last-child { padding: 56px 0; }
  .palone__item + .palone__item { border-left: 0; border-top: 1px solid var(--shoulder); }
  .pfacts__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .pval__nums { grid-template-columns: minmax(0, 1fr); }
  .pval__nums div, .pval__nums div + div { padding: 18px 0; border-left: 0; }
  .pval__nums div + div { border-top: 1px solid var(--shoulder); }
  .pstep { padding-left: 34px; }
  .pbox { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ptrace__line { animation: none; stroke-dashoffset: 0; }
  .ptrace__mark { animation: none; opacity: 1; }
  .ptl__trace { stroke-dashoffset: 0; }
}