:root{
--maroon:#54101F; --maroon-2:#6E1428; --maroon-ink:#380A14;
--gold:#BE9F4A; --gold-d:#9A7B1C; --gold-l:#EFDFAF;
--ink:#17110F; --ink-2:#7A6C6A; --line:#E9E0DB; --line-2:#F5EFEB;
--paper:#FFFFFF; --paper-2:#FAF6F2; --card:#FFFFFF;
--ok:#1B7F4B; --err:#B3402A;
--display:'Jost',system-ui,sans-serif;   /* headings, the brand voice */
--serif:'Jost',system-ui,sans-serif;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* body and UI, built to be read */
--shadow:0 10px 30px rgba(84,16,31,.07);
--r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-variant-numeric:tabular-nums;background:var(--paper-2);color:var(--ink);
font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button,input,select{font-family:inherit;font-size:16px}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@keyframes shimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
.shimmer{
background:linear-gradient(100deg,var(--gold-d) 0%,var(--gold) 26%,#FFF3CE 44%,var(--gold) 60%,var(--gold-d) 100%);
background-size:220% 100%;animation:shimmer 6s linear infinite;
-webkit-background-clip:text;background-clip:text;color:transparent}
.goldrule{height:2px;border:0;background:linear-gradient(100deg,transparent,var(--gold-d),#FFF0C4,var(--gold),transparent);
background-size:220% 100%;animation:shimmer 7s linear infinite}
@media (prefers-reduced-motion:reduce){.shimmer,.goldrule{animation:none}}
.top{position:sticky;top:0;z-index:40;background:var(--paper);
padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px;border-bottom:1px solid var(--line)}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{height:38px;width:auto}
.brandrow .tag{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);margin-top:5px}
.callus{font-size:.7rem;font-weight:600;color:var(--maroon);text-decoration:none;white-space:nowrap;
border:1px solid rgba(94,10,26,.28);padding:9px 14px;border-radius:999px;background:#fff}
.callus:active{background:var(--maroon);color:#fff}
.rate{margin:14px 16px 0;background:linear-gradient(150deg,var(--maroon-2),var(--maroon) 55%,var(--maroon-ink));
color:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.rate::after{content:"";position:absolute;inset:0;background:
radial-gradient(120% 90% at 85% -20%,rgba(243,227,176,.22),transparent 60%);pointer-events:none}
.rate .lab{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rate .big{font-family:var(--sans);font-size:2.5rem;font-weight:700;line-height:1.04;margin-top:4px;letter-spacing:-.025em}
.rate .sub{font-size:.72rem;color:rgba(255,255,255,.72);margin-top:5px}
.rate .rr{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;position:relative;z-index:1}
.rate .chip{text-align:right;font-size:.64rem;color:rgba(255,255,255,.78);white-space:nowrap}
.rate .chip .ln{display:block;line-height:1.7}
.rate .chip b{color:var(--gold-l);font-weight:700;font-size:.78rem}
.citysw{display:inline-flex;background:rgba(0,0,0,.24);border:1px solid rgba(243,227,176,.28);border-radius:999px;
padding:3px;margin-bottom:14px;position:relative;z-index:1}
.citysw button{background:none;border:0;color:rgba(255,255,255,.72);font-size:.72rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;padding:7px 13px;border-radius:999px;transition:.15s}
.citysw button.on{background:var(--gold-l);color:var(--maroon-ink)}
/* This line is the honest bit of the header: the number above it is a
   market reference, and what a lot actually costs is on the board. It
   reads as a sentence rather than a label so it is taken as one. */
.rate .boardline{font-size:.68rem;letter-spacing:.01em;color:rgba(255,255,255,.6);
  margin-top:9px;line-height:1.5}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7BE0A6;margin-right:6px;animation:p 2s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.25}}
.sec{padding:26px 16px 0}
.sec h2{font-family:var(--display);letter-spacing:.005em;font-size:1.5rem;font-weight:700;color:var(--maroon)}
.sec p{font-size:.78rem;color:var(--ink-2);margin-top:3px}
.sec hr{margin-top:10px;width:64px}
/* the live indicator for the board: which desk, and when it last moved */
.sec .upd{margin-top:6px;font-size:.72rem;font-weight:600;color:var(--ink-2)}
.sec .upd .pulse{background:var(--ok)}
.sec .upd .pulse.off{background:var(--err);animation:none}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 16px 0}
.tile{background:var(--maroon-ink);border:1px solid rgba(243,227,176,.22);border-radius:14px;padding:10px 8px;text-align:center}
.tile .t{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.tile .v{font-family:var(--sans);letter-spacing:-.01em;font-size:1.16rem;font-weight:700;color:#fff;margin-top:3px;line-height:1.1}
.tile .v.hot{color:var(--gold-l)}
.tile .hl{font-size:.62rem;color:rgba(255,255,255,.45);margin-top:3px;white-space:nowrap}
/* per-unit price switch above the board */
.unitsw{display:flex;gap:6px;margin:14px 16px 0}
.unitsw button{flex:1 1 0;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:9px 4px;font:inherit;font-size:.74rem;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:.14s}
.unitsw button.on{background:var(--maroon);border-color:var(--maroon);color:#fff}
.board{margin:12px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
box-shadow:0 6px 18px rgba(94,10,26,.05)}
.bhead{display:grid;grid-template-columns:1.35fr 1fr 1fr;background:var(--maroon);color:rgba(255,255,255,.8)}
.bhead span{padding:9px 10px;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.bhead span+span{text-align:right;color:var(--gold-l)}
.brow{display:grid;grid-template-columns:1.35fr 1fr 1fr;align-items:stretch;border-top:1px solid var(--line-2)}
.brow:first-child{border-top:0}
.brow.gsty{background:#FDFAF6}
.bname{display:flex;flex-direction:column;justify-content:center;padding:9px 10px}
.bname b{font-size:.72rem;font-weight:700;color:var(--ink);line-height:1.25}
.bname span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:2px}
.bcell{border:0;border-left:1px solid var(--line-2);padding:9px 10px;text-align:right;display:flex;flex-direction:column;
justify-content:center;background:none;font-family:inherit}
.bcell .n{font-family:var(--sans);letter-spacing:-.01em;font-size:1.06rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.bcell .x{font-size:.62rem;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.bcell.sell .n{display:inline-block;background:var(--maroon);color:#fff;border-radius:7px;padding:3px 8px;min-width:76px}
.bcell.sell.in .n{background:var(--gold-d);color:#fff}
.bcell.sell{transition:.12s}
.bcell.sell:active{background:var(--line-2)}
.tick-up .n{animation:tu .9s ease-out}
.tick-dn .n{animation:td .9s ease-out}
@keyframes tu{0%{box-shadow:0 0 0 2px rgba(27,127,75,.55)}100%{box-shadow:none}}
@keyframes td{0%{box-shadow:0 0 0 2px rgba(179,64,42,.55)}100%{box-shadow:none}}
.bnote{font-size:.62rem;color:var(--ink-2);padding:10px 12px;background:var(--line-2);line-height:1.5}
/* the buyer has hit their own per-order cap */
.bnote.warn{color:var(--err);background:#FBEDE9;font-weight:600;
  box-shadow:inset 3px 0 0 var(--err)}
/* cap line on the checkout page */
.caplim{margin:10px 0 0;font-size:.68rem;line-height:1.5;color:var(--ink-2);
  background:var(--line-2);border-radius:10px;padding:9px 11px}
.caplim.warn{color:var(--err);background:#FBEDE9;font-weight:600;
  box-shadow:inset 3px 0 0 var(--err)}
.ibar{display:flex;align-items:center;gap:10px;margin:14px 16px 0;padding:11px 13px;background:#fff;
border:1px solid rgba(94,10,26,.22);border-left:3px solid var(--gold-d);border-radius:14px}
.ibar b{font-size:.76rem;font-weight:700;color:var(--maroon);display:block}
.ibar span{font-size:.72rem;color:var(--ink-2)}
.ibar .go{margin-left:auto;flex:0 0 auto;background:var(--maroon);color:#fff;border:0;border-radius:10px;
padding:9px 14px;font-size:.74rem;font-weight:700}
.ibar .x{background:none;border:0;color:var(--ink-2);font-size:1.1rem;line-height:1;padding:4px 2px 4px 6px}
.ins{position:fixed;inset:0;z-index:70;display:none}
.ins.on{display:block}
.ins .iv{position:absolute;inset:0;background:rgba(28,18,22,.55)}
.ins .ip{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:22px 22px 0 0;
padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px));max-height:88dvh;overflow-y:auto}
@media(min-width:560px){.ins .ip{left:50%;right:auto;width:430px;transform:translateX(-50%)}}
.ins h3{font-family:var(--display);letter-spacing:.005em;font-size:1.4rem;color:var(--maroon)}
.ins .sub{font-size:.76rem;color:var(--ink-2);margin:3px 0 14px}
.ins .tabs{display:flex;background:var(--line-2);border-radius:12px;padding:4px;margin-bottom:16px}
.ins .tabs button{flex:1;background:none;border:0;padding:10px;border-radius:9px;font-size:.76rem;font-weight:700;
color:var(--ink-2)}
.ins .tabs button.on{background:#fff;color:var(--maroon);box-shadow:0 2px 8px rgba(94,10,26,.1)}
.ins ol{list-style:none;counter-reset:st}
.ins li{counter-increment:st;display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);
font-size:.84rem;line-height:1.5;align-items:flex-start}
.ins li .t{flex:1 1 auto;min-width:0}
.ins li:last-child{border-bottom:0}
.ins li::before{content:counter(st);flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--maroon);
color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center}
.ins li b{color:var(--maroon)}
.ins .glyph{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--line-2);
vertical-align:-6px;margin:0 2px}
.ins .glyph svg{width:13px;height:13px;fill:var(--maroon)}
.ins .done{width:100%;margin-top:16px;background:var(--maroon);color:#fff;border:0;border-radius:13px;padding:14px;
font-size:.9rem;font-weight:600}
.qty{grid-column:1/-1;display:none;gap:8px;align-items:center;padding:11px 10px;background:var(--maroon-ink);color:#fff}
.brow.open .qty{display:flex}
.qty .lab{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);flex:0 0 auto}
.qty button.st{background:rgba(255,255,255,.12);border:1px solid rgba(243,227,176,.3);color:#fff;width:38px;height:38px;
border-radius:10px;font-size:1.1rem;font-weight:700;flex:0 0 auto}
.qty input{flex:1 1 60px;min-width:0;background:#fff;border:0;border-radius:10px;padding:10px;text-align:center;
font-weight:700;color:var(--ink)}
.qty .go{background:var(--gold-l);color:var(--maroon-ink);border:0;border-radius:10px;padding:11px 14px;font-weight:700;
font-size:.78rem;flex:0 0 auto}
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:22px 16px 0}
.trust div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px}
.trust b{display:block;font-size:.76rem;color:var(--maroon)}
.trust span{font-size:.74rem;color:var(--ink-2)}
footer{margin-top:30px;padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px));background:var(--maroon-ink);color:rgba(255,255,255,.75);font-size:.7rem}
footer b{color:var(--gold-l)}
footer p{margin-top:8px;line-height:1.6}
footer a{color:var(--gold-l)}
/* staff way in — deliberately quiet, and never for a buyer */
.fhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.deskin{flex:0 0 auto;display:inline-block;padding:6px 11px;border-radius:9px;
  border:1px solid rgba(243,227,176,.22);color:rgba(255,255,255,.55)!important;
  font-size:.58rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none}
.deskin:active{background:rgba(243,227,176,.12);color:var(--gold-l)!important}
@media (hover:hover){.deskin:hover{border-color:rgba(243,227,176,.45);color:var(--gold-l)!important}}

.wa{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:44;
display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:#1FA855;color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(31,168,85,.34)}
.wa svg{width:22px;height:22px;fill:currentColor}
.wa b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa:active{transform:scale(.94)}
.mine{position:fixed;left:16px;bottom:calc(146px + env(safe-area-inset-bottom,0px));z-index:44;background:#fff;color:var(--maroon);
border:1px solid var(--line);border-radius:999px;padding:13px 17px;font-size:.76rem;font-weight:600;
box-shadow:0 10px 26px rgba(94,10,26,.12);display:none}
.mine.on{display:inline-block}
.veil{position:fixed;inset:0;background:rgba(28,18,22,.5);z-index:60;opacity:0;pointer-events:none;transition:.25s}
.drawer.open .veil{opacity:1;pointer-events:auto}
.panel{position:fixed;z-index:61;background:var(--paper);display:flex;flex-direction:column;
top:auto;bottom:0;right:0;left:0;width:100%;height:93dvh;border-radius:22px 22px 0 0;
transform:translateY(102%);transition:transform .28s ease}
.drawer.open .panel{transform:none}
.dh{padding:18px 18px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
position:relative;flex:0 0 auto}
.dh::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
width:40px;height:4px;border-radius:99px;background:var(--line)}
.dh h3{font-family:var(--display);letter-spacing:.005em;font-size:1.3rem;font-weight:700;color:var(--maroon)}
.dh .x{background:none;border:0;font-size:1.5rem;color:var(--ink-2);line-height:1;padding:4px 6px}
.dbody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 18px}
.dfoot{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));background:#fff}
.ci{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.ci .nm{font-size:.86rem;font-weight:600}
.ci .mt{font-size:.72rem;color:var(--ink-2);margin-top:2px}
.ci .rm{background:none;border:0;color:var(--err);font-size:.72rem;font-weight:600;padding:8px}
.empty{text-align:center;color:var(--ink-2);font-size:.82rem;padding:46px 10px}
.gstrow{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:.78rem;color:var(--ink-2)}
.gstrow input{width:19px;height:19px;accent-color:var(--maroon)}
.totrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.totrow span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.totrow b{font-family:var(--serif);font-size:1.7rem;color:var(--maroon)}
.btn{width:100%;border:0;border-radius:13px;padding:15px;font-size:.92rem;font-weight:600;transition:.15s}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.5}
.btn-pay{background:var(--maroon);color:#fff}
.btn-block{background:#fff;color:var(--maroon);border:1.5px solid var(--maroon);margin-bottom:9px}
.hint{font-size:.72rem;color:var(--ink-2);text-align:center;margin-top:9px;line-height:1.5}
.msg{margin-top:10px;font-size:.78rem;padding:11px 13px;border-radius:11px;line-height:1.45}
.msg.err{background:#FCEFEC;color:var(--err)}
.msg.ok{background:#EAF6EF;color:var(--ok)}
.step{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;z-index:3}
.step[hidden]{display:none}
.seg{display:flex;background:var(--line-2);border-radius:12px;padding:4px;margin-bottom:16px}
.seg button{flex:1;background:none;border:0;padding:11px;border-radius:9px;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--maroon);box-shadow:0 2px 8px rgba(94,10,26,.1)}
.f{margin-bottom:13px}
.f label{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:6px}
.f input,.f select{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px;background:#fff;color:var(--ink);outline:none}
.f input:focus,.f select:focus{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(94,10,26,.09)}
.f input.bad,.f select.bad{border-color:var(--err)}
.f .err{display:block;font-size:.74rem;color:var(--err);margin-top:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.74rem;color:var(--ink-2);margin:6px 0 4px;line-height:1.45}
.chk input{width:19px;height:19px;flex:0 0 auto;margin-top:1px;accent-color:var(--maroon)}
.back{background:none;border:0;color:var(--maroon);font-size:.8rem;font-weight:600;padding:6px 0}
.done{text-align:center;padding:16px 4px}
.done .ref{font-family:var(--serif);font-size:1.9rem;color:var(--maroon);margin:10px 0 4px;letter-spacing:.04em}
.done .cd{display:inline-block;background:var(--maroon);color:var(--gold-l);border-radius:999px;padding:8px 16px;
font-size:.8rem;font-weight:600;margin-top:12px;font-variant-numeric:tabular-nums}
.done table{width:100%;margin-top:18px;font-size:.78rem;text-align:left;border-collapse:collapse}
.done td{padding:8px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.done td+td{text-align:right;color:var(--ink);font-weight:600}
.olist{font-size:.8rem}
.olist .o{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;background:#fff}
.olist .o b{color:var(--maroon)}
.olist .o .s{float:right;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
background:var(--line-2);color:var(--ink-2);padding:4px 9px;border-radius:999px}
.olist .o .s.blocked{background:#FDF3D8;color:var(--gold-d)}
.olist .o .s.paid{background:#EAF6EF;color:var(--ok)}
.olist .o .m{color:var(--ink-2);font-size:.72rem;margin-top:5px}
@media(min-width:560px){
html{background:#2A0A12}
body{width:430px;margin:0 auto;min-height:100dvh;box-shadow:0 0 60px rgba(0,0,0,.45)}
.mine{left:calc(50vw - 215px + 16px)}
.wa{left:calc(50vw - 215px + 16px)}
.veil{background:rgba(20,10,14,.66)}
.panel{left:50%;right:auto;width:430px;transform:translate(-50%,102%)}
.drawer.open .panel{transform:translate(-50%,0)}
}

/* ============================================================
   APP BAR — the order lives on its own page now, so the bar is
   a real bottom bar, not a pill floating over the board.
   ============================================================ */
.appbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
background:#fff;border-top:1px solid var(--line);
padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.appbar.on{display:block}
.appbar a{display:flex;align-items:center;gap:12px;text-decoration:none;
background:var(--maroon);color:#fff;border-radius:15px;padding:14px 16px;
box-shadow:0 10px 26px rgba(84,16,31,.26);transition:.15s}
.appbar a:active{transform:scale(.99)}
.appbar .c{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;
background:var(--gold-l);color:var(--maroon-ink);font-size:.76rem;font-weight:700}
.appbar .l{flex:1 1 auto;min-width:0}
.appbar .l b{display:block;font-size:.9rem;font-weight:600;letter-spacing:.005em}
.appbar .l span{display:block;font-size:.7rem;color:rgba(255,255,255,.72);margin-top:1px}
.appbar .amt{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
@media(min-width:560px){.appbar{left:50%;right:auto;transform:translateX(-50%);width:430px;
border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* ============================================================
   FAQ — one question open at a time, nothing to read until asked
   ============================================================ */
.faq{margin:12px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;box-shadow:0 6px 18px rgba(94,10,26,.05)}
.faq details{border-top:1px solid var(--line-2)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;
padding:15px 16px;font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin:5px 0 0 auto;
border-right:2px solid var(--maroon);border-bottom:2px solid var(--maroon);
transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--maroon)}
.faq .a{padding:0 16px 16px;font-size:.82rem;line-height:1.65;color:var(--ink-2)}
.faq .a b{color:var(--ink);font-weight:600}
.faq .a a{color:var(--maroon);font-weight:600}

/* ============================================================
   COMPANY — the registered facts, set like a certificate
   ============================================================ */
.co{margin:12px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:18px 16px;box-shadow:0 6px 18px rgba(94,10,26,.05)}
.co h3{font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--maroon);letter-spacing:.005em}
.co dl{margin-top:12px}
.co dt{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-top:13px}
.co dd{font-size:.84rem;color:var(--ink);margin-top:3px;line-height:1.55}
.co dd.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.pagetop{position:sticky;top:0;z-index:40;background:var(--paper);
padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:12px}
.pagetop .bk{background:none;border:0;color:var(--maroon);font-size:1.3rem;line-height:1;padding:6px 8px 6px 0;
text-decoration:none;display:grid;place-items:center}
.pagetop h1{font-family:var(--display);font-size:1.22rem;font-weight:600;color:var(--maroon);letter-spacing:.005em}
.pagetop .sub{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-top:2px}
.pg{padding:0 0 22px}
.card{margin:14px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:16px;box-shadow:0 6px 18px rgba(94,10,26,.05)}
.card h2{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--maroon);
letter-spacing:.005em;margin-bottom:2px}
.card .cs{font-size:.74rem;color:var(--ink-2);line-height:1.5}
.li{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:13px 0;border-bottom:1px solid var(--line-2)}
.li:last-child{border-bottom:0}
.li .nm{font-size:.86rem;font-weight:600;line-height:1.3}
.li .mt{font-size:.72rem;color:var(--ink-2);margin-top:3px}
.li .rt{text-align:right;flex:0 0 auto}
.li .am{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.li .rm{background:none;border:0;color:var(--err);font-size:.7rem;font-weight:600;padding:5px 0 0;margin-left:auto;display:block}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--ink-2);padding:7px 0}
.sumrow b{color:var(--ink);font-weight:600}
.sumrow.big{border-top:1px solid var(--line);margin-top:8px;padding-top:13px}
.sumrow.big span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.sumrow.big b{font-family:var(--sans);font-size:1.55rem;letter-spacing:-.02em;color:var(--maroon)}
.pay-opt{display:block;border:1.5px solid var(--line);border-radius:15px;padding:14px;margin-top:10px;
background:#fff;cursor:pointer;transition:.15s}
.pay-opt.on{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(84,16,31,.07)}
.pay-opt .h{display:flex;align-items:center;gap:10px}
.pay-opt .h b{font-size:.88rem;font-weight:600}
.pay-opt .h .pill{margin-left:auto;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
background:var(--line-2);color:var(--ink-2);border-radius:999px;padding:4px 9px}
.pay-opt .h .pill.gold{background:#FDF3D8;color:var(--gold-d)}
.pay-opt input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--maroon)}
.pay-opt p{font-size:.74rem;color:var(--ink-2);margin:6px 0 0 29px;line-height:1.5}
.bank{margin:12px 0 0 0;border:1px dashed rgba(84,16,31,.3);border-radius:14px;background:var(--paper-2);padding:14px;display:none}
.pay-opt.on .bank{display:block}
.bank .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;
border-bottom:1px solid var(--line)}
.bank .row:last-child{border-bottom:0}
.bank .k{font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);font-weight:700;flex:0 0 auto}
.bank .v{font-size:.84rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.01em;
word-break:break-word}
.bank .cp{background:none;border:0;color:var(--maroon);font-size:.68rem;font-weight:700;padding:4px 0 0;
letter-spacing:.06em;text-transform:uppercase}
.bank .warn{font-size:.72rem;color:var(--gold-d);background:#FDF8EA;border-radius:10px;padding:10px 12px;margin-top:11px;line-height:1.5}
.stick{position:sticky;bottom:0;z-index:30;background:#fff;
border-top:1px solid var(--line);margin-top:18px;
padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.modal{position:fixed;inset:0;z-index:70;display:none}
.modal.on{display:block}
.modal .mv{position:absolute;inset:0;background:rgba(28,18,22,.55)}
.modal .mp{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:22px 22px 0 0;
max-height:92dvh;display:flex;flex-direction:column}
@media(min-width:560px){.modal .mp{left:50%;right:auto;width:430px;transform:translateX(-50%)}}

/* ============================================================
   SPLASH — the first half-second. Plain white, the wordmark,
   and a bar that tracks the real work: fonts, then the board.
   ============================================================ */
.splash{position:fixed;inset:0;z-index:999;background:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
padding:0 24px;transition:opacity .45s ease,visibility .45s ease}
.splash img{width:154px;max-width:52vw;height:auto;
opacity:0;transform:translateY(6px);animation:splashIn .7s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes splashIn{to{opacity:1;transform:none}}
.splash .track{width:172px;max-width:56vw;height:3px;border-radius:99px;
background:#EFE7E2;overflow:hidden}
.splash .fill{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--maroon),var(--gold-d) 70%,var(--gold));
transition:width .32s cubic-bezier(.4,0,.2,1)}
.splash .pct{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;
color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:-12px}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.splash img{animation:none;opacity:1;transform:none}
.splash .fill{transition:none}
}

/* ============================================================
   WELCOME — shown once, after the splash clears. The photograph
   carries it; the words stay out of the way.
   ============================================================ */
.lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px))}
.lb.on{display:flex}
.lb .veil{position:fixed;inset:0;background:rgba(24,12,16,.38);
z-index:0;pointer-events:auto;
opacity:0;transition:opacity .35s ease}
.lb.on .veil{opacity:1}
.lb .box{position:relative;z-index:2;width:100%;max-width:352px;max-height:100%;
background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 26px 70px rgba(30,8,14,.42);
opacity:0;transform:translateY(14px);
transition:opacity .4s cubic-bezier(.22,.8,.3,1),transform .4s cubic-bezier(.22,.8,.3,1)}
.lb.on .box{opacity:1;transform:none}
.lb .box,.lb .shot{backdrop-filter:none;-webkit-backdrop-filter:none;filter:none}
.lb.on .box{will-change:auto}
.lb picture{display:block;line-height:0}
.lb .shot{display:block;width:100%;height:auto;background:#F3EDE6;image-rendering:auto;-webkit-user-select:none;user-select:none}
.lb .cap{padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));text-align:center}
.lb .cap h2{font-family:var(--display);font-size:1.32rem;font-weight:600;color:var(--maroon);
letter-spacing:.005em;line-height:1.2}
.lb .cap p{font-size:.8rem;color:var(--ink-2);line-height:1.55;margin-top:7px}
.lb .cap .btn{margin-top:15px}
.lb .x{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;
background:rgba(20,10,14,.55);color:#fff;font-size:1.15rem;line-height:1;
display:grid;place-items:center}
.lb .x:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
.lb .box,.lb .veil{transition:none}
.lb .box{opacity:1;transform:none}
}

/* ---- welcome open: page stays perfectly sharp, no filter anywhere ---- */
body.lb-open{overflow:hidden}
.lb .box{box-shadow:0 30px 80px rgba(30,8,14,.5)}

/* ============================================================
   FLOATING TAB BAR
   ------------------------------------------------------------
   Four places worth going, always within thumb reach. It floats
   clear of the page rather than sitting flush, so the board
   still reads as a sheet of paper underneath. The tab you are
   on is a filled pill with its name; the rest are just icons,
   which keeps the bar quiet until you look for it.
   ============================================================ */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;
width:calc(100% - 28px);max-width:420px;
background:#fff;border-radius:26px;
box-shadow:0 10px 34px rgba(30,8,14,.16),0 2px 8px rgba(30,8,14,.08);
display:flex;align-items:center;justify-content:space-around;
padding:9px 10px;gap:4px}
.tabbar a{display:flex;align-items:center;justify-content:center;gap:7px;
text-decoration:none;color:var(--ink-2);
padding:9px 12px;border-radius:99px;min-width:46px;min-height:44px;
transition:background .22s ease,color .22s ease;position:relative}
.tabbar a svg{width:21px;height:21px;flex:none;display:block}
.tabbar a .lbl{display:none;font-size:.8rem;font-weight:600;letter-spacing:.005em;white-space:nowrap}
.tabbar a.on{background:var(--maroon);color:#fff;padding:9px 16px}
.tabbar a.on .lbl{display:inline}
.tabbar a:active{transform:scale(.96)}
.tabbar .pip{position:absolute;top:4px;right:6px;min-width:17px;height:17px;
border-radius:99px;background:var(--maroon);color:#fff;
font-size:.62rem;font-weight:700;line-height:17px;text-align:center;padding:0 4px;
border:2px solid #fff}
.tabbar a.on .pip{background:#fff;color:var(--maroon);border-color:var(--maroon)}
body{padding-bottom:104px}

/* The cart summary rides above the tab bar. Only the vertical
   position and the skin are set here — left and right are left
   alone, because on a wide screen the body is a 430px column and
   an earlier rule already centres this bar on it. Setting left
   here as well fought that rule and threw the bar 200px off the
   left edge of the screen. */
.appbar{bottom:calc(84px + env(safe-area-inset-bottom,0px));
border-top:0;border-radius:18px;
box-shadow:0 8px 26px rgba(30,8,14,.14)}
@media (max-width:559px){ .appbar{left:14px;right:14px} }
.stick{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* the tab bar tracks the column, never wider than it */
@media (min-width:560px){ .tabbar{max-width:402px} }

/* The install guide gained Mac and desktop tabs; four across is unreadable
   on a phone, so the strip wraps into 2x2 and goes back to one row when
   there is room. */
.ins .tabs{flex-wrap:wrap;gap:2px}
.ins .tabs button{flex:1 1 calc(50% - 4px);white-space:nowrap}