/* =====================================================================
   PurchaseBarcode — site.css
   Direction B: "precision / print-shop modern".
   The barcode is the design language: black ink on white paper, hairline
   rules, tabular figures everywhere, one signal colour (scanner red) used
   only to point. Radius 0. Shadows none. Motion none.
   Tokens first; everything below is built from them. No framework.
   ===================================================================== */

:root{
  /* palette */
  --ink:#111111;         /* text, rules of record, primary buttons */
  --ink-2:#5E5B55;       /* captions, secondary text (5.9:1 on paper) */
  --ink-3:#2A2A2A;       /* hover for ink surfaces */
  --rule:#D8D4CC;        /* hairlines */
  --rule-2:#E9E6DF;      /* soft fills */
  --paper:#FFFFFF;       /* page */
  --paper-2:#F4F2ED;     /* uncoated-stock bands */
  --signal:#E23A0F;      /* the one signal colour — scanner red (fills, marks) */
  --signal-text:#C93009; /* the same red, dark enough for text and button faces (5.4:1 on paper) */
  --ok:#1F6B3A;          /* one green, status only (6.5:1) */
  --warn:#8A5A00;        /* one amber, status only (5.6:1) */
  --band-cap:#A8A49C;    /* captions on ink */
  --band-copy:#C9C5BD;   /* body on ink */
  /* type */
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --fs-2xs:.6875rem;  /* 11 */
  --fs-xs:.75rem;     /* 12 */
  --fs-sm:.8125rem;   /* 13 */
  --fs-base:.9375rem; /* 15 */
  --fs-md:1.125rem;   /* 18 */
  --fs-lg:1.375rem;   /* 22 */
  --fs-xl:2rem;       /* 32 */
  --fs-2xl:2.75rem;   /* 44 */
  --fs-3xl:clamp(2.5rem,5.6vw,4.75rem); /* 40–76 */
  /* spacing (4-px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --wrap:1280px;--gutter:24px;
  color-scheme:light;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-display);font-size:var(--fs-base);line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-width:0;min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto;min-width:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
img,svg{display:block;max-width:100%}
svg{height:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;vertical-align:top}
address{font-style:normal}
summary{cursor:pointer}
[hidden]{display:none !important} /* author display rules (e.g. .order-sum dl div{display:flex}) must never resurrect a hidden row */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:8px 12px;font-size:var(--fs-sm)}
.skip:focus{left:8px}

/* ---------- primitives ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);min-width:0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.cap{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.cap b{color:var(--ink);font-weight:600}
.cap.block{display:block;margin-bottom:var(--s3)}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.sig{color:var(--signal-text)}
.sq{display:inline-block;width:8px;height:8px;background:var(--signal);vertical-align:middle;margin-right:8px;position:relative;top:-1px;flex:none}
.sq.ink{background:var(--ink)}
.sq.hollow{background:transparent;border:1px solid var(--ink)}
.section{padding:var(--s9) 0;border-top:1px solid var(--rule)}
.section.tight{padding:var(--s8) 0}
.section.flush{border-top:0;padding-top:0}
.band{background:var(--paper-2)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink .cap{color:var(--band-cap)}
.band-ink .cap b{color:var(--paper)}
.band-ink .muted{color:var(--band-copy)}
.arrow::after{content:"\2192";margin-left:.4em}
.link{border-bottom:1px solid var(--ink);padding-bottom:1px;color:var(--ink)}
.link:hover{border-color:var(--signal);color:var(--signal-text)}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-sm)}
.measure{max-width:40em}
.lead{font-size:var(--fs-md);line-height:1.45;max-width:36em}
.stack>*+*{margin-top:var(--s4)}
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}.mb-5{margin-bottom:var(--s5)}.mb-6{margin-bottom:var(--s6)}
.right{text-align:right}
.hide-m,.hide-s{display:revert}
.show-m{display:none}

/* type */
.h-display{font-size:var(--fs-3xl);font-weight:700;font-stretch:112%;line-height:.96;letter-spacing:-.025em;overflow-wrap:anywhere}
.h-display .lt{font-weight:400;font-stretch:100%;letter-spacing:-.02em}
.h1{font-size:var(--fs-2xl);font-weight:700;font-stretch:110%;line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere}
.h2{font-size:var(--fs-xl);font-weight:600;font-stretch:108%;line-height:1.05;letter-spacing:-.02em}
.h3{font-size:var(--fs-md);font-weight:600;font-stretch:104%;line-height:1.25;letter-spacing:-.01em}
.h4{font-size:var(--fs-base);font-weight:600;line-height:1.3}

/* section header: caption + heading left, lead right */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s4);align-items:end;margin-bottom:var(--s7)}
.sec-head .t{grid-column:1/8}
.sec-head .d{grid-column:8/13;color:var(--ink-2);font-size:var(--fs-base);max-width:34em}
.sec-head .cap{display:block;margin-bottom:var(--s3)}
.band-ink .sec-head .d{color:var(--band-copy)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:48px;padding:0 var(--s5);border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 var(--fs-sm)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;border-radius:0;text-align:center}
.btn:hover{background:var(--paper-2)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:#000}
.btn-signal{background:var(--signal-text);color:#FFFFFF;border-color:var(--signal-text)}
.btn-signal:hover{background:#A8280A;border-color:#A8280A}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-paper:hover{background:var(--rule-2)}
.btn-sm{height:36px;padding:0 var(--s4);font-size:var(--fs-xs)}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.55;cursor:not-allowed}
.band-ink .btn{border-color:var(--paper);color:var(--paper)}
.band-ink .btn:hover{background:var(--ink-3)}
.band-ink .btn-signal{background:var(--signal-text);border-color:var(--signal-text);color:#FFFFFF}
.band-ink .btn-signal:hover{background:#A8280A;border-color:#A8280A}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--ink);background:var(--paper);position:relative;z-index:50}
.meta-bar{display:flex;justify-content:space-between;align-items:center;height:32px;border-bottom:1px solid var(--rule);gap:var(--s4);min-width:0}
.meta-bar .cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.meta-bar a:hover{color:var(--signal-text)}
.nav-row{display:flex;align-items:center;height:72px;gap:var(--s6);min-width:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-stretch:110%;font-size:1.125rem;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:26px;height:18px;fill:var(--ink);flex:none}
.brand .mark-sig{fill:var(--signal)}
.nav{display:flex;gap:var(--s5);margin-left:var(--s4)}
.nav a{font-size:var(--fs-sm);font-weight:500;letter-spacing:.01em;padding:6px 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.nav a:hover{border-color:var(--rule)}
.nav a.is-current,.nav a[aria-current="page"]{border-color:var(--ink)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
.nav-actions .cap{color:var(--ink);white-space:nowrap}
.nav-actions .cap:hover{color:var(--signal-text)}
.burger{display:none;margin-left:auto;height:36px;padding:0 var(--s3);border:1px solid var(--ink);background:transparent;font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;flex:none}
.mnav{display:none;border-top:1px solid var(--rule);padding-bottom:var(--s3)}
.mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-base);font-weight:500}
.mnav a:last-child{border-bottom:0}
.mnav .cap{display:block;padding:var(--s3) 0 var(--s1)}
.mnav .mnav-sub{padding-left:var(--s4);font-weight:400;font-size:var(--fs-sm)}
.site-head.is-open .mnav{display:block}

/* ---------- hero ---------- */
.hero{padding:var(--s8) 0}
.hero .copy{grid-column:1/7;display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero .fig{grid-column:7/13;min-width:0}
.hero .index{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.hero .index span{display:inline-flex;gap:6px}
.hero h1{margin-bottom:var(--s5)}
.hero .lead{margin-bottom:var(--s3)}
.hero .sub{color:var(--ink-2);margin-bottom:var(--s6)}
.hero .cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s7)}
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.hero-facts div{padding:var(--s3) var(--s4) var(--s3) 0;min-width:0}
.hero-facts div+div{border-left:1px solid var(--rule);padding-left:var(--s4)}
.hero-facts .v{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:500;display:block;margin-bottom:2px;white-space:nowrap}
.hero-facts .v small{font-size:.7em;color:var(--ink-2)}

/* specimen figure */
.specimen{position:relative;border:1px solid var(--ink);padding:var(--s6);background:var(--paper);min-width:0}
.specimen .crop{position:absolute;width:14px;height:14px;pointer-events:none}
.specimen .crop::before,.specimen .crop::after{content:"";position:absolute;background:var(--ink)}
.specimen .crop::before{width:14px;height:1px}
.specimen .crop::after{width:1px;height:14px}
.specimen .crop.tl{top:-15px;left:-15px}.specimen .crop.tl::before{top:14px;left:0}.specimen .crop.tl::after{left:14px;top:0}
.specimen .crop.tr{top:-15px;right:-15px}.specimen .crop.tr::before{top:14px;right:0}.specimen .crop.tr::after{right:14px;top:0}
.specimen .crop.bl{bottom:-15px;left:-15px}.specimen .crop.bl::before{bottom:14px;left:0}.specimen .crop.bl::after{left:14px;bottom:0}
.specimen .crop.br{bottom:-15px;right:-15px}.specimen .crop.br::before{bottom:14px;right:0}.specimen .crop.br::after{right:14px;bottom:0}
.specimen .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.specimen .stamp{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-text);border:1px solid var(--signal-text);padding:4px 8px;white-space:nowrap}
.ean{width:100%;height:auto;fill:var(--ink);shape-rendering:crispEdges}
.ean text{font-family:var(--font-mono);font-weight:500;font-size:8.6px;shape-rendering:auto}
.specimen .foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-top:var(--s6);padding-top:var(--s4)}
.specimen .foot div{min-width:0}
.specimen .foot div+div{border-left:1px solid var(--rule);padding-left:var(--s4)}
.specimen .foot .v{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500;display:block;margin-top:2px;overflow-wrap:anywhere}

/* ---------- reasons ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.reasons article{border-top:1px solid var(--ink);padding-top:var(--s4)}
.reasons .n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);display:block;margin-bottom:var(--s6)}
.reasons h3{margin-bottom:var(--s3)}
.reasons p{color:var(--ink-2);font-size:var(--fs-base);max-width:26em}

/* ---------- compare table ---------- */
.compare th,.compare td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-base)}
.compare thead th{border-bottom:1px solid var(--ink);vertical-align:bottom;padding-top:0}
.compare th:first-child,.compare td:first-child{width:38%;color:var(--ink)}
.compare tbody th{font-weight:500}
.compare td{color:var(--ink-2)}
.compare td b{color:var(--ink);font-weight:500}
.compare td.yes{color:var(--ink);font-weight:500}
.compare .k{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);display:block;font-weight:400;letter-spacing:.02em;margin-top:2px}
.note{border:1px solid var(--ink);padding:var(--s5);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s5);row-gap:var(--s2);align-items:start;margin-top:var(--s6);background:var(--paper)}
.note .cap{grid-column:1/3}
.note .q{font-family:var(--font-mono);font-size:1.375rem;font-weight:500;line-height:1}
.note p{color:var(--ink-2);max-width:60em}
.note.ok{border-color:var(--ok)}
.note.ok .cap b{color:var(--ok)}
.note.plain{grid-template-columns:minmax(0,1fr)}
.note.plain .cap{grid-column:1}   /* a 1/3 span would open an implicit second column and split the paragraphs */
.note.plain p+p{margin-top:var(--s3)}
.note p b{color:var(--ink);font-weight:600}

/* ---------- pack cards (home / services) ---------- */
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5)}
.pack-card{border:1px solid var(--rule);padding:var(--s5);display:flex;flex-direction:column;background:var(--paper);min-width:0}
.pack-card.is-popular{border-color:var(--ink);background:var(--paper-2)}
.pack-card .kicker{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;min-height:1.4em}
.pack-card.is-popular .kicker{color:var(--signal-text)}
.pack-card h3{font-size:var(--fs-lg);font-weight:700;font-stretch:108%;letter-spacing:-.02em;margin-top:var(--s2);line-height:1.1}
.pack-card h3 small{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.04em;color:var(--ink-2);margin-top:4px;font-stretch:100%}
.pack-card .price{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:500;letter-spacing:-.02em;margin-top:var(--s4);line-height:1}
.pack-card .price small{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.pack-card .per{font-family:var(--font-mono);font-size:var(--fs-sm);margin-top:var(--s2)}
.pack-card .per b{font-weight:600}
.pack-card ul{margin:var(--s4) 0 var(--s5);border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink-2)}
.pack-card li{padding:8px 0;border-bottom:1px solid var(--rule)}
.pack-card .btn{margin-top:auto}
.pack-foot{border-top:1px solid var(--rule);margin-top:var(--s6);padding-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* code-type menu */
.types{border-top:1px solid var(--ink)}
.types a,.types .off{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.types a:hover .t{color:var(--signal-text)}
.types .t{font-weight:600;font-size:var(--fs-base)}
.types .s{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}
.types .p{font-family:var(--font-mono);font-size:var(--fs-sm);white-space:nowrap;text-align:right}
.types .p.soon{color:var(--ink-2)}
.types .cap{padding:var(--s3) 0}
.split-2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s7)}
.split-2 .a{grid-column:1/9;min-width:0}
.split-2 .b{grid-column:9/13;min-width:0}

/* catalogue (services) */
.catalogue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5)}
.cat-card{border:1px solid var(--ink);padding:var(--s5);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s5);row-gap:var(--s4);min-width:0;background:var(--paper)}
.cat-card.is-soon{border-color:var(--rule);background:var(--paper-2)}
.cat-card .t{grid-column:1/3}
.cat-card h2{font-size:var(--fs-lg);font-weight:700;font-stretch:108%;letter-spacing:-.02em;line-height:1.1;margin-top:var(--s2)}
.cat-card .d{color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--s2);max-width:34em}
.cat-card .kv{grid-column:1/2;border-top:1px solid var(--rule);font-size:var(--fs-sm)}
.cat-card .kv div{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 0;border-bottom:1px solid var(--rule)}
.cat-card .kv dt{color:var(--ink-2)}
.cat-card .kv dd{font-family:var(--font-mono);font-weight:500;text-align:right}
.cat-card .act{grid-column:2/3;align-self:end}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s6)}
.filters a{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:8px 12px;border:1px solid var(--rule);color:var(--ink-2)}
.filters a:hover{border-color:var(--ink);color:var(--ink)}
.filters a.is-on{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.steps article{border-top:1px solid var(--ink);padding-top:var(--s4);position:relative}
.steps .n{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:500;letter-spacing:-.03em;line-height:1;display:block;margin-bottom:var(--s6)}
.steps .n small{font-size:.35em;color:var(--ink-2);letter-spacing:0;margin-left:2px}
.steps h3{margin-bottom:var(--s3)}
.steps p{color:var(--ink-2);max-width:26em}
.steps .cap{margin-top:var(--s4);display:block}
.steps-foot{border-top:1px solid var(--rule);margin-top:var(--s7);padding-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ---------- marketplace + illustration ---------- */
.market{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6);align-items:center}
.market .t{grid-column:1/7;min-width:0}
.market .f{grid-column:7/13;min-width:0}
.market .cap{display:block;margin-bottom:var(--s3)}
.market h2{margin-bottom:var(--s4)}
.market .copy{color:var(--ink-2);max-width:34em}
.marks{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);border-top:1px solid var(--ink);padding-top:var(--s4);font-weight:600;font-stretch:106%;font-size:var(--fs-md);letter-spacing:-.01em}
.marks sup{font-family:var(--font-mono);color:var(--signal-text);font-size:.7em;margin-left:1px}
.footnote{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s4);max-width:36em}
.footnote b{color:var(--signal-text);font-family:var(--font-mono);font-weight:500}
.ill{width:100%;height:auto;max-width:560px;margin:0 auto}
.ill-disc{fill:var(--paper-2)}
.ill-ground{stroke:var(--rule);stroke-width:2}
.ill-shadow{fill:rgba(17,17,17,.08)}
.ill-face{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.ill-face-top{fill:var(--paper-2)}
.ill-face-side{fill:var(--rule-2)}
.ill-tape{fill:var(--signal)}
.ill-label{fill:var(--paper);stroke:var(--rule);stroke-width:1}
.ill-lid{fill:var(--ink)}
.ill-rim{fill:var(--ink-2)}
.ill-band{fill:var(--paper-2)}
.ill-card{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.ill-sq{fill:var(--signal)}
.ill rect:not([class]){fill:var(--ink)}
.ill svg text{font-family:var(--font-mono);font-weight:500;font-size:8.6px;fill:var(--ink)}
.ill-mono{font-family:var(--font-mono);font-weight:600;font-size:9px;letter-spacing:.12em;fill:var(--ink)}
.ill-mono-s{font-size:8px;letter-spacing:.1em}
.ill-mono-xs{font-size:6px;letter-spacing:.04em;font-weight:500;fill:var(--ink-2)}
.ill-mono-sig{fill:var(--signal-text)}
.ill-mono-2{font-size:7.5px}
.ill-display{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:-.02em;fill:var(--ink)}

/* ---------- ledger promise ---------- */
.ledger{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5)}
.ledger .t{grid-column:1/7}
.ledger .d{grid-column:7/13;align-self:end}
.ledger .cap{display:block;margin-bottom:var(--s3)}
.ledger h2{margin-bottom:var(--s4)}
.ledger .code{font-family:var(--font-mono);font-size:var(--fs-lg);letter-spacing:.08em;border:1px solid var(--ink);padding:var(--s3) var(--s4);display:inline-block;margin-bottom:var(--s4);overflow-wrap:anywhere}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:var(--s4);align-items:start;padding:var(--s4) 0;font-size:var(--fs-md);font-weight:600;font-stretch:104%;letter-spacing:-.01em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-weight:400;font-size:var(--fs-lg);line-height:1;color:var(--ink-2);text-align:right}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--signal-text)}
.faq .a{padding:0 0 var(--s5);color:var(--ink-2);max-width:60em}
.faq .a p+p{margin-top:var(--s3)}
.faq .a a{border-bottom:1px solid var(--rule);color:var(--ink)}
.faq .a a:hover{border-color:var(--signal);color:var(--signal-text)}

/* ---------- cta band ---------- */
.cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5);align-items:end}
.cta .t{grid-column:1/8;min-width:0}
.cta .a{grid-column:9/13;display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.cta p{color:var(--band-copy);max-width:32em;margin-top:var(--s4)}
.cta h2{margin-top:var(--s4)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--ink);padding:var(--s8) 0 var(--s6);margin-top:auto}
.foot-grid{display:grid;grid-template-columns:5fr 2fr 2fr 3fr;column-gap:var(--gutter);row-gap:var(--s6)}
.foot-grid>div{min-width:0}
.foot-grid p{color:var(--ink-2);font-size:var(--fs-sm);max-width:34em;margin-top:var(--s4)}
.foot-grid .cap{display:block;margin-bottom:var(--s4)}
.foot-grid li{font-size:var(--fs-sm);padding:4px 0}
.foot-grid li a:hover{color:var(--signal-text)}
.foot-grid address{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere}
.foot-grid address b{color:var(--ink);font-weight:500}
.foot-grid address a:hover{color:var(--signal-text)}
.foot-honest{border-top:1px solid var(--rule);margin-top:var(--s7);padding-top:var(--s4);font-size:var(--fs-sm);color:var(--ink-2);max-width:70em}
.foot-honest b{color:var(--ink);font-weight:500}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:var(--s4);padding-top:var(--s4)}
.foot-bottom .cap{overflow-wrap:anywhere}

/* ---------- pack page ---------- */
.crumbs{padding:var(--s4) 0;display:flex;gap:var(--s3);flex-wrap:wrap}
.crumbs .cap+.cap::before{content:"/";margin-right:var(--s3);color:var(--rule)}
.crumbs a:hover{color:var(--signal-text)}
.pack-head{padding:var(--s6) 0 var(--s8);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6)}
.pack-head .t{grid-column:1/8;min-width:0}
.pack-head .t .cap{display:block;margin-bottom:var(--s4)}
.pack-head h1{margin-bottom:var(--s4)}
.pack-head .lead{margin-bottom:var(--s3)}
.pack-head .spec{grid-column:8/13;align-self:start;min-width:0}
.spec{border-top:1px solid var(--ink)}
.spec div{display:grid;grid-template-columns:38% minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.spec dt{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
.spec dd{font-size:var(--fs-sm);font-weight:500;overflow-wrap:anywhere}
.spec dd .mono{font-weight:500}
.spec dd small{display:block;color:var(--ink-2);font-weight:400}

.ladder-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6)}
.ladder-sec .tbl{grid-column:1/9;min-width:0}
.ladder-sec .sum{grid-column:9/13;min-width:0}
.ladder-head{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4);align-items:center}
.ladder-head .cap{min-width:0}
.split-toggle{display:none;height:32px;padding:0 var(--s3);border:1px solid var(--rule);background:transparent;font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.split-toggle[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.ladder th,.ladder td{padding:var(--s3) var(--s3);border-bottom:1px solid var(--rule);font-size:var(--fs-sm);white-space:nowrap;vertical-align:middle}
.ladder thead th{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-bottom:var(--s2);vertical-align:bottom;line-height:1.3;white-space:normal}
.ladder thead th.num{text-align:right}
.ladder thead th small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--fs-2xs)}
.ladder td:first-child,.ladder th:first-child{padding-left:0;width:28px}
.ladder td:last-child,.ladder th:last-child{padding-right:0}
.ladder tbody tr{cursor:pointer}
.ladder tbody tr:hover td{background:var(--paper-2)}
.ladder tbody tr.is-selected td{background:var(--paper-2)}
.ladder tbody tr.is-selected td.pack{font-weight:600}
.ladder td.pack{font-weight:500;font-size:var(--fs-base);white-space:normal}
.ladder td.pack .free{color:var(--ink-2);font-weight:400}
.ladder td.pack .split{display:none;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-2);font-weight:400;letter-spacing:.02em;margin-top:2px}
.ladder.show-split td.pack .split{display:block}
.ladder td.total{font-weight:600;font-size:var(--fs-base)}
.ladder tr.is-popular td.total{color:var(--signal-text)}
.ladder .tag{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;margin-left:var(--s3);vertical-align:middle;line-height:1}
.ladder .tag.pop{background:var(--signal-text);color:#FFFFFF}
.ladder .tag.best{border:1px solid var(--ink);color:var(--ink)}
.ladder tfoot td{border-bottom:0;padding-top:var(--s3);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--ink-2);white-space:normal;line-height:1.5}
.ladder tfoot a{border-bottom:1px solid var(--rule);color:var(--ink)}
.pick{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--ink);background:var(--paper);margin:0;display:inline-block;vertical-align:middle;cursor:pointer;position:relative;border-radius:0;flex:none}
.pick:checked{border-color:var(--signal)}
.pick:checked::after{content:"";position:absolute;inset:3px;background:var(--signal)}
.ladder.compact tbody tr{cursor:default}
.ladder.compact tbody tr:hover td{background:transparent}
.ladder.compact td.pack a{border-bottom:1px solid var(--rule)}
.ladder.compact td.pack a:hover{border-color:var(--signal);color:var(--signal-text)}

.summary{position:sticky;top:var(--s5);border:1px solid var(--ink);padding:var(--s5);background:var(--paper)}
.summary .cap{display:block;margin-bottom:var(--s4)}
.summary .name{font-size:var(--fs-lg);font-weight:700;font-stretch:108%;letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--s5)}
.summary .name small{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.04em;color:var(--ink-2);margin-top:6px;font-stretch:100%}
.summary dl{border-top:1px solid var(--rule)}
.summary dl div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.summary dl dt{color:var(--ink-2)}
.summary dl dd{font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.summary dl div.total{border-bottom:1px solid var(--ink);padding:var(--s3) 0}
.summary dl div.total dt{color:var(--ink);font-weight:600}
.summary dl div.total dd{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em}
.summary .btn{width:100%;margin-top:var(--s5)}
.summary .fine{font-size:var(--fs-xs);color:var(--ink-2);margin-top:var(--s3);line-height:1.5}
.summary .fine a{border-bottom:1px solid var(--rule)}
.summary .msg{font-family:var(--font-mono);font-size:var(--fs-xs);margin-top:var(--s3);min-height:1.2em}
.summary .msg.err{color:var(--signal-text)}
.sum-bar{display:none}
.sum-bar .msg{font-family:var(--font-mono);font-size:var(--fs-2xs);margin-top:2px;line-height:1.35}
.sum-bar .msg:empty{display:none}
.sum-bar .msg.err{color:var(--signal-text)}

.gives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.gives div{padding:var(--s5) var(--s5) var(--s5) 0;min-width:0}
.gives div+div{border-left:1px solid var(--rule);padding-left:var(--s5)}
.gives .n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);display:block;margin-bottom:var(--s4)}
.gives h3{font-size:var(--fs-base);margin-bottom:var(--s2)}
.gives p{font-size:var(--fs-sm);color:var(--ink-2)}

.two{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s7)}
.two .a{grid-column:1/7;min-width:0}
.two .b{grid-column:7/13;min-width:0}
.two h3{margin-bottom:var(--s4)}
.list li{position:relative;padding:var(--s3) 0 var(--s3) var(--s5);border-bottom:1px solid var(--rule);font-size:var(--fs-base)}
.list li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;background:var(--ink)}
.list li:first-child{border-top:1px solid var(--ink)}
.list li small{display:block;color:var(--ink-2);font-size:var(--fs-sm)}
.list.q li::before{background:transparent;border:1px solid var(--ink)}
.list a{border-bottom:1px solid var(--rule)}
.list a:hover{border-color:var(--signal);color:var(--signal-text)}
.sample{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6);align-items:start}
.sample .f{grid-column:1/6;min-width:0}
.sample .d{grid-column:7/13;min-width:0}
.sample .d .cap{display:block;margin-bottom:var(--s3)}
.files{border-top:1px solid var(--ink)}
.files div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.files dt{font-family:var(--font-mono);overflow-wrap:anywhere}
.files dd{color:var(--ink-2);text-align:right}

/* ---------- guide page ---------- */
.guide-head{padding:var(--s8) 0}
.guide-head .t{grid-column:1/9;min-width:0}
.guide-head .cap{display:block;margin-bottom:var(--s4)}
.guide-head h1{margin-bottom:var(--s5)}
.decide th,.decide td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-base);vertical-align:top}
.decide thead th{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-top:0;padding-bottom:var(--s2)}
.decide td.what{font-weight:500;width:32%}
.decide td.what small{display:block;color:var(--ink-2);font-weight:400;font-size:var(--fs-sm)}
.decide td.code{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.decide td.digits{font-family:var(--font-mono);white-space:nowrap}
.decide td.reads{color:var(--ink-2)}
.decide td.act{text-align:right;white-space:nowrap}
.decide td.act .off{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.04em}
.anat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6);align-items:start}
.anat .f{grid-column:1/8;min-width:0}
.anat .l{grid-column:8/13;min-width:0}
.anat-svg{width:100%;height:auto;fill:var(--ink);shape-rendering:crispEdges}
.anat-svg text{font-family:var(--font-mono);shape-rendering:auto}
.anat-svg .digits{font-size:8.6px;font-weight:500}
.anat-svg .lbl{font-size:4px;font-weight:600;fill:var(--ink)}
.anat-svg .lbl.s{fill:var(--signal-text)}
.anat-svg .g{fill:var(--signal)}
.anat-svg .qz{fill:var(--paper-2)}
.anat-svg .br{fill:none;stroke:var(--ink);stroke-width:.4}
.anat-svg .br.s{stroke:var(--signal)}
.legend{border-top:1px solid var(--ink)}
.legend div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.legend dt{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600}
.legend dt.s{color:var(--signal-text)}
.legend dd b{display:block;font-weight:600;font-size:var(--fs-sm)}
.legend dd span{font-size:var(--fs-sm);color:var(--ink-2)}
.prose{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5)}
.prose .t{grid-column:1/5;min-width:0}
.prose .p{grid-column:5/11;color:var(--ink-2);min-width:0}
.prose .p p+p{margin-top:var(--s4)}
.prose .p b{color:var(--ink);font-weight:500}
.ask{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5);align-items:end}
.ask .t{grid-column:1/8;min-width:0}
.ask .a{grid-column:8/13;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.ask .a .cap{color:var(--band-copy);overflow-wrap:anywhere}

/* ---------- content pages (about, contact, policies, help) ---------- */
.page-head{padding:var(--s8) 0 var(--s7);border-bottom:1px solid var(--rule)}
.page-head .cap{display:block;margin-bottom:var(--s4)}
.page-head h1{margin-bottom:var(--s4)}
.page-head .lead{color:var(--ink-2)}
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.article .body{grid-column:1/9;min-width:0}
.article .aside{grid-column:10/13;min-width:0}
.article .body>*+*{margin-top:var(--s4)}
.article .body h2{font-size:var(--fs-lg);font-weight:600;font-stretch:106%;letter-spacing:-.015em;line-height:1.15;margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--ink)}
.article .body h2:first-child{margin-top:0}
.article .body h3{font-size:var(--fs-base);font-weight:600;margin-top:var(--s5)}
.article .body p{color:var(--ink-2);max-width:66ch}
.article .body p b,.article .body p strong{color:var(--ink);font-weight:600}
.article .body a{border-bottom:1px solid var(--rule);color:var(--ink)}
.article .body a:hover{border-color:var(--signal);color:var(--signal-text)}
.article .body ul{color:var(--ink-2);max-width:66ch}
.article .body ul li{position:relative;padding:6px 0 6px var(--s5);border-bottom:1px solid var(--rule)}
.article .body ul li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;background:var(--ink)}
.article .body .stamp-date{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.04em}
.kv{border-top:1px solid var(--ink)}
.kv div{display:grid;grid-template-columns:38% minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.kv dt{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
.kv dd{overflow-wrap:anywhere}
.kv dd a:hover{color:var(--signal-text)}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s7)}
.contact-grid .a{grid-column:1/6;min-width:0}
.contact-grid .b{grid-column:7/13;min-width:0}
.card{border:1px solid var(--ink);padding:var(--s5);background:var(--paper)}
.card+.card{margin-top:var(--s5)}
.card h2,.card h3{margin-bottom:var(--s4)}
.channels{border-top:1px solid var(--ink)}
.channels a,.channels div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--rule);align-items:center}
.channels .t{font-weight:600}
.channels .s{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px;overflow-wrap:anywhere}
.channels .go{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.channels a:hover .t,.channels a:hover .go{color:var(--signal-text)}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:6px;min-width:0}
.field label,.field .lbl{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.field label b{color:var(--signal-text);font-weight:500}
.field input,.field textarea,.field select{width:100%;min-width:0;height:48px;border:1px solid var(--ink);background:var(--paper);padding:0 var(--s4);font-size:var(--fs-base);border-radius:0;color:var(--ink)}
.field textarea{height:auto;min-height:120px;padding:var(--s3) var(--s4);line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.field input[disabled]{background:var(--paper-2);color:var(--ink-2);border-color:var(--rule)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:.8}
.field .help{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.field input.code{font-family:var(--font-mono);letter-spacing:.3em;text-align:center;font-size:var(--fs-lg)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.check{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--ink);background:var(--paper);margin:2px 0 0;position:relative;border-radius:0;cursor:pointer;flex:none}
.check input:checked{border-color:var(--signal)}
.check input:checked::after{content:"";position:absolute;inset:3px;background:var(--signal)}
.check a{border-bottom:1px solid var(--rule);color:var(--ink)}
.check a:hover{border-color:var(--signal);color:var(--signal-text)}
.form .actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.form .aside-links{font-size:var(--fs-sm);color:var(--ink-2)}
.form .aside-links a{border-bottom:1px solid var(--rule);color:var(--ink)}
.form .aside-links a:hover{border-color:var(--signal);color:var(--signal-text)}
/* "Resend the code" on public/verify-otp.php is a submit button, not a link: a
   link is a GET, and a GET is exactly what let anything that fetches a URL make
   this site send an email. It still has to LOOK like the link it replaced, so it
   takes the anchor's rules above and drops the chrome a browser gives a button. */
.form .aside-links button{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:0;cursor:pointer}
.form .aside-links button:hover{border-color:var(--signal);color:var(--signal-text)}
.alert{border:1px solid var(--ink);padding:var(--s3) var(--s4);font-size:var(--fs-sm);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:start;background:var(--paper)}
.alert::before{content:"";width:8px;height:8px;background:var(--ink);margin-top:7px}
.alert.ok{border-color:var(--ok);color:var(--ok)}
.alert.ok::before{background:var(--ok)}
.alert.err{border-color:var(--signal-text);color:var(--signal-text)}
.alert.err::before{background:var(--signal)}
.auth{padding:var(--s8) 0 var(--s9)}
.auth .box{max-width:460px;margin:0 auto;border:1px solid var(--ink);padding:var(--s6)}
.auth .box .cap{display:block;margin-bottom:var(--s3)}
.auth .box h1{margin-bottom:var(--s2)}
.auth .box .lead{color:var(--ink-2);font-size:var(--fs-base);margin-bottom:var(--s5)}
.auth .box .form{margin-top:var(--s4)}
.auth .alt{text-align:center;font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4)}
.auth .alt a{border-bottom:1px solid var(--rule);color:var(--ink)}
.auth .alt a:hover{border-color:var(--signal);color:var(--signal-text)}

/* ---------- account shell (signed-in pages) ---------- */
.account{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:var(--s7);align-items:start}
.wrap.account{padding-top:var(--s6);padding-bottom:var(--s9)} /* vertical only — the horizontal gutter stays .wrap's */
.account-nav{border-top:1px solid var(--ink);position:sticky;top:var(--s5)}
.account-nav .who{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.account-nav .who b{display:block;font-weight:600;overflow-wrap:anywhere}
.account-nav .who .cap{display:block;margin-top:2px;overflow-wrap:anywhere;text-transform:none;letter-spacing:.02em}
.account-nav a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm);font-weight:500}
.account-nav a:hover{color:var(--signal-text)}
.account-nav a.is-current{font-weight:600;border-bottom-color:var(--ink)}
.account-nav a.is-current::before{content:"";width:6px;height:6px;background:var(--signal);order:2;flex:none}
.account-nav a.out{color:var(--ink-2);margin-top:var(--s3);border-top:1px solid var(--rule)}
.account-main{min-width:0}
.account-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:var(--s4);margin-bottom:var(--s6)}
.account-head .cap{display:block;margin-bottom:var(--s3)}
.account-main section+section{margin-top:var(--s7)}
.account-main h2{margin-bottom:var(--s4)}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);margin-bottom:var(--s7)}
.stat-row div{padding:var(--s4) var(--s4) var(--s4) 0;min-width:0}
.stat-row div+div{border-left:1px solid var(--rule);padding-left:var(--s4)}
.stat-row .v{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:500;letter-spacing:-.02em;line-height:1;display:block;margin-bottom:var(--s2)}
.stat-row .v.ok{color:var(--ok)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table th,.table td{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm);vertical-align:middle;white-space:nowrap}
.table thead th{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-top:0;padding-bottom:var(--s2)}
.table td.num,.table th.num{text-align:right;font-family:var(--font-mono)}
.table td a{border-bottom:1px solid var(--rule)}
.table td a:hover{border-color:var(--signal);color:var(--signal-text)}
.table td .mono{font-weight:500}
.table .actions{display:flex;gap:var(--s4)}
.table.orders td.c-order a{font-weight:500}
.chip{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;line-height:1;border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.chip.bad{border-color:var(--signal-text);color:var(--signal-text)}
.empty{border:1px solid var(--rule);padding:var(--s7) var(--s5);text-align:center;color:var(--ink-2)}
.empty p{margin-bottom:var(--s4)}
.rows{border-top:1px solid var(--ink)}
.row-item{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.row-item.unread{border-left:3px solid var(--signal);padding-left:var(--s4)}
.row-item .head{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:baseline;margin-bottom:var(--s3)}
.row-item .head h3{font-size:var(--fs-md);font-weight:600}
.row-item p{color:var(--ink-2);max-width:66ch;overflow-wrap:anywhere}
.row-item .head a:not(.btn),.row-item .link{border-bottom:1px solid var(--rule);color:var(--ink)}
.row-item .head a:not(.btn):hover,.row-item .link:hover{border-color:var(--signal);color:var(--signal-text)}
.codes{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.8;overflow-wrap:normal;word-break:normal;color:var(--ink)}
.codes .code{display:inline-block;white-space:nowrap;margin-right:var(--s3)} /* a 13-digit token never breaks mid-number */
.codes .more{color:var(--ink-2)}
.preview{display:inline-block;border:1px solid var(--rule);padding:var(--s3);background:#FFFFFF;margin:var(--s3) 0;max-width:100%}
.preview svg,.preview img{max-width:100%;height:auto}
/* QR content (qr-content.php) + the per-slot list on my-barcodes */
.slot-list{border-top:1px solid var(--ink);margin-top:var(--s3)}
.slot-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);row-gap:var(--s2);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.slot-list .t{display:flex;gap:var(--s3);align-items:center;grid-column:1;grid-row:1}
.slot-list .t .mono{font-weight:500}
.slot-list .d{grid-column:1;grid-row:2;overflow-wrap:anywhere;color:var(--ink)}
.slot-list .d b{font-weight:600}
.slot-list .btn{grid-column:2;grid-row:1/3;justify-self:end}
.qr-view{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s6);row-gap:var(--s5);align-items:start}
.qr-preview{margin:0;padding:var(--s4);width:min(100%,304px)}
.qr-preview svg{width:100%;height:auto}
.qr-meta{min-width:0}
.qr-meta .kv dd{font-size:var(--fs-base)}
.qr-meta .actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.mask{letter-spacing:.15em}
.reveal{border:0;border-bottom:1px solid var(--rule);background:transparent;padding:0 0 1px;font:500 var(--fs-2xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;vertical-align:middle;margin-left:var(--s2)}
.reveal:hover{border-color:var(--signal);color:var(--signal-text)}
.qr-form fieldset{display:grid;gap:var(--s4);padding:var(--s4);border:1px solid var(--rule);background:var(--paper-2)}
.qr-form fieldset[hidden]{display:none !important}
.field .help.err{color:var(--signal-text)}
.field .input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2)}
.field .input-row .btn{height:48px}
.note.warn{border-color:var(--signal-text)}
.note.warn .cap b{color:var(--signal-text)}
.note.warn p+p{margin-top:var(--s3)}
.note .qr-old{margin-top:var(--s2)}
.account-head .cap .nw{white-space:nowrap}
.qr-check .form,.qr-edit .form{max-width:640px}
@media (max-width:640px){
  .qr-view{grid-template-columns:minmax(0,1fr)}
  .qr-preview{width:min(100%,260px)}
  .slot-list li{grid-template-columns:minmax(0,1fr)}
  .slot-list .btn{grid-column:1;grid-row:3;justify-self:stretch}
}
/* Carton codes (carton-codes.php) + the EAN-13 lines on my-barcodes (DECISIONS #8) */
.code-lines{border-top:1px solid var(--rule);margin-top:var(--s3)}
.code-lines li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.code-lines .code{font-family:var(--font-mono);white-space:nowrap;font-weight:500}
.code-lines .code.void{color:var(--ink-2);text-decoration:line-through}
.code-lines a:not(.btn){border-bottom:1px solid var(--rule);color:var(--ink);white-space:nowrap}
.code-lines a:not(.btn):hover{border-color:var(--signal);color:var(--signal-text)}
.carton-list{border-top:1px solid var(--ink);margin-top:var(--s4)}
.carton-list>li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);row-gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.carton-list .t{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;grid-column:1}
.carton-list .code{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:500;white-space:nowrap;letter-spacing:.04em}
.carton-list .d{grid-column:1;color:var(--ink-2);overflow-wrap:anywhere}
.carton-list .d b{color:var(--ink);font-weight:600}
.carton-list .dl{grid-column:2;grid-row:1/3;display:flex;gap:var(--s2);align-items:center;justify-self:end}
.carton-list details{grid-column:1/3}
.carton-list summary{cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.carton-list .label-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);margin-top:var(--s2);max-width:480px}
.carton-parent{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s6);row-gap:var(--s4);align-items:start}
.carton-preview svg{max-width:100%;height:auto}
.carton-form{max-width:640px}
@media (max-width:640px){
  .carton-list>li{grid-template-columns:minmax(0,1fr)}
  .carton-list .dl{grid-column:1;grid-row:auto;justify-self:start}
  .carton-list details{grid-column:1}
  .carton-parent{grid-template-columns:minmax(0,1fr)}
}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5)}
.item-card{border:1px solid var(--rule);padding:var(--s5);min-width:0}
.item-card h3{font-size:var(--fs-md);margin-bottom:var(--s3)}
.item-card .kv div{grid-template-columns:44% minmax(0,1fr)}
.item-card .actions{display:flex;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.item-card .actions .btn{flex:1}
.creds{border:1px solid var(--rule);background:var(--paper-2);padding:var(--s3) var(--s4);font-family:var(--font-mono);font-size:var(--fs-xs);margin-top:var(--s3);overflow-wrap:anywhere}
.creds[hidden]{display:none}

/* ---------- cart / checkout / payment ---------- */
.shop{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s6);padding:var(--s6) 0 var(--s9)}
.shop .main{grid-column:1/8;min-width:0}
.shop .side{grid-column:9/13;min-width:0}
.shop .main>.card+.card{margin-top:var(--s5)}
.cart-lines{border-top:1px solid var(--ink)}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.cart-line .t{font-weight:600;font-size:var(--fs-base)}
.cart-line .s{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}
.cart-line .p{font-family:var(--font-mono);font-weight:500;white-space:nowrap;text-align:right}
.cart-line .p small{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.cart-line .rm{height:36px;padding:0 var(--s3);border:1px solid var(--rule);background:transparent;font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.cart-line .rm:hover{border-color:var(--signal-text);color:var(--signal-text)}
.order-sum{border:1px solid var(--ink);padding:var(--s5);background:var(--paper);position:sticky;top:var(--s5)}
.order-sum .cap{display:block;margin-bottom:var(--s4)}
.order-sum dl{border-top:1px solid var(--rule)}
.order-sum dl div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.order-sum dl dt{color:var(--ink-2)}
.order-sum dl dd{font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.order-sum dl div.total{border-bottom:1px solid var(--ink);padding:var(--s3) 0}
.order-sum dl div.total dt{color:var(--ink);font-weight:600}
.order-sum dl div.total dd{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em}
.order-sum dl div.disc dd{color:var(--ok)}
.order-sum>.btn{width:100%;margin-top:var(--s4)}
.order-sum>.btn+.btn{margin-top:var(--s2)}
.order-sum .fine{font-size:var(--fs-xs);color:var(--ink-2);margin-top:var(--s3);line-height:1.5}
.order-sum .lines{border-top:1px solid var(--ink);margin-bottom:var(--s4)}
.order-sum .lines div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.order-sum .lines dd{font-family:var(--font-mono);white-space:nowrap}
.order-sum .lines small{display:block;color:var(--ink-2);font-size:var(--fs-xs)}
.coupon{display:flex;gap:0;margin:var(--s4) 0}
.coupon input{flex:1;min-width:0;height:44px;border:1px solid var(--ink);border-right:0;padding:0 var(--s3);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;border-radius:0}
.coupon input:focus{outline:none;border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.coupon .btn{height:44px;width:auto;margin-top:0;flex:none}
.coupon-msg{font-family:var(--font-mono);font-size:var(--fs-xs);min-height:1.2em;margin-bottom:var(--s3)}
.coupon-msg.ok{color:var(--ok)}
.coupon-msg.err{color:var(--signal-text)}
.coupon-msg .rm{background:none;border:0;padding:0;margin-left:var(--s2);font:inherit;color:var(--signal-text);cursor:pointer;border-bottom:1px solid var(--rule)}
.pay-box{max-width:520px;margin:0 auto;border:1px solid var(--ink);padding:var(--s6);text-align:center}
.pay-box .cap{display:block;margin-bottom:var(--s3)}
.pay-box .amount{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:500;letter-spacing:-.03em;line-height:1;margin:var(--s4) 0}
.pay-box .btn{width:100%;margin-top:var(--s5)}
.pay-box .fine{font-size:var(--fs-xs);color:var(--ink-2);margin-top:var(--s3)}
.receipt{border-top:1px solid var(--ink);text-align:left;margin-top:var(--s5)}
.receipt div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.receipt dt{color:var(--ink-2)}
.receipt dd{font-family:var(--font-mono);font-weight:500;text-align:right;overflow-wrap:anywhere}
.tick{display:inline-flex;width:48px;height:48px;border:1px solid var(--ok);color:var(--ok);align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-lg);margin:0 auto var(--s4)}

/* ---------- responsive ---------- */
/* Header: the full desktop row (brand + 6 links + actions + Shop button) is ~1050px
   wide logged out and ~1155px logged in, so below the 1280 wrap it runs compact —
   tighter gaps and no duplicate "Shop barcodes" button ("Buy barcodes" stays in
   the primary nav) — and collapses to the burger at 1024 and under. */
@media (max-width:1279px){
  .nav{gap:var(--s4)}
  .nav-actions{gap:var(--s4)}
  .nav-actions .btn{display:none}
}
@media (max-width:1100px){
  .hero .copy{grid-column:1/13;margin-bottom:var(--s7)}
  .hero .fig{grid-column:1/11}
  .sec-head .t,.sec-head .d{grid-column:1/13}
  .split-2 .a,.split-2 .b{grid-column:1/13}
  .ladder-sec .tbl,.ladder-sec .sum{grid-column:1/13}
  .summary{position:static}
  .anat .f,.anat .l{grid-column:1/13}
  .prose .t,.prose .p{grid-column:1/13}
  .sample .f{grid-column:1/8}.sample .d{grid-column:1/13}
  .market .t,.market .f{grid-column:1/13}
  .market .f{max-width:560px}
  .article .body{grid-column:1/13}.article .aside{grid-column:1/13;margin-top:var(--s8)}
  .shop .main,.shop .side{grid-column:1/13}
  .order-sum{position:static}
  .pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogue{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  .nav,.nav-actions{display:none}
  .burger{display:inline-flex;align-items:center}
  .nav-row{height:64px}
}
@media (max-width:900px){
  .section{padding:var(--s8) 0}
  .reasons,.steps{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
  .gives{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gives div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .gives div:nth-child(4){border-top:1px solid var(--rule)}
  .pack-head .t,.pack-head .spec{grid-column:1/13}
  .two .a,.two .b{grid-column:1/13}
  .ledger .t,.ledger .d{grid-column:1/13}
  .cta .t,.cta .a{grid-column:1/13}
  .ask .t,.ask .a{grid-column:1/13}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .fig{grid-column:1/13}
  .guide-head .t{grid-column:1/13}
  .contact-grid .a,.contact-grid .b{grid-column:1/13}
  .account{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
  .account-nav{position:static;display:flex;gap:var(--s4);overflow-x:auto;border-top:0;border-bottom:1px solid var(--ink);padding-bottom:var(--s3);-webkit-overflow-scrolling:touch}
  .account-nav .who{display:none}
  .account-nav a{border-bottom:2px solid transparent;padding:var(--s2) 0;white-space:nowrap;flex:none}
  .account-nav a.is-current{border-bottom-color:var(--ink)}
  .account-nav a.is-current::before{display:none}
  .account-nav a.out{margin:0;border-top:0}
  .stat-row{grid-template-columns:minmax(0,1fr)}
  .stat-row div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .two-col,.grid-3{grid-template-columns:minmax(0,1fr)}
  .ladder-sec .sum{display:none}
  .sum-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);border-top:1px solid var(--ink);padding:var(--s3) var(--gutter);align-items:center;gap:var(--s4)}
  .sum-bar .t{flex:1;min-width:0}
  .sum-bar .n{font-weight:600;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sum-bar .p{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.35}
  .sum-bar .p b{color:var(--ink);font-weight:600}
  .sum-bar .btn{flex:none}
  body.has-sum-bar .site-foot{padding-bottom:calc(var(--s6) + 88px)} /* the fixed bar must never cover the footer's last lines */
  .split-toggle{display:inline-flex;align-items:center}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .section{padding:var(--s7) 0}
  .hero{padding:var(--s7) 0}
  .meta-bar .cap:last-child{display:none}
  .hero .index{display:none}
  .hero-facts{grid-template-columns:minmax(0,1fr)}
  .hero-facts div+div{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .hero .cta-row{flex-direction:column}
  .hero .cta-row .btn{width:100%;min-width:0;padding:0 var(--s3)}
  .specimen{padding:var(--s4)}
  .specimen .crop{display:none}
  .specimen .foot{grid-template-columns:minmax(0,1fr)}
  .specimen .foot div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:var(--s2);margin-top:var(--s2)}
  .specimen .head{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .gives{grid-template-columns:minmax(0,1fr)}
  .gives div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .compare th,.compare td{font-size:var(--fs-sm);padding:var(--s3) var(--s2) var(--s3) 0}
  .compare th:first-child,.compare td:first-child{width:40%}
  .hide-m{display:none !important}
  .show-m{display:revert}
  .ladder th,.ladder td{padding:var(--s3) var(--s2)}
  .ladder td.pack{font-size:var(--fs-sm)}
  .ladder .tag{display:block;margin:4px 0 0;width:max-content}
  .hide-s{display:none !important}
  .decide thead{display:none}
  .decide tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);row-gap:var(--s1);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
  .decide tbody tr:first-child{border-top:1px solid var(--ink)}
  .decide td{border:0;padding:0;font-size:var(--fs-sm)}
  .decide td.what{grid-column:1/3;grid-row:1;width:auto;font-size:var(--fs-base)}
  .decide td.code{grid-column:1;grid-row:2;align-self:center}
  .decide td.digits{display:none}
  .decide td.reads{grid-column:1/3;grid-row:3}
  .decide td.act{grid-column:2;grid-row:2;text-align:right}
  .steps-foot,.foot-bottom,.pack-foot{flex-direction:column}
  .sample .f{grid-column:1/13}
  .pack-grid{grid-template-columns:minmax(0,1fr)}
  .cat-card{grid-template-columns:minmax(0,1fr)}
  .cat-card .t,.cat-card .kv,.cat-card .act{grid-column:1/2}
  .cat-card .act .btn{width:100%}
  .form-row,.form-row.three{grid-template-columns:minmax(0,1fr)}
  .cart-line{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s3)}
  .cart-line .rm{grid-column:1/3;justify-self:start}
  .auth .box{padding:var(--s5)}
  .h1{font-size:2.25rem}
  .h2{font-size:1.625rem}
  .pay-box{padding:var(--s5)}
  .files div{grid-template-columns:minmax(0,1fr)}
  .files dd{text-align:left}
  /* order lists stack as cards: number + amount / date + payment / actions + status */
  .table.orders thead{display:none}
  .table.orders tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);row-gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--rule);align-items:center}
  .table.orders tbody tr:first-child{border-top:1px solid var(--ink)}
  .table.orders td{border:0;padding:0;white-space:normal}
  .table.orders td.c-order{grid-column:1;grid-row:1;font-size:var(--fs-base)}
  .table.orders td.c-amt{grid-column:2;grid-row:1;font-size:var(--fs-base)}
  .table.orders td.c-date{grid-column:1;grid-row:2;color:var(--ink-2)}
  .table.orders td.c-pay{grid-column:2;grid-row:2;text-align:right}
  .table.orders td.c-act{grid-column:1;grid-row:3}
  .table.orders td.c-status{grid-column:2;grid-row:3;text-align:right}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}
@media print{.site-head,.site-foot,.sum-bar,.burger{display:none}}