/* ============================================================
   RON CARTEL — design system
   ============================================================ */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2-variations'),
      url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  /* Every colour here is lifted from the Ron Cartel badge: the charcoal it
     is drawn on, the off-white of the RON brushstroke, and the oxblood of
     CARTEL. Blue never belonged to this brand. */

  /* ink — warm near-black, the badge's own ground */
  --ink:#0A0A0B; --ink-2:#101011;
  --surface:#151516; --surface-2:#1A1A1C; --surface-3:#232325;
  --edge:rgba(237,233,227,.10); --edge-2:rgba(237,233,227,.055);

  /* type — bone, not white. The lettering on the badge is off-white and
     the whole thing reads warmer for it. */
  --text:#EDE9E3; --muted:#9A948C; --faint:#6E6963; --ghost:#4B4741;

  /* accent — oxblood. #6E1B1B is sampled straight off the badge; it is too
     dark to read on black, so it is the deep tone and the brighter crimson
     does the work on screen. */
  --blood:#B3252A; --blood-2:#DA3B41; --blood-3:#F07076;
  --blood-deep:#6E1B1B;
  --blood-dim:rgba(179,37,42,.13); --blood-line:rgba(179,37,42,.62);

  /* status */
  --go:#4ADE80; --go-dim:rgba(74,222,128,.12);
  --hold:#E8A33D; --hold-dim:rgba(232,163,61,.13);
  --stop:#DA3B41; --stop-dim:rgba(218,59,65,.13);

  /* form */
  --r-lg:14px; --r:10px; --r-sm:7px;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.82,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:none;
  --shadow-lift:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
svg{display:block;flex:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--blood-2);outline-offset:3px;border-radius:4px}

/* ---------- atmosphere ----------
   One static film grain. No drifting colour blooms, no grid overlay —
   those read as decoration for its own sake and flatten everything under
   them into the same soft haze. The photography is the atmosphere. */
/* One light source, from above and behind, the colour of the badge. It is
   motivated — a bike under a single lamp in a unit — which is why it reads
   as art direction rather than as decoration sprayed over everything. */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(179,37,42,.14), transparent 62%),
    radial-gradient(ellipse 80% 50% at 82% 8%, rgba(237,233,227,.045), transparent 60%)}
/* The second grain layer and the 3px halftone below used to stack with the
   body grain: four fixed full-viewport layers, one of them a masked tiny tile.
   That is a repaint bill every phone pays on every scroll. One grain, static,
   is the whole texture budget now. */
.grain{display:none}

@keyframes spin{to{transform:rotate(360deg)}}

/* Halftone. The badge is drawn like print; the page is printed on the same
   stock. Fine enough to feel rather than see. */
.atmos::after{display:none}
.page{position:relative;z-index:1}

/* ---------- type ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;
         text-transform:uppercase;color:var(--faint)}
.display{font-weight:900;font-stretch:116%;letter-spacing:-.042em;line-height:.88;
         margin:0;font-size:clamp(38px,6.6vw,84px);text-wrap:balance}
/* the coloured half of a headline sits a shade deeper at the baseline, the
   way heavy ink does on stock */
.display .lit{color:var(--blood-2);
  background:linear-gradient(180deg,#E4494F,#A81F25);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
h2.sect{font-size:clamp(21px,2.6vw,30px);font-weight:800;font-stretch:112%;
        letter-spacing:-.022em;margin:0}
.lede{color:var(--muted);font-size:15px;max-width:52ch;margin:14px 0 0;line-height:1.6}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* prices and totals are set in the display face with lining figures — a
   monospace price tag is a dashboard, not a shop */
.li-p,.sum-row b,.sum-total .amt,.card .price,.buy .price,.buy .was,
.spec .v,.stat .v,.amtc,.prow .pr,.oprice,.readout .v,.qty .n{
  font-variant-numeric:tabular-nums lining-nums}

/* ---------- chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--edge-2);
        background:rgba(8,9,11,.72);backdrop-filter:blur(18px) saturate(150%);
        -webkit-backdrop-filter:blur(18px) saturate(150%)}
.topbar-in{max-width:1220px;margin:0 auto;padding:0 22px;height:62px;
           display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16.5px;
      font-stretch:112%;letter-spacing:-.02em;text-transform:uppercase}
/* The header carries the crowned RC lifted off the badge; at 26px the full
   badge is mud, the monogram still reads. The footer gets the whole badge. */
.logo .glyph{width:26px;height:32px;flex:none;display:block;background:none}
.logo .glyph img{width:100%;height:100%;display:block;object-fit:contain}
.sitefoot .logo .glyph{width:34px;height:34px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(237,233,227,.13)}
.sitefoot .logo .glyph img{object-fit:cover}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{position:relative;padding:8px 13px;border-radius:8px;font-size:13.5px;
       font-weight:600;color:var(--muted);transition:color .16s,background .16s;
       min-height:38px;display:flex;align-items:center}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.on{color:var(--text);background:transparent}
/* a straight rule, not a curve following the pill's corner radius */
.nav a.on::after{content:'';position:absolute;left:13px;right:13px;bottom:4px;
  height:2px;background:var(--blood)}
.topbar-r{margin-left:auto;display:flex;align-items:center;gap:11px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
      color:var(--muted);padding:7px 12px;border-radius:99px;border:1px solid var(--edge);
      background:var(--surface)}
.chip .live{width:5px;height:5px;border-radius:50%;background:var(--go)}
@media (max-width:720px){.nav{display:none}.topbar-in{gap:12px}}

.shell{max-width:1220px;margin:0 auto;padding:0 22px}

/* ---------- panels ---------- */
.panel{position:relative;background:
         linear-gradient(180deg,rgba(237,233,227,.028),transparent 120px),var(--surface);
       border:1px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;
       box-shadow:inset 0 1px 0 rgba(237,233,227,.06), 0 20px 50px -40px #000}
.panel-h{padding:16px 20px;border-bottom:1px solid var(--edge-2);
         display:flex;align-items:center;gap:10px}
.panel-h h3{margin:0;font-size:13.5px;font-weight:700;letter-spacing:-.005em;
            text-transform:uppercase;
            letter-spacing:.08em;color:var(--muted)}
/* icons sit on the surface, not in their own tinted tile */
.panel-h .hico{width:15px;height:15px;display:grid;place-items:center;
               color:var(--ghost);flex:none;margin-top:-1px}
.panel-b{padding:20px}
.panel-b.rows-flush{padding:0 0 2px}
.panel-b.rows-flush .opt{padding-left:20px;padding-right:20px}
.link-btn{margin-left:auto;background:none;border:none;padding:8px 4px;cursor:pointer;
          font-size:12.5px;font-weight:600;color:var(--muted);font-family:inherit;
          min-height:38px;text-decoration:underline;text-underline-offset:3px;
          text-decoration-color:var(--ghost)}
.link-btn:hover{color:var(--text);text-decoration-color:var(--muted)}

/* .spot used to run a pointer-tracked glow. Removed — it drew the eye to
   the cursor rather than to the product. The class stays so markup and JS
   keep working. */
.spot{position:relative}

/* ---------- selectable options ---------- */
/* A printed price list, not a stack of component-library cards. Rows are
   separated by a hairline; the chosen one is marked by a heavy rule down
   its left edge and by its text coming up to full strength. */
.opt{position:relative;display:flex;align-items:center;gap:14px;
     padding:16px 16px 16px 18px;border:0;border-bottom:1px solid var(--edge-2);
     border-radius:0;background:none;cursor:pointer;margin:0;min-height:44px;
     transition:background .16s}
.opt:last-child{border-bottom:0}
.opt:hover{background:rgba(237,233,227,.028)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt.sel{background:rgba(237,233,227,.035);box-shadow:inset 3px 0 0 var(--blood)}
.opt:has(input:focus-visible){outline:2px solid var(--blood-2);outline-offset:2px}

.dot{display:none}

/* bare icon, no tinted tile behind it */
.oico{width:20px;height:20px;flex:none;display:grid;place-items:center;
      color:var(--faint);transition:color .16s}
.opt.sel .oico{color:var(--text)}
.otxt{flex:1;min-width:0}
.otxt .t{font-weight:700;font-size:15px;letter-spacing:-.015em;color:var(--muted);
         display:flex;align-items:center;gap:8px;flex-wrap:wrap;transition:color .16s}
.opt.sel .otxt .t{color:var(--text)}
.otxt .s{font-size:12.5px;color:var(--faint);margin-top:2px;line-height:1.45}
.oprice{margin-left:auto;padding-left:12px;font-weight:700;font-size:15px;
        white-space:nowrap;letter-spacing:-.02em;color:var(--muted);transition:color .16s}
.opt.sel .oprice{color:var(--text)}
.oprice.free{color:var(--go)}

.tag{font-size:9.5px;font-weight:700;letter-spacing:.11em;
     text-transform:uppercase;padding:3.5px 7px;border-radius:5px;
     background:var(--surface-3);color:var(--muted);border:1px solid var(--edge-2)}
.tag.hot{background:transparent;color:var(--blood-2);border-color:var(--blood-line)}
.tag.go{background:var(--go-dim);color:var(--go);border-color:rgba(52,211,153,.3)}

/* ---------- disclosure detail ---------- */
.detail{margin:-2px 0 10px;padding:17px;border-radius:var(--r);
        background:var(--ink);
        border:1px solid var(--edge-2);display:none}
.detail.on{display:block;animation:drop .32s var(--ease-out)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.detail h4{margin:0 0 13px;font-size:10.5px;font-weight:500;
           letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}

.rows{display:grid;gap:8px}
.row-f{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-sm);
       background:var(--surface-2);border:1px solid var(--edge-2)}
.row-f .k{font-size:12.5px;color:var(--muted);min-width:112px;flex:none;font-weight:500}
.row-f .v{font-size:13.5px;font-weight:500;flex:1;min-width:0;
          overflow-wrap:anywhere}
.row-f .v.big{font-size:15px;font-weight:700}

/* etched reference plate */
.plate{position:relative;overflow:hidden;padding:15px 16px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--edge)}
/* the shine used to sweep across on a loop. A payment reference does not
   need to twinkle. */
.plate{display:block}
.plate .pk{font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;font-weight:700;
           text-transform:uppercase;color:var(--faint);margin-bottom:9px;display:block}
.plate .pv{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:.16em;
  color:var(--text)}
.plate .pv span{display:inline-block}

/* ---------- buttons ---------- */
/* The primary action is white on black. A blue gradient with a glow and a
   sweeping shine is the single loudest tell of a generated page, and it
   competes with the product photography for attention. White wins the page
   without shouting. */
/* The badge has exactly one colour on it, and this is it. */
/* Lit from the same direction as everything else: a hairline highlight on
   the top edge, a shadow beneath, and it presses in when you click it. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
     gap:9px;min-height:48px;padding:14px 24px;border:1px solid rgba(0,0,0,.4);
     border-radius:var(--r);color:#FFF4F3;
     background:linear-gradient(180deg,#C42B31,#9E1F24);
     font-weight:700;font-size:14.5px;letter-spacing:-.005em;cursor:pointer;
     box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
                0 1px 2px rgba(0,0,0,.5),
                0 10px 24px -14px rgba(179,37,42,.85);
     transition:filter .15s, box-shadow .15s, transform .08s}
.btn:hover{filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 1px 2px rgba(0,0,0,.5),
             0 14px 30px -14px rgba(179,37,42,1)}
.btn:active{transform:translateY(1px);filter:brightness(.94);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.btn.wide{width:100%}
.btn.ghost{background:linear-gradient(180deg,rgba(237,233,227,.055),rgba(237,233,227,.02));
  color:var(--text);border-color:var(--edge);
  box-shadow:inset 0 1px 0 rgba(237,233,227,.07)}
.btn.ghost:hover{filter:none;background:linear-gradient(180deg,rgba(237,233,227,.1),rgba(237,233,227,.04));
  border-color:rgba(237,233,227,.22);box-shadow:inset 0 1px 0 rgba(237,233,227,.1)}
.btn:disabled{background:var(--surface-2);color:var(--ghost);cursor:not-allowed;
              border-color:var(--edge);box-shadow:none;filter:none;transform:none}
.btn.sm{min-height:40px;padding:10px 16px;font-size:13px}

.copy{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;
      padding:8px 11px;border-radius:8px;background:var(--surface-3);
      border:1px solid var(--edge);color:var(--muted);font-size:11.5px;font-weight:700;
      font-family:var(--sans);cursor:pointer;transition:.16s}
.copy:hover{background:var(--surface-3);color:var(--text)}
.copy.ok{background:transparent;border-color:rgba(52,211,153,.4);color:var(--go)}

/* ---------- notices ---------- */
.note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 13px;
      border-radius:var(--r-sm);font-size:12.5px;line-height:1.55}
.note svg{margin-top:1.5px}
.note.warn{background:var(--hold-dim);border:1px solid rgba(251,191,36,.24);color:#F5DEA8}
.note.warn svg{color:var(--hold)}
.note.info{background:rgba(237,233,227,.045);border:1px solid var(--edge);color:#CFC9C1}
.note.info svg{color:var(--blood-2)}
.note strong{color:var(--text)}
.note.stop{background:var(--stop-dim);border:1px solid rgba(248,113,113,.24);color:#F3C0C0}
.note.stop svg{color:var(--stop)}

/* ---------- summary rail ---------- */
.rail{position:sticky;top:82px}
.li{display:flex;gap:13px;padding-bottom:15px;margin-bottom:15px;
    border-bottom:1px solid var(--edge-2)}
.li-thumb{width:58px;height:58px;border-radius:8px;flex:none;position:relative;
  overflow:hidden;background:var(--surface-2);
  border:1px solid var(--edge);display:grid;place-items:center;color:var(--ghost)}
.li-t{font-weight:700;font-size:13.5px;line-height:1.35;letter-spacing:-.012em}
.li-s{font-size:12px;color:var(--muted);margin-top:3px}
.li-p{margin-left:auto;font-weight:700;font-size:13.5px;
      white-space:nowrap;letter-spacing:-.03em}
.sum-row{display:flex;justify-content:space-between;align-items:center;
         font-size:13.5px;color:var(--muted);padding:6px 0}
.sum-row b{color:var(--text);font-weight:700;letter-spacing:-.03em}
.sum-total{display:flex;justify-content:space-between;align-items:flex-end;
           margin-top:13px;padding-top:15px;border-top:1px solid var(--edge)}
.sum-total .lbl{font-weight:800;font-size:15px}
.sum-total .amt{font-weight:600;font-size:32px;
  letter-spacing:-.05em;line-height:1;color:var(--text)}
.bump{animation:none}

.trust{margin-top:15px;display:grid;gap:9px}
.trust div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.trust svg{color:var(--go)}

/* ---------- step rail ---------- */
.steps{display:flex;align-items:center;gap:11px;margin-bottom:26px;flex-wrap:wrap}
.stp{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
     color:var(--ghost);letter-spacing:-.01em}
.stp .n{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
        font-size:11.5px;background:var(--surface-2);border:1.5px solid var(--edge);
        font-weight:700}
.stp.done{color:var(--muted)}
.stp.done .n{background:var(--go-dim);border-color:rgba(52,211,153,.4);color:var(--go)}
.stp.now{color:var(--text)}
.stp.now .n{background:var(--blood);border-color:transparent;color:#FFF3F2}
/* A 2px .track lived here for a checkout step rail that no markup ever
   used. It still applied to the order progress list further down — same
   class name — squeezing that rail to 64px wide and 2px tall. That was
   the broken progress bar. */

/* ---------- reveal ----------
   Everything used to start invisible and fade up as you scrolled. Two
   problems: it is the most recognisable generated-page motion there is,
   and content that depends on JavaScript to become visible disappears
   entirely when the observer does not fire. Content is just visible now. */
.rv{opacity:1;transform:none}

/* ---------- misc ---------- */
.hide{display:none!important}
.toast{position:fixed;left:50%;bottom:26px;z-index:80;
  transform:translateX(-50%) translateY(120px);
  display:flex;align-items:center;gap:10px;padding:13px 19px;border-radius:var(--r);
  background:var(--blood);color:#FFF3F2;font-weight:700;font-size:13.5px;
  transition:transform .28s var(--ease-out)}
.toast.on{transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* Orphaned fragments from an earlier hand-drawn SVG bike lived here —
   four stray declarations with no selector, plus keyframes nothing used. */

/* readout chips under the bike */
.readout{position:relative;z-index:3;display:flex;flex-wrap:wrap;margin-top:20px;
  border-top:1px solid rgba(237,233,227,.10);padding-top:14px}
.readout div{flex:1 1 0;min-width:64px;display:flex;flex-direction:column;
  align-items:flex-start;gap:1px;padding:0 14px;border-left:1px solid rgba(237,233,227,.08)}
.readout div:first-child{border-left:0;padding-left:0}
.readout .v{font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--text);
  line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.readout .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-weight:700}

/* ---------- empty state ---------- */
.blank{grid-column:1/-1;padding:60px 26px;text-align:center;border-radius:var(--r-lg);
  border:1px dashed var(--line-dash,rgba(255,255,255,.13));background:rgba(255,255,255,.014)}
.blank .ico{width:40px;height:40px;margin:0 auto 18px;display:grid;
  place-items:center;color:var(--ghost)}
.blank h3{margin:0 0 7px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.blank p{margin:0 auto 20px;color:var(--muted);font-size:14px;max-width:44ch}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;padding:4px;border-radius:var(--r);border:1px solid var(--edge);
      background:var(--surface);width:max-content;margin-bottom:22px;max-width:100%;
      overflow-x:auto}
.tabs button{min-height:42px;padding:10px 18px;border:none;border-radius:9px;background:none;
  color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:8px;transition:.18s var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:var(--surface-3);color:var(--text)}

/* ---------- form fields ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);
             margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;min-height:46px;padding:12px 13px;
  border-radius:var(--r-sm);border:1px solid var(--edge);background:var(--surface-2);
  color:var(--text);font-size:15px;outline:none;font-family:inherit;
  transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:88px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--blood-line);box-shadow:0 0 0 4px var(--blood-dim)}
.field .hint{font-size:12px;color:var(--faint);margin-top:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}

/* ============================================================
   THE BIKE — cut-out photo of the real Light Bee X
   ============================================================ */
/* The bike used to bob up and down on a loop with a blue halo under it.
   It now sits still and casts a real shadow — the photo carries itself. */
.surron{position:relative;margin:0;display:block;width:100%}
.surron img{width:100%;height:auto;display:block;position:relative;z-index:1}
.surron .shadow{position:absolute;left:12%;right:12%;bottom:3%;height:14px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%);filter:blur(13px)}
.card .art .surron{width:88%;animation:none}
.card .art .surron img{filter:none}
.card .art .surron .shadow{display:none}
.li-thumb .surron{animation:none} .li-thumb .surron .shadow{display:none}
.li-thumb .surron img{filter:none}
@media (prefers-reduced-motion:reduce){.surron,.surron .shadow{animation:none}}

/* ============================================================
   PAGE LAYOUTS (server-rendered app)
   ============================================================ */
.hero{position:relative;overflow:hidden;padding:70px 0 40px;display:grid;
      grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
      gap:44px;align-items:center}
@media (max-width:940px){.hero{grid-template-columns:1fr;padding:34px 0 26px;gap:26px}}
.hero .display{margin-bottom:18px}
.hero-copy{position:relative;z-index:2}

/* The brand word, oversized, running off the right edge behind the bike.
   Anchored to the middle of the hero so it never collides with the header,
   and drawn as an outline so it reads as signwriting rather than as a
   second headline competing with the real one. */
.hero-word{position:absolute;z-index:0;left:-6%;right:auto;bottom:-9%;
  pointer-events:none;white-space:nowrap;
  font-weight:900;font-stretch:120%;font-size:clamp(140px,18vw,300px);line-height:.8;
  letter-spacing:-.055em;color:transparent;
  -webkit-text-stroke:1.5px rgba(237,233,227,.05);
  mask-image:linear-gradient(90deg,#000 40%,transparent 82%)}
@media (max-width:940px){.hero-word{display:none}}
.hero-cta{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap}
/* Numbers big, labels small and above them — a spec plate, read top-down. */
.specs{display:flex;gap:0;margin:34px 0 0;padding:0;flex-wrap:wrap;
  border-top:1px solid var(--edge-2)}
.spec{padding:16px 26px 0 0;margin-right:26px;position:relative}
.spec + .spec{padding-left:26px;border-left:1px solid var(--edge-2)}
.spec .k{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.spec .v{margin:5px 0 0;font-size:30px;font-weight:800;letter-spacing:-.04em;
  color:var(--text);line-height:1;font-variant-numeric:tabular-nums lining-nums}
/* A single warm floor-light under the bike, the way a bike looks in a unit
   with one lamp on it. This is the one piece of atmosphere on the page. */
/* The bike stands on a lit floor under one lamp. Three layers do the work:
   a cool key light from above, an oxblood bounce off the floor, and a hard
   vignette that closes the corners so the eye goes to the machine. */
.stage{position:relative;border-radius:var(--r-lg);border:1px solid var(--edge);
  background:
    radial-gradient(ellipse 58% 34% at 50% 96%, rgba(179,37,42,.34), transparent 72%),
    radial-gradient(ellipse 74% 46% at 50% 4%,  rgba(237,233,227,.10), transparent 70%),
    radial-gradient(ellipse 96% 78% at 50% 34%, #1C1C1D, #0A0A0B 78%);
  padding:38px 28px 30px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(237,233,227,.07)}
/* the floor the bike stands on */
.stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
/* print texture, tighter over the product than over the page */
.stage::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:2;
  background-image:radial-gradient(rgba(237,233,227,.06) .5px, transparent .5px);
  background-size:3px 3px;
  mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000,transparent 80%)}
.stage .lbl{position:absolute;top:14px;left:16px;z-index:2}
.stage .tags{position:absolute;z-index:2;top:14px;left:14px;display:flex;gap:7px}
.stage>img{width:100%;height:auto;border-radius:var(--r);position:relative;z-index:1}

.grid-head{position:relative;display:flex;align-items:flex-end;gap:20px;
  margin:64px 0 26px;padding-top:22px;flex-wrap:wrap;
  border-top:1px solid var(--edge-2)}
.grid-head::before{content:'';position:absolute;top:-1px;left:0;width:64px;height:2px;
  background:var(--blood)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:18px;
       padding-bottom:40px}
/* No lift, no shadow bloom. The border brightens and the photo eases in
   very slightly — enough to feel alive, not enough to bounce. */
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(237,233,227,.025),transparent 90px),var(--surface);
  box-shadow:inset 0 1px 0 rgba(237,233,227,.05), 0 24px 50px -44px #000;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease)}
.card:hover{border-color:rgba(237,233,227,.22);
  box-shadow:inset 0 1px 0 rgba(237,233,227,.09), 0 30px 60px -40px #000}
/* a red rule wipes in across the top on hover — the one flourish */
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:var(--blood);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease-out)}
.card:hover::after{transform:scaleX(1)}
.card.gone::after{display:none}
.card .art{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  background:
    radial-gradient(ellipse 54% 30% at 50% 98%, rgba(179,37,42,.28), transparent 74%),
    radial-gradient(ellipse 70% 42% at 50% 2%,  rgba(237,233,227,.07), transparent 70%),
    radial-gradient(ellipse 92% 76% at 50% 36%, #1B1B1C, #0A0A0B 80%);
  border-bottom:1px solid var(--edge-2);overflow:hidden;padding:16px}
.card .art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.45))}
.card .art>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform .6s var(--ease)}
.card:hover .art>img{transform:scale(1.04)}
.badge{position:absolute;top:12px;left:12px;z-index:2;
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;}
.badge.stock{background:rgba(10,11,12,.72);color:var(--go);border:1px solid rgba(52,211,153,.34)}
.badge.reserved{background:rgba(10,11,12,.72);color:var(--hold);border:1px solid rgba(251,191,36,.34)}
.badge.sold{background:rgba(10,11,12,.72);color:var(--stop);border:1px solid rgba(248,113,113,.3)}
.card.gone .art{filter:grayscale(.85) brightness(.6)}
.card.gone:hover{transform:none}
.card .body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.card h3{margin:0 0 4px;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.card .meta{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.card .foot{margin-top:auto;display:flex;align-items:center;gap:10px}
.card .price{font-weight:700;font-size:19px;letter-spacing:-.04em}
.card .price s{color:var(--ghost);font-size:13px;font-weight:400;margin-right:6px}
.card .go{margin-left:auto;width:36px;height:36px;border-radius:8px;flex:none;
  background:transparent;border:1px solid var(--edge);display:grid;place-items:center;
  color:var(--muted);transition:background .18s,color .18s,border-color .18s}
.card:hover .go{background:var(--blood);border-color:transparent;color:#FFF3F2}
footer.f{border-top:1px solid var(--edge-2);padding:30px 0 46px;color:var(--faint);
         font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}

.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:38px;
     padding:30px 0 56px;align-items:start}
@media (max-width:940px){.pdp{grid-template-columns:1fr;gap:24px;padding-top:20px}}
.pdp .stage{aspect-ratio:16/11;display:grid;place-items:center;padding:22px}
.buy .price-row{display:flex;align-items:baseline;gap:12px;margin:14px 0 6px;flex-wrap:wrap}
.buy .price{font-weight:600;font-size:40px;letter-spacing:-.05em;
  color:var(--text)}
.buy .was{color:var(--ghost);text-decoration:line-through;font-size:17px}
.qty{display:flex;align-items:center;border:1px solid var(--edge);border-radius:var(--r-sm);
     background:var(--surface-2);overflow:hidden;width:max-content}
.qty button{width:46px;height:46px;background:none;border:none;color:var(--muted);
            cursor:pointer;font-size:19px}
.qty button:hover{background:var(--surface-3);color:var(--text)}
.qty .n{width:52px;text-align:center;font-weight:700;font-size:15px;
  background:none;border:none;min-height:auto;padding:0;color:var(--text)}
.buyrow{display:flex;gap:11px;margin-top:22px;flex-wrap:wrap}
.buyrow .btn{flex:0 1 auto}
.facts{margin-top:26px;border-top:1px solid var(--edge-2);padding-top:6px}
.fact{border-bottom:1px solid var(--edge-2)}
.fact summary{list-style:none;cursor:pointer;padding:15px 2px;display:flex;
  align-items:center;gap:11px;font-weight:700;font-size:14px;min-height:44px}
.fact summary::-webkit-details-marker{display:none}
.fact summary .cv{margin-left:auto;color:var(--faint);transition:transform .3s var(--ease)}
.fact[open] summary .cv{transform:rotate(180deg)}
.fact .in{padding:0 2px 16px;color:var(--muted);font-size:13.5px;line-height:1.65}
.spectable{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13px}
.spectable dt{color:var(--faint)} .spectable dd{margin:0;color:var(--text)}

.co{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:30px;
    align-items:start;padding:30px 0 48px}
@media (max-width:980px){.co{grid-template-columns:1fr;padding-top:20px;gap:22px}
  .co .rail{position:static!important;order:-1}}
.co-head{margin-bottom:22px}
.co-head .display{font-size:clamp(30px,4.4vw,48px)}

.receipt{max-width:660px;margin:0 auto;padding:52px 0 64px}
.receipt-h{text-align:center;margin-bottom:28px}
.receipt-h .display{font-size:clamp(27px,3.7vw,40px);margin-bottom:9px}
.receipt-h p{color:var(--muted);margin:0;font-size:15px}
.seal{width:96px;height:96px;margin:0 auto 24px;position:relative;display:grid;place-items:center}
.seal svg.ring{position:absolute;inset:0;width:96px;height:96px;transform:rotate(-90deg)}
.seal svg.ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.seal .bg{stroke:var(--surface-3)}
.seal .fg{stroke:var(--hold);stroke-dasharray:283;stroke-dashoffset:283;
          animation:draw .9s var(--ease-out) .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.seal .core{width:62px;height:62px;border-radius:50%;background:transparent;
            display:grid;place-items:center;color:var(--hold)}
.plate.hero{padding:26px 20px;text-align:center;margin-bottom:18px;
  display:flex;flex-direction:column;align-items:center}
.plate.hero .pv{font-size:clamp(26px,5vw,38px);letter-spacing:.14em;
  overflow-wrap:anywhere}
/* .copy is an inline-flex pill, so margin:auto never centred it */
.plate.hero .copy{margin-top:16px}

.adm{padding:26px 0 56px}
.adm-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.tabs a{min-height:42px;padding:10px 18px;border-radius:9px;color:var(--muted);
  font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;
  white-space:nowrap;transition:.18s var(--ease)}
.tabs a:hover{color:var(--text)}
.tabs a.on{background:var(--surface-3);color:var(--text)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:900px){.cols2{grid-template-columns:1fr}}
.cols{display:grid;grid-template-columns:380px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.preview{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge);
         aspect-ratio:16/10;background:#0D0F13}
.preview img{width:100%;height:100%;object-fit:cover}
.plist{display:grid;gap:12px}
.prow{display:flex;gap:14px;align-items:center;padding:13px;border-radius:var(--r);
      border:1px solid var(--edge);background:var(--surface-2)}
.prow .th{width:78px;height:52px;border-radius:7px;flex:none;overflow:hidden;
  background:var(--ink-2);display:grid;place-items:center;padding:5px;color:var(--ghost)}
.prow .th img{width:100%;height:100%;object-fit:cover}
.prow .nm{font-weight:700;font-size:14px;letter-spacing:-.015em}
.prow .bl{font-size:12.5px;color:var(--muted);margin-top:2px}
.prow .pr{font-weight:700;font-size:14.5px;margin-left:auto;
          white-space:nowrap;letter-spacing:-.03em}
.prow .acts{display:flex;gap:7px;flex:none}
.iconbtn{width:38px;height:38px;border-radius:9px;border:1px solid var(--edge);
  background:var(--surface-3);color:var(--muted);cursor:pointer;display:grid;
  place-items:center;transition:.16s}
.iconbtn:hover{color:var(--text);background:var(--surface-3)}
.iconbtn.danger:hover{color:var(--stop);border-color:rgba(248,113,113,.4)}
@media (max-width:600px){.prow{flex-wrap:wrap}.prow .pr{margin-left:0;width:100%}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:13px;
       margin-bottom:22px}
/* A stat card is a number and a label. The coloured stripe across the top
   of each one was decoration standing in for hierarchy. */
.stat{position:relative;padding:18px 18px 20px;border-radius:var(--r);
  border:1px solid var(--edge);background:var(--surface)}
.stat .k{font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:500}
.stat .v{font-size:30px;font-weight:600;letter-spacing:-.05em;
  margin-top:10px;color:var(--text)}
/* Only the one number that wants chasing is coloured. A lifetime order
   count is not a warning. */
.stat.hold .v{color:var(--hold)}

/* Row actions sit quiet until you look for them. */
.tr .btn{background:transparent;color:var(--text);border-color:var(--edge)}
.tr .btn:hover{background:var(--blood-dim);border-color:var(--blood-line);
               color:var(--blood-3)}

.bar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:240px;position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
            color:var(--ghost);pointer-events:none}
.search input{width:100%;min-height:48px;padding:13px 14px 13px 42px;border-radius:var(--r);
  border:1px solid var(--edge);background:var(--surface);color:var(--text);
  font-size:14px;letter-spacing:.05em;outline:none;
  transition:border-color .2s,box-shadow .2s}
.search input:focus{border-color:var(--blood-line);box-shadow:0 0 0 4px var(--blood-dim)}
.search input::placeholder{font-family:var(--sans);letter-spacing:0;color:var(--ghost)}
.segs{display:flex;gap:4px;padding:4px;border-radius:var(--r);border:1px solid var(--edge);
      background:var(--surface)}
.segs button{min-height:40px;padding:9px 15px;border:none;border-radius:9px;background:none;
  color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.segs button.on{background:var(--surface-3);color:var(--text)}

.th-row,.tr{display:grid;grid-template-columns:140px minmax(0,1fr) 110px 130px 136px;
            gap:15px;align-items:center;padding:14px 18px}
.th-row{border-bottom:1px solid var(--edge);font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ghost)}
.tr{border-bottom:1px solid var(--edge-2);position:relative;transition:background .18s}
.tr:last-child{border-bottom:none}
.tr:hover{background:rgba(255,255,255,.022)}
.tr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--blood);transform:scaleY(0);transition:transform .2s var(--ease-out)}
.tr.hit::before{transform:scaleY(1)}
.tr.hit{background:var(--blood-dim)}
.tr.settled{opacity:.5}
.refc{font-family:var(--mono);font-weight:600;font-size:13.5px;letter-spacing:.06em;
      color:var(--text)}
.cust{font-weight:700;font-size:13.5px}
.item{font-size:12.5px;color:var(--muted);margin-top:2px}
.via{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--faint);
     margin-top:5px}
.amtc{font-weight:700;font-size:14px;letter-spacing:-.03em}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
      padding:5px 11px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.await{background:transparent;color:var(--hold);border-color:rgba(251,191,36,.32)}
.pill.paid{background:transparent;color:var(--go);border-color:rgba(52,211,153,.34)}
.empty{padding:52px 20px;text-align:center;color:var(--ghost)}
@media (max-width:880px){
  .th-row{display:none}
  .tr{grid-template-columns:1fr auto;gap:10px}
  .tr>div:nth-child(5){display:flex;justify-content:flex-end}
}
input[type=file]{padding:11px 12px;font-size:13.5px}
input[type=checkbox]{accent-color:var(--blood)}

/* ============================================================
   ACCOUNTS · TRACKING · PROOF
   ============================================================ */
.av{width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--muted);
    display:grid;place-items:center;font-size:10px;font-weight:700;flex:none;
    border:1px solid var(--edge)}

/* order list on the account page */
.ordlist{display:grid;gap:10px}
.ord{display:grid;grid-template-columns:132px minmax(0,1fr) 96px auto;gap:14px;
     align-items:center;padding:14px;border-radius:var(--r);border:1px solid var(--edge);
     background:var(--surface-2);transition:.18s var(--ease)}
.ord:hover{border-color:rgba(255,255,255,.18)}
@media (max-width:640px){.ord{grid-template-columns:1fr auto;gap:8px}}

/* the four-stage progress rail */
.track{list-style:none;margin:0;padding:0;display:grid;gap:0}
.track li{display:flex;gap:14px;align-items:flex-start;position:relative;padding:0 0 22px}
.track li:last-child{padding-bottom:0}
.track li::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:2px;
  background:var(--surface-3)}
.track li:last-child::before{display:none}
.track li.on::before{background:var(--go)}
.track .dotr{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface-2);border:1.5px solid var(--edge);color:var(--faint);
  font-size:12px;font-weight:700;position:relative;z-index:1}
.track li.on .dotr{background:var(--go-dim);border-color:rgba(52,211,153,.45);color:var(--go)}
.track .lb{font-weight:700;font-size:14px;letter-spacing:-.012em}
.track li.on .lb{color:var(--text)}
.track li:not(.on) .lb{color:var(--faint)}
.track .tm{font-size:11.5px;color:var(--faint);margin-top:2px}

/* uploaded proof thumbnails */
.proofs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;
        margin-bottom:16px}
.proof{display:block;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--edge);
       background:var(--surface-2);transition:.18s var(--ease)}
.proof:hover{border-color:rgba(255,255,255,.18)}
.proof img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.proof span{display:block;padding:7px 9px;font-size:11px;color:var(--muted);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* written history */
.hist{margin-top:16px;padding-top:14px;border-top:1px solid var(--edge-2);display:grid;gap:9px}
.ev{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.ev .tm{font-size:11.5px;color:var(--ghost);min-width:96px}
.ev .lb{font-weight:700}
.ev .dt{color:var(--muted);font-size:12.5px}

/* ---------- site footer ---------- */
.sitefoot{position:relative;border-top:1px solid var(--edge-2);margin-top:56px;
  padding:46px 0 50px;overflow:hidden}
.sitefoot::before{content:'';position:absolute;right:-60px;bottom:-90px;
  width:340px;height:340px;pointer-events:none;opacity:.05;
  background:url('logo-180.png') center/contain no-repeat}
@media (max-width:720px){.sitefoot::before{display:none}}
.sitefoot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
                gap:34px}
@media (max-width:720px){.sitefoot .cols{grid-template-columns:1fr;gap:26px}}
.sitefoot .addr{color:var(--muted);font-size:13px;line-height:1.7;margin:0}
.sitefoot .ft{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
              color:var(--faint);margin-bottom:12px}
.sitefoot a{display:block;color:var(--muted);font-size:13.5px;padding:4px 0;transition:color .15s}
.sitefoot a:hover{color:var(--text)}
.sitefoot .logo a{display:flex}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;
      padding-top:20px;border-top:1px solid var(--edge-2);color:var(--faint);font-size:12px}

/* ---------- long-form pages ---------- */
.doc{max-width:760px;padding:44px 0 20px}
.prose{color:var(--muted);font-size:14.5px;line-height:1.75}
.prose p{margin:0 0 16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:700}

/* ---------- payment method picker ---------- */
.opt.pay{align-items:center}
.opt.pay .t{gap:9px}
.opt.pay .oico{color:var(--faint)}
.opt.pay.sel .oico{color:var(--text)}
.tag.go svg{margin-right:1px;vertical-align:-1px}

/* the single honest reassurance line under the order button */
.hold-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}

/* ============================================================
   GUIDED SETUP  ·  DELIVERY EDITOR
   ============================================================ */

/* three cards at the top of settings, for the three things that need
   explaining rather than listing */
.setup-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;margin-bottom:22px}
.setup-card{display:grid;gap:3px;padding:16px 17px 15px;border:1px solid var(--edge);
  border-radius:var(--r);background:var(--surface);transition:border-color .18s}
.setup-card:hover{border-color:rgba(237,233,227,.2)}
.setup-card .sc-ico{color:var(--faint);margin-bottom:5px}
.setup-card .sc-t{font-weight:700;font-size:14.5px;letter-spacing:-.015em}
.setup-card .sc-s{font-size:12.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.setup-card .sc-go{font-size:12.5px;font-weight:700;color:var(--blood-2);margin-top:6px}

/* a numbered step. three of them, never more */
.step{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--edge-2)}
.step:last-child{border-bottom:0}
.step-n{width:30px;height:30px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:700;font-size:13.5px;
  border:1px solid var(--edge);color:var(--muted);background:var(--surface)}
.step.done .step-n{background:var(--blood);border-color:transparent;color:#FFF3F2}
.step-b{flex:1;min-width:0;max-width:660px}
.step-b h3{margin:3px 0 10px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.step-b p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6}
.step-b p strong{color:var(--text)}

/* provider picker on the email page */
.pickrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
.pick{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:var(--r);
  border:1px solid var(--edge);background:var(--surface);font-size:13.5px;font-weight:600;
  color:var(--muted);transition:.16s}
.pick:hover{color:var(--text);border-color:rgba(237,233,227,.2)}
.pick.on{color:var(--text);border-color:var(--blood-line);background:var(--surface-3)}
.pick svg{color:var(--faint);flex:none}

/* delivery editor */
.dlist{display:grid;gap:12px}
.dopt{border:1px solid var(--edge);border-radius:var(--r);background:var(--surface);
  overflow:hidden}
.dopt-h{display:flex;align-items:center;gap:10px;padding:13px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--edge-2)}
.dopt-h strong{font-size:14.5px;letter-spacing:-.015em}
.dopt .dico{color:var(--faint);flex:none;display:grid;place-items:center}
.dopt .dprice{margin-left:auto;font-weight:700;font-size:14.5px;
  font-variant-numeric:tabular-nums lining-nums}
.dopt-b{padding:16px}
.dopt-f{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);
  cursor:pointer}
.chk input{width:auto;min-height:auto;margin:0}
.dopt-f .btn{margin-left:0}
.dopt-f .btn:first-of-type{margin-left:auto}
@media (max-width:640px){
  .dopt-f{gap:10px}
  .dopt-f .btn:first-of-type{margin-left:0}
  .dopt-f .btn{flex:1 1 auto}
}

/* each delivery option is folded away until you open it — four expanded
   forms stacked up is a page nobody reads */
.dopt details{display:block}
.dopt summary{list-style:none;cursor:pointer}
.dopt summary::-webkit-details-marker{display:none}
.dopt summary .dcv{color:var(--ghost);transition:transform .2s var(--ease);flex:none}
.dopt details[open] summary .dcv{transform:rotate(180deg)}
.dopt details[open] summary{border-bottom:1px solid var(--edge-2)}
.dopt-h{border-bottom:0}

/* ============================================================
   SMALL SCREENS
   Most people will open this on a phone from a TikTok link, so the
   phone layout is the one that has to be right, not the fallback.
   ============================================================ */
@media (max-width:720px){
  /* the spec plate stays one row of three — wrapping put a lone stat on
     its own line with an orphaned divider */
  .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px}
  .spec{padding:14px 10px 0 0;margin-right:0}
  .spec + .spec{padding-left:14px}
  .spec .k{font-size:9.5px;letter-spacing:.07em}
  .spec .v{font-size:22px;margin-top:4px}

  .hero{padding:26px 0 22px}
  .hero .display{font-size:clamp(34px,10.5vw,52px)}
  .lede{font-size:14.5px}
  .stage{padding:20px 16px 18px;border-radius:12px}
  .readout{margin-top:14px;padding-top:11px}
  .readout div{padding:0 9px;min-width:0}
  .readout .v{font-size:16px}
  .readout .k{font-size:8.5px;letter-spacing:.08em}

  /* a phone shows one card at a time, so the picture can be shorter and
     the whole card stays thumb-sized */
  .cards{grid-template-columns:1fr;gap:14px}
  .card .art{aspect-ratio:16/10}
  .card .body{padding:14px 15px 16px}
  .grid-head{margin:40px 0 18px;padding-top:18px}
  .sect{font-size:clamp(22px,7vw,30px)}

  /* full-width actions — a 48px button floating in the middle of a phone
     screen is a miss waiting to happen */
  .btn{width:100%}
  .hero-cta{width:100%}
  .buyrow .btn,.dopt-f .btn{flex:1 1 100%}
  .co-head .display{font-size:clamp(28px,9vw,40px)}
  .shell{padding:0 16px}
  .panel-b{padding:16px}
  .panel-b.rows-flush .opt{padding-left:16px;padding-right:16px}
  .opt{gap:11px}
  .otxt .t{font-size:14px}
  .sum-total .amt{font-size:27px}
  .doc{padding:28px 0 10px}
  .setup-strip{grid-template-columns:1fr}
  .step{gap:12px;padding:18px 0}
  .step-b h3{font-size:16px}
}

@media (max-width:420px){
  .topbar-in{padding:0 16px;height:56px;gap:10px}
  .logo{font-size:15px}
  .display{letter-spacing:-.035em}
  .spec .v{font-size:19px}
}

/* the one-tap pay-by-bank panel on the order page */
.payby{background:
  radial-gradient(ellipse 70% 100% at 50% 0%, rgba(179,37,42,.16), transparent 70%),
  linear-gradient(180deg,rgba(237,233,227,.028),transparent 120px),var(--surface)}

/* ============================================================
   PAYING  ·  the page where money actually changes hands
   ============================================================ */

/* which bank the money is going to — shown next to the details because
   seeing "Starling" is what makes an account number feel real */
.whichbank{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--muted);text-transform:none;
  letter-spacing:0;font-family:var(--sans)}
.bankmark{display:inline-grid;place-items:center;border-radius:7px;flex:none;
  color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1}

/* one line per detail, each one tap to copy */
.paylines{display:grid;gap:1px;background:var(--edge-2);border:1px solid var(--edge-2);
  border-radius:var(--r);overflow:hidden}
.payline{display:flex;align-items:center;gap:12px;padding:13px 14px;
  background:var(--surface-2)}
.payline .pl-k{font-size:12.5px;color:var(--faint);min-width:104px;flex:none;font-weight:600}
.payline .pl-v{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:.01em;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums lining-nums}
.payline .pl-c{flex:none;opacity:.55;transition:opacity .15s}
.payline:hover .pl-c,.payline .pl-c:focus-visible{opacity:1}
@media (max-width:560px){
  .payline{flex-wrap:wrap;gap:4px 10px}
  .payline .pl-k{min-width:0;width:100%}
  .payline .pl-v{font-size:17px}
}

/* the drop zone */
.drop{position:relative;display:grid;place-items:center;gap:5px;text-align:center;
  padding:30px 20px;border-radius:var(--r);cursor:pointer;
  border:1.5px dashed rgba(237,233,227,.18);
  background:rgba(237,233,227,.018);
  transition:border-color .16s,background .16s}
.drop:hover{border-color:rgba(237,233,227,.32);background:rgba(237,233,227,.035)}
.drop.over{border-color:var(--blood);background:rgba(179,37,42,.10)}
.drop.has{border-style:solid;border-color:rgba(74,222,128,.42)}
.drop-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop:focus-within{outline:2px solid var(--blood-2);outline-offset:3px}
.drop-ico{color:var(--faint)}
.drop.over .drop-ico{color:var(--blood-2)}
.drop-t{font-weight:700;font-size:14.5px}
.drop-s{font-size:12.5px;color:var(--faint)}
.drop-s u{text-underline-offset:2px}
.drop-pick[hidden]{display:none}
.drop-pick{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 10px;
  border-radius:8px;background:var(--surface-3);max-width:100%}
.drop-thumb{width:40px;height:30px;object-fit:cover;border-radius:5px;flex:none}
.drop-name{font-size:12.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* the four-stage progress rail, now that it is not being squashed by a
   stray 2px rule that shared its class name */
.track li::before{background:var(--surface-3)}
.track li.on::before{background:var(--go)}

/* live viewer count — only ever rendered when the number is real and > 1 */
.watching{display:flex;align-items:center;gap:8px;margin:10px 0 0;
  font-size:13px;font-weight:600;color:var(--muted)}
.wdot{width:7px;height:7px;border-radius:50%;background:var(--go);flex:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.16)}

/* announcement bar */
.announce{position:relative;z-index:41;padding:9px 22px;text-align:center;
  background:var(--blood-deep);color:#FFE9E8;font-size:13px;font-weight:600;
  letter-spacing:-.005em;border-bottom:1px solid rgba(0,0,0,.35)}
.announce a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,233,232,.4)}
.announce a:hover{text-decoration-color:currentColor}
@media (max-width:560px){.announce{padding:8px 14px;font-size:12.5px}}

/* the whole order row is the link, and it looks like it */
.tr.rowlink{cursor:pointer}
.tr .rowgo{color:var(--ghost);display:grid;place-items:center;transition:color .16s,transform .16s}
.tr:hover .rowgo{color:var(--text);transform:translateX(2px)}
.proofcount{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:700;color:var(--go);margin-top:5px}

/* the journey — a real list of what happened and where */
.journey{list-style:none;margin:0;padding:0}
.journey li{position:relative;display:flex;gap:14px;padding:0 0 20px}
.journey li:last-child{padding-bottom:0}
.journey li::before{content:'';position:absolute;left:5px;top:16px;bottom:0;width:2px;
  background:var(--surface-3)}
.journey li:last-child::before{display:none}
.journey .j-dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:4px;
  background:var(--surface-3);border:2px solid var(--ink);position:relative;z-index:1}
.journey li.now .j-dot{background:var(--blood);
  box-shadow:0 0 0 4px rgba(179,37,42,.18)}
.journey .j-t{font-weight:700;font-size:14.5px;letter-spacing:-.012em}
.journey li:not(.now) .j-t{color:var(--muted)}
.journey .j-w{display:flex;align-items:center;gap:6px;margin-top:3px;
  font-size:13px;color:var(--text);font-weight:600}
.journey li:not(.now) .j-w{color:var(--muted);font-weight:500}
.journey .j-w svg{color:var(--blood-2);flex:none}
.journey .j-d{font-size:12.5px;color:var(--muted);margin-top:3px}
.journey .j-m{font-size:11.5px;color:var(--ghost);margin-top:4px;
  font-variant-numeric:tabular-nums}

/* a place on an admin history line */
.ev .place{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.ev .place svg{color:var(--blood-2);width:12px;height:12px}
.ev form{display:flex}
.ev .iconbtn{width:26px;height:26px}

/* ---------- the sticky pay bar ----------
   Desktop keeps the summary rail; phones get this instead. */
.paybar{display:none}
@media (max-width:980px){
  .paybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,10,11,.92);backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-top:1px solid var(--edge)}
  .paybar .pb-sum{display:grid;gap:1px;flex:none}
  .paybar .pb-k{font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faint)}
  .paybar .pb-v{font-size:21px;font-weight:800;letter-spacing:-.04em;
    font-variant-numeric:tabular-nums lining-nums}
  .paybar .btn{flex:1;width:auto;min-height:50px}
  /* room for the bar so it never covers the last field */
  .co{padding-bottom:96px}
  /* the summary rail keeps the price visible up top but loses its own button */
  .co .rail .btn.wide{display:none}
  .co .rail .hold-note{margin-top:2px}
}

/* sign in with Google */
.gbtn{gap:11px;font-weight:700}
.gbtn svg{flex:none}
.orline{display:flex;align-items:center;gap:12px;margin:18px 0 6px;
  color:var(--ghost);font-size:12px}
.orline::before,.orline::after{content:'';height:1px;flex:1;background:var(--edge-2)}

/* ============================================================
   THE TRACKING DESK
   ============================================================ */
.tk{border:1px solid var(--edge);border-radius:var(--r);background:var(--surface);
  margin-bottom:14px;overflow:hidden}
.tk-h{display:flex;align-items:center;gap:16px;padding:14px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--edge-2);background:rgba(237,233,227,.02)}
.tk-ref{font-weight:700;font-size:13.5px;letter-spacing:.06em;color:var(--text);flex:none}
.tk-who{display:grid;gap:1px;min-width:0}
.tk-who strong{font-size:14px;letter-spacing:-.012em}
.tk-who span{font-size:12.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tk-now{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tk-last{font-size:13px;font-weight:700}
.tk-last.none{color:var(--ghost);font-weight:500}
.tk-where{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.tk-where svg{color:var(--blood-2);width:12px;height:12px}
.tk-when{font-size:12px;color:var(--ghost);font-variant-numeric:tabular-nums}
.tk-b{padding:14px 16px 16px}

/* one tap per update */
.tk-picks{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tkp{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;min-height:38px;
  border-radius:8px;border:1px solid var(--edge);background:var(--surface-2);
  color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s}
.tkp:hover{background:var(--blood-dim);border-color:var(--blood-line);color:var(--text)}
.tkp:active{background:var(--blood);border-color:transparent;color:#FFF3F2}
.tkp-i{display:grid;place-items:center;color:var(--ghost)}
.tkp:hover .tkp-i{color:var(--blood-2)}
.tk-f{display:grid;grid-template-columns:1.1fr .9fr 1.4fr;gap:0 12px}
.tk-f .field{margin-bottom:10px}
@media (max-width:820px){.tk-f{grid-template-columns:1fr}
  .tk-now{margin-left:0;width:100%}}

/* ============================================================
   REVIEWS
   ============================================================ */
.stars{display:inline-flex;gap:2px;flex:none}
.stars span{color:var(--ghost);display:grid;place-items:center}
.stars span.on{color:#E8A33D}
.rev-avg{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.rev-avg .rev-n{font-size:15px;color:var(--muted)}
.rev-avg .rev-n strong{color:var(--text);font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums}
.rev-avg .rev-c{font-size:13px;color:var(--faint)}
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;
  padding-bottom:60px}
.rev{border:1px solid var(--edge);border-radius:var(--r);padding:18px 19px;
  background:linear-gradient(180deg,rgba(237,233,227,.025),transparent 80px),var(--surface);
  box-shadow:inset 0 1px 0 rgba(237,233,227,.05)}
.rev-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.rev h3{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.015em}
.rev p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;white-space:pre-wrap}
.rev-f{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--edge-2);flex-wrap:wrap;font-size:12.5px}
.rev-a{font-weight:700}
.rev-p{color:var(--faint)}
.rev-d{color:var(--ghost);margin-left:auto}
.rev-l{color:var(--blood-2);font-weight:600}

/* admin side */
.revadm{border:1px solid var(--edge);border-radius:var(--r);padding:15px 16px;
  background:var(--surface);margin-bottom:12px}
.revadm.pending{border-color:rgba(232,163,61,.4);
  background:linear-gradient(180deg,rgba(232,163,61,.05),transparent 70px),var(--surface)}
.ra-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ra-h strong{font-size:14px}
.ra-d{font-size:12px;color:var(--ghost)}
.ra-acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.ra-t{font-weight:700;font-size:14.5px;margin-bottom:4px}
.ra-b{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.ra-l{display:inline-block;margin-top:8px;font-size:12px;color:var(--blood-2);
  overflow-wrap:anywhere}

/* waitlist + add-ons on the shop side */
.notifybox{margin-top:20px;padding:16px;border-radius:var(--r);
  border:1px dashed rgba(237,233,227,.2);background:rgba(237,233,227,.02)}
.notifybox p{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.notifybox form{display:flex;gap:9px;flex-wrap:wrap}
.notifybox input{flex:1;min-width:180px}
.notifybox .btn{flex:none;min-height:46px}

/* add-on tick boxes at checkout */
.opt.add .addbox{width:20px;height:20px;border-radius:5px;flex:none;display:grid;
  place-items:center;border:1.5px solid var(--ghost);color:transparent;
  transition:background .14s,border-color .14s,color .14s}
.opt.add.sel .addbox{background:var(--blood);border-color:transparent;color:#FFF3F2}
.opt.add.sel{box-shadow:inset 3px 0 0 var(--blood)}
.opt.add .oprice{color:var(--muted)}
.opt.add.sel .oprice{color:var(--text)}

/* reviews on a product page */
.pdp-revs{margin-top:24px;padding-top:20px;border-top:1px solid var(--edge-2)}
.pdp-revs-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pdp-revs-h a{font-size:13px;font-weight:700;color:var(--blood-2)}
.pdp-rev{margin:0 0 12px;padding:0 0 0 14px;border-left:2px solid var(--edge);
  color:var(--muted);font-size:13.5px;line-height:1.6}
.pdp-rev cite{display:block;margin-top:6px;font-style:normal;font-size:12px;
  color:var(--faint);font-weight:600}

/* ── Email setup ─────────────────────────────────────────────────────
   The provider picker is a stack of proper cards rather than a row of
   chips, because each option needs a line explaining what it costs you
   and what it will and will not do. A chip cannot carry that.          */
.mailpick{display:grid;gap:10px}
.mp{display:block;padding:15px 16px;border-radius:var(--r);
  border:1px solid var(--edge);background:var(--surface-2);
  text-decoration:none;color:var(--muted);
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.mp:hover{border-color:rgba(237,233,227,.2);background:var(--surface-3);transform:translateY(-1px)}
.mp.on{border-color:var(--blood-line);background:var(--surface-3);
  box-shadow:inset 3px 0 0 var(--blood)}
.mp-h{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.mp-h b{color:var(--text);font-size:15px;font-weight:700;letter-spacing:-.015em}
.mp-h svg{color:var(--faint);flex:none;width:16px;height:16px}
.mp.on .mp-h svg{color:var(--blood-2)}
.mp-h i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blood-3);
  background:var(--blood-dim);border:1px solid var(--blood-line);
  padding:2px 7px;border-radius:100px;margin-left:2px}
.mp-c{display:block;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* The honest note about the options that do not work. Folded away by
   default — it matters only to whoever asks "why not Outlook?".        */
.whynot{margin-top:16px;border-top:1px solid var(--edge-2);padding-top:14px}
.whynot summary{cursor:pointer;font-size:13px;color:var(--faint);
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  transition:color .16s var(--ease)}
.whynot summary::-webkit-details-marker{display:none}
.whynot summary::before{content:'';width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s var(--ease)}
.whynot[open] summary::before{transform:rotate(45deg)}
.whynot summary:hover{color:var(--muted)}
.whynot p{margin:12px 0 0;font-size:13px;line-height:1.65;color:var(--muted);max-width:64ch}
.whynot p b{color:var(--text);font-weight:600}

/* Numbered walk-through inside a step: the sub-steps that happen on
   somebody else's website before they come back here.                  */
.walk{display:flex;gap:13px;padding:14px 0;border-bottom:1px dashed var(--edge-2)}
.walk:last-of-type{border-bottom:0;padding-bottom:4px}
.walk-n{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
  color:var(--blood-3);background:var(--blood-dim);border:1px solid var(--blood-line)}
.walk-b{min-width:0}
.walk-b h4{margin:1px 0 6px;font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.walk-b p{margin:0 0 11px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:60ch}
.walk-b p b{color:var(--text);font-weight:600}

/* The moment it works. Worth more than a one-line flash — this is the
   end of the only setup job on the site that depends on someone else.  */
.won{display:flex;gap:15px;align-items:flex-start;margin:0 0 26px;
  padding:18px 20px;border-radius:var(--r-lg);
  border:1px solid rgba(74,222,128,.3);background:var(--go-dim)}
.won-i{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--go);color:#06210F}
.won-i svg{width:16px;height:16px}
.won h3{margin:4px 0 6px;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.won p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:62ch}

.uses{margin-top:20px;padding-top:15px;border-top:1px solid var(--edge-2)}
.uses ul{margin:0;padding-left:17px;display:grid;gap:6px}
.uses li{font-size:13.5px;line-height:1.5;color:var(--muted)}
.uses li::marker{color:var(--blood)}

.micro{font-size:12.5px;line-height:1.6;color:var(--faint)}
/* NAME COLLISION, fixed: this "optional" label was called .opt, which is the
   class every delivery and payment row on the checkout already uses. The
   result was that every option in the shop rendered in tiny uppercase. */
.optional{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-left:6px}

@media (max-width:560px){
  .mp{padding:14px}
  .mp-h{flex-wrap:wrap;gap:7px}
  .won{padding:15px;gap:12px}
}

/* ══════════════════════════════════════════════════════════════════
   SECOND DESIGN PASS
   The shop was reading as a template: a 272px thumbnail grid, a green
   in-stock pill, and every element wearing the same 1px grey border.
   The badge this brand comes from is a printed thing — noir figure,
   brush script, oxblood — so the fix is to make the page behave like
   print. Fewer boxes, more rules. Photographs that bleed. Numbers set
   at a size that matches what they cost. One ink, used properly.
   ══════════════════════════════════════════════════════════════════ */

/* ── Film grain ───────────────────────────────────────────────────
   Static. The first version animated a full-viewport blend-mode layer
   six times a second, which is the single most expensive thing a page
   can do to a phone GPU — it was the "lag". A fixed, unanimated noise
   tile is one composited layer and costs nothing after the first paint. */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Overprint ────────────────────────────────────────────────────
   Cheap two-colour printing never registers perfectly; the second
   plate lands a hair off. That misalignment is most of why a bootleg
   sleeve looks like an object and a CSS gradient looks like a div. */
.display .lit{
  /* The second plate lands a hair off register. text-shadow paints behind the
     glyph, so it works whether the fill is a flat colour or the clipped
     gradient the hero uses — and needs no extra markup on every heading. */
  text-shadow:-2px 1.5px 0 var(--blood-deep), -3.5px 3px 0 rgba(110,27,27,.32);
}
@media (max-width:560px){ .display .lit{text-shadow:-1.5px 1px 0 var(--blood-deep)} }

/* ── Section heads ────────────────────────────────────────────────
   A number, a title set big, and a rule that runs off the right edge
   of the page. Catalogue furniture, not a card title.              */
.grid-head{position:relative;display:grid;
  grid-template-columns:auto 1fr auto;align-items:end;gap:0 20px;
  margin:74px 0 26px;padding-bottom:16px;border-bottom:0}
.grid-head::before{content:'';position:absolute;left:0;right:-100vw;bottom:0;
  height:1px;width:auto;top:auto;background:var(--edge);transform:none}
/* That rule deliberately runs past the right edge of the page. Without this it
   also drags the document 1200px wider and every page gets a horizontal
   scrollbar. `clip` rather than `hidden` so position:sticky still works. */
html,body{overflow-x:clip}
.grid-head::after{content:'';position:absolute;left:0;bottom:-1px;
  width:112px;height:3px;background:var(--blood)}
.gh-n{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--blood-2);
  font-variant-numeric:tabular-nums;padding-bottom:7px}
.gh-t .eyebrow{margin:0 0 6px}
.gh-t .sect{margin:0;font-size:clamp(30px,4.4vw,46px);line-height:.94;
  letter-spacing:-.035em;font-weight:800}
.gh-c{font-size:12px;color:var(--faint);letter-spacing:.02em;padding-bottom:9px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── The cards ────────────────────────────────────────────────────
   Two to a row, not four. These are four-figure machines and the
   photograph is the entire sales pitch, so it gets the space.      */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:26px}
.card{border-radius:var(--r-lg);border:1px solid var(--edge-2);
  background:linear-gradient(180deg,var(--surface-2),var(--ink-2));
  transition:transform .4s var(--ease-out),border-color .3s var(--ease),
             box-shadow .4s var(--ease-out)}
.card:hover{transform:translateY(-3px);border-color:rgba(237,233,227,.16);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.9),0 0 0 1px rgba(179,37,42,.16)}
.card::after{height:3px;background:var(--blood)}

/* The photograph bleeds the full width of the card and is lit from
   below in oxblood, like the hero — one light source across the site. */
.card .art{aspect-ratio:5/4;border-radius:0;border:0;
  background:radial-gradient(120% 84% at 50% 108%,rgba(179,37,42,.22),transparent 62%),
             linear-gradient(180deg,#141416,#0B0B0C)}
.card .art::before{content:'';position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(10,10,11,.86));z-index:1}
.card .art>img{padding:0;object-fit:cover;
  transition:transform .7s var(--ease-out)}
.card:hover .art>img{transform:scale(1.055)}

/* Lot number, top right, small and set in the wall. Auction-catalogue
   detail — it costs nothing and it tells you someone laid this out. */
.lot{position:absolute;top:13px;right:15px;z-index:3;
  font-size:11px;font-weight:700;letter-spacing:.1em;
  color:rgba(237,233,227,.34);font-variant-numeric:tabular-nums}

/* In stock is a hairline tab, not a green pill. Green belongs to a
   different brand; this one has one ink and it is oxblood.         */
.tab{position:absolute;top:12px;left:0;z-index:3;
  padding:5px 11px 5px 15px;border-radius:0 3px 3px 0;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:rgba(10,10,11,.86);
  border:1px solid var(--edge);border-left:3px solid var(--blood)}

/* Sold is a stamp: rotated, outlined, sitting on top of the picture
   the way a rubber stamp sits on a document.                       */
.stamp{position:absolute;top:44%;left:50%;z-index:4;
  transform:translate(-50%,-50%) rotate(-11deg);
  padding:9px 20px;border:2.5px solid var(--blood-2);border-radius:4px;
  font-size:19px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blood-2);opacity:.9;
  box-shadow:0 0 0 3px rgba(10,10,11,.5)}
.stamp.reserved{border-color:var(--hold);color:var(--hold)}
/* Grey out the photograph, not the stamp sitting on top of it — the old
   rule filtered the whole frame and dimmed the word Sold into the dark. */
.card.gone .art>img,
.card.gone .art .surron{filter:grayscale(.72) brightness(.52) contrast(1.05)}

.card .body{padding:20px 22px 22px}
.card h3{font-size:clamp(18px,2vw,21px);line-height:1.18;letter-spacing:-.03em;
  font-weight:800;margin:0 0 7px}
.card .meta{font-size:13.5px;line-height:1.55;margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Price gets a rule over it and the size the number deserves. */
.card .foot{padding-top:15px;border-top:1px solid var(--edge-2);align-items:flex-end}
.card .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px;font-size:inherit}
.card .price b{font-size:clamp(24px,2.6vw,29px);font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums lining-nums;line-height:1}
.card .price s{color:var(--ghost);font-size:13.5px;font-weight:400;margin:0;
  font-variant-numeric:tabular-nums}
/* The saving sits on its own line but stays the width of its own text.
   flex-basis:100% would do the line break AND stretch the pill across the
   card, so the break is done with a zero-height spacer instead. */
.card .price::before{content:'';order:1;flex:0 0 100%;height:0}
.save{order:2;flex:0 0 auto;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--blood-3);
  background:var(--blood-dim);border:1px solid var(--blood-line);
  border-radius:100px;padding:3px 10px;margin-top:8px}
.card .price b,.card .price s{order:0}
.card .price:not(:has(.save))::before{display:none}

/* The affordance says what it does. A bare arrow in a circle is the
   most anonymous control on the web.                               */
.card .go{margin-left:auto;width:auto;height:auto;border:0;background:none;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);
  transition:color .22s var(--ease),gap .22s var(--ease)}
.card .go svg{transition:transform .3s var(--ease-out)}
.card:hover .go{color:var(--blood-3);background:none;border:0;gap:10px}
.card:hover .go svg{transform:translateX(2px)}
.card.gone .go{color:var(--ghost)}
.card.gone .go svg{display:none}

@media (max-width:640px){
  .cards{grid-template-columns:1fr;gap:20px}
  .grid-head{grid-template-columns:auto 1fr;margin-top:52px}
  .gh-c{grid-column:2;justify-self:start;padding:6px 0 0}
  .card .art{aspect-ratio:4/3}
  .stamp{font-size:16px;padding:7px 16px}
}

/* ── Product page band ────────────────────────────────────────────
   The page used to end at the Buy button with half a screen of black
   under it. These three blocks answer what it is, how it reaches you
   and what happens if you change your mind — the questions that
   actually decide a four-figure purchase.                          */
.pdp-band{grid-column:1/-1;margin-top:56px;padding-top:34px;
  border-top:1px solid var(--edge);
  display:grid;grid-template-columns:1.15fr 1fr;gap:26px}

.plate-h{margin:0 0 16px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

/* The numbers, set as an instrument plate — same language as the hero
   readout, so the site speaks once rather than twice. */
.plate{position:relative;padding:24px 26px 20px;border-radius:var(--r-lg);
  border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--surface-2),var(--ink-2));
  box-shadow:inset 0 1px 0 rgba(237,233,227,.05)}
.plate-g{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0}
.plate-g>div{padding:0 16px;border-left:1px solid var(--edge-2)}
.plate-g>div:first-child{padding-left:0;border-left:0}
.plate-g dt{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.plate-g dd{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums lining-nums;color:var(--text)}
.plate-f{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--edge-2);
  font-size:12px;color:var(--faint);letter-spacing:.04em}

/* Delivery, priced, with the courier drawn rather than hotlinked. */
.getit{padding:24px 26px;border-radius:var(--r-lg);
  border:1px solid var(--edge);background:var(--surface)}
.getit-l{list-style:none;margin:0;padding:0}
.getit-l li{display:flex;align-items:center;gap:13px;padding:12px 0;
  border-bottom:1px solid var(--edge-2)}
.getit-l li:last-child{border-bottom:0;padding-bottom:0}
.gi-c{width:34px;height:34px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--edge);color:var(--muted)}
.gi-c svg{width:16px;height:16px}
.gi-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gi-t b{font-size:14px;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.gi-t i,.gi-t em{font-style:normal;font-size:12px;color:var(--muted)}
.gi-t em{color:var(--faint);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.gi-p{margin-left:auto;font-size:15px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Three promises, each with the reason it is credible. */
.assure{grid-column:1/-1;list-style:none;margin:8px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--edge);padding-top:26px}
.assure li{padding:0 26px;border-left:1px solid var(--edge-2);
  display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-content:start}
.assure li:first-child{padding-left:0;border-left:0}
.assure svg{width:17px;height:17px;color:var(--blood-2);grid-row:1/3;margin-top:2px}
.assure b{font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin-bottom:5px}
.assure i{font-style:normal;font-size:12.5px;line-height:1.55;color:var(--muted)}

@media (max-width:900px){
  .pdp-band{grid-template-columns:1fr;gap:18px;margin-top:40px}
  .assure{grid-template-columns:1fr;gap:20px;padding-top:22px}
  .assure li{padding:0;border-left:0}
  .plate-g{grid-template-columns:repeat(2,1fr);gap:20px 0}
  .plate-g>div:nth-child(3){padding-left:0;border-left:0}
}

/* Green belonged to a different shop. This one has one ink, and using it for
   every live signal is what makes a small site look deliberate rather than
   assembled from a component library. */
.pdp .stage .tag.go,
.pdp .stage .tag{background:rgba(10,10,11,.8);color:var(--text);
  border:1px solid var(--edge);border-left:3px solid var(--blood);
  border-radius:0 3px 3px 0;letter-spacing:.1em}
.pdp .stage .tags{left:0}
.wdot{background:var(--blood-2);box-shadow:0 0 0 0 rgba(218,59,65,.55)}
.watching{color:var(--muted)}

/* Both boxes in the band share a height, so the shorter one needs its footer
   pinned rather than floating in the middle of the empty space. */
.plate{display:flex;flex-direction:column}
.plate-f{margin-top:auto}

/* ══════════════════════════════════════════════════════════════════
   WAVE: references, upsells, tracking, provenance
   ══════════════════════════════════════════════════════════════════ */

/* Review source marks. A letter on a tile in the platform's colour —
   drawn, not the real logo, for the reasons in routes-shop-extras.js. */
.srcmark{display:inline-grid;place-items:center;flex:none;border-radius:5px;
  font-weight:800;line-height:1;color:#0A0A0B;background:var(--sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.tag.src{display:inline-flex;align-items:center;gap:6px;padding-left:5px}

/* The reference builder: prefix, dash, length. */
.reffld{display:flex;align-items:center;gap:8px}
.reffld input:first-child{max-width:90px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700}
.reffld input:last-child{max-width:64px;text-align:center}
.reffld span{color:var(--faint);font-weight:700}

/* ── Upsells that are things ──────────────────────────────────────
   A photo makes an add-on a product rather than a line item, and a
   group heading is what lets a second bike sit next to a helmet
   without the list reading as nonsense.                            */
.addgrp{margin:0;padding:15px 20px 7px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border-top:1px solid var(--edge-2)}
.addgrp:first-child{border-top:0}
.addpic{width:46px;height:46px;flex:none;border-radius:8px;overflow:hidden;
  background:var(--surface-3);border:1px solid var(--edge)}
.addpic img{width:100%;height:100%;object-fit:cover;display:block}
.opt.add .otxt{min-width:0}
.dico img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}

/* ── Nearest collection point ─────────────────────────────────────
   "Collect in person" means nothing until you know how far.        */
.onear{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;
  color:var(--blood-3)}
.onear svg{width:12px;height:12px;flex:none}
.onear b{color:var(--text);font-weight:700}

/* ── Tracking desk: one-tap places ────────────────────────────────
   Ordered by distance from that order's own address, so the first
   button is usually the right one.                                 */
.tk-places{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 14px}
.tkl{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;
  border-radius:100px;border:1px solid var(--edge);background:var(--surface-2);
  color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .16s var(--ease)}
.tkl svg{width:12px;height:12px;color:var(--faint)}
.tkl i{font-style:normal;font-size:10.5px;color:var(--ghost);
  font-variant-numeric:tabular-nums}
.tkl:hover{border-color:rgba(237,233,227,.24);color:var(--text)}
.tkl.on{background:var(--blood-dim);border-color:var(--blood-line);color:var(--blood-3)}
.tkl.on svg{color:var(--blood-2)}
.tkl.clear{color:var(--ghost)}

/* ── "Updated" on the customer's order page ───────────────────────
   The single thing everyone opens the page to find out, and it was
   not on it anywhere.                                              */
.upd{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--faint)}
.upd.on{color:var(--blood-3)}
.upd-d{width:7px;height:7px;border-radius:50%;background:var(--blood-2);flex:none}
@media (prefers-reduced-motion:no-preference){
  .upd.on .upd-d{animation:updpulse 2.4s var(--ease) infinite}
}
@keyframes updpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(218,59,65,.55)}
  55%{box-shadow:0 0 0 7px rgba(218,59,65,0)}
}
.journey-p.fresh{border-color:var(--blood-line)}
.journey-p.fresh .panel-h{background:linear-gradient(90deg,var(--blood-dim),transparent)}
.j-new{margin-left:9px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#FFF3F2;background:var(--blood);
  border-radius:100px;padding:2px 7px;vertical-align:1px}
.journey li.fixed .j-dot{background:var(--surface-3);border-color:var(--edge)}

/* ── Provenance on a grafted build ────────────────────────────────  */
.graft{grid-column:1/-1;padding:20px 24px;border-radius:var(--r-lg);
  border:1px solid var(--edge);border-left:3px solid var(--blood);
  background:linear-gradient(90deg,rgba(179,37,42,.07),var(--surface-2) 42%)}
.graft-f{margin:0;font-size:clamp(17px,2.1vw,21px);font-weight:800;
  letter-spacing:-.028em;color:var(--text);line-height:1.25}
.graft-p{display:flex;align-items:center;gap:8px;margin:11px 0 0;
  font-size:13px;color:var(--muted)}
.graft-p svg{width:14px;height:14px;color:var(--blood-2);flex:none}
.graft-p b{color:var(--text);font-weight:700}

/* ── Mobile ───────────────────────────────────────────────────────
   Everything above, made to work with one thumb on a 390px screen.  */
@media (max-width:720px){
  .tk-places{gap:6px;padding-bottom:12px;
    /* Let the row scroll rather than wrap into four lines on a phone. */
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -16px;padding-left:16px;padding-right:16px}
  .tk-places::-webkit-scrollbar{display:none}
  .tkl{flex:none}
  .addgrp{padding:13px 16px 6px}
  .addpic{width:40px;height:40px}
  .upd{width:100%;margin:8px 0 0;order:9}
  .panel-h{flex-wrap:wrap}
  .graft{padding:17px 18px}
  .reffld input:first-child{max-width:80px}
}
@media (max-width:420px){
  .opt.add{gap:10px;padding:12px 14px}
  .addpic{width:36px;height:36px}
  .onear{font-size:11.5px}
}

/* "Free" was the one green thing left on the customer's path. */
.oprice.free{color:var(--text)}
.opt.sel .oprice.free{color:var(--blood-3)}

/* The nearest-collection line, tightened for a phone. */
.onear{flex-wrap:wrap;line-height:1.4}
@media (max-width:560px){ .onear{font-size:11.5px;gap:5px} }