/* PKFactory
   Two registers on one grid, one type scale, one spacing ramp.
   FLOOR  - white supply catalog. Browse, product, checkout.
   VAULT  - instrument panel. Balance, ledger, parcels, operator desk.
   The registers differ in surface, never in structure. */

:root{
  --paper:#FFFFFF;
  --floor-ink:#14140F;
  --floor-mute:#6E7169;
  --rule:#D8D6CF;
  --rule-soft:#ECEAE4;

  --vault:#0B0C0E;
  --vault-ink:#E8E6E0;
  --vault-mute:#7E858A;
  --vault-rule:#22272B;

  --accent:#D8541F;     /* route + transit only */
  --credit:#2FA36B;     /* credit in only; debits stay neutral */

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Barlow,"Helvetica Neue",Arial,sans-serif;
  --cond:"Barlow Condensed",Barlow,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.55;
  background:var(--paper);color:var(--floor-ink);
  -webkit-font-smoothing:antialiased;
}
body.reg-vault{background:var(--vault);color:var(--vault-ink)}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:99;background:var(--floor-ink);color:#fff;padding:var(--s2) var(--s3)}
.mono{font-family:var(--mono)}
.tiny{font-size:10px}
.dim{color:var(--floor-mute)}
body.reg-vault .dim{color:var(--vault-mute)}
.cr{color:var(--credit)}
.short{color:var(--accent)}
.pad{padding:var(--s3) var(--s4)}
.scroller{overflow-x:auto}
.link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:inherit}
.link.danger{color:var(--accent);margin-left:var(--s2)}

/* ---------------------------------------------------------------- chrome */
.top{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);
}
body.reg-vault .top{border-color:var(--vault-rule)}
.mark{
  font-family:var(--cond);font-weight:700;font-size:21px;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.mark span{color:var(--accent)}
.search{flex:1;min-width:0}
.search input{
  width:100%;border:1px solid var(--rule);background:transparent;color:inherit;
  padding:9px 12px;font-family:var(--mono);font-size:16px;
}
.search input::placeholder{color:var(--floor-mute);font-size:12px}
.topbal{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.topbal b{font-size:14px}

.f-nav,.v-tabs{
  display:flex;gap:var(--s4);padding:10px var(--s4);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
body.reg-vault .v-tabs{border-color:var(--vault-rule)}
.f-nav a,.v-tabs a{color:var(--floor-mute);text-decoration:none;white-space:nowrap;padding-bottom:2px}
body.reg-vault .v-tabs a{color:var(--vault-mute)}
.f-nav a.on,.v-tabs a.on{color:inherit;border-bottom:2px solid var(--accent)}

main{max-width:1180px;margin:0 auto}
main.wide{max-width:1400px}
.crumb{padding:var(--s3) var(--s4);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--floor-mute)}
.intro{padding:var(--s5) var(--s4) var(--s4);max-width:62ch}
.intro h1{font-family:var(--cond);font-size:clamp(28px,4.4vw,46px);line-height:1.06;text-transform:uppercase}
.intro p{margin-top:var(--s3);color:var(--floor-mute);font-size:16px}
.empty{padding:var(--s5) var(--s4);color:var(--floor-mute)}

/* ------------------------------------------------------------- floor grid */
.f-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.tile{background:var(--paper);padding:var(--s3);display:flex;flex-direction:column;gap:11px;min-width:0}
.tile.lead{grid-column:span 6}
.tile.third{grid-column:span 4}
.tile.half{grid-column:span 3}
.obj{display:flex;align-items:center;justify-content:center;min-height:96px;color:var(--floor-ink);text-decoration:none}
.tile.lead .obj{min-height:200px}
.obj svg{width:100%;max-height:104px}
.tile.lead .obj svg{max-height:200px}
.t-name{font-size:15px;font-weight:500;line-height:1.3}
.t-name a{text-decoration:none}
.t-name a:hover{text-decoration:underline}
.tile.lead .t-name{font-size:20px;font-weight:600}
.lead-note{font-size:13.5px;color:var(--floor-mute);line-height:1.5;max-width:46ch}
.t-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;flex-wrap:wrap}
.t-price{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.stamp{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--floor-mute);white-space:nowrap}
.stamp b{color:var(--accent);font-weight:500}

/* ---------------------------------------------------------------- product */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid var(--rule)}
.pdp-obj{
  padding:var(--s5);display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--rule);
}
.pdp-obj svg{max-height:320px}
.pdp-side{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.pdp-side h1{font-size:clamp(22px,3vw,28px);line-height:1.2}
.blurb{color:var(--floor-mute);font-size:14.5px;margin-top:var(--s2)}
.pdp-price{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.pdp-price .big{font-family:var(--mono);font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.after{font-family:var(--mono);font-size:12px;color:var(--floor-mute);font-variant-numeric:tabular-nums}

/* the route block - the mechanism, same object in both registers */
.route{border-top:1px solid var(--floor-ink)}
.route.quiet{border-top-color:var(--rule)}
body.reg-vault .route{border-top-color:var(--vault-ink)}
.route-h{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 0;font-weight:600;
}
.route table{width:100%;border-collapse:collapse;font-size:13px}
.route td{padding:6px 0;border-top:1px solid var(--rule);vertical-align:baseline}
body.reg-vault .route td{border-top-color:var(--vault-rule)}
.route td:first-child{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--floor-mute);width:46%;
}
body.reg-vault .route td:first-child{color:var(--vault-mute)}
.route td:last-child{font-family:var(--mono);text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.unres{color:var(--accent);border-bottom:1px dotted currentColor;cursor:help}
.est{color:var(--floor-mute);font-size:10px;letter-spacing:.08em}

/* ----------------------------------------------------------------- sizing */
.sizes{border-top:1px solid var(--floor-ink)}
.size-grid{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.size{position:relative;cursor:pointer}
.size input{position:absolute;opacity:0;width:0;height:0}
.size b,.size em{display:block;text-align:center;font-style:normal}
.size b{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.size em{font-family:var(--mono);font-size:9px;color:var(--floor-mute);letter-spacing:.06em}
.size b,.size em{padding:0 10px}
.size b{padding-top:8px}
.size em{padding-bottom:7px}
.size:has(b){border:1px solid var(--rule);min-width:56px}
.size:hover{border-color:var(--floor-ink)}
.size:has(input:checked){border:2px solid var(--floor-ink);background:#FAF9F6}
.size:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.size.out{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.conv{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.conv th{
  text-align:left;font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--floor-mute);padding:5px 8px 5px 0;border-bottom:1px solid var(--rule);
}
.conv td{padding:4px 8px 4px 0;border-bottom:1px solid var(--rule-soft)}
.sizenote{margin-top:var(--s3);font-size:12.5px;line-height:1.55;color:var(--floor-mute);max-width:56ch}

.cta{
  background:var(--floor-ink);color:var(--paper);border:0;padding:14px;width:100%;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;text-align:center;text-decoration:none;display:block;
}
.cta:hover{background:#000}
.cta:disabled{background:#B9B6AD;cursor:not-allowed}
body.reg-vault .cta{background:var(--vault-ink);color:var(--vault)}
.formnote{margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--accent);line-height:1.5;min-height:1.2em}
.microcopy{margin-top:var(--s2);font-size:11.5px;color:var(--floor-mute);line-height:1.5}
.buyform{display:flex;flex-direction:column;gap:var(--s3)}

/* ------------------------------------------------------------------- load */
.load{padding:var(--s5) var(--s4);max-width:640px}
.load h1{font-family:var(--cond);font-size:34px;text-transform:uppercase;line-height:1.05}
.lede{margin-top:var(--s2);color:var(--floor-mute)}
.ladder-form{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.ladder{display:flex;flex-direction:column}
.rung{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:center;
  padding:14px 16px;border:1px solid var(--rule);margin-top:-1px;cursor:pointer;background:var(--paper);
}
.rung input{position:absolute;opacity:0;width:0;height:0}
.rung:has(input:checked){border:2px solid var(--floor-ink);position:relative;z-index:1;background:#FAF9F6}
.rung:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rung-amt{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.rung-bon{font-family:var(--mono);font-size:12px;color:var(--credit);font-weight:600;white-space:nowrap}
.rung-land{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.rung-land em{font-style:normal;font-size:9px;color:var(--floor-mute);letter-spacing:.1em;text-transform:uppercase;display:block}
.custom label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--floor-mute)}
.crow{display:flex;gap:var(--s2);align-items:stretch;margin-top:var(--s2);flex-wrap:wrap}
.crow input{
  flex:1;min-width:140px;border:1px solid var(--rule);padding:11px 12px;
  font-family:var(--mono);font-size:16px;background:transparent;color:inherit;
}
.quote{
  font-family:var(--mono);font-size:12px;color:var(--floor-mute);display:flex;align-items:center;
  padding:0 var(--s2);font-variant-numeric:tabular-nums;
}
.rails{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.rail{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.disclose{
  margin-top:var(--s4);font-size:12px;color:var(--floor-mute);line-height:1.6;max-width:60ch;
  border-top:1px solid var(--rule);padding-top:var(--s3);
}
.err{color:var(--accent);font-family:var(--mono);font-size:12.5px;margin-top:var(--s2)}
.ok{margin:var(--s3) var(--s4);padding:12px 16px;border-left:3px solid var(--credit);
  font-family:var(--mono);font-size:12.5px;color:var(--credit)}
.pending{padding:var(--s5) var(--s4);max-width:560px}
.pending h1{font-family:var(--cond);font-size:30px;text-transform:uppercase;margin:var(--s2) 0 var(--s4)}
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv td{padding:8px 0;border-top:1px solid var(--rule)}
.kv td:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--floor-mute)}
.kv td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{margin-top:var(--s4);font-size:13px;color:var(--floor-mute);line-height:1.6}
.note code{font-family:var(--mono);font-size:11.5px;background:var(--rule-soft);padding:1px 5px}

/* --------------------------------------------------------------- checkout */
.co{display:grid;grid-template-columns:1fr .95fr;border-top:1px solid var(--rule)}
.co-sum{padding:var(--s4);border-right:1px solid var(--rule)}
.co-form{padding:var(--s4)}
.co-form form{display:flex;flex-direction:column;gap:10px}
.sum-row{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;font-size:14px;border-top:1px solid var(--rule)}
.sum-row .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sum-row.item span:first-child{display:flex;flex-direction:column;gap:2px}
.sum-row.item em{font-style:normal;font-size:11px;color:var(--floor-mute)}
.sum-row.item form{display:inline}
.sum-row.item .link{font-size:10px;color:var(--floor-mute);display:block;margin-top:3px}
.sum-row.tot{border-top:2px solid var(--floor-ink);margin-top:var(--s1);padding-top:12px;font-weight:600;font-size:16px}
.sum-row.tot .amt{font-size:20px;font-weight:600}
.fld{display:flex;flex-direction:column;gap:4px}
.fld span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--floor-mute)}
.fld input{border:1px solid var(--rule);padding:11px 12px;font-family:var(--sans);font-size:16px;background:transparent;color:inherit}
.fld.miss input{border-color:var(--accent);border-width:1.5px}
.signin{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4);max-width:360px}

/* ------------------------------------------------------------------ vault */
.v-hero{
  display:flex;gap:var(--s5);flex-wrap:wrap;align-items:flex-end;
  padding:var(--s4);border-bottom:1px solid var(--vault-rule);
}
.v-fig{display:flex;flex-direction:column;gap:5px}
.v-fig em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--vault-mute)}
.v-fig strong{font-family:var(--mono);font-size:40px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.v-fig.sub strong{font-size:20px;color:var(--vault-mute)}
.v-fig.sub strong.cr{color:var(--credit)}
.v-cta{
  margin-left:auto;align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--vault-ink);padding:10px 16px;text-decoration:none;
}
.v-cta:hover{background:var(--vault-ink);color:var(--vault)}
.v-sec{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--vault-mute);padding:var(--s4) var(--s4) var(--s2)}
.v-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.v-tbl th{
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--vault-mute);text-align:left;font-weight:500;padding:8px var(--s4);
  border-bottom:1px solid var(--vault-rule);white-space:nowrap;
}
.v-tbl th.r,.v-tbl td.r{text-align:right}
.v-tbl td{padding:6px var(--s4);border-bottom:1px solid var(--vault-rule)}
.v-tbl td.num,.v-tbl td.cr{font-family:var(--mono);font-variant-numeric:tabular-nums}
.v-tbl td.dim{font-family:var(--mono);font-size:11px}
.chip{
  display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--vault-rule);color:var(--vault-mute);white-space:nowrap;
}
.chip.bonus{border-color:var(--credit);color:var(--credit)}

/* parcels */
.parcels{display:flex;flex-direction:column;gap:1px;background:var(--vault-rule)}
.parcel{background:var(--vault);padding:var(--s4)}
.parcel.alert{border-left:3px solid var(--accent)}
.p-head{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.p-stage{font-family:var(--cond);font-size:22px;text-transform:uppercase;font-weight:600;line-height:1.1}
.parcel.alert .p-stage{color:var(--accent)}
.p-item{font-size:12px;color:var(--vault-mute);margin-top:3px}
.p-src{font-family:var(--mono);font-size:10px;color:var(--vault-mute);text-align:right;letter-spacing:.08em}
.p-note{margin-top:var(--s2);font-size:13px;color:var(--vault-ink);max-width:62ch;line-height:1.55}
.rail{
  list-style:none;display:flex;gap:0;margin:var(--s4) 0 0;padding:0;overflow-x:auto;
}
.rail li{flex:1;min-width:78px;display:flex;flex-direction:column;gap:6px;position:relative}
.rail li i{display:block;height:2px;background:var(--vault-rule);margin-right:2px}
.rail li.done i{background:var(--vault-mute)}
.rail li.current i{background:var(--accent)}
.rail li span{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--vault-rule)}
.rail li.done span{color:var(--vault-mute)}
.rail li.current span{color:var(--accent)}
.raw{margin-top:var(--s3)}
.raw summary{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--vault-mute);cursor:pointer}
.raw ul{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.raw li{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:baseline;font-size:11.5px;border-top:1px solid var(--vault-rule);padding-top:6px}
.raw li b{font-weight:600;font-size:11px}
.rawtxt{color:var(--vault-mute);font-family:var(--mono);font-size:10.5px}

.order{border-bottom:1px solid var(--vault-rule)}
.order.fresh{border-left:3px solid var(--credit)}
.o-head{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4) var(--s2);flex-wrap:wrap}
.o-roll{font-family:var(--cond);font-size:20px;text-transform:uppercase;font-weight:600}
.o-roll.alert{color:var(--accent)}
.o-meta{font-family:var(--mono);font-size:12px;display:flex;gap:var(--s3);align-items:baseline;font-variant-numeric:tabular-nums}
.o-ship{padding:0 var(--s4) var(--s3);font-size:11.5px;font-family:var(--mono)}
.scanform{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.scanform input,.scanform select{
  border:1px solid var(--vault-rule);background:transparent;color:inherit;
  font-family:var(--mono);font-size:11px;padding:5px 7px;min-width:0;
}
.scanform input[name=raw]{flex:1;min-width:190px}

/* ------------------------------------------------------------------ prose */
.prose{padding:var(--s5) var(--s4);max-width:68ch}
.prose.narrow{max-width:48ch}
.prose h1{font-family:var(--cond);font-size:clamp(28px,4vw,42px);text-transform:uppercase;line-height:1.05}
.prose h2{font-family:var(--cond);font-size:22px;text-transform:uppercase;margin-top:var(--s5)}
.prose p{margin-top:var(--s3);color:var(--floor-mute)}
.prose .lede{font-size:17px;color:var(--floor-ink);margin-top:var(--s3)}
.steps{margin:var(--s3) 0 0;padding-left:1.2em;color:var(--floor-mute)}
.steps li{margin-top:var(--s2)}

/* ----------------------------------------------------------------- footer */
.foot{
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s4);
  padding:var(--s5) var(--s4);border-top:1px solid var(--rule);margin-top:var(--s6);
  font-size:13px;color:var(--floor-mute);
}
body.reg-vault .foot{border-color:var(--vault-rule)}
.foot b{font-family:var(--cond);font-size:16px;letter-spacing:.03em;color:inherit}
.foot p{margin-top:var(--s2);max-width:44ch}
.foot a{display:block;text-decoration:none;margin-bottom:6px}
.foot a:hover{text-decoration:underline}
.foot-note{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:var(--s3);font-size:11.5px;max-width:60ch}
body.reg-vault .foot-note{border-color:var(--vault-rule)}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:900px){
  .pdp,.co{grid-template-columns:1fr}
  .pdp-obj{border-right:0;border-bottom:1px solid var(--rule);padding:var(--s4)}
  /* The order column is promoted above the form so the total is never below the
     button. This is the whole reason the two panels are separate elements. */
  .co-sum{border-right:0;border-bottom:1px solid var(--rule);order:-1}
  .tile.lead{grid-column:span 12}
  .tile.third,.tile.half{grid-column:span 6}
  .foot{grid-template-columns:1fr}
}
@media (max-width:560px){
  .top{gap:var(--s3);flex-wrap:wrap}
  .search{order:3;flex-basis:100%}
  .rung{grid-template-columns:1fr auto}
  .rung-land{grid-column:1/-1;text-align:left}
  .v-fig strong{font-size:32px}
  .v-hero{gap:var(--s4)}
  .v-cta{margin-left:0}
  .tile.third,.tile.half{grid-column:span 12}
  .v-tbl th,.v-tbl td{padding-left:var(--s3);padding-right:var(--s3)}
}

/* ============================================================
   QC WAREHOUSE
   Vault register. Photographs are the one saturated thing on a
   near-black ground, so the chrome around them stays neutral and
   lets the pictures carry the decision.
   ============================================================ */
.v-hero.tight{padding:var(--s4) var(--s4) var(--s3)}
.warn{color:var(--accent)}
.chip.warnchip{border-color:var(--accent);color:var(--accent)}

.banner{
  display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:var(--s3) var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--vault-rule);
}
.banner.warn{border-left:3px solid var(--accent)}
.banner b{display:block;font-size:15px}
.banner span{display:block;color:var(--vault-mute);font-size:13px;margin-top:4px;max-width:60ch}
.banner .cta{width:auto;padding:11px 18px}

/* the decision card */
.qc-card{border-bottom:1px solid var(--vault-rule);padding:var(--s4)}
.qc-head{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:flex-start}
.qc-head h3{font-family:var(--cond);font-size:24px;text-transform:uppercase;line-height:1.1;font-weight:600}
.qc-id{font-family:var(--mono);font-size:10.5px;color:var(--vault-mute);margin-top:4px;letter-spacing:.05em}
.qc-paid{text-align:right;flex:none}
.qc-paid em{font-style:normal;display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--vault-mute)}
.qc-paid strong{font-family:var(--mono);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}

.shots{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:var(--s2);
  overflow-x:auto;margin:var(--s4) 0 var(--s2);padding-bottom:var(--s2);
}
.shot-fig{margin:0;background:#0F1214;border:1px solid var(--vault-rule)}
.shot-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.shot-fig.ph img{object-fit:contain}
.shot-fig figcaption{
  font-family:var(--mono);font-size:10px;color:var(--vault-mute);padding:6px 8px;
  border-top:1px solid var(--vault-rule);
}
.qc-ph-note{font-size:12px;color:var(--vault-mute);max-width:64ch;margin-bottom:var(--s2)}

.qc-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
.qc-form{display:flex;flex-direction:column;gap:var(--s2)}
.qc-sub{font-size:12px;color:var(--vault-mute);line-height:1.5}
.qc-sub b{color:var(--vault-ink)}
.cta.ghost{background:none;color:var(--vault-ink);border:1px solid var(--vault-rule)}
.cta.ghost:hover{border-color:var(--accent);color:var(--accent);background:none}

/* storage */
.ratecard{padding:0 var(--s4) var(--s3);max-width:70ch}
.ratecard p{font-size:13.5px;color:var(--vault-mute);line-height:1.6}
.ratecard b{color:var(--vault-ink)}
.rates{border-collapse:collapse;margin:var(--s3) 0;min-width:260px}
.rates td{padding:7px 0;border-bottom:1px solid var(--vault-rule);font-size:13.5px}
.rates td.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;padding-left:var(--s4)}
.fine{font-size:11.5px;color:var(--vault-mute);line-height:1.6;margin-top:var(--s2)}

/* shipment builder */
.shipbuild{padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3);max-width:760px}
.hint{font-size:13px;color:var(--vault-mute);max-width:64ch}
.picklist{display:flex;flex-direction:column;border:1px solid var(--vault-rule)}
.pick{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;
  padding:12px var(--s3);border-bottom:1px solid var(--vault-rule);cursor:pointer;
}
.pick:last-child{border-bottom:0}
.pick:has(input:checked){background:rgba(255,255,255,.03)}
.pick-main b{display:block;font-size:14px;font-weight:500}
.pick-main em{font-style:normal;display:block;font-family:var(--mono);font-size:10.5px;color:var(--vault-mute);margin-top:2px}
.pick-w{font-family:var(--mono);font-size:11.5px;color:var(--vault-mute);font-variant-numeric:tabular-nums}
.shipto{border:1px solid var(--vault-rule);padding:var(--s3);margin:0}
.shipto legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--vault-mute);padding:0 6px}
.shipto-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.shipto-grid .fld input{border-color:var(--vault-rule)}

.ship{border-bottom:1px solid var(--vault-rule);padding:var(--s3) var(--s4)}
.ship-head{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
.ship-state{font-family:var(--cond);font-size:19px;text-transform:uppercase;font-weight:600;margin-top:2px}
.ship-amt{font-family:var(--mono);font-size:18px;font-variant-numeric:tabular-nums}
.ship-to{font-family:var(--mono);font-size:11px;margin-top:6px}
.ship-pay{margin-top:var(--s3);max-width:340px}

/* fulfilment choice - floor register, this one sits inside checkout */
.routes{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.route-opt{display:flex;gap:var(--s3);padding:14px;border:1px solid var(--rule);cursor:pointer;align-items:flex-start}
.route-opt:has(input:checked){border:2px solid var(--floor-ink);background:#FAF9F6}
.route-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.route-opt input{margin-top:3px;flex:none}
.ro-main b{display:block;font-size:15px;font-weight:600}
.ro-main b i{
  font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:1px 5px;margin-left:6px;vertical-align:2px;
}
.ro-main em{font-style:normal;display:block;font-size:13px;color:var(--floor-mute);margin-top:5px;line-height:1.5}
.ro-cav{font-size:12px!important}

@media (max-width:760px){
  .qc-choice{grid-template-columns:1fr}
  .shipto-grid{grid-template-columns:1fr}
  .shots{grid-auto-columns:minmax(160px,72%)}
}

/* Closed deployment: a plain statement bar, not a marketing ribbon. */
.closedbar{
  background:var(--floor-ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px var(--s4);text-align:center;
}
body.reg-vault .closedbar{background:var(--vault-ink);color:var(--vault)}

/* Two-door sign-in gate. Both doors carry equal weight — creating an account is not a
   lesser action than returning to one. */
.doors{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4);max-width:360px}
.doors .cta{width:100%}
.reg-floor .cta.ghost{background:none;color:var(--floor-ink);border:1px solid var(--rule)}
.reg-floor .cta.ghost:hover{border-color:var(--floor-ink);background:none;color:var(--floor-ink)}