/* Secret Rides website — shared styles. Tokens come from sr-tokens.css (same file as the app). Phone first. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sr-bg);color:var(--sr-text);font-family:var(--sr-font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--sr-accent);text-decoration:none}a:hover{color:var(--sr-accent-hover);text-decoration:underline}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Header */
.hdr{position:sticky;top:0;z-index:20;background:var(--sr-bg-nav);color:var(--sr-nav-text);border-bottom:1px solid rgb(255 255 255 / .08)}
.hdr .wrap{display:flex;align-items:center;gap:10px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;font-weight:600;font-size:17px;letter-spacing:-.01em;min-height:48px;white-space:nowrap}
.brand:hover{color:inherit;text-decoration:none}
.wheel{flex:none;display:block}
/* Header wheel: turned by js/wheel.js (slow roll when still, follows the scroll). The gold hub stays still. */
.ftr .wheel circle:first-child{stroke:var(--sr-border-strong)}.ftr .wheel path{stroke:var(--sr-text)}
.nav{display:none;align-items:center;gap:2px;margin-left:12px}
.nav a{color:var(--sr-nav-text-2);padding:0 12px;min-height:40px;display:inline-flex;align-items:center;border-radius:var(--sr-r);font-weight:500;font-size:15px}
.nav a:hover{color:var(--sr-nav-text);text-decoration:none;background:rgb(255 250 250 / .06)}
/* The header is dark in both themes, so the current page always uses the night gold (the dark theme's --sr-accent), never the day brown. */
.nav a[aria-current="page"]{color:oklch(0.80 0.14 85);box-shadow:inset 0 -2px 0 oklch(0.80 0.14 85);border-radius:0}
.spacer{flex:1}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--sr-r);background:transparent;color:inherit;cursor:pointer;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--sr-r);font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--sr-accent);color:var(--sr-on-accent)}.btn-primary:hover{color:var(--sr-on-accent)}
.btn-secondary{background:transparent;color:var(--sr-text);border-color:var(--sr-border-strong)}@media (hover:hover){.btn-secondary:hover{background:var(--sr-surface-2);color:var(--sr-text)}}
.hdr .btn-secondary{color:var(--sr-nav-text);border-color:rgb(255 250 250 / .3)}.hdr .btn-secondary:hover{background:rgb(255 250 250 / .08);color:var(--sr-nav-text)}
.hdr .open{display:none}
.menu{display:none;background:var(--sr-bg-nav);border-top:1px solid rgb(255 255 255 / .08)}
.menu.is-open{display:block}
.menu a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 20px;color:var(--sr-nav-text);font-size:17px;font-weight:500;border-bottom:1px solid rgb(255 255 255 / .06)}
.menu a:hover{text-decoration:none;background:rgb(255 250 250 / .06)}
.menu a[aria-current="page"]{color:oklch(0.80 0.14 85)}
.menu .btn{margin:16px 20px 20px;width:calc(100% - 40px)}
@media (min-width:860px){.nav{display:flex}.hdr .open{display:inline-flex}.menubtn{display:none}.menu{display:none !important}}
/* Hero */
.hero{padding:44px 0 36px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--sr-text-3)}
.hero h1{font-size:40px;line-height:1.05;letter-spacing:-.025em;font-weight:600;margin-top:10px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--sr-accent)}
.lead{font-size:19px;color:var(--sr-text-2);margin-top:16px;max-width:560px;text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:24px}
.cta .quiet{color:var(--sr-text-2);text-decoration:underline;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.hero-grid{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.hero{padding:72px 0 56px}.hero h1{font-size:58px}.hero-grid{grid-template-columns:1.05fr 1fr}}
/* Sections */
.sec{padding:36px 0;border-top:1px solid var(--sr-border)}
.sec h2{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.sec h3{font-size:18px;font-weight:600;line-height:1.3}
.sec p{color:var(--sr-text-2);text-wrap:pretty}
.sec p b{color:var(--sr-text);font-weight:600}
.stack{display:flex;flex-direction:column;gap:12px}
.split{display:grid;gap:22px;align-items:center}
.split .stack{gap:10px}
@media (min-width:860px){.sec{padding:60px 0}.sec h2{font-size:32px}.split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}.split.flip>.stack{order:2}}
.shot{border-radius:var(--sr-r-panel);overflow:hidden;border:1px solid var(--sr-border);background:var(--sr-surface);box-shadow:var(--sr-shadow-2)}
.shot img,.shot video{width:100%;display:block;height:auto;aspect-ratio:924 / 540;object-fit:cover;background:var(--sr-surface-2)}
.shot-cap{font-size:13px;color:var(--sr-text-3);margin-top:8px}
.list{display:flex;flex-direction:column;gap:10px}
.list li{display:flex;gap:12px;align-items:flex-start;color:var(--sr-text-2)}
.list li .icon{color:var(--sr-accent);width:20px;height:20px;margin-top:4px}
.list li span{flex:1;min-width:0}
.list li b{color:var(--sr-text);font-weight:600}
.cards{display:grid;gap:12px}
@media (min-width:600px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cards.four{grid-template-columns:repeat(4,1fr)}}
@media (min-width:600px) and (max-width:859px){.cards.three>:last-child{grid-column:1 / -1}}
@media (min-width:860px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--sr-r-panel);background:var(--sr-surface);border:1px solid var(--sr-border);color:inherit;min-height:160px}
a.card:hover{text-decoration:none;color:inherit}@media (hover:hover){a.card:hover{border-color:var(--sr-border-strong);background:var(--sr-surface-2)}}
.card .icon{color:var(--sr-accent);width:28px;height:28px}
.card h3{font-size:19px}
.card p{color:var(--sr-text-2);font-size:15px}
.card .more{margin-top:auto;color:var(--sr-accent);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.strip{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--sr-r-panel);background:var(--sr-accent-soft);border:1px solid var(--sr-accent)}
.strip .icon{color:var(--sr-accent);width:28px;height:28px;margin-top:2px}
.strip b{font-size:18px;display:block;margin-bottom:4px}
.strip p{color:var(--sr-text-2)}
.panel{padding:20px;border-radius:var(--sr-r-panel);background:var(--sr-surface);border:1px solid var(--sr-border)}
.panel>b,.panel>.eyebrow{display:block}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start;color:var(--sr-text-2)}
.steps li span{flex:1;min-width:0}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;background:var(--sr-accent-soft);color:var(--sr-accent);font-weight:700;display:grid;place-items:center;font-size:15px}
.steps li b{color:var(--sr-text);font-weight:600}
.code{font-family:var(--sr-font-mono);font-size:22px;letter-spacing:.14em;background:var(--sr-bg);border:1px solid var(--sr-border-strong);border-radius:var(--sr-r);padding:6px 12px;color:var(--sr-text)}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;white-space:nowrap;padding:0 10px;border-radius:var(--sr-r-pill);font-size:12px;font-weight:600;background:var(--sr-info-soft);color:var(--sr-info);text-transform:uppercase;letter-spacing:.06em}
.surface{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--sr-surface-2)}
.surface i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--sr-text-2);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.next{display:grid;gap:12px}
@media (min-width:600px){.next{grid-template-columns:1fr 1fr 1fr}}
.next .panel{display:flex;flex-direction:column;gap:8px}
.next .panel b{font-size:16px}
.next .panel p{font-size:14px}
/* Footer */
.ftr{flex:none;height:calc(56px + var(--sr-safe-bottom));padding-bottom:var(--sr-safe-bottom);border-top:1px solid var(--sr-border);background:var(--sr-bg-side);margin-top:40px;color:var(--sr-text-3);font-size:13px;overflow:hidden}
.ftr .wrap{height:56px;display:flex;align-items:center}
.ftr-links{display:flex;gap:0 16px;margin-left:auto}
.ftr-links a{color:var(--sr-text-2);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.ftr-links a:hover{color:var(--sr-text)}
.ftr-bottom{flex:1;min-width:0;display:flex;align-items:center;gap:12px;white-space:nowrap}
.ftr-id{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ftr-nz{display:none}
@media (min-width:600px){.ftr-nz{display:inline}}
@media (max-width:380px){.ftr,.ftr-links a{font-size:12px}.ftr-links{gap:0 12px}.ftr-bottom{gap:8px}}
/* Footer sits at the bottom of the screen on short pages */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
main:has(.lost){display:flex;flex-direction:column}main:has(.lost)>.lost{flex:1}
/* Beta sign-up (beta.html) */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.beta-grid{display:grid;gap:32px;align-items:start}
@media (min-width:860px){.beta-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px}}
.form{display:flex;flex-direction:column;gap:18px}
.sec .form-title{font-size:22px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-weight:600;font-size:16px;color:var(--sr-text)}
.input{width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:17px;color:var(--sr-text);background:var(--sr-bg);border:1px solid var(--sr-border-strong);border-radius:var(--sr-r);text-overflow:ellipsis}
textarea.input{min-height:128px;resize:vertical;line-height:1.45}
.input:focus{outline:2px solid var(--sr-focus);outline-offset:1px;border-color:var(--sr-focus)}
.input[aria-invalid="true"]{border-color:var(--sr-danger);box-shadow:inset 0 0 0 1px var(--sr-danger)}
.sec .field .hint{font-size:14px;color:var(--sr-text-3)}
.sec .field .err{font-size:14px;font-weight:600;color:var(--sr-danger)}
.field-foot{display:flex;gap:12px;align-items:flex-start}
.field-foot .hint{flex:1;min-width:0}
.count{font-size:14px;color:var(--sr-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.count.is-over{color:var(--sr-danger);font-weight:600}
.sec .consent{font-size:15px}
.notice{padding:14px 16px;border-radius:var(--sr-r);border:1px solid}
.notice b{display:block;color:var(--sr-text)}
.sec .notice p{font-size:15px}
.notice--danger{background:var(--sr-danger-soft);border-color:var(--sr-danger)}
.notice--warning{background:var(--sr-warning-soft);border-color:var(--sr-warning)}
.btn-block{width:100%}
.btn:disabled{cursor:progress;opacity:.75}
.state-panel{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.state-panel>.icon{color:var(--sr-accent);width:32px;height:32px}
.sec .state-panel h3{font-size:22px;overflow-wrap:anywhere}
.state-panel h3:focus{outline:none}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.list-count{color:var(--sr-text-2);font-size:15px;font-variant-numeric:tabular-nums}
.entries-panel{padding:0;overflow:hidden}
.entries{margin:0;padding:0;list-style:none}
.entry{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border-top:1px solid var(--sr-border);transition:background 1.5s ease}
.entry:first-child{border-top:0}
.entry.is-new{background:var(--sr-accent-soft);transition:none}
.entry-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.entry-name{font-weight:600;color:var(--sr-text);overflow-wrap:anywhere;min-width:0}
.entry-country{color:var(--sr-text-2);font-size:15px;overflow-wrap:anywhere;min-width:0}
.entry-date{margin-left:auto;color:var(--sr-text-3);font-size:13px;white-space:nowrap}
.sec .entry-comment{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.list-state{padding:20px}
.list-msg{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.list-msg b{color:var(--sr-text)}
.skel-row{display:flex;flex-direction:column;gap:8px;padding:6px 0 14px}
.skel{display:block;height:12px;border-radius:6px;background:var(--sr-surface-2);animation:sr-skel 1.4s ease-in-out infinite}
@keyframes sr-skel{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.entry{transition:none}}
.list-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--sr-r);background:var(--sr-surface-2);border:1px solid var(--sr-border)}
.seg-btn{min-height:42px;padding:0 16px;border:0;border-radius:calc(var(--sr-r) - 2px);background:transparent;color:var(--sr-text-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.seg-btn:hover{color:var(--sr-text)}
.seg-btn[aria-pressed="true"]{background:var(--sr-surface);color:var(--sr-text);box-shadow:var(--sr-shadow-1)}
.seg-btn:focus-visible{outline:2px solid var(--sr-focus);outline-offset:1px}
.filter-country{width:auto;max-width:100%;min-width:0;flex:0 1 320px}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field legend{padding:0;margin-bottom:6px;font-weight:600;font-size:16px;color:var(--sr-text)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--sr-border-strong);border-radius:var(--sr-r);background:var(--sr-bg);color:var(--sr-text);font-weight:600;cursor:pointer}
.choice input{width:20px;height:20px;margin:0;accent-color:var(--sr-accent);flex:none}
.choice:has(input:checked){border-color:var(--sr-accent);background:var(--sr-accent-soft)}
.choice:has(input:focus-visible){outline:2px solid var(--sr-focus);outline-offset:1px}
fieldset[aria-invalid="true"] .choice{border-color:var(--sr-danger)}
.sec .field .note{font-size:14px;color:var(--sr-text);padding:10px 12px;border-radius:var(--sr-r);background:var(--sr-info-soft)}
.entry-phone{font-size:12px;font-weight:600;color:var(--sr-text-2);background:var(--sr-surface-2);border-radius:var(--sr-r-pill);padding:1px 8px;white-space:nowrap}
/* Tactile interaction (Tactile Interaction Style Guide, Oct 18 2026). Every tappable thing reacts within 100 ms:
   lifts on hover (real hover devices only), sinks on press, clear focus ring. Buttons: Lift & Sink. Header icons and nav: tint.
   Link cards: the guide's card recipe. Uses the site's own tokens; no new colours. */
:root{--tp-press:.97;--tp-press-card:.98;--tp-press-icon:.92;--tp-lift:-1px;--tp-sink:1px;--tp-in:80ms;--tp-out:200ms;--tp-ease:cubic-bezier(.2,.8,.2,1);
  --tp-shadow-rest:0 1px 2px rgb(0 0 0 / .08),0 2px 6px rgb(0 0 0 / .06);--tp-shadow-hover:0 2px 4px rgb(0 0 0 / .10),0 6px 16px rgb(0 0 0 / .10);--tp-shadow-press:inset 0 1px 3px rgb(0 0 0 / .18);
  --tp-tint:rgb(255 250 250 / .10);--tp-tint-press:rgb(255 250 250 / .18)}
[data-theme="dark"]{--tp-shadow-rest:0 1px 2px rgb(0 0 0 / .35),0 2px 6px rgb(0 0 0 / .25);--tp-shadow-hover:0 2px 4px rgb(0 0 0 / .40),0 8px 18px rgb(0 0 0 / .35);--tp-shadow-press:inset 0 1px 3px rgb(0 0 0 / .45)}
.btn,.iconbtn,.nav a,.menu a,a.card,.seg-btn,.choice{-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--tp-out) var(--tp-ease),box-shadow var(--tp-out) var(--tp-ease),background-color var(--tp-out) var(--tp-ease),border-color var(--tp-out) var(--tp-ease)}
.btn:active,.iconbtn:active,.nav a:active,.menu a:active,a.card:active,.seg-btn:active,.choice:active{transition-duration:var(--tp-in)}
.btn:focus-visible,.iconbtn:focus-visible,.nav a:focus-visible,.menu a:focus-visible,a.card:focus-visible,.seg-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sr-bg),0 0 0 4px var(--sr-accent)}
/* Buttons */
.btn-primary,.btn-secondary{box-shadow:var(--tp-shadow-rest)}
.btn-secondary{background:var(--sr-surface)}
.hdr .btn-primary{box-shadow:none}
@media (hover:hover){.btn-primary:hover,.btn-secondary:hover{transform:translateY(var(--tp-lift));box-shadow:var(--tp-shadow-hover)}.btn-primary:hover{background:color-mix(in oklch,var(--sr-accent),black 6%)}}
.btn-primary:active,.btn-secondary:active{transform:translateY(var(--tp-sink)) scale(var(--tp-press));box-shadow:var(--tp-shadow-press)}
.btn-primary:active{background:color-mix(in oklch,var(--sr-accent),black 12%)}
.btn-secondary:active{background:var(--sr-surface-2)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;box-shadow:none;transform:none;pointer-events:none}
/* Header icons */
.iconbtn{border-radius:999px}
.iconbtn svg{transition:transform var(--tp-out) var(--tp-ease)}
@media (hover:hover){.iconbtn:hover{background:var(--tp-tint)}}
.iconbtn:active{background:var(--tp-tint-press)}
.iconbtn:active svg{transform:scale(var(--tp-press-icon))}
/* Header nav and phone menu: tint on press; the current page keeps its gold underline */
@media (hover:hover){.nav a:hover{background:var(--tp-tint)}}
.nav a:active{background:var(--tp-tint-press);transform:scale(var(--tp-press))}
.nav a[aria-current="page"]:hover,.nav a[aria-current="page"]:active{background:transparent}
.menu a:active{background:var(--tp-tint-press)}
/* Link cards */
a.card{box-shadow:var(--tp-shadow-rest)}
a.card .more svg{transition:transform var(--tp-out) var(--tp-ease)}
@media (hover:hover){a.card:hover{transform:translateY(var(--tp-lift));box-shadow:var(--tp-shadow-hover)}a.card:hover .more svg{transform:translateX(2px)}}
a.card:active{transform:scale(var(--tp-press-card));box-shadow:var(--tp-shadow-press)}
/* Beta form choice and list filter */
.seg-btn:active{transform:scale(var(--tp-press));background:var(--sr-surface-2)}
.seg-btn[aria-pressed="true"]{background:var(--sr-accent);color:var(--sr-on-accent);box-shadow:var(--tp-shadow-rest)}
.choice{box-shadow:var(--tp-shadow-rest)}
.choice:active{transform:scale(var(--tp-press-card));box-shadow:var(--tp-shadow-press)}
@media (prefers-reduced-motion:reduce){.btn,.iconbtn,.iconbtn svg,.nav a,.menu a,a.card,a.card .more svg,.seg-btn,.choice{transition-duration:0ms !important}.btn:hover,.btn:active,.iconbtn:active svg,.nav a:active,a.card:hover,a.card:active,a.card:hover .more svg,.seg-btn:active,.choice:active{transform:none !important}}
/* Contact dialog */
.contact{padding:0;border:0;background:transparent;max-width:min(560px,calc(100% - 24px));width:100%;color:var(--sr-text)}
.contact::backdrop{background:var(--sr-overlay)}
.contact-card{position:relative;padding:24px 20px 20px;border-radius:var(--sr-r-panel);background:var(--sr-surface);border:1px solid var(--sr-border);box-shadow:var(--sr-shadow-2);max-height:calc(100dvh - 32px);overflow:auto}
.contact .form-title{font-size:22px;font-weight:600;margin:0;padding-right:44px}
.contact .hint{font-size:14px;color:var(--sr-text-3);margin:0}
.contact .err{font-size:14px;font-weight:600;color:var(--sr-danger);margin:0}
.contact .notice p{font-size:15px;color:var(--sr-text-2);margin:0}
.contact-x{position:absolute;top:10px;right:10px;color:var(--sr-text-2)}
.contact-x:hover{background:var(--sr-surface-2)}
.contact .state-panel{padding:8px 0}
/* App stores, after the beta */
.stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;max-width:520px}
.store{display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;padding:6px 12px 6px 10px;border-radius:var(--sr-r);border:1px dashed var(--sr-border-strong);color:var(--sr-text-2);background:transparent}
.store .icon{width:22px;height:22px;color:var(--sr-text-3)}
.store>span{display:flex;flex-direction:column;line-height:1.15;font-weight:600;font-size:16px;color:var(--sr-text)}
.store>span{min-width:0}
.store small{white-space:normal;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--sr-text-3)}
/* Privacy and Terms */
.doc-meta{font-size:14px;color:var(--sr-text-3);margin-top:14px}
.sec.doc{padding:28px 0}
.doc-wrap{max-width:760px;display:flex;flex-direction:column;gap:12px}
.doc-list{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--sr-text-2)}
.doc-list b,.doc-dl b{color:var(--sr-text)}
.doc-dl{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--sr-border)}
.doc-dl>div{padding:12px 0;border-bottom:1px solid var(--sr-border);display:flex;flex-direction:column;gap:2px}
.doc-dl dt{font-weight:600;color:var(--sr-text)}
.doc-dl dd{margin:0;color:var(--sr-text-2);font-size:16px}
.doc-dl dd:empty{display:none}
@media (min-width:860px){.sec.doc{padding:36px 0}}
/* 404 */
/* While the 404 animation plays the header and footer keep their space but show nothing; both fade in with "also a feature". */
.hdr{transition:background-color .6s ease,border-color .6s ease}
.hdr>*{transition:opacity .6s ease,visibility 0s}
.lost-playing .hdr{background:#0B0F12;border-bottom-color:transparent}
.lost-playing .hdr>*{opacity:0;visibility:hidden;transition:none}
.ftr{transition:background-color .6s ease,border-color .6s ease}
.ftr .wrap{transition:opacity .6s ease,visibility 0s}
.lost-playing .ftr{background:#0B0F12;border-top-color:transparent}
.lost-playing .ftr .wrap{opacity:0;visibility:hidden;transition:none}
/* The page behind the 404 is the scene's own dark, so no lighter hairline can show between the header, the scene and the footer
   (scaled or zoomed screens round their edges to fractions of a pixel). */
html:has(.lost),html:has(.lost) body{background:#0B0F12}
.lost-playing .hdr,.lost-playing .ftr{border-color:#0B0F12;box-shadow:none}
.lost{position:relative;background:#0B0F12;color:#FFFAFA;overflow:hidden;padding-bottom:56px}
@media (max-width:599px){.lost{padding-bottom:150px}.lost-plane{width:84%}}
.lost-stage{position:relative;z-index:1;height:clamp(300px,60vw,520px);perspective:1100px;perspective-origin:50% 20%;display:grid;place-items:center;overflow:visible}
.lost-plane{position:relative;width:min(760px,80%);aspect-ratio:924 / 540;transform-style:preserve-3d;transform:translateX(-4%) rotateX(60deg) rotateZ(-16deg) translateY(8%);background:#2A2E31 url(../images/plan-3d-2.jpg) center bottom / cover no-repeat;border-radius:6px 6px 14px 14px;box-shadow:0 40px 80px rgb(0 0 0 / .6)}
.lost-plane::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgb(255 250 250 / .55)}
.lost-track{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lost-track path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lost-track [data-lost-path]{stroke:rgb(255 250 250 / .8);stroke-width:14}
.lost-track .lost-ridden{stroke:oklch(0.80 0.14 85);stroke-width:8}
.lost-track [data-lost-path]+path{}
.lost-rider{position:absolute;left:16%;top:100%;width:34px;height:34px;transform-style:preserve-3d;pointer-events:none}
.lost-rider span{position:absolute;inset:0;border-radius:50%;background:#FFFAFA;box-shadow:0 0 0 5px oklch(0.80 0.14 85),0 0 0 14px rgb(226 180 74 / .25);transform:rotateZ(16deg) rotateX(-60deg)}
.lost-oh{position:absolute;left:max(20px,calc((100% - 1080px) / 2 + 20px));top:clamp(20px,5vw,56px);z-index:2;margin:0;font-size:clamp(40px,7vw,80px);font-weight:700;line-height:1;letter-spacing:-.03em;color:#FFFAFA;opacity:0;transform:translateY(10px) rotate(-3deg);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.lost-oh.is-shown{opacity:1;transform:rotate(-3deg)}
@media (prefers-reduced-motion:reduce){.lost-oh{transition:none}}
.lost-faller{position:absolute;left:0;top:0;z-index:0;width:30px;height:30px;opacity:0;pointer-events:none;will-change:transform}
.lost-faller>span{transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.4,.5,1);position:absolute;inset:0;border-radius:50%;background:#FFFAFA;box-shadow:0 0 0 5px oklch(0.80 0.14 85),0 0 0 12px rgb(226 180 74 / .25)}
.lost-faller.is-flat>span{transform:scale(1.7,.5)}
.lost-faller>span::after{transition:opacity .2s ease;content:"";position:absolute;left:50%;top:-9px;width:2px;height:8px;margin-left:-1px;background:#FFFAFA;border-radius:1px}
.lost-bubble{position:absolute;left:50%;bottom:calc(100% + 18px);transform-origin:50% 100%;white-space:nowrap;padding:6px 12px;border-radius:12px;background:#FFFAFA;color:#11181C;font-size:14px;font-weight:700;box-shadow:0 4px 14px rgb(0 0 0 / .35);opacity:0;transform:translateX(-50%) scale(.6);transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.lost-bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:#FFFAFA;border-bottom:0}
.lost-bubble.is-shown{opacity:1;transform:translateX(-50%) scale(1)}
.lost-bubble{display:flex;flex-direction:column;align-items:center;width:max-content;text-align:center;transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.6,.5,1),background-color .3s ease,color .3s ease}
.lost-bubble::after{transition:border-top-color .3s ease}
.lost-bubble small{position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-6px,-50%);white-space:nowrap;font-size:13px;font-weight:600;font-style:italic;color:#B0B5BB;opacity:0;transition:opacity .35s ease,transform .35s ease}
.lost-bubble.is-sos{background:#C62828;color:#FFFFFF}
.lost-bubble.is-sos::after{border-top-color:#C62828}
.lost-bubble.is-sos small{opacity:1;transform:translate(0,-50%)}
.lost-copy{position:relative;z-index:2;margin-top:-40px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s var(--tp-ease)}
.lost-copy.is-shown{opacity:1;transform:none}
.lost-code{font-size:clamp(72px,14vw,140px);font-weight:700;line-height:.9;letter-spacing:-.04em;color:oklch(0.80 0.14 85)}
.lost h1{font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:600;margin:0}
.lost .lead{color:#FFFAFA;margin-top:14px;width:100%;max-width:760px;align-self:center;box-sizing:border-box;font-size:clamp(19px,2.4vw,24px);line-height:1.4;font-weight:500;text-wrap:pretty;padding:16px 20px;border-radius:var(--sr-r-panel);background:#1B2228;border:1px solid rgb(226 180 74 / .35);box-shadow:0 8px 24px rgb(0 0 0 / .35)}
.lost .btn-secondary{color:#FFFAFA;background:transparent;border-color:rgb(255 250 250 / .35)}
.lost .btn-secondary:hover{background:rgb(255 250 250 / .08);color:#FFFAFA}
.lost-stage-wrap{position:relative}
.lost-stage-wrap .lost-stage{pointer-events:none}
.lost-replay{position:relative;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgb(255 250 250 / .3);background:rgb(17 24 28 / .7);color:#FFFAFA;font:inherit;font-size:15px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--tp-out) var(--tp-ease),background-color var(--tp-out) var(--tp-ease)}
.lost-replay .icon{width:20px;height:20px}
.lost-replay:not(.is-shown){opacity:0;visibility:hidden;transform:translateY(6px)}
.lost-replay.is-shown{opacity:1;visibility:visible;transition:opacity .4s ease,transform .4s var(--tp-ease),visibility 0s}
@media (hover:hover){.lost-replay:hover{background:rgb(255 250 250 / .14)}}
.lost-replay:active{transform:scale(var(--tp-press));background:rgb(255 250 250 / .2);transition-duration:var(--tp-in)}
.lost-replay:focus-visible{outline:none;box-shadow:0 0 0 2px #0B0F12,0 0 0 4px oklch(0.80 0.14 85)}
main:has(.lost)+.ftr{margin-top:0}
@media (prefers-reduced-motion:reduce){.lost-copy{transition:none}}
/* Back / next pager above the footer: steps through the nav menu order, wrapping round */
.pager{margin-top:40px;border-top:1px solid var(--sr-border)}
.pager .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:16px}
.pager-link{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:6px 14px 6px 8px;border-radius:var(--sr-r);color:var(--sr-text);-webkit-tap-highlight-color:transparent;transition:transform var(--tp-out) var(--tp-ease),background-color var(--tp-out) var(--tp-ease)}
.pager-next{padding:6px 8px 6px 14px;text-align:right}
.pager-link .icon{width:28px;height:28px;color:var(--sr-accent);flex:none;transition:transform var(--tp-out) var(--tp-ease)}
.pager-link span{display:flex;flex-direction:column;line-height:1.2;font-weight:600;font-size:17px}
.pager-link small{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--sr-text-3)}
.pager-link:hover{text-decoration:none;color:var(--sr-text)}
@media (hover:hover){.pager-link:hover{background:var(--sr-surface)}.pager-link:hover .icon{transform:translateX(-2px)}.pager-next:hover .icon{transform:translateX(2px)}}
.pager-link:active{transform:scale(var(--tp-press));background:var(--sr-surface-2);transition-duration:var(--tp-in)}
.pager-link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sr-bg),0 0 0 4px var(--sr-accent)}
.pager+.ftr{margin-top:0}
@media (prefers-reduced-motion:reduce){.pager-link,.pager-link .icon{transition:none}.pager-link:active,.pager-link:hover .icon{transform:none}}
.lost-faller.is-flat>span::after{opacity:0}
@media (prefers-reduced-motion:reduce){.lost-faller>span{transition:none}}
/* Breadcrumb under the header (every page except Home and the 404) */
.crumbs{border-bottom:1px solid var(--sr-border)}
.crumbs ol{list-style:none;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-height:40px;font-size:14px;color:var(--sr-text-3)}
.crumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.crumbs .icon{width:14px;height:14px;color:var(--sr-text-3)}
.crumbs a{color:var(--sr-text-2);min-height:40px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--sr-text)}
.crumbs [aria-current]{color:var(--sr-text);font-weight:600}
.crumbs+.hero{padding-top:28px}
@media (min-width:860px){.crumbs+.hero{padding-top:48px}}
/* Founder tick on the beta list: Doug's entry. A tap or hover shows "Built Secret Rides". */
.entry-who{display:inline-flex;align-items:center;gap:6px;min-width:0}
.founder{position:relative;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--sr-accent);color:var(--sr-on-accent);cursor:help;-webkit-tap-highlight-color:transparent}
.founder::before{content:"";position:absolute;inset:-11px}
.founder .icon{width:14px;height:14px;stroke-width:3}
.founder-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);white-space:nowrap;padding:5px 9px;border-radius:8px;background:var(--sr-text);color:var(--sr-bg);font-size:12px;font-weight:600;line-height:1.2;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility 0s .15s;z-index:3}
.founder-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--sr-text);border-bottom:0}
.founder:hover .founder-tip,.founder:focus-visible .founder-tip,.founder:focus .founder-tip{opacity:1;visibility:visible;transform:translateX(-50%);transition-delay:0s}
.founder:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sr-surface),0 0 0 4px var(--sr-accent)}
.entries-panel{overflow:visible}
.entries .entry:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
@media (prefers-reduced-motion:reduce){.founder-tip{transition:none}}