/* AXOM — working-surface pages: datasheet, documents, tables, checkout.
   system.css owns the shell and the brand descent; this owns the pages
   where a researcher actually reads and buys.

   TYPE RULE: every font-size here resolves to a --t-* step from system.css.
   No raw px. 10px (--t-key) is permitted ONLY for uppercase tracked mono
   labels, where the letter-spacing carries it — never for sentence case.
   Earlier revisions of this file had 23 distinct sizes including 7.5px and
   9px, which is why the pages read as if they came from different sites. */

/* ═══ DATASHEET ══════════════════════════════════════════════════════ */
.crumb{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);padding:var(--s5) 0 0}
.crumb a:hover{color:var(--indigo)}

.pdp{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(var(--s6),4vw,var(--s8));padding:var(--s5) 0 var(--s2);
}
@media(max-width:940px){.pdp{grid-template-columns:1fr;gap:var(--s6)}}

/* The photograph IS the panel. Every product shot carries its own studio
   backdrop, so containing the image leaves that backdrop visible as a pale
   rectangle inside the frame. Filling edge-to-edge makes the shot's own
   backdrop the surface — no blend mode, no visible photo box. */
.pdp-stage{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-lg);background:#EFF2F8;
  box-shadow:inset 0 0 0 1px var(--rule);
}
.pdp-stage img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;
}
@media(max-width:940px){.pdp-stage{aspect-ratio:5/4}}

.p-cls{font-family:var(--mono);font-size:var(--t-key);letter-spacing:var(--track-key);text-transform:uppercase;color:var(--indigo-lo)}
.pdp h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,56px);margin:var(--s3) 0 var(--s1);letter-spacing:var(--track-tight)}
.p-aka{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2)}

.tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0}
.tag{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);background:var(--card);border:1px solid var(--rule);border-radius:100px;padding:var(--s1) var(--s3)}
.tag b{color:var(--ink);font-weight:600}
.tag.link{color:var(--indigo);border-color:rgba(91,91,245,.34);background:rgba(91,91,245,.06)}
.tag.link:hover{background:rgba(91,91,245,.13)}

.ruo-inline{
  font-family:var(--mono);font-size:var(--t-2xs);line-height:var(--lh-loose);color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--ink);
  border-radius:8px;padding:var(--s3) var(--s4);margin-bottom:var(--s5);
}

.p-price{font-family:var(--mono);font-size:var(--t-2xl);font-weight:600;margin:var(--s4) 0 var(--s2);font-variant-numeric:tabular-nums}
.field-k{font-family:var(--mono);font-size:var(--t-key);letter-spacing:var(--track-key);text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}

.opts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.opt{
  font-family:var(--mono);font-size:var(--t-xs);padding:var(--s3) var(--s4);border:1px solid var(--rule);
  border-radius:100px;cursor:pointer;background:var(--card);color:var(--ink-2);transition:all .22s var(--ease);
}
.opt:hover{border-color:var(--indigo);color:var(--indigo)}
.opt.on{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:600;box-shadow:0 0 0 3px var(--indigo-glow)}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin:var(--s2) 0 var(--s5)}
.tier{background:var(--card);padding:var(--s3) var(--s2);text-align:center;position:relative}
.tier .q{font-family:var(--mono);font-size:var(--t-key);color:var(--ink-2)}
.tier .pp{font-family:var(--mono);font-size:var(--t-sm);font-weight:600;margin-top:var(--s1);font-variant-numeric:tabular-nums}
.tier.best{background:rgba(91,91,245,.09)}
/* was 7.5px — unreadable. At --t-key the badge needs the full bar height. */
.tier .badge{position:absolute;top:0;left:0;right:0;background:var(--indigo);color:#fff;font-family:var(--mono);font-size:var(--t-key);letter-spacing:.12em;padding:var(--s1) 0;line-height:1}
.tier.best .q{margin-top:var(--s5)}

.qty-row{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s5)}
.qty{display:flex;align-items:center;border:1px solid var(--rule);border-radius:100px;overflow:hidden;background:var(--card)}
.qty button{background:none;border:none;width:42px;height:46px;font-size:var(--t-lg);cursor:pointer;color:var(--ink)}
.qty button:hover{background:var(--paper)}
.qty span{width:44px;text-align:center;font-family:var(--mono);font-variant-numeric:tabular-nums}

.spec{width:100%;border-collapse:collapse;margin:var(--s1) 0 var(--s5)}
.spec caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:var(--t-key);letter-spacing:var(--track-key);text-transform:uppercase;color:var(--ink-2);padding-bottom:var(--s3)}
.spec th,.spec td{text-align:left;padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.spec th{color:var(--ink-2);font-weight:400;width:44%}
.spec td{color:var(--ink)}

.cp{display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.cp button{
  font-family:var(--mono);font-size:var(--t-key);letter-spacing:.08em;border:1px solid var(--rule);
  background:var(--paper);border-radius:5px;padding:var(--s1) var(--s2);cursor:pointer;color:var(--ink-2);flex:none;
}
.cp button:hover{border-color:var(--indigo);color:var(--indigo)}
.cp button.ok{color:var(--indigo);border-color:var(--indigo)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.mod{border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);background:var(--card)}
.mod .m-k{font-family:var(--mono);font-size:var(--t-key);letter-spacing:var(--track-key);text-transform:uppercase;color:var(--indigo-lo);margin-bottom:var(--s3)}
.mod h3{font-size:var(--t-lg);font-weight:600;margin-bottom:var(--s2)}
.mod p{color:var(--ink-2);font-size:var(--t-sm)}
.refs{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.reg{background:var(--void);color:var(--mist);border-radius:var(--r);padding:var(--s6);font-size:var(--t-sm);line-height:1.85}
.reg .m-k{font-family:var(--mono);font-size:var(--t-key);letter-spacing:var(--track-key);text-transform:uppercase;color:var(--ice);margin-bottom:var(--s3)}
.reg strong{color:var(--frost)}
.note{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--indigo);border-radius:7px;padding:var(--s3) var(--s4);line-height:var(--lh-loose)}

/* the related grid should not out-shout the product */
.pdp-related .card-top{min-height:150px}
.pdp-related .vialmark{height:126px}

/* ═══ DOCUMENT PAGES ═════════════════════════════════════════════════ */
.prose{max-width:720px}
.prose h2{font-family:var(--serif);font-size:clamp(26px,3vw,36px);margin:var(--s7) 0 var(--s4);letter-spacing:var(--track-tight)}
.prose p{color:var(--ink-2);margin-bottom:var(--s4);font-size:var(--t-md);line-height:1.72}

.std-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s5) 0}
@media(max-width:560px){.std-grid{grid-template-columns:1fr}}
.std{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5)}
.std .k{font-family:var(--mono);font-size:var(--t-key);letter-spacing:var(--track-key);text-transform:uppercase;color:var(--indigo-lo)}
.std h3{font-size:var(--t-lg);font-weight:600;margin:var(--s3) 0 var(--s2)}
.std p{font-size:var(--t-sm);color:var(--ink-2);margin:0}

.policy-list{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin:var(--s5) 0}
.policy{background:var(--card);padding:var(--s5);font-size:var(--t-base);color:var(--ink-2);line-height:1.68}
.policy b{color:var(--ink);font-weight:600;display:block;margin-bottom:var(--s1)}
.policy em{font-style:italic;color:var(--ink)}
/* was 9px — the one place a hard "never publish" line appears, so it has to
   be readable, not fine print. */
.pk{display:inline-block;font-family:var(--mono);font-size:var(--t-key);letter-spacing:.16em;text-transform:uppercase;color:#B4322F;background:rgba(180,50,47,.08);border:1px solid rgba(180,50,47,.22);border-radius:4px;padding:var(--s1) var(--s2);margin-bottom:var(--s3)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s6)}
.step .n{font-family:var(--mono);font-size:var(--t-key);letter-spacing:.14em;color:var(--indigo-lo)}
.step h3{font-size:var(--t-lg);font-weight:600;margin:var(--s4) 0 var(--s2)}
.step p{color:var(--ink-2);font-size:var(--t-sm)}

.doc{max-width:760px}
.doc h2{font-family:var(--serif);font-size:var(--t-xl);margin:var(--s7) 0 var(--s3)}
.doc p{color:var(--ink-2);margin-bottom:var(--s4);font-size:var(--t-base)}
.doc .qa{border-bottom:1px solid var(--rule);padding:var(--s5) 0}
.doc .qa h3{font-size:var(--t-md);font-weight:600;margin-bottom:var(--s2)}
.doc .qa p{margin:0;font-size:var(--t-base)}
.doc .tbd{font-family:var(--mono);font-size:var(--t-2xs);color:var(--indigo-lo);background:rgba(91,91,245,.08);border:1px solid rgba(91,91,245,.22);border-radius:5px;padding:var(--s1) var(--s2)}

.form-row{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.form-row label{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.form-row input,.form-row textarea,.form-row select{
  font-family:var(--sans);font-size:var(--t-base);padding:var(--s3) var(--s4);
  border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-glow)}
.form-row input:invalid:not(:placeholder-shown){border-color:#B4322F}
.form-row select{
  cursor:pointer;width:100%;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* city / state / ZIP on one line */
.field-grid{display:grid;grid-template-columns:1fr .5fr .62fr;gap:var(--s3)}
@media(max-width:620px){.field-grid{grid-template-columns:1fr 1fr}
  .field-grid .form-row:first-child{grid-column:1 / -1}}
.field-grid .form-row{margin-bottom:var(--s4)}
.opt-tag{font-family:var(--mono);font-size:var(--t-key);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper);border:1px solid var(--rule);border-radius:100px;
  padding:var(--s1) var(--s2);margin-left:var(--s1)}
.field-note{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);margin:var(--s2) 0 0;line-height:var(--lh-snug)}

.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:var(--s3) var(--s3);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.tbl th{color:var(--ink-2);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-key)}
.tbl td a{color:var(--indigo)}
.tbl tr:hover td{background:var(--card)}

.empty-state{border:1px dashed var(--rule);border-radius:var(--r);padding:var(--s7);text-align:center;background:var(--card)}
.empty-state h3{font-size:var(--t-lg);font-weight:600;margin-bottom:var(--s2)}
.empty-state p{color:var(--ink-2);font-size:var(--t-sm);max-width:46ch;margin:0 auto}

/* ═══ CATALOG ════════════════════════════════════════════════════════ */
.class-nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s6)}
.class-nav a{
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-radius:100px;padding:var(--s2) var(--s4);
  transition:all .22s var(--ease);
}
.class-nav a:hover{border-color:var(--indigo);color:var(--indigo-lo);background:rgba(91,91,245,.05)}
.class-nav a:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.class-nav a:first-child:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

.catalog-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s7)}
/* the research-use line carries legal weight: readable size, full contrast */
.ruo-line{font-size:var(--t-xs);font-weight:500;color:var(--ink);margin:0}

.inset{margin:var(--s6) 0}
.inset img{width:100%;border-radius:var(--r-lg);border:1px solid var(--rule);display:block}
.inset figcaption{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);margin-top:var(--s3);line-height:var(--lh-snug)}

.search-row{display:flex;gap:var(--s3);margin-bottom:var(--s5);max-width:380px}
.search-row input{flex:1;font-family:var(--mono);font-size:var(--t-xs);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:100px;background:var(--card);color:var(--ink)}
.search-row input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-glow)}

/* Cards: the photograph is the panel here too — same reasoning as .pdp-stage. */
.card-top{padding:0;min-height:0;aspect-ratio:1/1;overflow:hidden;background:#EFF2F8}
.vialmark{
  width:100%;height:100%;object-fit:cover;object-position:center 48%;
  transition:transform .6s var(--ease-out);
}
.card:hover .vialmark{transform:scale(1.05)}
.card-body{padding:var(--s4) var(--s4) var(--s5)}

/* The catalog stays on the void rather than dropping a bright slab into the
   dark descent; the product cards supply the contrast. */
.catalog-band{background:var(--deep);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.catalog-band .class-nav a{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--mist)}
.catalog-band .class-nav a:hover{background:rgba(255,255,255,.1);border-color:var(--ice);color:var(--frost)}
.catalog-band .class-nav a:first-child{background:var(--frost);border-color:var(--frost);color:var(--void)}
.catalog-band .class-nav a:first-child:hover{background:#fff;border-color:#fff;color:var(--void)}
.catalog-band .ruo-line{color:var(--mist)}
.catalog-band .catalog-foot{margin-top:var(--s7)}
.catalog-band .card{border-color:rgba(255,255,255,.1);box-shadow:0 26px 60px -30px rgba(0,0,0,.85)}
.catalog-band .card:hover{border-color:rgba(127,212,232,.5);box-shadow:0 34px 70px -28px rgba(0,0,0,.95)}

/* ═══ CHECKOUT ═══════════════════════════════════════════════════════ */
.co-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(var(--s5),3.5vw,var(--s7));align-items:start}
@media(max-width:900px){.co-grid{grid-template-columns:1fr}}
.co-main{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(var(--s5),3vw,var(--s6))}
.co-side{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(var(--s5),3vw,var(--s6));position:sticky;top:96px}
@media(max-width:900px){.co-side{position:static}}
.co-h{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s4)}
.co-main .co-h:not(:first-child){margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--rule)}

.co-line{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.co-name{font-weight:600;font-size:var(--t-base)}
.co-meta{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);margin-top:var(--s1)}
.co-ruo{font-size:var(--t-2xs);font-weight:500;color:var(--ink);margin-top:var(--s1);line-height:var(--lh-snug)}
.co-price{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

.co-tot{margin:var(--s4) 0 0}
.co-tot>div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;font-size:var(--t-sm);color:var(--ink-2)}
.co-tot dt,.co-tot dd{margin:0}
.co-tot dd{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.co-tot .grand{border-top:1px solid var(--rule);margin-top:var(--s2);padding-top:var(--s3);font-size:var(--t-md);font-weight:600;color:var(--ink)}
.co-tot .grand dd{font-size:var(--t-lg);font-weight:700}
.co-fine{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);line-height:var(--lh-loose);margin:var(--s3) 0 0}

.pay-opts{display:flex;flex-direction:column;gap:var(--s3)}
.pay-opt{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;background:var(--paper);
  border:1px solid var(--rule);border-radius:12px;padding:var(--s4);transition:all .2s var(--ease)}
.pay-opt:hover{border-color:var(--indigo)}
.pay-opt.on{border-color:var(--indigo);background:rgba(91,91,245,.05);box-shadow:0 0 0 3px var(--indigo-glow)}
.pay-opt.disabled{opacity:.55;cursor:not-allowed}
.pay-opt.disabled:hover{border-color:var(--rule)}
.pay-opt input{margin-top:3px;accent-color:var(--indigo);width:17px;height:17px;flex:none}
.po-title{display:block;font-weight:600;font-size:var(--t-base);color:var(--ink)}
.po-sub{display:block;font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s1);line-height:1.55}
.po-tag{font-family:var(--mono);font-size:var(--t-key);letter-spacing:.08em;background:var(--indigo);color:#fff;
  border-radius:100px;padding:var(--s1) var(--s2);margin-left:var(--s2);vertical-align:middle}
.po-tag.muted{background:var(--rule);color:var(--ink-2)}

.pay-panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(var(--s5),3.4vw,var(--s7));max-width:680px;margin:0 auto}
.pay-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-bottom:var(--s4);
  margin-bottom:var(--s5);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:var(--t-2xs)}
.pay-ok{color:#7A4E0E;font-weight:600}
.pay-panel h3{font-family:var(--serif);font-size:clamp(26px,3vw,34px);margin:0 0 var(--s3)}
.pay-panel p{color:var(--ink-2);font-size:var(--t-base);line-height:1.65;margin-bottom:var(--s4)}
.pay-todo{font-family:var(--mono);font-size:var(--t-xs);line-height:var(--lh-loose);color:var(--ink-2);
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--indigo);
  border-radius:8px;padding:var(--s4);margin-bottom:var(--s4)}
.pay-todo code{background:rgba(91,91,245,.1);color:var(--indigo-lo);border-radius:4px;padding:1px 5px}
.pay-sum{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin:0 0 var(--s4)}
.pay-sum>div{background:var(--card);padding:var(--s3) var(--s4)}
.pay-sum dt{font-family:var(--mono);font-size:var(--t-key);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pay-sum dd{margin:var(--s1) 0 0;font-family:var(--mono);font-size:var(--t-base);color:var(--ink);font-variant-numeric:tabular-nums}
.pay-note{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-2);margin:var(--s4) 0 0}