/* 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}
.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bullets li{position:relative;padding-left:18px;color:var(--sr-text-2)}
.bullets li::before{content:"";position:absolute;left:3px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--sr-text-3)}
.bullets li b{color:var(--sr-text);font-weight:600}
.card .bullets{font-size:15px;gap:6px}
.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)}
.strip p+p{margin-top:10px}
.strip p b{display:inline;font-size:inherit;margin:0;color:var(--sr-text)}
.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)}
.field label .opt{font-weight:400;color:var(--sr-text-3)}
.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,.sec .form>.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{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.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;flex-wrap:wrap;align-items:center;gap:2px 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}}
/* Pre-beta banner under the header. Sticks under the header (61 px: 60 + its 1 px border) so it stays put while the page scrolls. Hidden for the rest of the visit once closed; back on the next visit. */
/* Always on the dark header colour with the night gold, so it reads the same in light and dark mode. */
.prebeta{position:sticky;top:61px;z-index:19;background:var(--sr-bg-nav);border-top:1px solid rgb(255 255 255 / .08);border-bottom:2px solid oklch(0.80 0.14 85)}
.prebeta .wrap{display:flex;align-items:center;gap:4px;min-height:36px}
.prebeta-link{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;color:#FFFAFA;font-size:14px;font-weight:600;white-space:nowrap}
.prebeta-link:hover{color:#FFFAFA;text-decoration:none}
.prebeta-link:hover .prebeta-text{text-decoration:underline}
.prebeta-text{flex:none}
.prebeta-dot{flex:none;width:8px;height:8px;border-radius:50%;background:oklch(0.80 0.14 85);box-shadow:0 0 0 3px rgb(226 180 74 / .25)}
.prebeta-link .icon{width:16px;height:16px;color:oklch(0.80 0.14 85)}
.prebeta-x{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:-8px;border:0;border-radius:999px;background:transparent;color:#B0B5BB;cursor:pointer}
.prebeta-x .icon{width:18px;height:18px}
@media (hover:hover){.prebeta-x:hover{background:rgb(255 250 250 / .1);color:#FFFAFA}}
.prebeta-x:focus-visible,.prebeta-link:focus-visible{outline:none;box-shadow:0 0 0 2px oklch(0.80 0.14 85)}
.prebeta{transition:opacity .6s ease,visibility 0s}
.lost-playing .prebeta{opacity:0;visibility:hidden;transition:none}
/* "Using it for …" on the beta list */
.entry-using{flex:none;font-size:12px;font-weight:600;color:var(--sr-accent);white-space:nowrap}
.about-photo figure{max-width:560px;margin:0 auto}
.about-photo .shot img{aspect-ratio:4 / 5;object-fit:cover}
/* Tap an image for full screen (js/zoom.js) */
img[data-zoom]{cursor:zoom-in}
img[data-zoom]:focus-visible{outline:2px solid var(--sr-accent);outline-offset:-2px}
.zoom{padding:0;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;cursor:zoom-out}
.zoom::backdrop{background:#11181C}
.zoom:fullscreen{background:#11181C}
.zoom[open]{display:grid;place-items:center}
.zoom-img{max-width:min(1200px,calc(100vw - 24px));max-height:calc(100dvh - 24px);width:auto;height:auto;object-fit:contain;border-radius:var(--sr-r)}
.zoom-x{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));background:rgb(17 24 28 / .7);color:#FFFAFA}
html.zoom-open{overflow:hidden}
/* Full-screen fly-over (js/flyover.js, video[data-fullscreen]) */
.shot:has(.shot-fs){position:relative}
video.is-fs-able{cursor:pointer}
.shot-fs{position:absolute;right:10px;bottom:10px;background:rgb(17 24 28 / .7);color:#FFFAFA}
video:fullscreen{object-fit:contain;aspect-ratio:auto;background:#000}
.zoom--video{cursor:default}
.zoom-video{width:auto;height:auto;max-width:min(1200px,calc(100vw - 24px));max-height:calc(100dvh - 24px);aspect-ratio:auto !important;object-fit:contain;border-radius:var(--sr-r);background:#000}
/* Founder's build count, under Doug's comment. Tabular numbers so a refresh never shifts the layout. */
.founder-builds{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 0;padding:4px 6px 4px 10px;border-radius:999px;background:var(--sr-surface-2);color:var(--sr-text-2);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;align-self:flex-start}
.founder-builds>.icon{width:15px;height:15px;color:var(--sr-accent)}
.founder-builds-info{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sr-text-3);cursor:help}
.founder-builds-info::before{content:"";position:absolute;inset:-11px}
.founder-builds-info .icon{width:16px;height:16px}
.founder-builds-info .founder-tip{white-space:normal;width:max-content;max-width:240px;text-align:left;font-weight:500;line-height:1.35}
.founder-builds-info:hover .founder-tip,.founder-builds-info:focus .founder-tip{opacity:1;visibility:visible;transform:translateX(-50%);transition-delay:0s}
.founder-builds-info:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sr-accent)}

/* Sign-up number on the beta list: a wheel left of each entry. 1 = first to sign up. */
.entry{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 14px}
.entry-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.entry-no{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;margin-top:-4px}
.entry-no[hidden]{display:none}
.entry-no svg{position:absolute;inset:0;width:100%;height:100%;fill:none}
.entry-no svg path{stroke:var(--sr-border-strong);stroke-width:1;stroke-linecap:round}
.is-picked .entry-no svg path{stroke:var(--sr-text-3);stroke-width:1.3}
.entry-no svg circle{stroke:var(--sr-border-strong);stroke-width:1.5}
.entry-no-n{position:relative;font-size:16px;font-weight:600;line-height:1;color:var(--sr-text);font-variant-numeric:tabular-nums;padding:2px 3px;border-radius:6px;background:var(--sr-surface)}
.entry-no.is-long .entry-no-n{font-size:12px}
.entry.is-new .entry-no-n{background:transparent}
.is-picked .entry-no svg circle{stroke:var(--sr-accent)}
/* Picked testers and Doug: the wheel rolls forward slowly, one turn every 14 s like the header wheel at rest. The number stays still. */
.is-picked .entry-no svg{animation:sr-entry-roll 14s linear infinite}
@keyframes sr-entry-roll{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-picked .entry-no svg{animation:none}}
@media (max-width:480px){.entry{gap:0 10px;padding-left:14px}.entry-no{width:38px;height:38px}.entry-no-n{font-size:15px}}
/* Badges on the beta list (0.00.021; groups 0.00.029). Order: Creator, Founding Rider, then the group badge (First 10, The 20s, The 30s, …). Own row under the name line; wraps on a phone.
   Built from .tag (pill, 12 px caps) with no new tokens, so the same .badge markup can sit on a rider's public page in the app. */
.badges{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.badges[hidden]{display:none}
.badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;border:1px solid transparent;border-radius:var(--sr-r-pill);font-size:10px;font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.badge--creator{background:var(--sr-accent);color:var(--sr-on-accent)}
.badge--founding{background:var(--sr-accent-soft);color:var(--sr-accent);border-color:var(--sr-accent)}
.badge--first{background:var(--sr-surface-2);color:var(--sr-text-2);border-color:var(--sr-border-strong)}
/* Every later group (The 20s, The 30s, … The 1,000s): one shared look, the First 10 pill without its fill, so First 10 stays a step above and any number of groups works. */
.badge--group{background:transparent;color:var(--sr-text-2);border-color:var(--sr-border-strong);font-variant-numeric:tabular-nums}
.badge-s{text-transform:none;letter-spacing:.02em}
/* Doug's riding stats: km since he started, then the terrain bar (the app's surface colours) with a legend. */
.founder-stats{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:4px 0 0}
.founder-stats[hidden],.founder-stats [hidden]{display:none}
.founder-km{display:flex;align-items:center;gap:8px;margin:0;color:var(--sr-text);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.founder-km .icon{width:16px;height:16px;color:var(--sr-accent)}
.founder-mix .legend{margin-top:6px}
.founder-stats-wait{display:flex;flex-direction:column;gap:10px;padding:4px 0}
/* Scrolling list (0.00.022): 5 newest sign-ups in view, Doug's entry fixed at the bottom. Height is set by js/signup.js. */
.entries{position:relative;border-radius:inherit}
.entries.is-scroll{overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:var(--sr-border-strong) transparent}
.entries.is-scroll:focus-visible{outline:2px solid var(--sr-focus);outline-offset:2px}
/* Doug's entry: sticks to the bottom on the page background with a stronger divider, so it reads as a tray under the list. */
.entries.is-scroll .entry.is-founder{position:sticky;bottom:0;z-index:2;background:var(--sr-bg);border-top:1px solid var(--sr-border-strong);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.entries.is-scroll .entry.is-founder .entry-no-n{background:var(--sr-bg)}
/* Quiet fade above Doug's entry while there's more below; gone at the end of the list. */
.entries.is-scroll .entry.is-founder::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:36px;background:linear-gradient(to bottom,transparent,var(--sr-surface));pointer-events:none;transition:opacity .2s ease}
.entries.is-scroll.at-end .entry.is-founder::before{opacity:0}
/* The top entry's tick tooltip opens downward, so the scroll edge doesn't cut it off. */
.entries.is-scroll .entry:first-child .founder-tip{bottom:auto;top:calc(100% + 8px)}
.entries.is-scroll .entry:first-child .founder-tip::after{top:auto;bottom:100%;border-top:0;border-bottom:5px solid var(--sr-text)}
@media (prefers-reduced-motion:reduce){.entries.is-scroll .entry.is-founder::before{transition:none}}
/* Doug's public ride page link (0.00.023): beside the builds chip, a plain accent link with the "leaves the site" arrow. 36 px tall, 44 px to tap. */
.founder-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:4px 0 0}
.founder-foot .founder-builds{margin:0}
.founder-page{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:36px;color:var(--sr-accent);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.founder-page::before{content:"";position:absolute;inset:-4px -6px}
.founder-page:hover{color:var(--sr-accent);text-decoration-thickness:2px}
.founder-page .icon{width:16px;height:16px}
.founder-page:focus-visible{outline:2px solid var(--sr-focus);outline-offset:2px;border-radius:4px}
/* km line and "See Doug's rides" share a row; the link drops under it only on the narrowest phones. */
.founder-km-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.founder-km-row .founder-km{min-height:36px}
/* Compact tray while the list scrolls (0.00.024): Doug's comment, riding types and the terrain legend are hidden from view but
   still read by screen readers, in order. They show in full when the list is short. Keeps the tray about 200 px on a phone. */
.entries.is-scroll .entry.is-founder :is(.entry-rides){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.entries.is-scroll .entry.is-founder .founder-stats{gap:4px}
.entries.is-scroll .entry.is-founder{padding-top:12px;padding-bottom:12px}
.entries.is-scroll .entry.is-founder .founder-km-row{gap:2px 12px}
.entries.is-scroll .entry.is-founder .founder-mix .surface{height:8px}
.entries.is-scroll .entry.is-founder :is(.founder-km,.founder-page){min-height:24px;white-space:nowrap;flex:none}
.entries.is-scroll .entry.is-founder .founder-page::before{inset:-10px -6px}
.entries.is-scroll .entry.is-founder .founder-foot{margin:0}
/* Inside the scrolling list, a rider's comment shows 2 lines; tap it (or Enter) to read the rest. Keeps each rider about 110–150 px. */
.entries.is-scroll .entry:not(.is-founder) .entry-comment.is-long:not(.is-open){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.entries.is-scroll .entry-comment.is-long:focus-visible{outline:2px solid var(--sr-focus);outline-offset:2px}
/* "What kind of riding do you do?" (0.00.024): the iPhone / Android choice, as tick boxes that wrap. 44 px tall to tap. */
.choices--multi{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.choices--multi .choice{min-height:44px;padding:0 12px;font-size:15px}
.choice:has(input:disabled),.check:has(input:disabled){opacity:.5;cursor:not-allowed;box-shadow:none}
legend .opt{font-weight:500;font-size:14px;color:var(--sr-text-3);margin-left:6px}
fieldset.field>.hint{margin:0}
.check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;font-weight:600;color:var(--sr-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.check input{width:20px;height:20px;margin:0;accent-color:var(--sr-accent);flex:none}
.check:has(input:focus-visible){outline:2px solid var(--sr-focus);outline-offset:2px;border-radius:6px}
.check+.hint{margin-top:-6px}
/* On the list: quiet text under the name line, secondary to the country and phone pills. Up to 3, then "+N more". */
.entry-rides{margin:0;font-size:13px;line-height:1.4;color:var(--sr-text-2);overflow-wrap:anywhere}
/* Rider's comment (0.00.024): a quiet speech-bubble panel so it stands apart from the badges and pills. */
.sec .entry-comment{margin:2px 0 0;padding:8px 12px;border-radius:2px 12px 12px 12px;background:var(--sr-surface-2);color:var(--sr-text);line-height:1.45}
.entry.is-new .entry-comment{background:var(--sr-surface)}
/* App status under the list (0.00.026): Doug's build counts and what they mean, no tooltip. */
.app-status{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:12px 16px;border-radius:var(--sr-r-panel);background:var(--sr-surface-2)}
.app-status-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font-size:15px;color:var(--sr-text-2);font-variant-numeric:tabular-nums}
.app-status-line b{color:var(--sr-text);font-weight:600}
.app-status-line .icon{width:16px;height:16px;color:var(--sr-accent)}
.sec .app-status-note{margin:0;font-size:13px;color:var(--sr-text-3)}
.founder-mix .legend{gap:4px 14px;margin-top:6px;font-size:13px}