/* RideCut site. Same tokens as the app's stylesheet (ridecut/static/style.css), set at reading
   scale: one surface (the page), one amber element per view, type carries the hierarchy. */
:root { --bg:#14161f; --panel:#1c1f2b; --panel2:#232736; --line:#2a2e3d; --fg:#e9eaf0; --dim:#8b90a3;
        --accent:#fcab40; --accent-ink:#1a1206; --gopro:#4da3ff; --phone:#5bd37a; --drone:#ffb347; --r:6px; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
       font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-0.02em; line-height:1.15; }
h1 { font-size:clamp(30px, 5vw, 44px); max-width:18ch; }
h2 { font-size:20px; margin-bottom:8px; }
p { margin:0 0 12px; max-width:62ch; }
ol, ul { margin:0; padding:0; }

.top, main, footer { width:min(880px, 100% - 48px); margin:0 auto; }
.top { display:flex; align-items:center; gap:22px; padding:18px 0; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--fg); }
.brand img { width:24px; height:24px; }
.top nav { display:flex; gap:18px; margin-left:auto; }
.top nav a { color:var(--dim); }
.top nav a[aria-current] { color:var(--fg); }

.hero { padding:72px 0 40px; border-top:0; }
.hero .lead { font-size:18px; color:var(--dim); margin:18px 0 28px; max-width:52ch; }
.get { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.get .meta { color:var(--dim); font-size:13px; }
.get .meta a { color:var(--dim); text-decoration:underline; }

/* Landing cover: a full-bleed photograph behind the header and hero. The shade runs from the
   page ink at the bottom (so the strip below continues it) to clear at the top right, with a
   darker left so the text sits on the quiet part of the frame. */
.cover { position:relative; isolation:isolate; min-height:min(84vh, 720px); display:flex; flex-direction:column;
         background:var(--panel); }
.cover .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 45%; z-index:-2; }
.cover::before { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to top, var(--bg) 0%, rgba(20,22,31,.55) 38%, rgba(20,22,31,.15) 70%, rgba(20,22,31,.35) 100%),
              linear-gradient(to right, rgba(20,22,31,.78) 0%, rgba(20,22,31,.45) 45%, rgba(20,22,31,0) 75%); }
.cover .top { flex:none; }
.cover .top nav a { color:#c9ccd8; }
.cover .hero { width:min(880px, 100% - 48px); margin:auto auto 0; padding:96px 0 56px; }
.cover .hero h1 { text-shadow:0 1px 2px rgba(0,0,0,.35); }
.cover .hero .lead { color:#d2d5df; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.cover .get .meta, .cover .get .meta a { color:#c9ccd8; }
.strip { margin-top:28px; }
.button { display:inline-block; padding:10px 18px; border-radius:var(--r); border:1px solid var(--line); color:var(--fg);
          font-weight:600; line-height:1.3; white-space:nowrap; }
.button:hover { text-decoration:none; background:var(--panel2); border-color:var(--dim); }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.button.primary:hover { background:#ffbd5e; border-color:#ffbd5e; }

/* The ride strip: the app's timeline, one lane per camera. Positions are percentages of the ride. */
.strip { margin:0 0 56px; }
.lanes { display:grid; grid-template-columns:72px 1fr; row-gap:6px; align-items:center; }
.lanes .label { color:var(--dim); font-size:12px; }
.lane { position:relative; height:22px; background:var(--panel); border-radius:3px; }
.seg { position:absolute; top:7px; height:8px; border-radius:2px; opacity:.9; }
.tick { position:absolute; top:2px; width:2px; height:18px; background:var(--dim); opacity:.35; }
.tick.sel { background:var(--accent); opacity:1; width:3px; border-radius:1px; transform-origin:bottom; }
.axis { display:grid; grid-template-columns:72px 1fr; margin-top:6px; }
.axis span { display:flex; justify-content:space-between; color:var(--dim); font-size:12px; }
.strip figcaption { color:var(--dim); font-size:13px; margin-top:12px; max-width:62ch; }
@media (prefers-reduced-motion: no-preference) {
  .tick.sel { animation:pick .35s ease-out both; }
  .tick.sel:nth-child(n+1) { animation-delay:calc(var(--i, 0) * .14s + .5s); }
  @keyframes pick { from { transform:scaleY(0); } to { transform:scaleY(1); } }
}

section { padding:28px 0; border-top:1px solid var(--line); }
section p:last-child { margin-bottom:0; }
.steps { list-style:none; counter-reset:step; display:grid; gap:14px; }
.steps li { display:grid; grid-template-columns:28px 1fr; gap:10px; max-width:62ch; }
.steps li::before { counter-increment:step; content:counter(step); color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.steps b { font-weight:600; }
.steps span { display:block; color:var(--dim); }

/* Pricing page: two plans side by side. The Pro plan carries the one amber element. */
.plans { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.plan h2 { margin-bottom:2px; }
.plan .price { font-size:22px; font-weight:600; letter-spacing:-0.01em; margin-bottom:14px; }
.plan.pro .price { color:var(--accent); }
.plan ul { list-style:none; display:grid; gap:8px; margin:0 0 18px; }
.plan li { padding-left:16px; position:relative; color:var(--dim); }
.plan li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--line); }
.plan.pro li::before { background:var(--accent); }
.plan .how { color:var(--dim); font-size:13px; }
@media (max-width: 700px) { .plans { grid-template-columns:1fr; gap:32px; } }

/* Download page */
.installers { list-style:none; margin:28px 0 8px; border-top:1px solid var(--line); }
.installers li { display:grid; grid-template-columns:1fr auto; gap:2px 16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.installers .name { font-weight:600; }
.installers .note { grid-column:1; color:var(--dim); font-size:13px; }
.installers .file { grid-column:2; grid-row:1 / 3; font-size:13px; }
.notice { color:var(--dim); border-left:3px solid var(--line); padding-left:12px; }

footer { padding:40px 0 48px; color:var(--dim); font-size:13px; display:flex; gap:18px; flex-wrap:wrap; }
footer a { color:var(--dim); }

@media (max-width: 600px) {
  .hero { padding-top:40px; }
  .cover { min-height:72vh; }
  .cover .hero { padding:56px 0 40px; }
  .cover .photo { object-position:60% 40%; }
  .lanes, .axis { grid-template-columns:56px 1fr; }
  .installers li { grid-template-columns:1fr; }
  .installers .file { grid-column:1; grid-row:auto; }
}