/* ================================================================
   STUPIDFACE LABS — SITE STYLESHEET
   Off-white minimalist · Teenage Engineering precision
   · Marathon-collection clipped UX tabs · system measurement details
   ================================================================ */

/* -------- TOKENS -------- */
:root {
  /* canvas */
  --bg:        #ECECE3;
  --bg-2:      #F4F4EC;
  --bg-3:      #DEDED2;

  /* ink */
  --ink:       #0A0A0A;
  --ink-2:     #2A2A2A;
  --ink-dim:   #5F5F58;  /* AA-compliant on --bg (5.5:1) */
  --ink-faint: #9A9A8F;  /* placeholder/disabled text — visually quiet */

  /* lines */
  --rule:      #C8C8BD;
  --rule-2:    #D8D8CC;

  /* accents */
  --acid:      #D4FF3C;          /* primary — lime */
  --acid-deep: #B8E62A;
  --magenta:   #FF3D7F;          /* secondary callout */
  --orange:    #FF5436;          /* warn */
  --cyan:      #2DCFE8;          /* tertiary */

  /* type */
  --sans: "Space Grotesk", "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* metrics */
  --rail: 32px;
  --gut:  20px;
  --max:  1480px;
}

/* -------- RESET -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* -------- TYPOGRAPHY HELPERS -------- */
.mono { font-family: var(--mono); }
.up { text-transform: uppercase; letter-spacing: 0.08em; }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

.t9  { font-family: var(--mono); font-size: 9px;  letter-spacing: 0.12em; }
.t10 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; }
.t11 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.t12 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.t14 { font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; }

/* -------- DISPLAY / HEADLINE -------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 0.95;
}
.huge {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.82;
  letter-spacing: -0.04em;
}
.big {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.med {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* -------- LAYOUT -------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--rail);
}
.grid { display: grid; gap: var(--gut); }
.cols-12 { grid-template-columns: repeat(12, 1fr); }
.cols-6  { grid-template-columns: repeat(6, 1fr); }
.cols-4  { grid-template-columns: repeat(4, 1fr); }
.cols-3  { grid-template-columns: repeat(3, 1fr); }
.cols-2  { grid-template-columns: repeat(2, 1fr); }

/* -------- TOP BAR -------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(236,236,227,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  height: 56px;
  padding: 0 var(--rail);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.brand .face { width: 22px; height: 22px; }
.brand .word {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.brand .sub {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  margin-left: 8px;
  text-transform: uppercase;
}
.topbar nav {
  display: flex; gap: 22px;
  justify-content: center;
}
.topbar nav a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 0;
  transition: color .15s;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.on { color: var(--ink); position: relative; }
.topbar nav a.on::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height: 2px; background: var(--ink);
}
.topbar .right { display:flex; align-items:center; gap: 10px; }

/* -------- TAGS / CHIPS / PILLS -------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border: 1px solid var(--ink);
  border-radius: 11px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  background: transparent;
}
.tag.acid { background: var(--acid); border-color: var(--ink); }
.tag.solid { background: var(--ink); color: var(--bg); }
.tag.ghost { color: var(--ink-dim); border-color: var(--rule); }
.tag.dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.tag.dot.live::before { background: var(--acid); }

.swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; vertical-align: middle;
}
.swatch.acid { background: var(--acid); }
.swatch.magenta { background: var(--magenta); }
.swatch.orange { background: var(--orange); }
.swatch.cyan   { background: var(--cyan); }

/* -------- BUTTONS -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  position: relative;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn.acid { background: var(--acid); border-color: var(--ink); color: var(--ink); }
.btn.acid:hover { background: var(--acid-deep); color: var(--ink); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: var(--ink-2); }
.btn.ghost { border-color: var(--rule); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.small { padding: 8px 14px; font-size: 9px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; color: inherit; }

/* arrow icon utility */
.arr::after { content: "→"; font-family: var(--mono); font-weight: 400; }

/* -------- DOTTED PATTERN BG (TE-coded) -------- */
.dots {
  background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: 0 0;
}
.dots-fine {
  background-image: radial-gradient(var(--ink-faint) 0.8px, transparent 0.8px);
  background-size: 8px 8px;
}

/* -------- PANELS / CARDS -------- */
.panel {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  position: relative;
}
.panel.flat  { background: var(--bg); }
.panel.dark  { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.panel.acid  { background: var(--acid); border-color: var(--ink); }

/* clipped-corner panel (Marathon collection) */
.clip {
  clip-path: polygon(
    0 12px, 12px 0,
    calc(100% - 32px) 0, 100% 32px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    32px 100%, 0 calc(100% - 32px)
  );
}
.clip-tl {
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%);
}
.clip-tr {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

/* corner registration marks */
.regmark {
  position: relative;
}
.regmark::before, .regmark::after {
  content:""; position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--ink); border-radius: 50%;
}
.regmark::before { top: -4px; left: -4px; }
.regmark::after  { bottom: -4px; right: -4px; }

/* -------- SECTION HEADINGS -------- */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: end;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 32px;
}
.sec-head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-dim);
}
.sec-head h2 {
  font-size: 36px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.sec-head .meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: right;
  line-height: 1.5;
}

/* -------- UX TAB SYSTEM (radio-input driven) -------- */
.tabs { position: relative; }
.tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.tabbar {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0;
  margin-bottom: 24px;
  align-items: flex-end;
}
.tabbar label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-bottom: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  /* clipped top-right corner */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  position: relative;
  margin-bottom: -1px; /* sit on top of border line */
}
.tabbar label:hover { color: var(--ink); }
.tabbar label .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8px;
  background: var(--ink-faint);
  color: var(--bg);
  padding: 2px 5px;
  margin-left: 4px;
  letter-spacing: 0.1em;
}

.tab-panel { display: none; padding-top: 8px; }

/* connect radio to label & panel via :checked */
#tab-overview:checked ~ .tabbar label[for="tab-overview"],
#tab-spec:checked     ~ .tabbar label[for="tab-spec"],
#tab-demo:checked     ~ .tabbar label[for="tab-demo"],
#tab-faq:checked      ~ .tabbar label[for="tab-faq"] {
  background: var(--acid);
  color: var(--ink);
  border-color: var(--ink);
}
#tab-overview:checked ~ .tabbar label[for="tab-overview"] .badge,
#tab-spec:checked     ~ .tabbar label[for="tab-spec"] .badge,
#tab-demo:checked     ~ .tabbar label[for="tab-demo"] .badge,
#tab-faq:checked      ~ .tabbar label[for="tab-faq"] .badge {
  background: var(--ink); color: var(--acid);
}
#tab-overview:checked ~ .tab-panel.p-overview,
#tab-spec:checked     ~ .tab-panel.p-spec,
#tab-demo:checked     ~ .tab-panel.p-demo,
#tab-faq:checked      ~ .tab-panel.p-faq { display: block; }

/* keyboard focus ring on tabs */
.tabs input[type="radio"]:focus-visible + .tabbar label { outline: 2px solid var(--ink); outline-offset: 2px; }

/* -------- PRODUCT CARD -------- */
.product {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.product:hover { border-color: var(--ink); }
.product .head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.product .body {
  padding: 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.product .body img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product .meta {
  padding: 14px 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.product .meta div .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.product .meta div .val { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.product .price { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.product .price .num { font-family: var(--sans); font-weight: 700; font-size: 24px; }
.product .cta { padding: 0; }
.product .cta .btn { border: 0; border-top: 1px solid var(--ink); }

/* -------- PERIODIC TABLE -------- */
.ptable-wrap {
  margin-top: 8px;
  position: relative;
}
.ptable-wrap::before,
.ptable-wrap::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.ptable-wrap::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.ptable-wrap::after  { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

.ptable {
  display: grid;
  grid-template-columns: 22px repeat(18, 1fr);
  grid-template-rows: 16px repeat(7, auto) 14px repeat(2, auto);
  gap: 4px;
  position: relative;
}

/* axis labels — group numbers (top), period numbers (left), f-block markers */
.ptable-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  line-height: 1;
}
.ptable-label.group {
  align-self: end;
  padding-bottom: 4px;
}
.ptable-label.period {
  justify-self: end;
  align-self: center;
  padding-right: 4px;
}
/* (legacy .fblock label rule removed — period axis now shows 1-7 only;
   the in-grid `*`/`**` pointer cells handle f-block wayfinding) */

/* in-grid pointers in row 6/7 col 3 referencing the f-block rows */
.ptable .ptable-pointer {
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--rule);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  user-select: none;
}

/* element cell */
.ptable .cell {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px 5px;
  position: relative;
  color: var(--ink-dim);
  cursor: default;
  transition: background .14s, border-color .14s, color .14s, transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
  user-select: none;
  text-decoration: none;

  /* atomic-number-ordered staggered reveal */
  opacity: 0;
  animation: ptable-fade .35s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 6ms + 80ms);
}
@keyframes ptable-fade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ptable .cell .num {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0.7;
  line-height: 1;
}
.ptable .cell .sym {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(11px, 1.5vw, 20px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  margin-top: auto;
  margin-bottom: 2px;
}

.ptable .cell:hover {
  background: var(--bg);
  border-color: var(--ink);
  color: var(--ink);
  z-index: 5;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 3px 0 rgba(10,10,10,0.06);
}
.ptable .cell:hover .num { opacity: 1; }

/* unreleased products: blur the symbol on the cell — only W and Ga keep readable letters */
.ptable .cell.tbd .sym {
  filter: blur(4.5px);
  opacity: 0.55;
  user-select: none;
}
.ptable .cell.tbd:hover .sym {
  opacity: 0.8;
}

/* shipping product cell */
.ptable .cell.active {
  background: var(--acid);
  border-color: var(--ink);
  color: var(--ink);
  cursor: pointer;
  /* small inset stroke for a "stamped" feel */
  box-shadow: inset 0 0 0 1px rgba(10,10,10,0.18);
}
.ptable .cell.active .num,
.ptable .cell.active .sym { color: var(--ink); opacity: 1; }

/* "01" serial badge in the corner of the active cell */
.ptable .cell.active::before {
  content: "01";
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.55;
  line-height: 1;
}
/* live pulse dot */
.ptable .cell.active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
  animation: ptable-pulse 1.6s ease-in-out infinite;
}
@keyframes ptable-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}

.ptable .cell.active:hover {
  background: var(--acid-deep);
  z-index: 6;
  transform: translateY(-1px) scale(1.06);
  box-shadow: inset 0 0 0 1px rgba(10,10,10,0.22), 0 5px 0 rgba(10,10,10,0.1);
}

/* tooltip popup */
.ptable .pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s, visibility .12s;
  z-index: 20;
  box-shadow: 0 6px 0 rgba(10,10,10,0.06);
  text-align: left;
  min-width: 160px;
}
.ptable .cell:hover .pop,
.ptable .cell.is-open .pop { opacity: 1; visibility: visible; }
/* When the popup is in the open state (touch devices), make it tappable so a
   tap on "view product" (or anywhere inside) reaches the parent <a>. */
.ptable .cell.is-open .pop { pointer-events: auto; }
.ptable .cell.is-open { z-index: 30; }
.ptable .cell.edge-l .pop { left: 0; transform: none; }
.ptable .cell.edge-r .pop { left: auto; right: 0; transform: none; }
.ptable .cell.edge-top .pop { bottom: auto; top: calc(100% + 8px); }

.ptable .pop .pop-tag {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 600;
}
.ptable .pop .pop-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 4px;
}
.ptable .pop .pop-mass {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.12);
  opacity: 0.85;
}
.ptable .pop .pop-desc {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 8px;
}

/* product popup (Tungsten) — acid card */
.ptable .cell.active .pop {
  background: var(--acid);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 18px;
  white-space: normal;
  width: 260px;
  box-shadow: 4px 6px 0 rgba(10,10,10,0.12);
}
.ptable .cell.active .pop .pop-tag { opacity: 0.65; }
.ptable .cell.active .pop .pop-mass {
  border-top-color: rgba(10,10,10,0.18);
  opacity: 0.85;
}
.ptable .cell.active .pop .pop-desc {
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 11px;
  line-height: 1.5;
}
.ptable .cell.active .pop .pop-cta {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* legend */
.ptable-legend {
  margin-top: 28px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.ptable-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ptable-legend .legend-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid var(--ink);
  position: relative;
}
.ptable-legend .legend-swatch.live { background: var(--acid); }
.ptable-legend .legend-swatch.live::after {
  content: "";
  position: absolute;
  bottom: 2px; right: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink);
}
.ptable-legend .legend-swatch.tbd { background: var(--bg-2); border-color: var(--rule); }
.ptable-legend .legend-hint { margin-left: auto; }

/* print-style fig caption beneath the table */
.ptable-cap {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ptable-cap .cap-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
}

@media (max-width: 1100px) {
  .ptable .cell .sym { font-size: 14px; }
  .ptable .cell .num { font-size: 7px; }
  .ptable-label { font-size: 8px; }
}
@media (max-width: 900px) {
  .ptable-wrap {
    overflow-x: auto;
    margin: 8px calc(-1 * var(--rail)) 0;
    padding: 4px var(--rail) 8px;
  }
  .ptable { min-width: 800px; }
  .ptable-legend .legend-hint { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ptable .cell { animation: none; opacity: 1; }
  .ptable .cell.active::after { animation: none; opacity: 0.7; }
}

/* -------- ATOMIC IDENTITY CARD (tungsten product page) -------- */
.atom-card {
  background: var(--acid);
  border: 1px solid var(--ink);
  padding: 18px 18px 16px;
  position: relative;
  width: 100%;
  max-width: 320px;
  box-shadow: 4px 6px 0 rgba(10,10,10,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 6px 14px;
  align-items: end;
  /* same stamped-inset stroke as the periodic-table cell */
  outline: 1px solid rgba(10,10,10,0.18);
  outline-offset: -2px;
}
.atom-card .ac-num {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  align-self: start;
}
.atom-card .ac-serial {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  text-align: right;
  align-self: start;
}
.atom-card .ac-sym {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: center;
  margin: 4px 0 0;
}
.atom-card .ac-name {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding-top: 6px;
  border-top: 1px solid var(--ink);
}
.atom-card .ac-pulse {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: ptable-pulse 1.6s ease-in-out infinite;
}

/* atomic property strip — tabular data block */
.atom-props {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
  width: 100%;
  max-width: 320px;
  font-family: var(--mono);
}
.atom-props .ap-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.atom-props .ap-cell:nth-child(2n) { border-right: 0; }
.atom-props .ap-cell:last-child { border-bottom: 0; border-right: 0; }
.atom-props .ap-lbl {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.atom-props .ap-val {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.atom-props .ap-val.mono-tight {
  font-size: 11px;
  letter-spacing: 0;
}

/* -------- HERO BUY BLOCK (upper-right corner, paired with atom-card) -------- */
.hero-buy {
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
  padding: 18px 18px 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  align-items: end;
  box-shadow: 4px 6px 0 rgba(10,10,10,0.06);
}
.hero-buy .hb-price { grid-column: 1 / 2; }
.hero-buy .hb-actions {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  justify-content: flex-end;
}
.hero-buy .hb-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.85;
  letter-spacing: -0.03em;
  margin: 4px 0 6px;
}
.hero-buy .hb-num .hb-cents {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.01em;
  vertical-align: 1.6em;
  margin-left: 1px;
}
.hero-buy .btn { padding: 12px 14px; font-size: 10px; }
.hero-buy .btn.block { width: 100%; }

/* -------- DOTTED-LEADER SPEC TABLE (chemistry-textbook style) -------- */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.spec-table caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
}
.spec-table tr {
  display: flex;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.spec-table tr:last-child { border-bottom: 0; }
.spec-table td {
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
.spec-table td:first-child {
  order: 1;
  color: var(--ink-dim);
  flex: 0 0 auto;
  width: auto;
}
.spec-table td:last-child {
  order: 3;
  text-align: right;
  font-weight: 600;
  flex: 0 0 auto;
}
/* dotted leader between label and value */
.spec-table tr::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  align-self: end;
  border-bottom: 1px dotted var(--ink-faint);
  height: 0;
  margin: 0 10px 5px;
  min-width: 32px;
}
/* preserve the latency highlight cell (acid bg on the value) */
.spec-table td[style*="background"] {
  padding: 6px 10px !important;
}

/* (legacy spec-table rules removed — see "DOTTED-LEADER SPEC TABLE" above) */

/* -------- MEASUREMENT ANNOTATIONS -------- */
.measure {
  position: relative;
  display: inline-block;
}
.measure::before, .measure::after {
  content: "";
  position: absolute;
  background: var(--ink-faint);
}
.measure-x::before { left: 0; right: 0; top: -10px; height: 1px; }
.measure-x::after { left: 0; right: 0; top: -14px; height: 8px; border-left: 1px solid var(--ink-faint); border-right: 1px solid var(--ink-faint); background: transparent; }
.measure-x .lbl { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; color: var(--ink-dim); letter-spacing: 0.1em; }

/* -------- KEYBOARD HINTS (Marathon footer-coded) -------- */
.kbd {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.kbd .key {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-2);
  min-width: 16px;
  text-align: center;
}

/* -------- HERO TYPEWRITER --------
   Hero headline types itself out as the user scrolls. Each character is
   wrapped in a .tw-ch span by JS; only chars with .is-typed are visible.
   A blinking underscore cursor sits at the typing position. */
.hero-headline {
  opacity: 0;
  transition: opacity .25s ease;
}
.hero-headline.is-revealed { opacity: 1; }

.tw-ch {
  opacity: 0;
  transition: opacity .1s ease;
}
.tw-ch.is-typed { opacity: 1; }

.tw-cursor {
  display: inline-block;
  font-weight: 400;       /* a touch lighter than the bold headline */
  margin: 0 0.05em;
  position: relative;
  top: -0.06em;           /* nudge the underscore to sit on baseline */
  animation: tw-blink .9s steps(2, end) infinite;
  color: var(--ink);
}
@keyframes tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Section headlines retain their scramble-on-view effect */
.sec-head h2.is-scrambling {
  animation: sh2-enter .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes sh2-enter {
  from { letter-spacing: 0.06em; opacity: 0.7; }
  to   { letter-spacing: -0.02em; opacity: 1; }
}

/* -------- MOBILE NAV (hamburger + slide-down panel) --------
   Built dynamically by JS (wireMobileNav). Hidden above 720px so the desktop
   nav owns the topbar. Below 720px, the topbar nav is hidden and this takes
   over. */
.nav-mobile-toggle {
  display: none;
  width: 40px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  position: relative;
  z-index: 1100;
  transition: background .15s, border-color .15s;
}
.nav-mobile-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .15s ease;
}
.nav-mobile-toggle.is-active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.is-active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-mobile-toggle:hover { background: var(--ink); }
.nav-mobile-toggle:hover span { background: var(--bg); }

.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.45);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}
.nav-mobile-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}
.nav-mobile-panel {
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
  padding: 18px 22px 26px;
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  max-height: 92vh;
  overflow-y: auto;
}
.nav-mobile-overlay.is-open .nav-mobile-panel { transform: translateY(0); }
.nav-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
}
.nav-mobile-brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-mobile-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  color: var(--ink);
}
.nav-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-mobile-header {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 14px 0 6px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.nav-mobile-header:first-child { border-top: 0; padding-top: 4px; }
.nav-mobile-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  min-height: 48px;
}
.nav-mobile-link:last-child { border-bottom: 0; }
.nav-mobile-link:hover { color: var(--ink-2); }
.nav-mobile-product .nav-mobile-link-text { font-weight: 700; }
.nav-mobile-link-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
html.nav-mobile-locked { overflow: hidden; }

/* Show only on small screens */
@media (max-width: 720px) {
  .nav-mobile-toggle { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-overlay,
  .nav-mobile-panel,
  .nav-mobile-toggle span { transition: none !important; }
}

/* -------- SCROLL-DOWN PROMPT --------
   Big bold solid arrow at the top of the hero's right column. Single filled
   polygon (thick shaft + wide chunky arrowhead). Bounces vertically. Fades
   on scroll via JS-set --scroll-prompt-fade (1 → 0 over first ~third of vh). */
.scroll-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  opacity: var(--scroll-prompt-fade, 1);
  transition: opacity .25s ease;
  animation: scroll-prompt-bounce 1.6s cubic-bezier(.5, 0, .5, 1) infinite;
  color: var(--ink);
}
.scroll-prompt-arrow {
  display: block;
  width: 110px;
  height: auto;          /* preserve 120 × 320 aspect from viewBox */
  max-height: 320px;
  filter: drop-shadow(0 4px 0 rgba(10,10,10,0.08));
}
@keyframes scroll-prompt-bounce {
  0%, 100% { transform: translateY(-12px); }
  50%      { transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-prompt { animation: none; }
}

/* Smaller arrow on laptops; hidden on mobile (the topbar hamburger covers nav,
   the typing animation owns attention there) */
@media (max-width: 1100px) {
  .scroll-prompt-arrow { width: 80px; }
}
@media (max-width: 720px) {
  .scroll-prompt { display: none; }
}

/* -------- HERO SMILEY ASSEMBLY --------
   Blocks rain down on scroll and assemble the face. JS sets a per-block
   transform via the SVG `transform` attribute. The outer .spin animation
   only kicks in once every block has landed, so the SVG isn't rotating
   while pieces are still falling into a (rotating) frame. */
.hero-smiley-orbit { display: inline-block; }
.hero-face .sf-block {
  /* Smooth interpolation between scroll-frame updates */
  transition: transform .08s linear;
}
.hero-face.is-assembled .sf-block {
  /* Once assembled, lock the transform so the spin animation owns the frame */
  transition: none;
}

/* -------- LOGO USES -------- */
.face { display: block; image-rendering: pixelated; }
.face.spin { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reduced-motion: pin everything */
@media (prefers-reduced-motion: reduce) {
  .hero-smiley-orbit { transform: none !important; opacity: 1 !important; }
  .hero-headline { opacity: 1 !important; }
  .tw-ch { opacity: 1 !important; transition: none !important; }
  .tw-cursor { display: none !important; }
  .sec-head h2.is-scrambling { animation: none !important; }
}

/* -------- HORIZONTAL RULES & DIVIDERS -------- */
.div { border-top: 1px solid var(--rule); margin: 0; }
.div.strong { border-top-color: var(--ink); }

/* -------- FOOTER -------- */
footer {
  margin-top: 120px;
  border-top: 1px solid var(--ink);
  padding: 56px 0 28px;
}

/* -------- MISC -------- */
::selection { background: var(--acid); color: var(--ink); }
[hidden] { display: none !important; }

/* -------- PRODUCTS DROPDOWN (topbar nav) -------- */
.nav-dd { position: relative; }
.nav-dd .nav-trigger {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.nav-dd .nav-trigger::after {
  content: "▾";
  font-size: 8px;
  letter-spacing: 0;
  opacity: 0.6;
  transform: translateY(-1px);
  transition: transform .15s, opacity .15s;
}
.nav-dd:hover .nav-trigger,
.nav-dd:focus-within .nav-trigger,
.nav-dd.open .nav-trigger { color: var(--ink); }
.nav-dd:hover .nav-trigger::after,
.nav-dd.open .nav-trigger::after { opacity: 1; transform: translateY(0); }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 18px 20px 16px;
  min-width: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  box-shadow: 4px 6px 0 rgba(10,10,10,0.08);
  z-index: 200;
}
/* tiny tick on the menu pointing back at trigger */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--bg);
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
}
.nav-dd:hover .nav-menu,
.nav-dd:focus-within .nav-menu,
.nav-dd.open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-section { display: flex; flex-direction: column; gap: 4px; }
.nav-section .nav-cat {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-section .nav-cat .nav-count {
  font-size: 8px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
.nav-section a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  transition: color .12s, padding-left .12s;
}
.nav-section a .nav-z {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.nav-section a:hover {
  color: var(--acid-deep);
  padding-left: 4px;
}
.nav-section a:hover .nav-z { color: var(--ink); }
.nav-section .nav-empty {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-style: normal;
  padding: 4px 0;
}

@media (max-width: 720px) {
  .nav-menu { min-width: 240px; left: 0; transform: translateX(0); }
  .nav-menu::before { left: 28px; }
  .nav-dd:hover .nav-menu,
  .nav-dd.open .nav-menu { transform: translateX(0); }
}

/* -------- PERIODIC TABLE — PHOTO POPUP + REDACTION -------- */

/* shipped products: image at the top of the popup */
.ptable .pop .pop-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-3);
  border: 1px solid var(--ink);
  margin: 0 0 12px;
  image-rendering: -webkit-optimize-contrast;
}
.ptable .cell.active .pop {
  width: 320px;
}
.ptable .cell.active .pop .pop-img {
  border-color: var(--ink);
}

/* unreleased products: pixelate / redact the name */
.ptable .cell.tbd .pop .pop-name {
  position: relative;
  user-select: none;
  pointer-events: none;
  /* keep the original text in DOM for accessibility but visually blur it */
  color: transparent;
  text-shadow: 0 0 7px rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.ptable .cell.tbd .pop .pop-name::after {
  content: "[ classified ]";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  text-shadow: none;
  opacity: 0.7;
}

/* -------- BOOT / DITHER ANIMATION -------- */
/* Total runtime ~2400ms: dither sweeps in, logo materialises, text types,
   then a short hold and a clean fade. Long enough that the user actually
   sees the moment, fast enough not to feel like loading. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
  animation: boot-out 320ms ease-in 2100ms forwards;
}
.boot-screen::before {
  /* dither field — fades out as it spreads */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 6px 6px;
  opacity: 0.4;
  animation: boot-dither 1700ms steps(10) forwards;
}
.boot-screen::after {
  /* horizontal scanline that sweeps the screen twice */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--acid);
  top: 0;
  opacity: 0.6;
  animation: boot-scan 1400ms cubic-bezier(.6,.0,.4,1) 200ms forwards;
}
@keyframes boot-scan {
  0%   { top: -2%; opacity: 0; }
  10%  { opacity: 0.7; }
  100% { top: 102%; opacity: 0; }
}
@keyframes boot-dither {
  0%   { opacity: 0.55; background-size: 4px 4px; }
  60%  { opacity: 0.3; }
  100% { opacity: 0;   background-size: 16px 16px; }
}
@keyframes boot-out {
  to { opacity: 0; visibility: hidden; }
}

.boot-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.boot-logo {
  width: 96px; height: 96px;
  filter: blur(8px) contrast(0.3);
  opacity: 0;
  animation: boot-logo 1400ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes boot-logo {
  0%   { filter: blur(10px) contrast(0.25); opacity: 0;   transform: scale(0.88); }
  20%  { opacity: 0.4; }
  45%  { filter: blur(5px)  contrast(0.55); opacity: 0.75; }
  70%  { filter: blur(2px)  contrast(0.85); opacity: 1; }
  100% { filter: blur(0)    contrast(1);    opacity: 1;   transform: scale(1);   }
}
.boot-text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  animation: boot-text 500ms ease-out 700ms forwards;
}
.boot-stage {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  animation: boot-text 400ms ease-out 1300ms forwards;
}
.boot-cursor {
  display: inline-block;
  width: 6px; height: 9px;
  background: var(--ink);
  vertical-align: -1px;
  margin-left: 5px;
  animation: boot-blink 320ms steps(2) infinite;
}
@keyframes boot-text  { to { opacity: 1; } }
@keyframes boot-blink { 50% { opacity: 0; } }

/* skip boot on subsequent visits in same session */
html.booted .boot-screen { display: none !important; }

/* -------- CONTACT FORM (home support section) -------- */
.contact-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form .cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form .cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form .cf-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  resize: vertical;
}
.contact-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.contact-form textarea { font-family: var(--mono); line-height: 1.5; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 0 2px var(--acid);
}
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
  box-shadow: 0 0 0 2px var(--orange);
}
.cf-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
}
.cf-ticket {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.cf-ticket.is-set { background: var(--acid); padding: 2px 8px; }
.cf-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-actions .btn { flex: 1; min-width: 140px; }
.cf-msg {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 1px solid var(--ink);
  line-height: 1.5;
}
.cf-msg.ok { background: var(--acid); }
.cf-msg.err { background: #FFE3DE; }
.cf-msg strong { font-weight: 700; }
@media (max-width: 720px) {
  .contact-form .cf-row { grid-template-columns: 1fr; }
  .cf-actions .btn { flex: 1 1 100%; }
}

/* (legacy LOGIN-PAGE + MY-PRODUCTS-PAGE styles removed — login.html is now a gateway, my-products.html is deleted) */

/* -------- AUTH LINK in topbar -------- */
.topbar .right .auth-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-dim);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .right .auth-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}


/* -------- AUDIO PLAYER · SOURCE TABS --------
   Pills above the original player. Active tab = ink fill + acid text. */
.ap-source-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.ap-source-tab {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .14s, color .14s, transform .08s;
  min-height: 40px;
  white-space: nowrap;
}
.ap-source-tab:hover { background: var(--bg-2); color: var(--ink); }
.ap-source-tab:active { transform: translateY(1px); }
.ap-source-tab.is-active {
  background: var(--ink);
  color: var(--acid);
  cursor: default;
}
.ap-source-tab.is-active:hover { background: var(--ink); }
@media (max-width: 720px) {
  .ap-source-tab { flex: 1 0 calc(50% - 4px); padding: 12px 14px; font-size: 9px; letter-spacing: 0.14em; }
}

/* -------- AUDIO PLAYER (tungsten demo · A/B compare) -------- */
.audio-player {
  border: 1px solid var(--ink);
  background: var(--bg-2);
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}
.audio-player--source { background: var(--bg); }
.audio-player.is-changing { animation: ap-flash .45s ease-out; }
@keyframes ap-flash {
  0%   { background: var(--bg-2); }
  30%  { background: var(--acid); }
  100% { background: var(--bg-2); }
}
.audio-player--source.is-changing { animation: none; }

.ap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule);
  gap: 14px;
}
.ap-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.ap-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 6px;
}
.ap-title .ap-dot { color: var(--acid-deep); -webkit-text-stroke: 1px var(--ink); }

/* Stage = waveform area */
.ap-stage {
  position: relative;
  background: var(--bg-3);
  height: 140px;
  cursor: crosshair;
  border-bottom: 1px solid var(--rule);
}
.audio-player--source .ap-stage { background: var(--bg-2); }
.ap-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.ap-playhead {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 1.5px;
  background: var(--acid-deep);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(10,10,10,0.25), 0 0 8px rgba(212,255,60,0.4);
  opacity: 0;
  transition: opacity .15s;
}
.audio-player.is-ready .ap-playhead { opacity: 1; }

/* Loading state */
.ap-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.audio-player.is-loading .ap-loading { opacity: 1; }
.ap-loading-dot {
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
  animation: ap-load-bounce 1.2s ease-in-out infinite;
}
.ap-loading-dot:nth-child(2) { animation-delay: .15s; }
.ap-loading-dot:nth-child(3) { animation-delay: .30s; }
@keyframes ap-load-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}
.audio-player.is-loading .ap-canvas { opacity: 0.25; }

/* Controls */
.ap-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 11px;
}
.ap-play {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  background: var(--acid);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, transform .08s;
  flex-shrink: 0;
}
.ap-play:hover { background: var(--acid-deep); }
.ap-play:active { transform: scale(0.95); }
.audio-player--source .ap-play { background: var(--bg); }
.audio-player--source .ap-play:hover { background: var(--ink); color: var(--acid); }
.ap-icon { display: block; }
.ap-icon-pause { display: none; }
.audio-player.is-playing .ap-icon-play  { display: none; }
.audio-player.is-playing .ap-icon-pause { display: block; }

.ap-time {
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 600;
  min-width: 90px;
  font-variant-numeric: tabular-nums;
}
.ap-desc-text {
  color: var(--ink-dim);
  font-size: 11px;
  margin-left: auto;
  text-align: right;
  letter-spacing: 0.02em;
}
.ap-cycle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s, transform .08s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ap-cycle:hover { background: var(--ink); color: var(--acid); }
.ap-cycle:active { transform: scale(0.95); }
.ap-cycle-next { margin-left: auto; }
.ap-desc {
  padding: 14px 22px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.6;
  border-top: 1px solid var(--rule);
  letter-spacing: 0.02em;
}

/* Divider between original and processed */
.ap-divider {
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  padding: 26px 0 18px;
  position: relative;
}
.ap-divider::before, .ap-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--rule);
}
.ap-divider::before { left: 14%; }
.ap-divider::after  { right: 14%; }

/* Hint line */
.ap-hint {
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ap-hint .kbd { display: inline-flex; gap: 4px; }

@media (max-width: 720px) {
  .ap-controls { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .ap-desc-text { display: none; }
  .ap-stage { height: 110px; }
  .ap-title { font-size: 24px; }
  .ap-cycle-next { margin-left: 0; }
  .ap-hint { font-size: 8px; gap: 8px; }
}

/* -------- ANNOTATED PLUGIN PHOTO --------
   The photo lives inside a framed box, capped at 880px wide on desktop so the
   image renders close to native resolution (sharper). Numbered markers are
   absolutely positioned at percentage coordinates so they scale with the image.
   Click a marker → in-place popover with the description. Click the image (or
   the "enlarge" button) → lightbox state covering the viewport. */
.pp-frame {
  border: 1px solid var(--ink);
  background: var(--bg-2);
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: block; /* simple vertical stack: cap → image → horizontal legend */
  transition: max-width .3s cubic-bezier(.2,.8,.2,1);
}
.pp-frame-cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.pp-frame-cap .pp-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--ink);
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pp-frame-cap .pp-zoom-btn:hover { background: var(--ink); color: var(--acid); }
.pp-frame.is-zoomed .pp-frame-cap .pp-zoom-btn span::before { content: "close"; }
.pp-frame.is-zoomed .pp-frame-cap .pp-zoom-btn span { display: none; }
.pp-frame.is-zoomed .pp-frame-cap .pp-zoom-btn::after {
  content: "close ×"; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.16em; font-weight: 700;
}
.pp-frame.is-zoomed .pp-frame-cap .pp-zoom-btn svg { display: none; }
.pp-stage {
  position: relative;
  display: block;
  background: var(--bg-3);
  cursor: zoom-in;
}
.pp-frame.is-zoomed .pp-stage { cursor: zoom-out; }
.pp-stage img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  animation: pp-fade-in .3s ease-out;
}
@keyframes pp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* numbered marker: dot anchored to a point on the image.
   Markers are HIDDEN by default and only revealed when the user hovers (or
   keyboard-focuses) the photo, the lightbox is open, or a marker is currently
   active (popover open / paired with a hovered legend item). */
.pp-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pp-stage:hover .pp-marker,
.pp-stage:focus-within .pp-marker,
.pp-frame.is-zoomed .pp-marker,
.pp-marker.is-active {
  opacity: 1;
  pointer-events: auto;
}
.pp-marker-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--acid);
  border: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  box-shadow: 0 2px 0 rgba(10,10,10,0.18), 0 0 0 3px rgba(236,236,227,0.85);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .12s, color .12s, box-shadow .12s;
}
.pp-marker:hover .pp-marker-dot,
.pp-marker:focus-visible .pp-marker-dot,
.pp-marker.is-active .pp-marker-dot {
  background: var(--ink);
  color: var(--acid);
  transform: scale(1.18);
  box-shadow: 0 3px 0 rgba(10,10,10,0.25), 0 0 0 3px rgba(212,255,60,0.5);
}

/* Slight image zoom on hover — subtle "we're looking at this" feedback. */
.pp-stage img {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.pp-stage:hover img {
  transform: scale(1.015);
}
/* Don't stack the hover-zoom on top of the lightbox layout */
.pp-frame.is-zoomed .pp-stage:hover img { transform: none; }

/* Legend dot pulse (only on the photo markers). Lighter halo since markers
   only appear on hover now — the pulse is a quick cue, not ambient noise. */
.pp-stage .pp-marker .pp-marker-dot {
  animation: pp-pulse 1.6s ease-in-out infinite;
}
@keyframes pp-pulse {
  0%, 100% { box-shadow: 0 2px 0 rgba(10,10,10,0.18), 0 0 0 3px rgba(236,236,227,0.85); }
  50%      { box-shadow: 0 2px 0 rgba(10,10,10,0.18), 0 0 0 6px rgba(212,255,60,0.45); }
}
.pp-stage .pp-marker:hover .pp-marker-dot,
.pp-stage .pp-marker.is-active .pp-marker-dot { animation: none; }

/* legend — horizontal-scrolling chip row BELOW the image.
   Sits as a single row of fixed-width cards that scroll left-to-right.
   Same look + feel as the .hscroll utility used for tungsten algorithms. */
.pp-legend {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  counter-reset: pp-leg;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
}
.pp-legend::-webkit-scrollbar { height: 8px; }
.pp-legend::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 4px; }
.pp-legend::-webkit-scrollbar-track { background: transparent; }
.pp-legend li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  /* Horizontal chip dimensions */
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 320px;
  scroll-snap-align: start;
}
.pp-legend li:hover,
.pp-legend li.is-active {
  border-color: var(--ink);
  background: var(--bg);
}
.pp-legend li .pp-marker-dot {
  width: 22px;
  height: 22px;
  font-size: 9px;
  flex-shrink: 0;
  box-shadow: 0 2px 0 rgba(10,10,10,0.12);
  animation: none;
}
.pp-legend li:hover .pp-marker-dot,
.pp-legend li.is-active .pp-marker-dot {
  background: var(--ink);
  color: var(--acid);
}
.pp-legend li > div { min-width: 0; }
.pp-legend strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}
.pp-legend p {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}
.pp-legend p em {
  font-style: normal;
  background: var(--acid);
  padding: 0 4px;
  font-weight: 700;
}

/* When lightboxed, hide the legend so the image gets the full viewport.
   The popovers on the markers handle annotation reading in that mode. */
.pp-frame.is-zoomed .pp-legend { display: none; }

@media (max-width: 720px) {
  .pp-marker-dot { width: 20px; height: 20px; font-size: 9px; }
  .pp-legend li .pp-marker-dot { width: 20px; height: 20px; }
  .pp-legend li { min-width: 240px; padding: 10px 12px; }
  .pp-frame-cap { font-size: 8px; padding: 8px 12px; flex-wrap: wrap; }
  .pp-frame { max-width: 100%; }
}
@media (max-width: 420px) {
  .pp-marker-dot { width: 18px; height: 18px; font-size: 8px;
    box-shadow: 0 1px 0 rgba(10,10,10,0.18), 0 0 0 2px rgba(236,236,227,0.85); }
}

/* -------- LIGHTBOX (zoomed plugin photo) -------- */
.pp-zoom-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.65);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pp-zoom-backdrop.is-on {
  opacity: 1;
  pointer-events: auto;
}
.pp-frame.is-zoomed {
  position: fixed;
  z-index: 9100;
  /* Anchor center between original top (4vh) and dead-center (50%) — lands ~28% from top */
  top: 28%;
  left: 50%;
  transform: translate(-50%, -28%);
  width: min(85vw, 1120px);
  max-width: min(85vw, 1120px);
  max-height: 86vh;
  overflow: auto;
  /* Keep wheel/touch scroll inside the frame from bubbling to the body */
  overscroll-behavior: contain;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  background: var(--bg-2);
  animation: pp-zoom-in .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes pp-zoom-in {
  from { opacity: 0; transform: translate(-50%, -28%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -28%) scale(1); }
}
/* Body scroll stays enabled while the lightbox is open — user can scroll the
   main page behind the frame. The fixed-position backdrop intercepts clicks. */
body.pp-zoom-locked { /* (no-op — kept for backwards compatibility) */ }

/* In zoom mode the PNG is the focus — legend is hidden so the image gets the
   full frame width. The stage keeps the image's natural aspect ratio so the
   percentage-positioned markers remain perfectly aligned. */
.pp-frame.is-zoomed .pp-frame-cap {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--ink);
  background: var(--bg);
}
.pp-frame.is-zoomed .pp-legend {
  display: none;
}
.pp-frame.is-zoomed .pp-stage img {
  width: 100%;
  height: auto;
  display: block;
}
.pp-frame.is-zoomed .pp-stage:hover img { transform: none; }

/* -------- ANNOTATION POPOVER (click-to-expand) -------- */
.pp-pop {
  position: absolute;
  z-index: 5;
  width: min(280px, 70vw);
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  padding: 14px 16px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  pointer-events: auto;
  animation: pp-pop-fade .18s ease-out;
}
@keyframes pp-pop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Top-Center: popover above marker, centered */
.pp-pop.pp-pop--tc { transform: translate(-50%, -100%); margin-top: -14px; }
.pp-pop.pp-pop--tl { transform: translate(0,    -100%); margin-top: -14px; margin-left: -10px; }
.pp-pop.pp-pop--tr { transform: translate(-100%, -100%); margin-top: -14px; margin-left: 10px; }
.pp-pop.pp-pop--bc { transform: translate(-50%,  0); margin-top: 14px; }
.pp-pop.pp-pop--bl { transform: translate(0,     0); margin-top: 14px; margin-left: -10px; }
.pp-pop.pp-pop--br { transform: translate(-100%, 0); margin-top: 14px; margin-left: 10px; }

.pp-pop .pp-pop-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--bg);
  border: 0;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
}
.pp-pop .pp-pop-x:hover { opacity: 1; }
.pp-pop .pp-pop-num {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 700;
}
.pp-pop .pp-pop-num::before { content: "no. "; }
.pp-pop .pp-pop-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: var(--acid);
}
.pp-pop .pp-pop-desc {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(236,236,227,0.92);
}
.pp-pop .pp-pop-desc em {
  font-style: normal;
  background: var(--acid);
  color: var(--ink);
  padding: 0 4px;
  font-weight: 700;
}

/* arrow indicator */
.pp-pop::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border: 6px solid transparent;
}
.pp-pop.pp-pop--tc::after { left: 50%; bottom: -12px; transform: translateX(-50%); border-top-color: var(--ink); }
.pp-pop.pp-pop--tl::after { left: 12px; bottom: -12px; border-top-color: var(--ink); }
.pp-pop.pp-pop--tr::after { right: 12px; bottom: -12px; border-top-color: var(--ink); }
.pp-pop.pp-pop--bc::after { left: 50%; top: -12px; transform: translateX(-50%); border-bottom-color: var(--ink); }
.pp-pop.pp-pop--bl::after { left: 12px; top: -12px; border-bottom-color: var(--ink); }
.pp-pop.pp-pop--br::after { right: 12px; top: -12px; border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .pp-pop { width: min(280px, 80vw); font-size: 10px; padding: 12px 14px 10px; }
  .pp-pop .pp-pop-title { font-size: 12px; }
}

/* -------- SCROLL-REVEAL --------
   Elements with .reveal start invisible + a slight downward offset.
   .is-in (set by IntersectionObserver) animates them into place. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger inside grids — only kicks in when the parent has .reveal-stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-in > *:nth-child(1) { transition-delay:  60ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 140ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 220ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 380ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 460ms; }

/* -------- HERO STAT COUNTER --------
   Give the stat <div class="big"> a data-count attribute. JS rolls it from 0
   up to the target when the strip enters the viewport. */
.stat-num { font-variant-numeric: tabular-nums; transition: color .2s; }
.stat-num.is-counting { color: var(--acid-deep); }

/* -------- PERIODIC TABLE — TRAVELLING ACID SCAN --------
   A thin acid bar sweeps across the table every ~14s. Pure decoration,
   non-interactive (pointer-events: none). */
.ptable-wrap::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 2px;
  background: var(--acid);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  animation: ptable-scan 14s linear infinite;
}
@keyframes ptable-scan {
  0%   { left: 0;    opacity: 0; }
  4%   { opacity: 0.7; }
  16%  { left: 100%; opacity: 0.6; }
  17%  { opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

/* -------- SMILEY BLINK (brand mark) --------
   Eye groups in the brand SVG get a 'face-eyes' class so we can hide them
   briefly. We add the class via CSS to the small topbar smiley too. */
.face g[stroke="#D4FF3C"], .face g[stroke="#0A0A0A"]:not([fill]) {
  /* SVG eye-stroke groups — JS toggles this animation via class */
}
.face.spin g[stroke] {
  animation: face-blink 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes face-blink {
  0%, 96%, 100% { transform: scaleY(1); }
  98%           { transform: scaleY(0.05); }
}

/* -------- HOVER LIFT (product cards on home page) -------- */
.panel.lift {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .15s, box-shadow .25s;
}
.panel.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(10,10,10,0.08);
}

/* -------- MAGNETIC NAV INDICATOR --------
   A small underline that slides between top-bar links on hover. */
.topbar nav { position: relative; }
.topbar nav .nav-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--acid-deep);
  pointer-events: none;
  opacity: 0;
  transition: left .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1), opacity .15s;
}
.topbar nav.has-hover .nav-indicator { opacity: 1; }

/* -------- INTERACTIVE BUTTON MICROBOUNCE -------- */
.btn { transition: transform .08s ease-out, background .15s, color .15s, border-color .15s; }
.btn:active { transform: translateY(2px); }

/* -------- LINK HOVER UNDERLINE (mono links) -------- */
.t12 a, .t10 a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .25s;
  padding-bottom: 1px;
}
.t12 a:hover, .t10 a:hover {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ptable-wrap::before { animation: none !important; opacity: 0; }
  .face.spin g[stroke] { animation: none !important; }
  .panel.lift { transition: none; }
  .panel.lift:hover { transform: none; box-shadow: none; }
}

/* topbar logo dither-in (always plays — light) */
.topbar .brand .face {
  animation: brand-rez 600ms steps(6) forwards;
  opacity: 0;
}
@keyframes brand-rez {
  0%   { opacity: 0; filter: blur(3px); transform: scale(0.92); }
  60%  { opacity: 0.7; filter: blur(1px); }
  100% { opacity: 1; filter: blur(0);    transform: scale(1);    }
}
html.booted .topbar .brand .face { animation: none; opacity: 1; }

/* -------- HUGE HEADLINE — PRODUCT-PAGE SCALE (no overlap) -------- */
.huge.product-h {
  font-size: clamp(56px, 10vw, 144px);
  line-height: 0.9;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* -------- ATOM CARD — ensure containment on product hero -------- */
.atom-card {
  margin-top: 0;
}

/* -------- PAGE TRANSITIONS --------
   Fade-in on first paint, fade-out before navigation.
   The boot screen sits above this and provides cover on first visit. */
body {
  animation: page-in .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease-in, transform .22s ease-in;
  animation: none;
  pointer-events: none;
}

/* -------- NEWSLETTER BAND (slim, full-width, above footer) -------- */
.news-band {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--bg-2);
  padding: 32px 0;
  margin-top: 120px;
  position: relative;
  overflow: hidden;
}
.news-band::before {
  /* subtle dot field, signature touch */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.18;
  pointer-events: none;
}
.news-band .wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.news-band .news-copy {
  max-width: 460px;
}
.news-band .news-copy .news-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.news-band .news-copy h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 6px 0 0;
}
.news-band .news-copy p {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin: 8px 0 0;
  line-height: 1.55;
}
.news-form {
  display: flex;
  gap: 8px;
  min-width: min(440px, 100%);
}
.news-form input {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: box-shadow .12s;
}
.news-form input:focus { box-shadow: 0 0 0 2px var(--acid); }
.news-form .btn { padding: 14px 22px; }
.news-feedback {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.news-feedback.ok {
  color: var(--ink);
  background: var(--acid);
  padding: 10px 14px;
  display: block;
  margin-top: 12px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.news-feedback .news-code {
  display: inline-block;
  background: var(--ink);
  color: var(--acid);
  padding: 3px 8px;
  margin: 0 2px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  user-select: all;
  transition: background .12s;
}
.news-feedback .news-code:hover { background: var(--ink-2); }
.news-feedback .news-code.is-copied { background: var(--ink); color: var(--acid); }
.news-feedback .news-fine {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
@media (max-width: 720px) {
  .news-band { padding: 24px 0; margin-top: 80px; }
  .news-band .news-copy h3 { font-size: 24px; }
  .news-form { width: 100%; }
}

/* -------- FIRST-ADOPTERS BANNER (top of home page) --------
   A wide acid-lime band sitting right under the topbar. NOT a modal —
   flows with the page, no scroll lock, no overlay tricks. Dismissable
   via the × button (JS adds .is-dismissed which collapses + removes it
   from layout). On mobile the layout stacks; the form goes full-width. */
.news-top {
  display: block;
  background: var(--acid);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  padding: 18px 0;
  position: relative;
  overflow: hidden;
  animation: news-top-slide-in .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes news-top-slide-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.news-top.is-dismissed {
  display: none;
}
/* Subtle dot field signature — matches our other accent surfaces */
.news-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(10,10,10,0.18) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.4;
  pointer-events: none;
}
.news-top-wrap {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--rail);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.news-top-x {
  position: absolute;
  top: -6px;
  right: calc(var(--rail) - 6px);
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background .15s, color .15s;
}
.news-top-x:hover { background: var(--ink); color: var(--acid); }

.news-top-copy { min-width: 0; padding-right: 36px; }
.news-top-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  font-weight: 700;
}
.news-top-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 4px 0 0;
}
.news-top-body {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  margin: 6px 0 0;
  line-height: 1.55;
  max-width: 640px;
  opacity: 0.82;
}
.news-top-form { min-width: 360px; }
.news-top-form input { background: var(--bg); }

/* Feedback message renders next to the form when the user submits.
   The default .ok style is acid-on-ink which would vanish into the acid
   banner — invert it here so feedback stays readable. */
.news-top .news-feedback { grid-column: 1 / -1; margin-top: 10px; }
.news-top .news-feedback.ok {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.news-top .news-feedback.ok .news-code {
  background: var(--acid);
  color: var(--ink);
}
.news-top .news-feedback.ok .news-fine { color: var(--bg); opacity: 0.7; }

@media (max-width: 900px) {
  .news-top-wrap { grid-template-columns: 1fr; gap: 14px; }
  .news-top-copy { padding-right: 32px; }
  .news-top-form { min-width: 0; width: 100%; }
  .news-top-form input { width: 100%; }
}
@media (max-width: 480px) {
  .news-top-form { flex-direction: column; }
  .news-top-form .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .news-top { animation: none; }
}
/* Subtle dot field signature — matches the band's */
.news-popup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.14;
  pointer-events: none;
}
.news-popup-card > * { position: relative; }

.news-popup-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.news-popup-x:hover { background: var(--ink); color: var(--bg); }

.news-popup-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  padding-right: 36px; /* avoid the close button */
}
.news-popup-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 8px 0 0;
}
.news-popup-body {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin: 10px 0 16px;
  line-height: 1.6;
}
.news-popup .news-form { display: flex; gap: 8px; width: 100%; min-width: 0; }
.news-popup .news-form input { flex: 1; min-width: 0; }
.news-popup .news-form .btn { padding: 14px 16px; white-space: nowrap; font-size: 11px; }

.news-popup-skip {
  display: block;
  margin: 14px auto 0;
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 4px 8px;
}
.news-popup-skip:hover { color: var(--ink); }

/* Mobile — popup stays centered, sized to fit comfortably with thumb-safe
   padding on the sides and a stacked form so the email field gets full width */
@media (max-width: 720px) {
  .news-popup { padding: 18px; }
  .news-popup-card {
    width: 100%;
    padding: 30px 22px 22px;
    box-shadow: 4px 6px 0 rgba(10,10,10,0.18), 0 24px 50px rgba(10,10,10,0.28);
  }
  .news-popup-title { font-size: 22px; }
  .news-popup .news-form { flex-direction: column; gap: 10px; }
  .news-popup .news-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .news-popup,
  .news-popup-card { transition: opacity .12s ease; }
  .news-popup-card { transform: none !important; }
}

/* -------- TUNGSTEN AS FEATURED CARD (home CTA grid) -------- */
.product-card-featured {
  background: var(--ink) !important;
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.product-card-featured::before {
  content: "featured";
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--acid);
  color: var(--ink);
  padding: 3px 7px;
  border: 1px solid var(--ink);
}
.product-card-featured .t10.dim { color: rgba(212,255,60,0.65) !important; }
.product-card-featured .t10.up { color: var(--acid) !important; }
.product-card-featured .t12.dim { color: rgba(236,236,227,0.6) !important; }
.product-card-featured .med { color: var(--bg) !important; }
.product-card-featured:hover { background: #0F0F0F !important; }

/* -------- LEGAL PAGE (eula / terms / privacy) -------- */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--sans);
  line-height: 1.7;
  color: var(--ink-2);
}
.legal-doc h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  counter-increment: legal-section;
}
.legal-doc h2::before {
  content: counter(legal-section, decimal-leading-zero) " · ";
  color: var(--ink-dim);
  margin-right: 4px;
}
.legal-doc { counter-reset: legal-section; }
.legal-doc h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 24px 0 8px;
  color: var(--ink);
}
.legal-doc p {
  margin: 0 0 14px;
  font-size: 14px;
}
.legal-doc ul, .legal-doc ol {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 14px;
}
.legal-doc li { margin-bottom: 6px; }
.legal-doc strong { color: var(--ink); }
.legal-doc code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-3);
  padding: 1px 6px;
  letter-spacing: 0.02em;
}
.legal-doc a { text-decoration: underline; text-underline-offset: 3px; }
.legal-toc {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 18px 22px;
  margin-bottom: 40px;
  font-family: var(--mono);
  font-size: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 28px;
  counter-reset: toc-item;
}
.legal-toc a {
  color: var(--ink-2);
  display: block;
  padding: 4px 0;
  transition: color .12s, padding-left .12s;
}
.legal-toc a:hover { color: var(--ink); padding-left: 6px; }
.legal-toc a::before {
  counter-increment: toc-item;
  content: counter(toc-item, decimal-leading-zero) " — ";
  color: var(--ink-dim);
  margin-right: 4px;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 22px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  margin: 24px 0 36px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.legal-meta strong { color: var(--ink); font-weight: 700; letter-spacing: 0.04em; }
@media (max-width: 720px) {
  .legal-toc { grid-template-columns: 1fr; }
}

/* -------- PRESS KIT -------- */
.pk-hero {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--bg-2);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  overflow: hidden;
}
.pk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.2;
  pointer-events: none;
}
.pk-hero > * { position: relative; }
.pk-hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 128px);
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin: 0;
}
.pk-hero h1 .acid-dot { color: var(--acid-deep); -webkit-text-stroke: 1px var(--ink); }
.pk-hero p { font-family: var(--mono); font-size: 12px; color: var(--ink-2); line-height: 1.7; margin: 24px 0 0; max-width: 480px; }
.pk-hero .pk-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--bg);
}
.pk-hero .pk-stat-strip > div { padding: 14px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pk-hero .pk-stat-strip > div:nth-child(2n) { border-right: 0; }
.pk-hero .pk-stat-strip > div:nth-last-child(-n+2) { border-bottom: 0; }
.pk-hero .pk-stat-strip .lbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.pk-hero .pk-stat-strip .val { font-family: var(--sans); font-weight: 700; font-size: 18px; margin-top: 4px; letter-spacing: -0.01em; }
@media (max-width: 720px) {
  .pk-hero { grid-template-columns: 1fr; padding: 36px 24px; gap: 28px; }
}

.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.pk-asset {
  border: 1px solid var(--ink);
  background: var(--bg-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.pk-asset:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(10,10,10,0.08); }
.pk-asset .pk-asset-thumb {
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.pk-asset .pk-asset-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pk-asset .pk-asset-meta {
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.pk-asset .pk-asset-meta .name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; font-weight: 700; }
.pk-asset .pk-asset-meta .size { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-dim); }

/* boilerplate copy block */
.pk-blurb {
  border: 1px solid var(--rule);
  background: var(--bg-2);
  padding: 0;
  position: relative;
}
.pk-blurb-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.pk-blurb-head .copy-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 4px 8px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pk-blurb-head .copy-btn:hover { background: var(--ink); color: var(--acid); }
.pk-blurb-head .copy-btn.is-copied { background: var(--acid); color: var(--ink); }
.pk-blurb pre {
  margin: 0;
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* color swatches */
.pk-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--ink);
}
.pk-swatch {
  padding: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.pk-swatch:nth-last-child(-n+5) { border-bottom: 0; }
.pk-swatch .pk-color {
  height: 100px;
  border-bottom: 1px solid var(--ink);
}
.pk-swatch .pk-meta { padding: 12px 14px; }
.pk-swatch .pk-meta .nm { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pk-swatch .pk-meta .hex { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 4px; letter-spacing: 0.04em; }
.pk-swatch .pk-meta .role { font-family: var(--mono); font-size: 9px; color: var(--ink-dim); margin-top: 4px; letter-spacing: 0.12em; text-transform: uppercase; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .boot-screen { display: none !important; }
  body, body.is-leaving { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* -------- RESPONSIVE -------- */
@media (max-width: 1100px) {
  .cols-12, .cols-6, .cols-4 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: 1fr 1fr; }
  .mp-list { grid-template-columns: 1fr; }
  .mp-activity-row { grid-template-columns: 90px 1fr; }
  .mp-activity-row .mp-activity-detail { grid-column: 2; }
  /* hero on product pages: make right column flow under left on mid screens */
  .grid.cols-12 > [style*="span 7"],
  .grid.cols-12 > [style*="span 5"] {
    grid-column: 1 / -1 !important;
  }
  .grid.cols-12 > [style*="span 5"][style*="flex-end"] { align-items: flex-start !important; }
  .atom-card, .atom-props, .hero-buy { max-width: 100%; }
  .topbar-inner { gap: 16px; }
}

@media (max-width: 900px) {
  /* products dropdown collapses into a tighter grid */
  .nav-menu { min-width: 280px; grid-template-columns: 1fr; gap: 12px; }
  .nav-section { padding-bottom: 8px; }
  /* Tungsten/gallium hero h1 stays in bounds */
  .huge.product-h { font-size: clamp(56px, 14vw, 96px); }
  /* footer columns collapse */
  footer .grid.cols-12 > div[style*="span 5"],
  footer .grid.cols-12 > div[style*="span 2"],
  footer .grid.cols-12 > div[style*="span 3"] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  :root { --rail: 16px; --gut: 14px; }

  /* Topbar — desktop nav hidden, hamburger (built by JS) owns mobile nav */
  .topbar-inner {
    grid-template-columns: auto auto auto;
    gap: 10px;
    height: 56px;
    padding: 0 var(--rail);
  }
  .topbar nav { display: none; }
  /* Auth link stays visible but compact */
  .topbar .right { gap: 6px; }
  .topbar .right .tag.dot.live { display: none; } /* free up space */
  .topbar .right .auth-link {
    padding: 8px 10px;
    font-size: 9px;
    letter-spacing: 0.12em;
    max-width: 110px;
  }
  /* Make the brand text smaller on tight phones */
  .brand .word { font-size: 12px; }
  .brand .sub  { display: none; }

  .cols-12, .cols-6, .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .grid.cols-12 > [style*="span"] { grid-column: 1 / -1 !important; }

  .sec-head {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
  }
  .sec-head .meta { text-align: left; }
  .sec-head h2 { font-size: 28px; }

  .tabbar {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
  }
  .tabbar label {
    /* WCAG 2.1 AA — 44px min tap target */
    padding: 14px 16px;
    font-size: 10px;
    clip-path: none;
    min-height: 44px;
    flex: 1 0 calc(50% - 4px); /* 2 tabs per row on phones */
  }
  /* Buttons: ensure 44px height baseline */
  .btn { min-height: 44px; }
  .btn.small { min-height: 36px; }

  /* hero adjustments */
  .huge { font-size: clamp(54px, 16vw, 96px); }
  .huge.product-h { font-size: clamp(44px, 14vw, 72px); }
  .big { font-size: clamp(32px, 8vw, 56px); }

  /* atom card / hero-buy stack */
  .atom-card { max-width: 100%; }
  .atom-props { max-width: 100%; grid-template-columns: 1fr 1fr; }
  .hero-buy { max-width: 100%; grid-template-columns: 1fr; gap: 12px; }
  .hero-buy .hb-actions { flex-direction: row; }
  .hero-buy .hb-actions .btn.block { flex: 1; }

  /* periodic table — already scrolls on 900px breakpoint */

  /* spec table — wrap value on next line if it overflows */
  .spec-table tr { flex-wrap: wrap; }
  .spec-table tr::after { display: none; }
  .spec-table td:last-child { margin-left: auto; padding-top: 4px; }

  /* product cards in the catalog CTA */
  .panel.acid.clip { padding: 40px 24px !important; }

  /* footer */
  footer { margin-top: 80px; padding: 36px 0 24px; }
  footer .grid.cols-12 { row-gap: 24px; }

  /* my-products card grid */
  .mp-card-grid { grid-template-columns: 1fr; }
  .mp-cell { border-right: 0; }
  .mp-cell:last-child { border-bottom: 0; }
  .mp-card-actions { grid-template-columns: 1fr; }
  .mp-card-head { grid-template-columns: auto 1fr; }
  .mp-card-status { grid-column: 1 / -1; }
  .mp-activity-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }

  /* login page */
  .login-card { padding: 22px 20px 18px; }

  /* hide non-essential ornaments on tiny screens */
  .face.spin { width: 96px !important; height: 96px !important; }

  /* big CTA at bottom */
  .panel.acid.clip [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* very small phones */
@media (max-width: 420px) {
  :root { --rail: 12px; }
  .huge.product-h { font-size: clamp(38px, 13vw, 60px); }
  .atom-props { grid-template-columns: 1fr; }
  .ptable-cap { flex-wrap: wrap; gap: 6px; }
  .ptable-cap .cap-rule { display: none; }
}

/* =====================================================================
   AFFILIATE-PROGRAM PASSWORD GATE (affiliate-program.html)
   Soft client-side lock. Hides the page content until the gate is
   satisfied. See wireAffiliateGate() in script.js for the JS half.
   ===================================================================== */
.ap-content[data-locked="true"] { display: none; }
.ap-content[data-locked="false"] { display: block; }

.ap-gate {
  position: fixed;
  inset: 0;
  z-index: 14000;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: cs-fade-in .25s ease-out both;
}
.ap-gate.is-hidden { display: none; }

.ap-gate-card {
  width: min(440px, 100%);
  background: var(--bg-2);
  border: 1px solid var(--ink);
  padding: 38px 38px 28px;
  box-shadow: 6px 8px 0 rgba(10,10,10,0.14), 0 32px 80px rgba(10,10,10,0.18);
  position: relative;
}
.ap-gate-back {
  position: absolute;
  top: -38px;
  left: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
}
.ap-gate-back:hover { color: var(--ink); }
.ap-gate-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
}
.ap-gate-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 8px 0 0;
  color: var(--ink);
}
.ap-gate-sub {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 12px 0 22px;
}
.ap-gate-form .cf-field { display: block; margin-bottom: 12px; }
.ap-gate-form .cf-field .cf-lbl {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  margin-bottom: 6px;
}
.ap-gate-form input {
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: box-shadow .12s;
}
.ap-gate-form input:focus { box-shadow: 0 0 0 2px var(--acid); }
.ap-gate-form .btn { width: 100%; }

.ap-gate-feedback {
  margin-top: 12px;
  min-height: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.02em;
}
.ap-gate-meta {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.ap-gate-meta a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .ap-gate-card { padding: 28px 22px 22px; }
  .ap-gate-h { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-gate { animation: none; }
}

/* =====================================================================
   HORIZONTAL SCROLLER
   A row of fixed-width cards that scrolls horizontally. Used by the
   Tungsten "thirteen modes" section and the .pp-frame legend (below image).
   - .hscroll-wrap wraps the scroller and gives it 1 px ink frame + a hint.
   - .hscroll is the actual scroll container.
   - Children are sized via flex-shrink: 0 with a fixed min-width.
   ===================================================================== */
.hscroll-wrap {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--bg-2);
  overflow: hidden;
}
.hscroll {
  display: flex;
  gap: 14px;
  padding: 18px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
}
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 4px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }
.hscroll > * {
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 300px;
  scroll-snap-align: start;
}
.hscroll-hint {
  position: absolute;
  bottom: 6px;
  right: 14px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hscroll > * { min-width: 240px; }
}

/* =====================================================================
   COMING-SOON OVERLAY (used by radium.html)
   Blurs every direct child of body except the overlay itself, locks
   interaction with the rest of the page, and presents a centered card
   with an email-signup form.
   ===================================================================== */
/* The body.is-coming-soon overlay system was removed — Radium is now a
   straight "coming soon" page (see .rad-cs-* rules at the bottom of this
   file). Legacy .coming-soon-overlay / .cs-* rules below are orphaned but
   harmless. */

.coming-soon-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  /* Heavy backdrop so the headline + the card both pop. The page behind
     is already blurred via filter: blur(6px) on the body's children, so
     this acts as a stage rather than a tint. */
  background: rgba(10,10,10,0.78);
  /* Use flex instead of grid+place-items:center — grid centering CLIPS the
     top of an oversized child off the scrollable area; flex with margin:auto
     centers when it fits AND lets you scroll past when it doesn't. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 40px;   /* leave room at top for the back button */
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: cs-fade-in .35s ease-out both;
}
/* Card pushes itself to vertical center when it fits in viewport, but stays
   pinned to the top (with overflow scroll) when it's taller than viewport. */
.coming-soon-overlay .cs-card { margin: auto 0; }

/* Back-to-home button — fixed to the overlay's top-left so it's always
   visible regardless of card scroll position. */
.cs-back {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 13100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .12s, color .12s, transform .12s;
  box-shadow: 3px 4px 0 rgba(10,10,10,0.18);
}
.cs-back:hover {
  background: var(--ink);
  color: var(--acid);
  transform: translate(-1px, -1px);
  box-shadow: 4px 5px 0 rgba(10,10,10,0.22);
}
.cs-back .cs-back-arrow {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
}

/* Brief feature summary inside the card */
.cs-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 22px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--rule);
}
.cs-summary-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.cs-summary-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  padding-top: 1px;
}
.cs-summary-h {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.cs-summary-d {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 3px;
}
@keyframes cs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Massive "COMING SOON" headline — sits INSIDE the card as the first
   element so it's just normal document flow. No position:fixed, no z-index
   tricks. Centered text by default. Renders. */
.cs-megatitle {
  text-align: center;
  margin: -8px 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.cs-megawords {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(64px, 11vw, 128px);
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: var(--ink);
  text-transform: lowercase;
}
.cs-megastop {
  color: var(--acid-deep);
  -webkit-text-stroke: 1px var(--ink);
}
.cs-megasub {
  margin-top: 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* The original radium headline shrinks to a subheading underneath */
.cs-headline.cs-headline-sub {
  font-size: clamp(32px, 5vw, 56px);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .cs-megawords { font-size: clamp(56px, 15vw, 96px); line-height: 0.95; }
  .cs-megasub { letter-spacing: 0.22em; font-size: 10px; }
}

.cs-card {
  width: min(640px, 100%);
  background: var(--bg-2);
  border: 1px solid var(--ink);
  padding: 44px 44px 32px;
  box-shadow: 8px 10px 0 rgba(10,10,10,0.18), 0 32px 80px rgba(10,10,10,0.35);
  position: relative;
  z-index: 13010; /* above the giant backdrop text */
  animation: cs-card-in .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cs-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Subtle dot field signature */
.cs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.15;
  pointer-events: none;
}
.cs-card > * { position: relative; }

.cs-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cs-headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 14px 0 0;
  color: var(--ink);
}
.cs-headline .cs-sep { color: var(--ink-dim); margin: 0 .15em; font-weight: 400; }
.cs-headline .cs-stop { color: var(--acid-deep); -webkit-text-stroke: 1px var(--ink); }
.cs-sub {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 16px 0 24px;
  max-width: 540px;
}
.cs-sub strong { color: var(--ink); font-weight: 700; }

.cs-form {
  display: flex;
  gap: 8px;
  width: 100%;
}
.cs-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: box-shadow .12s;
}
.cs-form input:focus { box-shadow: 0 0 0 2px var(--acid); }
.cs-form .btn { padding: 14px 22px; white-space: nowrap; }

.cs-feedback {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  min-height: 16px;
}
.cs-feedback.ok {
  background: var(--acid);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 14px;
  line-height: 1.6;
}
.cs-feedback.ok .cs-code {
  display: inline-block;
  background: var(--ink);
  color: var(--acid);
  padding: 2px 8px;
  margin: 0 2px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  user-select: all;
}

.cs-meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cs-meta .cs-dot { opacity: 0.5; }
.cs-meta a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* Decorative periodic-table-cell chip in the corner */
.cs-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 70px;
  height: 70px;
  background: var(--acid);
  border: 1px solid var(--ink);
  outline: 1px solid rgba(10,10,10,0.18);
  outline-offset: -2px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 4px 6px 5px;
  box-shadow: 3px 4px 0 rgba(10,10,10,0.1);
}
.cs-chip-num {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: right;
  color: var(--ink);
}
.cs-chip-sym {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--ink);
  align-self: center;
  line-height: 0.9;
}
.cs-chip-name {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--ink);
  padding-top: 3px;
  border-top: 1px solid var(--ink);
}

@media (max-width: 720px) {
  .cs-card { padding: 32px 24px 24px; }
  .cs-chip { display: none; }
  .cs-form { flex-direction: column; }
  .cs-form .btn { width: 100%; }
  .cs-back { top: 12px; left: 12px; padding: 8px 12px; font-size: 9px; }
  /* Push the card down a touch so the fixed back button doesn't overlap it */
  .coming-soon-overlay { padding-top: 70px; align-items: start; }
  .cs-summary { padding: 14px 14px; }
  .cs-summary-row { grid-template-columns: 28px 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-overlay,
  .cs-card { animation: none; }
}

/* =====================================================================
   RADIUM DEAD PAGE (.rad-cs-*)
   Plain, single-section "coming soon" page. No overlay, no blur, no
   z-index gymnastics. Just a centered hero with the huge headline,
   email-signup form, and three feature cards.
   ===================================================================== */
.rad-cs {
  padding: 56px 0 120px;
  min-height: calc(100vh - 56px); /* push the footer down */
}
.rad-cs-crumb {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 24px;
}
.rad-cs-hero {
  padding: 80px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rad-cs-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.rad-cs-h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(80px, 16vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-transform: lowercase;
  margin: 0;
  max-width: 100%;
}
.rad-cs-stop {
  color: var(--acid-deep);
  -webkit-text-stroke: 1px var(--ink);
}
.rad-cs-stop-sm {
  color: var(--acid-deep);
  -webkit-text-stroke: 1px var(--ink);
}
.rad-cs-sub {
  margin-top: 32px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.rad-cs-h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
  margin: 56px 0 0;
}
.rad-cs-body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 560px;
  margin: 18px 0 0;
}
.rad-cs-body strong { color: var(--ink); font-weight: 700; }

.rad-cs-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin-top: 32px;
}
.rad-cs-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: box-shadow .12s;
}
.rad-cs-form input:focus { box-shadow: 0 0 0 2px var(--acid); }
.rad-cs-form .btn { white-space: nowrap; }
.rad-cs-feedback {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  min-height: 16px;
  max-width: 480px;
  text-align: center;
}
.rad-cs-feedback.ok {
  background: var(--acid);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 14px;
  line-height: 1.6;
}
.rad-cs-feedback .rad-cs-code {
  display: inline-block;
  background: var(--ink);
  color: var(--acid);
  padding: 2px 8px;
  margin: 0 2px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  user-select: all;
}

.rad-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 920px;
  margin-top: 64px;
}
.rad-cs-card {
  border: 1px solid var(--rule);
  background: var(--bg-2);
  padding: 24px 22px;
  text-align: left;
}
.rad-cs-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}
.rad-cs-h3 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 6px 0 8px;
}
.rad-cs-p {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.rad-cs-meta {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.rad-cs-meta .rad-cs-dot { opacity: 0.5; }
.rad-cs-meta a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

@media (max-width: 720px) {
  .rad-cs { padding: 40px 0 80px; }
  .rad-cs-hero { padding-top: 40px; }
  .rad-cs-h1 { font-size: clamp(64px, 18vw, 120px); }
  .rad-cs-h2 { margin-top: 40px; font-size: clamp(32px, 8vw, 48px); }
  .rad-cs-grid { grid-template-columns: 1fr; }
  .rad-cs-form { flex-direction: column; }
  .rad-cs-form .btn { width: 100%; }
}