/* PanelHawk storefront.

   The world is the one the owner chose for the public site (web/styles.css,
   commit 1029ca6: "paper ground, navy ink, amber sightline, every figure set in
   tabular monospace. Light theme per the owner's decision."). The shop is the
   same site, so the tokens are the same tokens and a visitor coming from
   /market/ does not cross a border.

   What commerce added: --confirmed for a delivered order and a credited
   balance, --median for what another panel charges, and amber reserved for the
   primary action. Nothing else on a page wears filled amber, or the buy button
   stops reading as the buy button.

   Every directional property is logical (margin-inline, padding-inline,
   text-align:start, inset-inline), because Arabic flips the whole page and
   nothing here may need a second stylesheet to do it. */

@font-face{font-family:"Archivo";src:url("fonts/Archivo.woff2")format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMono.woff2")format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMonoMed.woff2")format("woff2");font-weight:500;font-display:swap}

:root{
  --field:#F3F5F7; --raised:#FFFFFF; --field-2:#ECEFF3;
  --horizon:#D3D9E2; --rule-soft:#E7EBF1; --control:#C6CEDA;
  --amber:#F5A623; --amber-ink:#8A5104; --amber-bright:#FFB735;
  --amber-wash:#FDF1DC; --amber-line:#E8C489; --amber-tint:#FFFAF0;
  --bone:#0F1A2B; --bone-dim:#54637C;
  /* What another panel charges. Never our own price, never decoration. */
  --median:#1D6F80; --median-wash:#E3F0F2; --median-line:#B5D6DC;
  /* A delivered order and a credited balance. Nothing else. */
  --confirmed:#2F6B45; --confirmed-wash:#E7F2EA; --confirmed-line:#BBD8C5;
  --loss:#B23B2C; --loss-wash:#FBECE9; --loss-line:#EBC3BC;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gut:clamp(16px,4vw,56px);
  --top:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --lift:0 1px 2px rgba(15,26,43,.04),0 10px 30px -22px rgba(15,26,43,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#B9C2CF var(--field)}
body{margin:0;background:var(--field);color:var(--bone);
  font:400 15.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-wrap:break-word}
@media(min-width:768px){body{font-size:16px}}
::selection{background:var(--amber);color:#101A2B}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--field)}
::-webkit-scrollbar-thumb{background:#B9C2CF;border:3px solid var(--field);border-radius:6px}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}
a{color:var(--amber-ink);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:#6B3E02}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block}
input,button,select,textarea{font:inherit;color:inherit;caret-color:var(--amber-ink)}
button{cursor:pointer}
table{border-collapse:collapse}

/* Every comparable figure is tabular monospace so a column of five orders of
   magnitude ($0.0006 to $54.33) still lines up on its decimal point. */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"zero"1;letter-spacing:-.01em}
.dim{color:var(--bone-dim)}
.small{font-size:13px}
.nowrap{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}
.ic-sm{width:15px;height:15px;flex:none}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--bone);
  color:#fff;padding:10px 14px;border-radius:3px;text-decoration:none}
.skip:focus{top:10px;color:#fff}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:760px}

/* --- header ------------------------------------------------------------- */

.hd{position:sticky;top:0;z-index:30;background:rgba(243,245,247,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--horizon)}
.hd-in{display:flex;align-items:center;gap:12px;height:var(--top);min-width:0}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--bone);
  font-weight:500;letter-spacing:-.02em;font-size:17px;flex:none}
.brand img{width:24px;height:24px;flex:none;object-fit:contain}
.brand i{font-style:normal;color:var(--amber-ink)}
.hd-nav{display:none;gap:20px;margin-inline-start:14px;font-size:14.5px}
.hd-nav a{color:var(--bone-dim);text-decoration:none}
.hd-nav a:hover,.hd-nav a[aria-current=page]{color:var(--bone)}
@media(min-width:860px){.hd-nav{display:flex}}
.hd-act{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex:none}
.hd-bal{display:flex;align-items:center;gap:6px;height:34px;padding-inline:10px;
  border:1px solid var(--horizon);border-radius:3px;background:var(--raised);
  text-decoration:none;color:var(--bone);font-size:13.5px}
.hd-bal b{font:500 13.5px var(--mono);font-variant-numeric:tabular-nums}
.hd-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:3px;color:var(--bone-dim);text-decoration:none;flex:none}
.hd-ic:hover,.hd-ic[aria-current=page]{background:var(--field-2);color:var(--bone)}
.hd-log{color:var(--bone-dim);text-decoration:none;font-size:14px;padding-inline:6px}
@media(max-width:520px){.hd-log{display:none}}

/* --- buttons ------------------------------------------------------------ */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border:1px solid var(--control);border-radius:3px;
  background:var(--raised);color:var(--bone);font:500 15px var(--sans);
  text-decoration:none;white-space:nowrap;transition:background .14s,border-color .14s}
.btn:hover{background:var(--field-2);color:var(--bone)}
.btn-sm{min-height:36px;padding:0 11px;font-size:13.5px}
/* The one filled amber on any page. */
.btn-go{background:var(--amber);border-color:#D9901A;color:#101A2B;font-weight:500;
  box-shadow:0 1px 0 rgba(15,26,43,.08)}
.btn-go:hover{background:var(--amber-bright);border-color:#D9901A;color:#101A2B}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* --- forms -------------------------------------------------------------- */

.field{display:grid;gap:6px;min-width:0}
.field>label{font-size:13.5px;color:var(--bone-dim)}
.input{width:100%;height:46px;padding:0 12px;border:1px solid var(--control);
  border-radius:3px;background:var(--raised);color:var(--bone);font-size:15.5px;
  transition:border-color .14s,box-shadow .14s}
.input:hover{border-color:#A9B4C4}
.input:focus{outline:0;border-color:var(--amber-ink);box-shadow:0 0 0 3px rgba(245,166,35,.3)}
.input[aria-invalid=true]{border-color:var(--loss);box-shadow:0 0 0 3px rgba(178,59,44,.12)}
.input.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
select.input{-webkit-appearance:none;appearance:none;padding-inline-end:34px;
  background:var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2354637C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m19 9-7 6-7-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px}
[dir=rtl] select.input{background-position:left 10px center}
@media(max-width:600px){.input{font-size:16px}}  /* no zoom on focus in iOS */
.hint{font-size:13px;color:var(--bone-dim)}
.err{display:flex;gap:6px;align-items:flex-start;color:var(--loss);font-size:13.5px}
.err svg{width:16px;height:16px;flex:none;margin-top:2px}

/* --- search ------------------------------------------------------------- */

.srch{display:flex;gap:8px;min-width:0}
.srch .input{flex:1 1 auto;min-width:0}
.srch-big .input{height:52px;font-size:17px}
.srch-big .btn{min-height:52px;padding-inline:18px}
@media(max-width:480px){.srch-big .btn{padding-inline:14px}.srch-big .btn span{display:none}}

/* --- notes -------------------------------------------------------------- */

.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:4px;
  background:var(--raised);border:1px solid var(--horizon);font-size:14.5px}
.note>svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--bone-dim)}
.note-ok{background:var(--confirmed-wash);border-color:var(--confirmed-line)}
.note-ok>svg{color:var(--confirmed)}
.note-warn{background:var(--amber-wash);border-color:var(--amber-line)}
.note-warn>svg{color:var(--amber-ink)}
.note-err{background:var(--loss-wash);border-color:var(--loss-line)}
.note-err>svg{color:var(--loss)}
/* A queue is not an error: bone-dim on paper with an amber tick, never red,
   never a spinner. */
.note-queue{background:var(--raised);border-color:var(--horizon);color:var(--bone-dim)}
.note-queue>svg{color:var(--amber-ink)}
.flash{margin-bottom:16px}

/* --- bands and the horizon --------------------------------------------- */

/* One 1px rule runs the length of the page and every section hangs from it,
   with an amber calibration tick where a section begins. Symmetric, so the
   Arabic flip leaves it alone; the tick uses inset-inline-start, so it mirrors. */
.band{position:relative;border-top:1px solid var(--horizon)}
.band::before{content:"";position:absolute;top:-1px;width:30px;height:3px;background:var(--amber);
  inset-inline-start:max(var(--gut),calc((100% - 1180px) / 2 + var(--gut)))}
.band-in{padding-block:clamp(26px,5vw,56px)}
.band-tight .band-in{padding-block:clamp(20px,3.5vw,34px)}
.band-quiet{background:var(--field-2)}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:14px}
.sec-h h2{font-size:1.2rem}
.sec-h p{color:var(--bone-dim);font-size:14px}
.sec-h .more{margin-inline-start:auto;font-size:14px}

/* --- hero --------------------------------------------------------------- */

.hero{padding-block:clamp(26px,6vw,60px) clamp(20px,3vw,30px)}
.hero h1{font-size:clamp(1.75rem,6.4vw,3.25rem);letter-spacing:-.03em;max-width:22ch}
.hero-lead{margin-top:14px;color:var(--bone-dim);font-size:16px;max-width:64ch}
@media(min-width:768px){.hero-lead{font-size:17px}}
/* The published margin. It is the most differentiating sentence available in a
   market where nobody says what they pay, so it sits near the top. */
.hero-margin{margin-top:16px;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:9px 13px;border:1px solid var(--amber-line);background:var(--amber-wash);
  border-radius:3px;font-size:14.5px}
.hero-margin b{font:500 1.05rem var(--mono);font-variant-numeric:tabular-nums}
.hero-search{margin-top:22px;max-width:640px}

/* The focal moment: the size of the catalogue, on the horizon rule, the only
   number on the page at display size. It is not a comparative claim - we buy
   from the same public lists we compare against, so there is no honest
   "cheaper than every panel" figure to print (decision 47). */
.figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding-block:16px 22px;border-top:1px solid var(--horizon);position:relative}
.figure::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:30px;height:3px;background:var(--amber)}
.figure b{font:500 clamp(2.4rem,13vw,4.5rem)/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em}
.figure span{color:var(--bone-dim);font-size:15px;max-width:34ch}

/* The live counters, on the horizon. A tile whose figure could not be computed
   is not rendered at all - never a zero. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--horizon)}
@media(min-width:720px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tiles>div{position:relative;padding:14px 14px 15px;border-bottom:1px solid var(--rule-soft);
  border-inline-end:1px solid var(--rule-soft);min-width:0}
.tiles>div::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:16px;height:2px;background:var(--amber)}
@media(min-width:720px){.tiles>div{border-bottom:0}.tiles>div:last-child{border-inline-end:0}}
@media(max-width:719px){.tiles>div:nth-child(2n){border-inline-end:0}}
.tiles b{display:block;font:500 clamp(1.3rem,5vw,1.7rem)/1.15 var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.tiles span{display:block;margin-top:3px;font-size:12.5px;color:var(--bone-dim)}

/* --- platform entries --------------------------------------------------- */

.plats{display:grid;gap:1px;background:var(--horizon);border:1px solid var(--horizon);border-radius:4px;overflow:hidden}
@media(min-width:520px){.plats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:860px){.plats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plats a{display:flex;align-items:baseline;gap:8px;padding:14px 15px;background:var(--raised);
  text-decoration:none;color:var(--bone);min-height:52px}
.plats a:hover{background:var(--amber-tint);color:var(--bone)}
.plats b{font-weight:500}
.plats span{margin-inline-start:auto;font:400 13px var(--mono);font-variant-numeric:tabular-nums;color:var(--bone-dim)}
.plats-more{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px}
.plats-more a{display:inline-block;padding:5px 10px;border:1px solid var(--horizon);border-radius:999px;
  background:var(--raised);text-decoration:none;color:var(--bone-dim)}
.plats-more a:hover{border-color:var(--amber-line);color:var(--bone)}

/* --- product table ----------------------------------------------------- */

.tbl-wrap{background:var(--raised);border:1px solid var(--horizon);border-radius:4px;overflow:hidden}
.tbl{width:100%;font-size:14.5px}
.tbl caption{text-align:start;padding:11px 15px;color:var(--bone-dim);font-size:13px;border-bottom:1px solid var(--horizon)}
.tbl th{text-align:start;font-weight:400;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bone-dim);padding:9px 14px;border-bottom:1px solid var(--horizon);background:#FAFBFC}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--amber-tint)}
.tbl .r{text-align:end}
.tbl a{color:var(--bone);text-decoration:none;font-weight:500}
.tbl a:hover{color:var(--amber-ink);text-decoration:underline}
.t-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--bone-dim);font-weight:400}
.t-ours{font:500 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.t-other{font:400 13.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--median);white-space:nowrap}
/* Not the confirmed green: that colour means a delivered order and a
   credited balance, and a discount is neither. */
.t-cut{font:500 13.5px var(--mono);color:var(--bone);white-space:nowrap}
.t-empty{padding:22px 15px;color:var(--bone-dim)}

/* On a phone every row becomes a block: the title on its own line, the figures
   labelled underneath. A 4-column table at 390px is a horizontal scrollbar
   nobody finds. */
@media(max-width:700px){
  .tbl,.tbl tbody,.tbl tr{display:block}
  .tbl thead{display:none}
  .tbl tr{padding:12px 14px;border-bottom:1px solid var(--rule-soft)}
  .tbl tbody tr:last-child{border-bottom:0}
  .tbl td{display:inline-flex;align-items:baseline;gap:5px;padding:0;border:0;
    margin-top:7px;margin-inline-end:15px}
  .tbl td:first-child{display:block;margin:0}
  .tbl td[data-label]::before{content:attr(data-label);font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--bone-dim);font-family:var(--sans)}
  .tbl .r{text-align:start}
}

/* --- listing rows (category and search) -------------------------------- */

.rows{display:grid;gap:1px;background:var(--horizon);border:1px solid var(--horizon);border-radius:4px;overflow:hidden}
.rows>li{background:var(--raised)}
.rows a.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;
  padding:12px 14px;text-decoration:none;color:var(--bone);align-items:baseline;min-height:56px}
.rows a.row:hover{background:var(--amber-tint)}
.row-t{grid-column:1;font-weight:500;font-size:14.5px}
.row-m{grid-column:1;display:flex;flex-wrap:wrap;gap:3px 10px;font-size:12.5px;color:var(--bone-dim)}
.row-p{grid-column:2;grid-row:1/3;text-align:end;align-self:center}
.row-p b{display:block;font:500 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* What another panel charges. Deliberately not a <s>: a struck-through
   price is the oldest lie in this market, and this one is real. */
.row-p .other{display:block;font:400 12.5px var(--mono);color:var(--median);white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;
  border:1px solid var(--horizon);background:var(--field);font-size:11.5px;color:var(--bone-dim);
  white-space:nowrap}
.chip-cut{border-color:var(--control);background:var(--field-2);color:var(--bone)}
.chip-off{border-color:var(--horizon);background:var(--field-2)}

/* --- filters and pager -------------------------------------------------- */

.filters{display:grid;gap:10px;padding:12px 14px;background:var(--raised);
  border:1px solid var(--horizon);border-radius:4px;margin-bottom:16px}
@media(min-width:720px){.filters{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}}
.filters .btn{min-height:46px}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;font-size:14px}
.pager .dim{margin-inline-end:auto}
.pager a,.pager span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid var(--horizon);border-radius:3px;background:var(--raised);text-decoration:none;color:var(--bone)}
.pager span{color:var(--bone-dim);opacity:.6}

/* --- product page ------------------------------------------------------- */

.crumb{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--bone-dim);padding-block:12px}
.crumb a{color:var(--bone-dim);text-decoration:none}
.crumb a:hover{color:var(--bone)}
.pr-h h1{font-size:clamp(1.3rem,4.6vw,1.9rem);max-width:30ch}
.pr-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 8px}

/* Our price at display size; what another panel charges under it, smaller,
   in the market cyan. Where no other panel sells it the line is absent. */
.price{margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.price b{font:500 clamp(2rem,9vw,2.9rem)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.price i{font-style:normal;font-size:14px;color:var(--bone-dim)}
.price-cmp{margin-top:6px;font-size:13.5px;color:var(--median)}
.price-cmp b{font:500 13.5px var(--mono);font-variant-numeric:tabular-nums}

.buy{margin-top:16px;padding:14px;background:var(--raised);border:1px solid var(--horizon);
  border-radius:4px;display:grid;gap:12px;position:relative}
.buy::before{content:"";position:absolute;top:-1px;inset-inline-start:14px;width:26px;height:3px;background:var(--amber)}
.buy-h{font-size:14px;color:var(--bone-dim)}
.buy-row{display:grid;gap:12px}
@media(min-width:620px){.buy-row{grid-template-columns:minmax(0,1fr) 180px}}
.buy-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding-top:10px;border-top:1px solid var(--rule-soft)}
.buy-total b{font:500 1.35rem var(--mono);font-variant-numeric:tabular-nums}
.buy-total span{color:var(--bone-dim);font-size:13.5px}
.buy-short{font-size:13.5px;color:var(--bone-dim)}

.facts{display:grid;gap:8px 18px;margin-top:8px;font-size:14.5px;
  grid-template-columns:max-content minmax(0,1fr)}
.facts dt{color:var(--bone-dim)}
.facts dd{margin:0}
.facts .num{white-space:nowrap}
/* A 34-character TRON address is not a figure: nowrap made it 291px wide in a
   245px box and the whole top-up page scrolled sideways at 390. It wraps, and
   it stays monospace so a customer can check it character by character. */
.facts .addr{font-family:var(--mono);white-space:normal;word-break:break-all;
  overflow-wrap:anywhere;line-height:1.45}

/* --- account and orders ------------------------------------------------- */

.bal{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:16px;
  background:var(--raised);border:1px solid var(--horizon);border-radius:4px;position:relative}
.bal::before{content:"";position:absolute;top:-1px;inset-inline-start:16px;width:26px;height:3px;background:var(--amber)}
.bal b{font:500 clamp(1.7rem,7vw,2.3rem)/1 var(--mono);font-variant-numeric:tabular-nums}
.bal .btn{margin-inline-start:auto}
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;
  border:1px solid var(--horizon);background:var(--field);font-size:12.5px;white-space:nowrap}
.st-done{border-color:var(--confirmed-line);background:var(--confirmed-wash);color:var(--confirmed)}
.st-wait{border-color:var(--horizon);background:var(--raised);color:var(--bone-dim)}
.st-part{border-color:var(--amber-line);background:var(--amber-wash);color:var(--amber-ink)}
.st-bad{border-color:var(--loss-line);background:var(--loss-wash);color:var(--loss)}
/* The queue reads as a queue: a slow amber tick on the rule, never a spinner. */
.tick{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber)}
@media(prefers-reduced-motion:no-preference){
  .st-wait .tick{animation:pulse 2.4s var(--ease) infinite}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
}
.tl{display:grid;gap:0;margin-top:6px}
.tl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;
  padding-block:9px;border-bottom:1px solid var(--rule-soft)}
.tl li:last-child{border-bottom:0}
.tl time{font:400 13px var(--mono);color:var(--bone-dim);white-space:nowrap}
.ledger{width:100%;font-size:14px}
.ledger th{text-align:start;font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bone-dim);padding:8px 12px;border-bottom:1px solid var(--horizon)}
.ledger td{padding:9px 12px;border-bottom:1px solid var(--rule-soft)}
.ledger .r{text-align:end}
.ledger .in{color:var(--confirmed);font-family:var(--mono);font-variant-numeric:tabular-nums}
.ledger .out{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --- prose (faq, terms, privacy, how it works) ------------------------- */

.prose{max-width:68ch;display:grid;gap:14px;font-size:15.5px;line-height:1.65}
.prose h2{font-size:1.15rem;margin-top:12px}
.prose h3{font-size:1rem;margin-top:8px}
.prose ul{display:grid;gap:8px;padding-inline-start:20px;list-style:disc}
.prose li::marker{color:var(--bone-dim)}
.steps{counter-reset:s;display:grid;gap:14px;margin-top:4px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{counter-increment:s;padding:14px 15px;background:var(--raised);
  border:1px solid var(--horizon);border-radius:4px;position:relative}
.steps li::before{content:counter(s);position:absolute;top:-1px;inset-inline-start:15px;
  padding-inline:5px;background:var(--amber);color:#101A2B;font:500 12px var(--mono);border-radius:0 0 3px 3px}
.steps b{display:block;margin-top:10px;font-weight:500}
.steps p{margin-top:4px;color:var(--bone-dim);font-size:14px}

/* --- footer ------------------------------------------------------------- */

.ft{margin-top:8px;border-top:1px solid var(--horizon);background:var(--field-2)}
.ft-in{display:grid;gap:16px;padding-block:22px 30px}
@media(min-width:760px){.ft-in{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.ft-links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}
.ft-links a{color:var(--bone-dim);text-decoration:none}
.ft-links a:hover{color:var(--bone)}
.bot-link{display:inline;margin:0}
.bot-link button{border:0;background:none;padding:0;font:inherit;color:var(--amber-ink);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;cursor:pointer}
.bot-link button:hover{color:#6B3E02}
.ft-links .bot-link button{color:var(--bone-dim);text-decoration:none}
.ft-links .bot-link button:hover{color:var(--bone)}
.ft-sp{font-size:13px;color:var(--bone-dim)}
.lang{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;min-width:0;font-size:13px}
.lang a{color:var(--bone-dim);text-decoration:none;padding:6px 0}
.lang a:hover{color:var(--bone)}
.lang a[aria-current]{color:var(--bone);text-decoration:underline;text-underline-offset:.2em}
.ft-note{margin-top:12px;font-size:13px;color:var(--bone-dim);max-width:70ch}
.band-sep{margin-top:26px}
.fold{margin-top:12px}
.fold summary{cursor:pointer;display:inline-block;font-size:14px;color:var(--amber-ink);font-weight:500;padding:4px 0}
.fold summary:hover{text-decoration:underline}
.pager .cur{opacity:1;color:var(--bone);font-weight:500;border-color:var(--bone-dim)}
.pager .gap{border:0;padding:0 2px;min-height:0}
.cat-sum{margin-top:6px;max-width:68ch;color:var(--bone-dim);font-size:14.5px;line-height:1.6}
.facts-help{margin-top:10px;font-size:14px}
.hub-h{margin-top:14px;font-size:13px;color:var(--bone-dim);letter-spacing:.02em}