/* ═══════════════════════════════════════════════════════════════════════
   RON CARTEL — NIGHT GARAGE
   The customer-facing look, rebuilt. One idea carried all the way through:
   a bike under a single work lamp in a dark unit, photographed like it
   costs what it costs, with type from a fight poster.

   Loaded after app.css. app.css keeps the admin working; this file owns
   what a customer sees. New class names throughout so nothing here fights
   the base sheet.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Barlow Condensed';font-weight:600;font-style:normal;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-style:normal;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-800.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:900;font-style:normal;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-900.woff2') format('woff2')}

:root{
  --poster:'Barlow Condensed','Archivo',Impact,'Arial Narrow',sans-serif;
  --ink-0:#060607; --ink-1:#0B0B0D; --ink-2:#111113; --ink-3:#18181B;
  --chrome:#E8E4DD;
  --lamp:rgba(214,72,78,.16);
}

/* ── Ground ─────────────────────────────────────────────────────────── */
html{background:var(--ink-0)}
body{background:
  radial-gradient(ellipse 90% 55% at 50% -12%, var(--lamp), transparent 60%),
  linear-gradient(180deg,var(--ink-0) 0%,var(--ink-1) 40%,var(--ink-0) 100%)}
.atmos{background:none}
/* Decorative elements deliberately run past the viewport — the lamp, the
   outlined word, the marquee. `clip` (not hidden) keeps them from widening
   the document without turning body into a scroll container, which is what
   lets a phone drag the whole page sideways. */
html,body{overflow-x:clip !important}
.page{overflow-x:clip;padding-top:0}

/* ── Display type ───────────────────────────────────────────────────── */
.display{font-family:var(--poster);font-weight:900;text-transform:uppercase;letter-spacing:-.005em;
  line-height:.88;font-stretch:normal}
.display .lit{color:var(--blood-2);background:none;-webkit-text-fill-color:currentColor;text-shadow:none}
h2.sect{font-family:var(--poster);font-weight:900;text-transform:uppercase;letter-spacing:0;font-stretch:normal}
.x-display,.x-h{font-family:var(--poster);font-weight:900;text-transform:uppercase;
  letter-spacing:-.005em;line-height:.86;margin:0;color:var(--text);
  font-feature-settings:'ss01','kern'}
.x-display .lit,.x-h .lit{color:var(--blood-2);background:none;-webkit-text-fill-color:currentColor;
  text-shadow:none}
.x-eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint)}
.x-eyebrow b{color:var(--blood-2);font-weight:700}
.x-num{font-family:var(--poster);font-weight:900;letter-spacing:-.02em;line-height:.9;
  font-variant-numeric:tabular-nums lining-nums}

/* ── Nav: floats over the hero, becomes a bar once you scroll ───────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.topbar.solid{background:rgba(6,6,7,.78);border-bottom-color:var(--edge-2);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
/* The nav is fixed, so every page needs to start below it. The pages built
   on the new system used to carry their own top padding while the older ones
   carried none — and slid straight under the logo. Now the clearance lives in
   one place, and the hero is the single exception, pulling itself back up
   under the transparent bar with a negative margin. */
:root{--nav-h:72px;--ann-h:0px}
.announce{position:fixed;top:0;left:0;right:0;z-index:51;height:34px;line-height:34px;
  padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce a{display:inline}
body:has(.announce){--ann-h:34px}
.topbar{top:var(--ann-h)}
.page{padding-top:calc(var(--nav-h) + var(--ann-h))}
.x-hero{margin-top:calc(-1 * var(--nav-h))}
.topbar-in{height:var(--nav-h)}
.topbar .logo{font-family:var(--poster);font-weight:900;font-size:22px;letter-spacing:.02em;
  text-transform:uppercase}
.topbar .nav a{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ── Hero: the whole first screen ───────────────────────────────────── */
.x-hero{position:relative;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"copy stage" "readout readout";
  align-items:end;padding:calc(var(--nav-h) + 40px) 0 0;overflow:visible;isolation:isolate}
/* The lamp lives on the hero itself, centred well inside its own box, so the
   falloff finishes before any edge. A gradient centred on an element's edge
   draws a hard line there — which the first cut of this did. */
.x-hero::before{content:'';position:absolute;z-index:0;pointer-events:none;
  left:30%;right:-30%;top:-30%;bottom:-10%;
  background:radial-gradient(ellipse 42% 46% at 58% 42%, rgba(237,233,227,.075), transparent 70%)}
.x-hero-copy{grid-area:copy;position:relative;z-index:3;padding-bottom:clamp(28px,5vh,64px)}
.x-hero-copy .x-eyebrow{margin:0 0 22px;display:flex;align-items:center;gap:12px}
.x-hero-copy .x-eyebrow::before{content:'';width:34px;height:2px;background:var(--blood)}
.x-hero h1{font-size:clamp(52px,7.1vw,112px);text-wrap:balance;max-width:13ch}
.x-hero h1 .lit{display:block}
.x-hero-lede{margin:22px 0 0;max-width:46ch;font-size:clamp(15px,1.2vw,17px);line-height:1.55;
  color:var(--muted)}
.x-hero-stats{display:flex;flex-wrap:wrap;gap:6px 26px;margin:18px 0 0;padding:0}
.x-hero-stats div{display:flex;align-items:baseline;gap:8px}
.x-hero-stats dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
.x-hero-stats dd{margin:0;font-family:var(--poster);font-weight:800;font-size:20px;color:var(--text);
  font-variant-numeric:tabular-nums}
.x-hero-cta{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.x-btn{display:inline-flex;align-items:center;gap:11px;padding:0 26px;height:56px;border-radius:4px;
  font-family:var(--poster);font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  color:#FFF3F2;background:var(--blood);border:0;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -14px rgba(179,37,42,.8);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .2s}
.x-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);
  transform:translateX(-110%);transition:transform .6s var(--ease-out)}
.x-btn:hover{transform:translateY(-2px);background:var(--blood-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 36px -14px rgba(218,59,65,.9)}
.x-btn:hover::after{transform:translateX(110%)}
.x-btn:active{transform:translateY(0)}
.x-btn svg{width:17px;height:17px}
.x-btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(237,233,227,.22)}
.x-btn.ghost:hover{background:rgba(237,233,227,.06);box-shadow:inset 0 0 0 1px rgba(237,233,227,.4)}
.x-btn.ghost::after{display:none}
.x-hero-note{font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:8px}
.x-hero-note svg{width:13px;height:13px;color:var(--blood-2)}

/* The stage. One lamp, a floor, a reflection. */
.x-stage{grid-area:stage;position:relative;z-index:2;align-self:end;
  display:grid;place-items:end center;overflow:visible;padding-bottom:6%}
.x-stage .lamp{position:absolute;left:-30%;right:-30%;top:-40%;bottom:-30%;pointer-events:none;
  background:radial-gradient(ellipse 40% 26% at 50% 78%, rgba(179,37,42,.26), transparent 70%)}
.x-stage .floor{position:absolute;left:-10%;right:-10%;bottom:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(237,233,227,.18) 30%,rgba(237,233,227,.18) 70%,transparent)}
.x-bike{position:relative;width:min(100%,720px);z-index:2;
  will-change:transform;transform:translate3d(0,0,0)}
.x-bike img{display:block;width:100%;height:auto}
/* Only the hero bike moves with the page. The same rule used to apply to
   every stage, so a product photo picked up a scroll-driven transform and a
   12ms transition it had no business having — that was the "glitch". The
   hero's motion is driven from JS with easing, not a CSS transition. */
.x-hero-bike>img{transform:translate3d(0,calc(var(--par,0) * -1px),0) rotate(calc(var(--tilt,0) * 1deg))}
.x-bike .refl{position:absolute;left:0;right:0;top:99%;height:44%;pointer-events:none;
  transform:scaleY(-1);opacity:.28;filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 100%);
  overflow:hidden}
.x-bike .refl img{transform:none}
.x-bike .pool{position:absolute;left:8%;right:8%;bottom:-3%;height:12%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.85),transparent 70%);z-index:-1}
.x-hero-word{position:absolute;right:-2vw;bottom:8vh;z-index:1;pointer-events:none;
  font-family:var(--poster);font-weight:900;font-size:clamp(120px,24vw,380px);line-height:.8;
  letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(237,233,227,.09);
  text-transform:uppercase;user-select:none}

/* The readout strip along the bottom of the hero. */
.x-readout{grid-area:readout;position:relative;z-index:3;display:grid;
  grid-template-columns:repeat(4,1fr);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);margin-top:clamp(20px,4vh,44px)}
.x-readout>div{padding:18px 26px 16px;border-left:1px solid var(--edge-2);display:flex;
  flex-direction:column;gap:6px}
.x-readout>div:first-child{border-left:0;padding-left:0}
.x-readout .v{font-size:clamp(36px,4vw,62px);color:var(--text)}
.x-readout .v small{font-size:.42em;color:var(--blood-2);margin-left:6px;letter-spacing:0}
.x-readout .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:700}
.x-scroll{display:none}
.x-scroll::before{content:'';width:1px;height:44px;background:linear-gradient(180deg,var(--blood),transparent);
  animation:x-drip 2.2s var(--ease) infinite}
@keyframes x-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── Marquee ────────────────────────────────────────────────────────── */
.x-marquee{position:relative;overflow:hidden;background:var(--blood);color:#FFF3F2;
  padding:13px 0;margin:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(0,0,0,.4)}
.x-marquee-in{display:flex;width:max-content;animation:x-marq 38s linear infinite;will-change:transform}
.x-marquee span{font-family:var(--poster);font-weight:800;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;padding:0 28px;white-space:nowrap;display:inline-flex;align-items:center;gap:28px}
.x-marquee span::after{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
@keyframes x-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.x-marquee-in{animation:none}.x-scroll::before{animation:none}}

/* ── Section heads ──────────────────────────────────────────────────── */
.x-sect{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:end;
  gap:0 22px;padding:0 0 22px;margin:clamp(70px,10vh,120px) 0 0;border-bottom:1px solid var(--edge)}
.x-sect .n{font-family:var(--poster);font-weight:900;font-size:clamp(40px,5vw,72px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px var(--blood-2);letter-spacing:-.02em}
.x-sect .t{font-size:clamp(44px,6.4vw,96px)}
.x-sect .x-eyebrow{margin:0 0 10px}
.x-sect .c{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-bottom:10px}

/* ── Showroom: one bike, one row ────────────────────────────────────── */
.x-row{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(44px,7vh,90px) 0;
  border-bottom:1px solid var(--edge-2);text-decoration:none;color:inherit}
.x-row:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.x-row:nth-child(even) .x-row-stage{order:2}
.x-row-stage{position:relative;aspect-ratio:5/3.6;display:grid;place-items:center;overflow:visible;
  border-radius:6px}
.x-row-stage::before{content:'';position:absolute;inset:-6% -4% -2%;border-radius:12px;
  background:radial-gradient(ellipse 60% 55% at 50% 18%, rgba(237,233,227,.06), transparent 62%),
             radial-gradient(ellipse 80% 40% at 50% 100%, rgba(179,37,42,.22), transparent 64%);
  pointer-events:none;transition:opacity .5s}
.x-row-stage .x-bike{width:92%}
.x-row-stage img.photo{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.x-row-stage .lot{position:absolute;top:8px;left:12px;font-family:var(--poster);font-weight:900;
  font-size:64px;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(237,233,227,.16);letter-spacing:-.02em}
.x-row-stage .tagline{position:absolute;right:12px;top:14px;z-index:3;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;text-align:right;max-width:60%;
  padding:7px 14px 7px 10px;border-right:2px solid var(--blood);background:rgba(6,6,7,.6);
  /* Sits on a dark scrim over a photo in BOTH themes, so it is deliberately
     not --chrome: that token flips to near-black in light mode and the label
     disappeared into its own background. */
  color:#F2EFEA}
.x-row-stage .stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-10deg);
  font-family:var(--poster);font-weight:900;font-size:clamp(36px,5vw,64px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--blood-2);border:4px solid var(--blood-2);border-radius:6px;
  padding:8px 26px;opacity:.92;z-index:3}
.x-row.gone .x-bike img,.x-row.gone img.photo{filter:grayscale(.85) brightness(.5)}

.x-row-copy{position:relative;z-index:2;min-width:0}
.x-row-copy .x-eyebrow{margin:0 0 16px}
.x-row-copy h3{font-family:var(--poster);font-weight:900;text-transform:uppercase;line-height:.88;
  letter-spacing:-.005em;font-size:clamp(40px,5.2vw,78px);margin:0;color:var(--text)}
.x-row-copy .blurb{margin:18px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:48ch}
.x-chips{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:18px 0 0;
  border-top:1px solid var(--edge-2)}
.x-chips div{display:flex;flex-direction:column;gap:3px}
.x-chips .v{font-family:var(--poster);font-weight:800;font-size:26px;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums}
.x-chips .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
.x-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;margin:30px 0 0}
.x-price .now{font-family:var(--poster);font-weight:900;font-size:clamp(44px,5vw,68px);line-height:.9;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.x-price .now i{font-style:normal;font-size:.5em;vertical-align:.55em;margin-right:2px;color:var(--blood-2)}
.x-price s{color:var(--ghost);font-size:16px;font-variant-numeric:tabular-nums}
.x-price .save{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blood-3);border:1px solid var(--blood-line);border-radius:2px;padding:4px 9px;
  align-self:center}
.x-row-cta{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.x-more{display:inline-flex;align-items:center;gap:10px;font-family:var(--poster);font-weight:800;
  font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-decoration:none;
  position:relative;padding-bottom:4px}
.x-more::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blood);
  transform:scaleX(.35);transform-origin:left;transition:transform .35s var(--ease-out)}
.x-more:hover::after{transform:scaleX(1)}
.x-more svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.x-more:hover svg{transform:translateX(4px)}
.x-row .x-bike>img{transition:transform .8s var(--ease-out)}
.x-row:hover .x-row-stage .x-bike>img{transform:translateY(-6px)}
.x-availability{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.x-availability::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blood-2);
  box-shadow:0 0 12px var(--blood-2)}
.x-availability.off::before{background:var(--ghost);box-shadow:none}

/* ── Product page ───────────────────────────────────────────────────── */
.x-pdp{padding-top:28px}
.x-pdp-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);
  align-items:start}
.x-pdp-stage{position:relative}
.x-pdp-stage .x-row-stage{aspect-ratio:5/3.8}
.x-thumbs{display:flex;gap:10px;margin-top:14px}
.x-thumbs button{width:72px;height:56px;border-radius:4px;border:1px solid var(--edge);background:var(--ink-2);
  padding:0;cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .2s,border-color .2s}
.x-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.x-thumbs button.on,.x-thumbs button:hover{opacity:1;border-color:var(--blood-line)}
.x-buy{position:relative}
.x-buy h1{font-size:clamp(40px,4.6vw,72px)}
.x-buy .blurb{margin:18px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.x-buy .x-price{margin-top:26px}
.x-buy-box{margin-top:26px;padding:22px;border:1px solid var(--edge);border-radius:6px;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1))}
.x-buy-box .x-btn{width:100%;justify-content:center;height:60px;font-size:18px}
.x-qty{display:flex;align-items:center;gap:0;margin:0 0 14px;border:1px solid var(--edge);border-radius:4px;
  width:max-content;overflow:hidden}
.x-qty button{width:46px;height:46px;background:transparent;border:0;color:var(--text);font-size:20px;cursor:pointer}
.x-qty button:hover{background:rgba(237,233,227,.06)}
.x-qty input{width:52px;height:46px;text-align:center;background:transparent;border:0;border-left:1px solid var(--edge);
  border-right:1px solid var(--edge);color:var(--text);font-family:var(--poster);font-weight:800;font-size:20px}
.x-assure{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.x-assure li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.x-assure svg{width:14px;height:14px;color:var(--blood-2);flex:none;margin-top:2px}
.x-assure b{color:var(--text);font-weight:700}
.x-numbers{grid-column:1/-1;margin-top:clamp(50px,8vh,96px);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.x-numbers>div{padding:30px 28px;border-left:1px solid var(--edge-2)}
.x-numbers>div:first-child{border-left:0;padding-left:0}
.x-numbers .v{font-size:clamp(44px,5.4vw,84px);color:var(--text)}
.x-numbers .k{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:700}
.x-story{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  margin-top:clamp(40px,6vh,72px)}
.x-story .x-h{font-size:clamp(30px,3.4vw,48px);margin-bottom:18px}
.x-story p{color:var(--muted);line-height:1.7;font-size:15px;margin:0 0 14px}
.x-origin{padding:22px 24px;border-left:3px solid var(--blood);background:linear-gradient(90deg,rgba(179,37,42,.08),transparent 60%)}
.x-origin .from{font-family:var(--poster);font-weight:800;font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;line-height:1;color:var(--text)}
.x-origin .at{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--muted)}
.x-origin .at svg{width:14px;height:14px;color:var(--blood-2)}
.x-getit{list-style:none;margin:0;padding:0}
.x-getit li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--edge-2)}
.x-getit li:last-child{border-bottom:0}
.x-getit .gi-c{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--edge);border-radius:4px;color:var(--muted)}
.x-getit .gi-c svg{width:15px;height:15px}
.x-getit b{display:block;font-size:14px;color:var(--text)}
.x-getit i{font-style:normal;font-size:12px;color:var(--faint)}
.x-getit .p{margin-left:auto;font-family:var(--poster);font-weight:800;font-size:18px;color:var(--text);font-variant-numeric:tabular-nums}

/* ── Footer as a wordmark ───────────────────────────────────────────── */
.sitefoot{margin-top:clamp(80px,12vh,140px);border-top:1px solid var(--edge);background:var(--ink-0);position:relative;overflow:hidden}
.sitefoot .cols{padding-top:56px}
.x-wordmark{display:block;font-family:var(--poster);font-weight:900;text-transform:uppercase;
  font-size:clamp(64px,17.5vw,300px);line-height:.78;letter-spacing:-.01em;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(237,233,227,.14);margin:40px 0 -0.08em;user-select:none;
  background:linear-gradient(180deg,rgba(237,233,227,.06),transparent 90%);-webkit-background-clip:text;background-clip:text}

/* ── Auth pages ─────────────────────────────────────────────────────── */
.x-auth{min-height:calc(100svh - var(--nav-h) - var(--ann-h));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.x-auth-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  padding:48px clamp(24px,5vw,72px) 60px;border-right:1px solid var(--edge-2)}
.x-auth-side .x-h{font-size:clamp(44px,6vw,104px)}
.x-auth-side p{margin:22px 0 0;max-width:40ch;color:var(--muted);line-height:1.6;font-size:15px}
.x-auth-side .x-bike{position:absolute;right:-18%;top:10%;width:90%;opacity:.5;z-index:-1}
.x-auth-form{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,6vw,96px) 60px}
.x-auth-card{max-width:440px;width:100%}
.x-auth-form h2{font-family:var(--poster);font-weight:900;text-transform:uppercase;font-size:38px;line-height:.9;margin:0 0 8px}
.x-auth-form .sub{color:var(--muted);font-size:14px;margin:0 0 26px}
.x-field{margin:0 0 14px}
.x-field label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 8px}
.x-field input{width:100%;height:54px;padding:0 16px;border-radius:4px;border:1px solid var(--edge);
  background:var(--ink-2);color:var(--text);font-size:16px;font-family:var(--sans);
  transition:border-color .2s,box-shadow .2s}
.x-field input:focus{outline:0;border-color:var(--blood-line);box-shadow:0 0 0 3px rgba(179,37,42,.18)}
.x-field .pw{position:relative}
.x-field .pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:36px;padding:0 10px;
  background:transparent;border:0;color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;cursor:pointer}
.x-auth-form .x-btn{width:100%;justify-content:center;margin-top:8px}
.x-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ghost);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.x-or::before,.x-or::after{content:'';flex:1;height:1px;background:var(--edge-2)}
.x-switch{margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.x-switch a{color:var(--text);font-weight:700;text-decoration:none;border-bottom:1px solid var(--blood-line)}
.x-why{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:4px;
  border:1px solid var(--blood-line);background:var(--blood-dim);margin:0 0 22px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.x-why svg{width:16px;height:16px;flex:none;color:var(--blood-2);margin-top:2px}
.x-why b{color:var(--text)}

/* ── Reveal ─────────────────────────────────────────────────────────── */
.x-in{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.x-in.on{opacity:1;transform:none}
.x-in.d1{transition-delay:.08s}.x-in.d2{transition-delay:.16s}.x-in.d3{transition-delay:.24s}.x-in.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.x-in{opacity:1;transform:none;transition:none}}

/* ── Phones ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  /* Phone: the bike first and full width, then the words, then the numbers.
     The areas have to be restated here — a column change alone leaves the
     desktop "copy stage" map in force and squeezes the bike into a corner. */
  .x-hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"stage" "copy" "readout";
    align-items:start;padding-top:calc(var(--nav-h) + 18px);min-height:auto}
  .x-hero::before{left:-20%;right:-20%;top:-10%;bottom:40%}
  .x-hero-copy{padding-bottom:0}
  .x-stage{height:auto;min-height:0;margin:0 -16px 8px;padding:0 16px}
  .x-stage .lamp{top:-20%;bottom:-10%}
  .x-stage .lamp{top:-10%;height:130%}
  .x-bike{width:min(100%,560px);margin:0 auto}
  .x-hero h1{font-size:clamp(54px,14vw,110px)}
  .x-hero-copy .x-eyebrow{margin-top:8px}
  .x-hero-word{display:none}
  .x-readout{grid-template-columns:repeat(2,1fr);margin-top:34px}
  .x-readout>div{padding:16px 18px 14px}
  .x-readout>div:nth-child(odd){border-left:0;padding-left:0}
  .x-readout>div:nth-child(-n+2){border-bottom:1px solid var(--edge-2)}
  .x-readout .v{font-size:clamp(36px,10vw,56px)}
  .x-scroll{display:none}
  .x-row,.x-row:nth-child(even){grid-template-columns:1fr;gap:18px;padding:36px 0}
  .x-row:nth-child(even) .x-row-stage{order:0}
  .x-row-stage{aspect-ratio:4/3}
  .x-row-copy h3{font-size:clamp(38px,11vw,64px)}
  .x-pdp{padding-top:16px}
  .x-pdp-top{grid-template-columns:1fr}
  .x-pdp-stage{position:static}
  .x-numbers{grid-template-columns:repeat(2,1fr)}
  .x-numbers>div{padding:20px 18px}
  .x-numbers>div:nth-child(odd){border-left:0;padding-left:0}
  .x-numbers>div:nth-child(-n+2){border-bottom:1px solid var(--edge-2)}
  .x-numbers .v{font-size:clamp(40px,11vw,64px)}
  .x-story{grid-template-columns:1fr}
  .x-auth{grid-template-columns:1fr;min-height:0}
  .x-auth-side{padding:28px 20px 34px;border-right:0;border-bottom:1px solid var(--edge-2)}
  .x-auth-side .x-h{font-size:clamp(40px,12vw,72px)}
  .x-auth-side .x-bike{display:none}
  .x-auth-form{padding:32px 20px 60px}
  .x-sect{grid-template-columns:auto 1fr;margin-top:64px}
  .x-sect .c{grid-column:1/-1;padding:10px 0 0}
  :root{--nav-h:60px}
  .announce{height:30px;line-height:30px;font-size:12px}
  body:has(.announce){--ann-h:30px}
}
@media (max-width:560px){
  .x-btn{height:52px;padding:0 20px;font-size:15px;width:100%;justify-content:center}
  .x-hero-cta{gap:12px}
  .x-hero-cta .x-btn{flex:1 1 auto}
  .x-chips{gap:8px 18px}
  .x-chips .v{font-size:22px}
  .x-price .now{font-size:48px}
  .x-marquee span{font-size:13px;padding:0 18px;gap:18px}
  .x-row-stage .lot{font-size:44px}
  .x-row-stage .stamp{font-size:32px;border-width:3px;padding:6px 16px}
}

/* ── Order page: pay → tell us → then ────────────────────────────────
   Three numbered blocks in the order they happen. The reference appears
   exactly once. When the payment has been claimed, block 1 folds away
   and block 2 becomes the "checking" state.                            */
.receipt{padding-top:28px;max-width:820px}
.x-rcpt-h{margin-bottom:26px}
.x-rcpt-h .x-eyebrow{margin:0 0 14px}
.x-rcpt-h h1{font-size:clamp(44px,6.4vw,84px)}
.x-rcpt-lede{margin:18px 0 0;max-width:58ch;color:var(--muted);font-size:15px;line-height:1.6}
.x-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.x-steps li{position:relative;padding:14px 16px 14px 0;border-left:1px solid var(--edge-2);padding-left:16px;
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;opacity:.45}
.x-steps li:first-child{border-left:0;padding-left:0}
.x-steps li .n{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--poster);font-weight:800;font-size:13px;border:1px solid var(--edge);color:var(--muted)}
.x-steps li b{font-family:var(--poster);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--text);line-height:1}
.x-steps li i{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.x-steps li.done{opacity:1}
.x-steps li.done .n{background:var(--text);color:var(--ink-0);border-color:transparent}
.x-steps li.now{opacity:1}
.x-steps li.now .n{background:var(--blood);color:#FFF3F2;border-color:transparent;box-shadow:0 0 0 4px var(--blood-dim)}
.x-steps li.now b{color:var(--blood-3)}

.x-won{display:flex;gap:16px;align-items:flex-start;margin:0 0 22px;padding:20px 22px;border-radius:6px;
  border:1px solid rgba(74,222,128,.28);background:var(--go-dim)}
.x-won-i{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--go);color:#06210F}
.x-won-i svg{width:16px;height:16px}
.x-won h3{margin:4px 0 6px;font-family:var(--poster);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:.02em}
.x-won p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.x-won a,.x-pay-h a{color:var(--text);font-weight:700;border-bottom:1px solid var(--blood-line);text-decoration:none}

.x-pay{position:relative;padding:26px 0 30px;border-top:1px solid var(--edge)}
.x-pay:last-of-type{border-bottom:1px solid var(--edge)}
.x-pay.done{opacity:.92}
.x-pay-h{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-bottom:20px}
.x-pay-n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--poster);font-weight:900;font-size:18px;color:var(--blood-2);
  border:2px solid var(--blood-line)}
.x-pay.done .x-pay-n{background:var(--blood);color:#FFF3F2;border-color:transparent}
.x-pay-h h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:6px}
.x-pay-h p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:60ch}
.x-pay-h p b{color:var(--text)}

/* THE reference. */
.x-ref{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;
  padding:18px 22px;border-radius:6px;margin:0 0 16px;
  background:linear-gradient(90deg,rgba(179,37,42,.14),var(--ink-2) 55%);border:1px solid var(--blood-line)}
.x-ref .k{grid-column:1;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blood-3);font-weight:700}
.x-ref .v{grid-column:1;font-family:var(--mono);font-weight:700;font-size:clamp(26px,4vw,38px);letter-spacing:.08em;color:var(--text);line-height:1}
.x-ref .x-copy{grid-column:2;grid-row:1/3}
.x-copy{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:4px;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--text);color:var(--ink-0);border:0;transition:transform .15s,background .15s}
.x-copy:hover{background:#fff;transform:translateY(-1px)}
.x-copy.sm{height:32px;padding:0 10px;background:transparent;color:var(--muted);border:1px solid var(--edge)}
.x-copy.sm:hover{color:var(--text);border-color:rgba(237,233,227,.3);background:transparent}
.x-copy svg{width:13px;height:13px}
.x-copy.copied{background:var(--go);color:#06210F}

.x-paybtn{width:100%;justify-content:center;height:62px;font-size:19px}
.x-details{border:1px solid var(--edge);border-radius:6px;background:var(--ink-2);overflow:hidden}
.x-whichbank{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--edge-2);
  font-family:var(--poster);font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.x-line{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;padding:13px 18px;
  border-bottom:1px solid var(--edge-2)}
.x-line .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
.x-line .v{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--text);
  font-variant-numeric:tabular-nums;word-break:break-all}
.x-copyall{width:calc(100% - 36px);margin:14px 18px 18px;justify-content:center;height:48px;font-size:14px}
.x-note{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.x-note svg{width:14px;height:14px;flex:none;color:var(--blood-2);margin-top:2px}
.x-note.warn{color:var(--hold)}
.x-fold{margin-top:6px}
.x-fold summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:8px 0;list-style:none;display:inline-flex;gap:8px;align-items:center}
.x-fold summary::-webkit-details-marker{display:none}
.x-fold summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.x-fold[open] summary::before{transform:rotate(45deg)}
.x-fold[open] summary{margin-bottom:14px}

.x-sentform .x-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.x-field select{width:100%;height:54px;padding:0 14px;border-radius:4px;border:1px solid var(--edge);
  background:var(--ink-2);color:var(--text);font-size:15px;font-family:var(--sans)}
.x-field input[type=file]{height:auto;padding:14px;font-size:13px;color:var(--muted)}
.x-sentform .x-btn{width:100%;justify-content:center;margin-top:6px}

.x-checking{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:6px;
  border:1px solid rgba(232,163,61,.35);background:var(--hold-dim)}
.x-checking-d{width:12px;height:12px;border-radius:50%;background:var(--hold);flex:none;
  box-shadow:0 0 0 0 rgba(232,163,61,.5)}
@media (prefers-reduced-motion:no-preference){.x-checking-d{animation:x-check 1.8s var(--ease) infinite}}
@keyframes x-check{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.5)}60%{box-shadow:0 0 0 9px rgba(232,163,61,0)}}
.x-checking b{display:block;font-family:var(--poster);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.04em;color:var(--text)}
.x-checking span{font-size:12.5px;color:var(--muted)}
.pill.hold{background:var(--hold-dim);color:var(--hold);border-color:rgba(232,163,61,.35)}
.pill.hold i{background:var(--hold)}
.claimline{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;color:var(--hold)}
.claimline svg{width:12px;height:12px}
.claimline b{color:var(--text)}
.note.hold{border-color:rgba(232,163,61,.35);background:var(--hold-dim);color:var(--muted)}
.note.hold b{color:var(--text)}
.note.hold svg{color:var(--hold)}

@media (max-width:720px){
  .receipt{padding-top:16px}
  .x-steps{grid-template-columns:1fr 1fr}
  .x-steps li{padding:12px 12px 12px 0}
  .x-steps li:nth-child(odd){border-left:0}
  .x-steps li:nth-child(-n+2){border-bottom:1px solid var(--edge-2)}
  .x-steps li:nth-child(3){padding-left:0}
  .x-ref{grid-template-columns:1fr;padding:16px}
  .x-ref .x-copy{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .x-line{grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px}
  .x-line .k{grid-column:1/-1}
  .x-line .v{font-size:15px}
  .x-copyall{width:calc(100% - 28px);margin:12px 14px 14px}
  .x-sentform .x-grid2{grid-template-columns:1fr}
  .x-pay-h{gap:14px}
  .x-pay-n{width:32px;height:32px;font-size:15px}
}

/* ═══════════════════════════════════════════════════════════════════════
   2026 — LIGHT MODE, AND THE NEW PARTS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Light ──────────────────────────────────────────────────────────────
   Dark is the shop and stays the default. Light exists because people read
   specs on a phone in daylight and a black page in the sun is a mirror.

   It is a re-lit garage, not a different brand: same oxblood, same bone type
   inverted to warm ink, the lamp turned down to a wash rather than removed.
   Only tokens are redefined — no component below knows which mode it is in. */
:root[data-theme="light"]{
  --ink:#F6F4F0; --ink-2:#EFECE6;
  --ink-0:#FAF8F5; --ink-1:#F2EFE9; --ink-2:#EFECE6; --ink-3:#E7E3DB;
  --surface:#FFFFFF; --surface-2:#F7F5F1; --surface-3:#EDE9E2;
  --edge:rgba(24,20,16,.13); --edge-2:rgba(24,20,16,.075);
  --text:#17140F; --muted:#5C564D; --faint:#7C766C; --ghost:#A29B90;
  --chrome:#1A1712;
  --blood:#A81F26; --blood-2:#B3252A; --blood-3:#8C1A20;
  --blood-dim:rgba(179,37,42,.09); --blood-line:rgba(179,37,42,.45);
  --go:#177245; --go-dim:rgba(23,114,69,.10);
  --hold:#9A6212; --hold-dim:rgba(154,98,18,.11);
  --stop:#B3252A; --stop-dim:rgba(179,37,42,.10);
  --lamp:rgba(214,72,78,.10);
  color-scheme:light;
}
:root[data-theme="light"] body{background:
  radial-gradient(ellipse 90% 55% at 50% -12%, var(--lamp), transparent 60%),
  linear-gradient(180deg,var(--ink-0) 0%,var(--ink-1) 45%,var(--ink-0) 100%)}
/* The grain and the vignette are a dark-room effect; in daylight they read
   as a dirty screen. */
:root[data-theme="light"] body::after{opacity:.035}
:root[data-theme="light"] .topbar.solid{background:rgba(250,248,245,.86)}
/* Photographs were shot to sit on black. On a pale page they need their own
   ground or they float as cut-out shapes with nothing under them. */
:root[data-theme="light"] .x-row-stage,
:root[data-theme="light"] .x-stage,
:root[data-theme="light"] .x-pdp-stage{background:
  radial-gradient(ellipse 62% 48% at 50% 42%, rgba(24,20,16,.07), transparent 70%)}
:root[data-theme="light"] .x-wordmark{opacity:.05}
:root[data-theme="light"] .x-hero-word{opacity:.05}

/* The switch itself. One button, two glyphs, the wrong one hidden. */
.themer{width:38px;padding:0;justify-content:center}
.themer .t-l{display:none}
:root[data-theme="light"] .themer .t-d{display:none}
:root[data-theme="light"] .themer .t-l{display:inline-flex}
.themer svg{display:block}

/* ── Brand logos ────────────────────────────────────────────────────────
   A real mark, boxed to the same footprint as the monogram it replaces so
   swapping one in never moves the layout. object-fit keeps a wide wordmark
   from being stretched — it is letterboxed instead. */
.brandlogo{display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;overflow:hidden;flex:none;background:var(--surface-2);
  border:1px solid var(--edge-2)}
.brandlogo img{width:100%;height:100%;object-fit:contain;display:block;padding:2px}
:root[data-theme="light"] .brandlogo{background:#fff}

.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.logo-slot{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--edge-2);border-radius:var(--r);background:var(--surface-2)}
.logo-slot.has{border-color:var(--blood-line)}
.logo-pv{width:46px;height:46px;flex:none;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface-3)}
.logo-pv img{width:100%;height:100%;object-fit:contain;padding:5px}
.logo-mono{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:15px}
.logo-m{min-width:0;flex:1}
.logo-m b{display:block;font-size:13.5px;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.logo-m a{font-size:11.5px;color:var(--blood-2);text-decoration:none}
.logo-m a:hover{text-decoration:underline}
.logo-m .hint{font-size:11.5px}
.logo-f label{cursor:pointer;margin:0}

/* ── Per-bank payment steps ─────────────────────────────────────────── */
.x-guide{margin-top:16px;border-top:1px solid var(--edge-2);padding-top:16px}
.x-guide-pick{display:flex;flex-direction:column;gap:7px}
.x-guide-pick label{font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.x-guide-pick select{width:100%;height:48px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--edge);color:var(--text);
  padding:0 13px;font:inherit;font-size:14.5px}
.x-guide-b{margin-top:15px;padding:15px 17px;border-radius:var(--r);
  background:var(--blood-dim);border:1px solid var(--blood-line)}
.x-guide-t{margin:0 0 11px;font-family:var(--poster);font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;font-size:17px;color:var(--text)}
.x-guide-s{margin:0;padding:0;list-style:none;counter-reset:g}
.x-guide-s li{counter-increment:g;position:relative;padding:0 0 11px 30px;
  font-size:13.5px;line-height:1.55;color:var(--muted)}
.x-guide-s li:last-child{padding-bottom:0}
.x-guide-s li::before{content:counter(g);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;background:var(--blood);color:#fff;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.x-guide-s b{color:var(--text);font-weight:700}
.x-guide-n{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.x-guide-n b{color:var(--muted)}

/* ── Reserve / hold ─────────────────────────────────────────────────── */
.x-hold{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;margin-bottom:18px;
  border-radius:var(--r);background:var(--hold-dim);border:1px solid rgba(232,163,61,.4)}
.x-hold.expired{background:var(--stop-dim);border-color:rgba(218,59,65,.4)}
.x-hold b{display:block;font-size:14.5px;color:var(--text);margin-bottom:3px}
.x-hold span{font-size:13px;line-height:1.55;color:var(--muted)}
.x-hold b span{display:inline;color:inherit;font-size:inherit}
.x-hold-d{width:9px;height:9px;border-radius:50%;background:var(--hold);flex:none;margin-top:6px;
  box-shadow:0 0 0 0 rgba(232,163,61,.55);animation:x-ping 2.4s infinite}
.x-hold.soon .x-hold-d{background:var(--stop);animation-duration:1.1s}
@keyframes x-ping{70%{box-shadow:0 0 0 11px rgba(232,163,61,0)}100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}}
.x-reserve{margin-top:10px}
.x-reserve-n{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}

/* ── Delivery estimate ──────────────────────────────────────────────── */
.x-eta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 0;
  padding:11px 13px;border-radius:var(--r-sm);background:var(--go-dim);
  border:1px solid rgba(74,222,128,.28);font-size:13px}
.x-eta svg{color:var(--go);flex:none}
.x-eta b{color:var(--text);font-weight:700}
.x-eta span{color:var(--muted);font-size:12.5px}
.oeta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--go);margin-top:3px}
.oeta svg{width:12px;height:12px;flex:none}
.oeta b{font-weight:700}

/* ── Live sales ticker ──────────────────────────────────────────────── */
.x-ticker{display:flex;align-items:center;gap:14px;margin:0 0 34px;
  border-top:1px solid var(--edge-2);border-bottom:1px solid var(--edge-2);
  padding:11px 0;overflow:hidden}
.x-ticker-l{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--poster);font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;font-size:14px;color:var(--blood-2)}
.x-ticker-l svg{width:14px;height:14px}
/* Fixed-width fades, not percentages — on a phone 5% of the strip is barely
   a character and the first name gets eaten. */
.x-ticker-w{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent)}
.x-ticker-t{display:flex;gap:34px;width:max-content;animation:x-tick 46s linear infinite}
.x-ticker:hover .x-ticker-t{animation-play-state:paused}
.x-ticker-i{white-space:nowrap;font-size:13px;color:var(--muted)}
.x-ticker-i b{color:var(--text);font-weight:700}
.x-ticker-i i{font-style:normal;color:var(--faint);font-size:12px}
@keyframes x-tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── Telegram ───────────────────────────────────────────────────────── */
.x-tg{display:flex;gap:13px;align-items:center;margin-top:18px;padding:15px 17px;
  border-radius:var(--r);background:var(--surface-2);border:1px solid var(--edge-2);
  text-decoration:none;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.x-tg:hover{border-color:var(--blood-line);transform:translateY(-1px)}
.x-tg-i{width:38px;height:38px;border-radius:11px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--blood-dim);color:var(--blood-2)}
.x-tg b{display:block;font-size:14px;color:var(--text);margin-bottom:2px}
.x-tg span{font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ── Review media ───────────────────────────────────────────────────── */
.rev-m{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0 0}
.rev-mi{width:84px;height:84px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--edge-2);flex:none;display:block}
.rev-mi img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease)}
.rev-mi:hover img{transform:scale(1.06)}
.rev-mv{display:inline-flex;align-items:center;gap:8px;height:84px;padding:0 15px;
  border-radius:var(--r-sm);border:1px solid var(--blood-line);background:var(--blood-dim);
  color:var(--text);text-decoration:none;font-size:12.5px;font-weight:600}
.rev-mv .p{color:var(--blood-2);display:inline-flex}
.rev-mv:hover{background:rgba(179,37,42,.2)}

/* ── Review form ────────────────────────────────────────────────────── */
.x-rate{display:flex;gap:8px;flex-wrap:wrap}
.x-rate input{position:absolute;opacity:0;pointer-events:none}
.x-rate span{display:inline-flex;align-items:center;gap:5px;height:44px;padding:0 15px;
  border-radius:var(--r-sm);border:1px solid var(--edge);background:var(--surface-2);
  color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;
  transition:all .2s var(--ease)}
.x-rate span svg{width:13px;height:13px}
.x-rate input:checked + span{border-color:var(--blood-2);background:var(--blood-dim);color:var(--text)}
.x-rate input:focus-visible + span{outline:2px solid var(--blood-2);outline-offset:2px}

/* ── Passkeys ───────────────────────────────────────────────────────── */
.x-pk{margin-bottom:4px}
.x-pk-n{margin:9px 0 0;font-size:12.5px;color:var(--faint);text-align:center}

/* ── Motion ─────────────────────────────────────────────────────────────
   More of it, and all of it cheap: transforms and opacity only, nothing that
   forces layout. Everything here is switched off wholesale for anyone who has
   asked their system for less motion — that switch is at the bottom. */

/* Reveals, staggered by depth rather than by a hand-written delay on each
   element, so a new section animates in without being told to. */
/* Rows come in from the side they sit on, which reads as the shelf loading
   rather than the page stuttering. */
.x-row.x-in{transform:translate3d(0,30px,0) scale(.985)}
.x-row.x-in.on{transform:none}

/* Buttons lean towards the cursor. Two pixels — enough to feel alive, not
   enough to be a toy. The custom properties are set by app.js. */
.x-btn{--mx:0;--my:0}
.x-btn:hover{transform:translate3d(calc(var(--mx)*2px),calc(var(--my)*2px - 1px),0)}
.x-btn:active{transform:translate3d(0,1px,0)}

/* A quiet sweep of light across a primary button, once, on hover. */
.x-btn:not(.ghost){position:relative;overflow:hidden}
.x-btn:not(.ghost)::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
  transform:translate3d(-120%,0,0);transition:transform .75s var(--ease)}
.x-btn:not(.ghost):hover::after{transform:translate3d(120%,0,0)}

/* Section numbers count up from behind their heading. */
.x-sect .n{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.x-in:not(.on) .x-sect .n{opacity:0;transform:translate3d(0,14px,0)}

/* The price ticks up when it scrolls into view. */
.x-price .now{transition:transform .5s var(--ease)}
.x-in.on .x-price .now{animation:x-pop .55s var(--ease) both}
@keyframes x-pop{0%{transform:scale(.94);opacity:0}60%{transform:scale(1.012)}100%{transform:none;opacity:1}}

/* Thumbnails lift as a group when the gallery is touched. */
.x-thumbs button{transition:transform .3s var(--ease),border-color .3s var(--ease),opacity .3s}
.x-thumbs button:hover{transform:translate3d(0,-3px,0)}

/* Panels settle rather than appear. */
.panel.spot{transition:border-color .3s var(--ease),transform .3s var(--ease)}
.panel.spot:hover{border-color:var(--edge)}

/* The nav bar's rule grows out from the middle as it solidifies. */
.topbar::after{content:'';position:absolute;left:50%;right:50%;bottom:0;height:1px;
  background:var(--blood-line);opacity:0;transition:left .5s var(--ease),right .5s var(--ease),opacity .4s}
.topbar.solid::after{left:0;right:0;opacity:.35}

/* Anything that moves on its own stops when asked. */
@media (prefers-reduced-motion: reduce){
  .x-in{opacity:1!important;transform:none!important;transition:none!important}
  .x-ticker-t,.x-marquee-t,.x-hold-d{animation:none!important}
  .x-btn:hover,.x-thumbs button:hover,.x-tg:hover,.rev-mi:hover img{transform:none!important}
  .x-btn:not(.ghost)::after{display:none}
  *{scroll-behavior:auto!important}
}

/* ── Nav clearance for the checkout head ────────────────────────────────
   .co-head sat directly under a fixed bar with only the page's own padding
   between them, which on a phone put "Where it's going" underneath the logo.
   The page padding clears the bar; this is the breathing room on top of it. */
.co-head{padding-top:14px}
.receipt .x-rcpt-h{padding-top:6px}

@media (max-width:1024px){
  .x-ticker{gap:10px;margin-bottom:26px}
  .x-ticker-l{font-size:12.5px}
  .x-ticker-i{font-size:12px}
  .logo-grid{grid-template-columns:1fr}
  .co-head{padding-top:10px}
  .co-head .display{font-size:clamp(26px,8vw,36px)}
  .x-guide-s li{font-size:13px}
  .rev-mi,.rev-mv{height:72px}
  .rev-mi{width:72px}
  .x-hold{padding:13px 14px}
  /* The switch is the least important thing in the bar on a phone. */
  .themer{width:34px}
}

/* Three across for short numeric fields — the chase timings, the deposit
   rules. Collapses to one on a phone like everything else. */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:760px){.cols3{grid-template-columns:1fr}}

/* A bank's full name needs two lines more often than it needs an ellipsis —
   "The Co-operative" truncated to "The Co-o…" tells nobody anything. */
.logo-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.logo-m b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.logo-m a,.logo-m .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* The badge is drawn in bone on transparent, which is invisible on a pale
   page. It is effectively monochrome, so inverting it gives the same mark in
   ink rather than needing a second file to keep in step. */
:root[data-theme="light"] .topbar .logo .glyph img{filter:invert(1)}
:root[data-theme="light"] .fmark img,
:root[data-theme="light"] .foot-mark img{filter:none}

/* The "one tap left" prompt after choosing Telegram at checkout — the same
   card as the support link, lit so it reads as an action rather than a note. */
.x-tg.connect{background:var(--blood-dim);border-color:var(--blood-line);margin:0 0 18px}
.x-tg.connect .x-tg-i{background:var(--blood);color:#fff}
.pill.go{background:var(--go-dim);color:var(--go);border-color:rgba(74,222,128,.35)}

/* ── Signing in with Telegram ───────────────────────────────────────────
   The four digits that have to match what the chat shows. Big, spaced, and
   monospaced, because comparing them at a glance is the entire job. */
.x-code{display:flex;gap:10px;justify-content:center;margin:6px 0 20px}
.x-code span{width:52px;height:66px;display:flex;align-items:center;justify-content:center;
  font-family:var(--poster);font-weight:900;font-size:36px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r);
  font-variant-numeric:tabular-nums}
/* Telegram is AN option, not THE option. It was the only filled button on the
   page, which made choosing email feel like going against the grain — and the
   person who wanted email read it as the site insisting on Telegram. */
.x-tgbtn{border-color:var(--blood-2)}
.x-tgbtn:hover{background:var(--blood);color:#fff;border-color:var(--blood)}
.x-waiting{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:16px;
  font-size:13px;color:var(--muted)}
.x-waiting a{color:var(--blood-2)}
.x-waiting.bad{color:var(--hold)}
.x-waiting-d{width:8px;height:8px;border-radius:50%;background:var(--blood-2);flex:none;
  box-shadow:0 0 0 0 rgba(218,59,65,.6);animation:x-ping 1.6s infinite}
@media (max-width:1024px){
  .x-code span{width:44px;height:56px;font-size:30px}
}

/* The channel picker on the account page — the same printed-list rows the
   checkout uses, so the two screens do not disagree about what a choice
   looks like. */
.x-chan{display:flex;flex-direction:column;border:1px solid var(--edge-2);
  border-radius:var(--r);overflow:hidden}
.x-chan .opt{margin:0;border-radius:0}
.x-chan .opt + .opt{border-top:1px solid var(--edge-2)}

/* "No picture yet" — a drawn stand-in, deliberately not a photograph of
   anything. Showing the stock bike here made every helmet look like a
   motorbike, which is worse than showing nothing. */
.x-nopic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;aspect-ratio:5/4;color:var(--ghost);
  border:1px dashed var(--edge);border-radius:var(--r-lg);background:var(--surface-2)}
.x-nopic svg{width:76px;height:auto;opacity:.55}
.x-nopic span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.x-pdp-stage .x-nopic{aspect-ratio:4/3}

/* A photo that still has its background. It cannot float on the lit stage
   like a cut-out, so it gets a frame — visible and clearly deliberate, rather
   than hidden, which is what used to happen. */
.photo.framed{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid var(--edge-2);display:block}
.x-pdp-stage .photo.framed{aspect-ratio:4/3}

/* Drawn brand marks. Original geometry in each brand's colour — they read as
   designed rather than as a letter in a box, and they are ours to ship. */
.bankmark.drawn,.srcmark.drawn{display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;flex:none;color:#fff;line-height:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 3px rgba(0,0,0,.35)}
.srcmark.drawn{background:var(--sm)}
.bankmark.drawn svg,.srcmark.drawn svg{display:block}

/* Destructive corner. Folded away by default, because a delete button that
   sits next to "mark paid" gets pressed by accident eventually. */
.x-danger{margin-top:18px;border:1px solid rgba(220,68,68,.32);border-radius:var(--r-md);
  background:rgba(220,68,68,.06);padding:0 14px}
.x-danger>summary{cursor:pointer;padding:11px 0;font-weight:700;font-size:13.5px;
  color:#ff8b8b;list-style:none}
.x-danger>summary::-webkit-details-marker{display:none}
.x-danger>summary::before{content:"⚠ ";opacity:.8}
.x-danger p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--muted)}
.x-danger form{padding-bottom:14px}
.btn.danger{background:#c33a3a;border-color:#c33a3a;color:#fff}
.btn.danger:hover{background:#a92e2e;border-color:#a92e2e}

/* ---- team & permissions ---- */
.x-hint{font-size:12.5px;line-height:1.6;color:var(--muted);margin:6px 0 0}
.x-subhead{font-family:var(--display,inherit);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:22px 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--edge)}
.x-team{display:grid;gap:2px}
.x-team-row{display:flex;align-items:center;gap:13px;padding:12px 2px;
  border-bottom:1px solid var(--edge)}
.x-team-row:last-child{border-bottom:0}
.x-team-row.off{opacity:.5}
.x-team-row .nm{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
.x-team-row .bl{font-size:12.5px;color:var(--muted);margin-top:3px}
.x-team-row .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.x-avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;
  place-items:center;font-weight:800;font-size:14px;color:var(--bg,#111);
  background:linear-gradient(150deg,var(--lit,#d8ff3e),#8fbf1f)}
.x-team-row.off .x-avatar{background:var(--edge-2);color:var(--muted)}

.x-capgroup{margin-bottom:16px}
.x-capgroup h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.x-cap{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;
  border:1px solid var(--edge);border-radius:var(--r-md);margin-bottom:6px;
  cursor:pointer;transition:border-color .15s,background .15s}
.x-cap:hover{border-color:var(--edge-2)}
.x-cap input{margin-top:2px;flex:none}
.x-cap:has(input:checked){border-color:rgba(216,255,62,.4);background:rgba(216,255,62,.05)}
.x-cap span{display:block;min-width:0}
.x-cap b{display:block;font-size:13.5px;font-weight:700}
.x-cap b i{font-style:normal;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lit,#d8ff3e);margin-left:6px}
.x-cap em{display:block;font-style:normal;font-size:12px;color:var(--muted);
  margin-top:3px;line-height:1.5}

/* ---- stock ---- */
.x-stocks{display:grid;gap:14px}
.x-stock-row{border:1px solid var(--edge);border-radius:var(--r-lg);padding:15px 17px;
  background:var(--surface)}
.x-stock-row.low{border-color:rgba(240,180,60,.45);background:rgba(240,180,60,.05)}
.x-stock-row.out{border-color:rgba(220,68,68,.4);background:rgba(220,68,68,.05)}
.x-stock-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.x-stock-head .nm{font-weight:800;font-size:15px;color:inherit;text-decoration:none}
.x-stock-head .nm:hover{color:var(--lit,#d8ff3e)}
.tag.warn{background:rgba(240,180,60,.16);color:#f0b43c;border-color:rgba(240,180,60,.35)}
.x-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.x-vadj{display:flex;align-items:center;gap:8px;border:1px solid var(--edge);
  border-radius:var(--r-md);padding:7px 10px}
.x-vadj.solo{max-width:260px}
.x-vadj .lb{font-size:13px;font-weight:700;flex:1;min-width:0}
.x-vadj input{width:68px;text-align:center;font-family:var(--mono);padding:6px 4px;margin:0}
.x-stock-foot{display:flex;gap:16px;margin-top:11px;font-size:12px;color:var(--muted)}
.x-stock-foot a{color:var(--muted)}
.x-chips{display:flex;flex-wrap:wrap;gap:7px}
.x-chip{display:inline-block;padding:6px 11px;border:1px solid var(--edge);
  border-radius:999px;font-size:12.5px;color:var(--muted);text-decoration:none}
.x-chip:hover{border-color:var(--edge-2);color:inherit}

/* ---- variants editor ---- */
.x-vars{display:grid;gap:8px;margin-bottom:10px}
.x-var{display:flex;gap:8px;align-items:center}
.x-var input[name="vlabel"]{flex:1;margin:0}
.x-var input[name="vqty"]{width:80px;text-align:center;font-family:var(--mono);margin:0}
.x-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:8px}
.x-pick label{position:relative;cursor:pointer}
.x-pick input{position:absolute;opacity:0;pointer-events:none}
.x-pick .sh{display:block;border:2px solid var(--edge);border-radius:var(--r-md);
  padding:8px;text-align:center;transition:border-color .15s}
.x-pick input:checked + .sh{border-color:var(--lit,#d8ff3e)}
.x-pick .sh img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block}
.x-pick .sh span{display:block;font-size:11.5px;margin-top:6px;color:var(--muted)}
.x-pick .sh.empty{display:grid;place-items:center;aspect-ratio:4/3;color:var(--ghost);font-size:11.5px}

/* ---- picking a size on the listing ---- */
.x-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-bottom:18px}
.x-opt{position:relative;cursor:pointer}
.x-opt input{position:absolute;opacity:0;pointer-events:none}
.x-opt>span{display:block;border:1.5px solid var(--edge);border-radius:var(--r-md);
  padding:10px 8px;text-align:center;transition:border-color .15s,background .15s}
.x-opt>span b{display:block;font-size:14px;font-weight:800}
.x-opt>span i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.x-opt:hover>span{border-color:var(--edge-2)}
.x-opt input:checked + span{border-color:var(--lit,#d8ff3e);background:rgba(216,255,62,.07)}
.x-opt.out{cursor:not-allowed}
.x-opt.out>span{opacity:.4;text-decoration:line-through}
.x-left{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13.5px;color:#f0b43c}
.x-left svg{width:15px;height:15px;flex:none}

/* A channel that has to be connected before it can be chosen still shows as
   choosable — picking it starts the connecting. */
.x-chan .opt.needs .s b{color:var(--lit,#d8ff3e);font-weight:700}
.x-chan.tight{display:grid;gap:6px}
.x-chan.tight .opt{padding:9px 11px}
.x-chan.tight .opt .t{font-size:13.5px}
.x-chan.tight .opt .s{font-size:11.5px}

/* ---- the phone menu ----
   Hidden on desktop, where the real nav is visible. A <details> so it needs
   no JavaScript to open. */
.x-mnav{display:none;position:relative;margin-left:auto}
.x-mnav>summary{list-style:none;cursor:pointer;width:40px;height:40px;
  display:grid;place-items:center;border-radius:10px;border:1px solid var(--edge);
  background:var(--surface-2,transparent);-webkit-tap-highlight-color:transparent}
.x-mnav>summary::-webkit-details-marker{display:none}
.x-burger{display:grid;gap:4px;width:17px}
.x-burger i{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .18s ease, opacity .18s ease}
.x-mnav[open]>summary .x-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.x-mnav[open]>summary .x-burger i:nth-child(2){opacity:0}
.x-mnav[open]>summary .x-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.x-mnav-p{position:absolute;right:0;top:calc(100% + 9px);min-width:190px;z-index:60;
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:7px;box-shadow:0 18px 44px rgba(0,0,0,.5);display:grid;gap:2px}
.x-mnav-p a{display:block;padding:11px 13px;border-radius:9px;font-size:14.5px;
  font-weight:700;color:var(--text);text-decoration:none}
.x-mnav-p a:hover{background:var(--surface-2)}
/* The accent is lime on dark and unreadable on white, so the current page is
   marked with the brand red plus a rule — a colour that works in both. */
.x-mnav-p a.on{color:var(--blood-2);box-shadow:inset 2px 0 0 var(--blood-2)}

@media (max-width:720px){
  .x-mnav{display:block}
  /* The bar is logo, then menu, then the account chips — the toggle sits with
     the menu rather than pushing the logo off-centre. */
  .topbar-r{margin-left:0}
  .topbar-in{gap:8px}
}

/* ---- the sticky pay bar ----
   Its background was hardcoded dark while its text follows the theme, so in
   light mode the total was near-black on near-black — a contrast ratio of
   1.08, which is invisible, on the one number a buyer most needs to read.
   Both halves are tokens now, so they can never drift apart again. */
:root{ --bar-bg:rgba(10,10,11,.92); --bar-fg:#F3F0EB; --bar-k:#8F8A82 }
:root[data-theme="light"]{ --bar-bg:rgba(250,248,245,.94); --bar-fg:#17140F; --bar-k:#5C564D }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --bar-bg:rgba(250,248,245,.94); --bar-fg:#17140F; --bar-k:#5C564D }
}
@media (max-width:980px){
  .paybar{background:var(--bar-bg)}
  .paybar .pb-v{color:var(--bar-fg)}
  .paybar .pb-k{color:var(--bar-k)}
}

/* Small print was #7C766C on #FAF8F5 — 4.25:1, under the 4.5 needed to be
   comfortably readable. Nudged darker; it still reads as secondary. */
:root[data-theme="light"]{ --faint:#655F55 }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --faint:#655F55 }
}

/* An explicit ground under the page. body was transparent, which works only
   because html happens to be painted — anything that renders the body alone
   (a preview, a screenshot service) got a blank sheet. */
body{background:var(--bg)}

/* ---- signing up on a phone ----
   The marketing panel stacked ABOVE the form, so the first screenful was a
   headline and a paragraph and you had to scroll past all of it to reach the
   thing you came to do. On a phone the form goes first and the pitch goes
   underneath, where it can still be read but is not in the way. */
@media (max-width:820px){
  .x-auth{display:flex;flex-direction:column}
  .x-auth-form{order:0;padding:26px 20px 34px}
  .x-auth-side{order:1;border-bottom:0;border-top:1px solid var(--edge-2);
    padding:30px 20px 40px}
  .x-auth-side .x-h{font-size:clamp(32px,9vw,52px)}
  .x-auth-side .x-eyebrow{margin-bottom:12px}
  .x-auth-side p{font-size:14px;margin-top:14px}
  .x-auth-form h2{font-size:31px}
}


/* "No picture yet" and other ghost text was #A29B90 on near-white — 2.5:1,
   which is a smudge rather than a label. */
:root[data-theme="light"]{ --ghost:#6E6860 }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --ghost:#6E6860 }
}