/* ==========================================================================
   Cortex — base type and primitives
   Reads only from tokens.css. No hex values below this line.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--cx-bg);
  color: var(--cx-text);
  font-family: var(--cx-body);
  font-size: var(--cx-t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* --- headings ------------------------------------------------------------
   Archivo across the board. The old build used Playfair Display for display
   type; it reads as fashion editorial and works against the lab positioning,
   so it is deliberately not carried forward.                               */

h1, h2, h3, h4, h5, h6,
.cx-display {
  font-family: var(--cx-sans);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--cx-s3);
}

h1 { font-size: var(--cx-t-3xl); }
h2 { font-size: var(--cx-t-2xl); }
h3 { font-size: var(--cx-t-xl); }
h4 { font-size: var(--cx-t-lg); }
h5 { font-size: var(--cx-t-md); }
h6 { font-size: var(--cx-t-base); }

p { margin: 0 0 var(--cx-s4); max-width: var(--cx-measure); }

a { color: var(--cx-gold); text-decoration: none; }
a:hover { color: var(--cx-gold-bright); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cx-gold);
  outline-offset: 2px;
}

/* --- labels --------------------------------------------------------------
   The wide-tracked uppercase label is the most characteristic thing carried
   over from the old build. Used for section eyebrows and spec-table keys.  */

.cx-eyebrow {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  font-weight: 500;
  letter-spacing: var(--cx-track-eyebrow);
  text-transform: uppercase;
  color: var(--cx-gold);
}

.cx-label {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
}

/* --- data ----------------------------------------------------------------
   Anything numeric is mono and tabular. Purity percentages, vial masses,
   batch numbers and prices all have to line up column to column.          */

.cx-data,
.cx-spec td,
.woocommerce-Price-amount {
  font-family: var(--cx-mono);
  font-variant-numeric: tabular-nums;
}

/* --- spec table ----------------------------------------------------------
   Skeleton only. Populated by the cortex-product-data plugin in stage 3.  */

.cx-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cx-t-sm);
}
.cx-spec th {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  font-weight: 500;
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
  text-align: left;
  padding: var(--cx-s3) var(--cx-s4) var(--cx-s3) 0;
  border-bottom: 1px solid var(--cx-line);
  white-space: nowrap;
  vertical-align: top;
  width: 1%;
}
.cx-spec td {
  padding: var(--cx-s3) 0;
  border-bottom: 1px solid var(--cx-line-soft);
  color: var(--cx-text);
}
.cx-spec tr:last-child th,
.cx-spec tr:last-child td { border-bottom: none; }

/* --- rules over cards ----------------------------------------------------
   Competitors in this category reach for rounded cards and drop shadows on
   every block, which flattens hierarchy. Structure here comes from rules
   and spacing; fills are spent only where something genuinely lifts.      */

.cx-rule { border: 0; border-top: 1px solid var(--cx-line); margin: var(--cx-s7) 0; }

.cx-panel {
  background: var(--cx-panel);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  padding: var(--cx-s5);
}

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

.cx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s2);
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  padding: var(--cx-s3) var(--cx-s5);
  border-radius: var(--cx-radius);
  border: 1px solid var(--cx-gold);
  background: var(--cx-gold);
  color: var(--cx-bg);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.cx-btn:hover { background: var(--cx-gold-bright); border-color: var(--cx-gold-bright); text-decoration: none; }

.cx-btn[disabled],
.cx-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--cx-text-dim);
  border-color: var(--cx-line);
  cursor: not-allowed;
}
.cx-btn[disabled]:hover {
  background: transparent;
  color: var(--cx-text-dim);
  border-color: var(--cx-line);
}

.cx-btn--ghost { background: transparent; color: var(--cx-gold); }
.cx-btn--ghost:hover { background: var(--cx-gold-wash); color: var(--cx-gold-bright); }

/* --- layout --------------------------------------------------------------- */

.cx-wrap { max-width: var(--cx-wrap); margin-inline: auto; padding-inline: var(--cx-s5); }

/* Wide content scrolls inside its own container; the body never scrolls sideways. */
.cx-scroll { overflow-x: auto; }

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- certificate of analysis --------------------------------------------
   Emitted by the cortex-product-data plugin. Given its own block rather than
   a spec-table row: with no chargeback protection at checkout, the COA is the
   strongest trust signal on the page.                                      */

.cx-coa {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--cx-s1) var(--cx-s4);
  margin: var(--cx-s5) 0;
  padding: var(--cx-s4);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-panel);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.cx-coa:hover { border-color: var(--cx-gold); background: var(--cx-gold-wash); text-decoration: none; }

.cx-coa-label {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text);
}
.cx-coa-meta {
  grid-column: 1;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  color: var(--cx-text-dim);
}
.cx-coa-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-gold);
  white-space: nowrap;
}

/* Spec table caption is for screen readers only. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- compliance ----------------------------------------------------------
   Markup from the cortex-compliance plugin.                               */

.cx-topbar {
  background: var(--cx-gold);
  color: var(--cx-bg);
}
.cx-topbar-in {
  max-width: var(--cx-wrap);
  margin-inline: auto;
  padding: var(--cx-s2) var(--cx-s5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cx-s5);
}
.cx-topbar-note {
  font-family: var(--cx-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: var(--cx-track-eyebrow);
  text-transform: uppercase;
  margin: 0;
  max-width: none;
}

/* Socials sit with the notice at the top of every page. */
.cx-socials {
  display: flex;
  align-items: center;
  gap: var(--cx-s1);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  flex: none;
}
.cx-socials li { margin: 0; }
.cx-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--cx-radius);
  color: var(--cx-bg);
  opacity: .78;
  transition: opacity 120ms ease, background 120ms ease;
}
.cx-socials a:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.cx-socials a:focus-visible { outline: 2px solid var(--cx-bg); outline-offset: 1px; }
.cx-socials svg { width: 17px; height: 17px; display: block; }

@media (max-width: 767px) {
  .cx-topbar-in { flex-direction: column; gap: var(--cx-s2); padding-block: var(--cx-s3); }
  .cx-topbar-note { text-align: center; line-height: 1.6; }
  .cx-socials { margin: 0; }
  .cx-socials a { width: 2.25rem; height: 2.25rem; }
  .cx-socials svg { width: 19px; height: 19px; }
}

.cx-ruo-product {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
  border-top: 1px solid var(--cx-line-soft);
  padding-top: var(--cx-s3);
  margin: var(--cx-s4) 0;
}

.cx-ruo-checkout td {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.7;
  color: var(--cx-text-mut);
}

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

.cx-entity {
  border-top: 1px solid var(--cx-line);
  background: var(--cx-bg-alt);
  padding: var(--cx-s5) 0;
}
.cx-entity-line {
  font-size: var(--cx-t-sm);
  color: var(--cx-text-dim);
  margin: 0 0 var(--cx-s2);
  max-width: 70ch;
}
.cx-entity-line:last-child { margin-bottom: 0; }
.cx-entity-ruo { color: var(--cx-text-dim); }
.cx-entity-warn { color: var(--cx-danger); }

/* --- entry gate ----------------------------------------------------------
   Opaque, not translucent: the catalogue should not be legible behind it. */

.cx-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cx-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cx-s5);
  overflow-y: auto;
}
.cx-gate-box {
  max-width: 34rem;
  width: 100%;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-panel);
  padding: var(--cx-s6);
}
.cx-gate-eyebrow {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-eyebrow);
  text-transform: uppercase;
  color: var(--cx-gold);
  margin: 0 0 var(--cx-s2);
}
.cx-gate-title {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-xl);
  margin: 0 0 var(--cx-s4);
}
.cx-gate-body {
  font-size: var(--cx-t-sm);
  color: var(--cx-text-mut);
  line-height: 1.65;
  margin-bottom: var(--cx-s4);
}
.cx-gate-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--cx-s5);
  border-top: 1px solid var(--cx-line-soft);
}
.cx-gate-list li { border-bottom: 1px solid var(--cx-line-soft); }

.cx-gate-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cx-s3);
  align-items: start;
  padding: var(--cx-s3) var(--cx-s1);
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.6;
  color: var(--cx-text-mut);
}
.cx-gate-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 1px 0 0;
  flex: none;
  border: 1.5px solid var(--cx-line);
  border-radius: 2px;
  background: var(--cx-bg);
  cursor: pointer;
  position: relative;
}
.cx-gate-check input:checked {
  background: var(--cx-gold);
  border-color: var(--cx-gold);
}
.cx-gate-check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--cx-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.cx-gate-check input:focus-visible {
  outline: 2px solid var(--cx-gold);
  outline-offset: 2px;
}
.cx-gate-check input:checked ~ span { color: var(--cx-text); }
.cx-gate-actions { display: flex; gap: var(--cx-s3); flex-wrap: wrap; }

/* --- email capture -------------------------------------------------------
   Markup from the cortex-leads plugin. Can appear on any page, so it lives
   in base.css rather than a page-specific sheet.                          */

.cx-capture {
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-panel);
  padding: var(--cx-s6);
  margin: var(--cx-s7) 0;
}
.cx-capture-title {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-lg);
  margin: var(--cx-s2) 0 var(--cx-s3);
}
.cx-capture-blurb {
  color: var(--cx-text-mut);
  font-size: var(--cx-t-sm);
  line-height: 1.65;
  max-width: 56ch;
  margin-bottom: var(--cx-s4);
}
.cx-capture-form {
  display: flex;
  gap: var(--cx-s2);
  flex-wrap: wrap;
  margin-bottom: var(--cx-s3);
}
.cx-capture-form input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  background: var(--cx-bg);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  padding: var(--cx-s3) var(--cx-s4);
  color: var(--cx-text);
  font-family: var(--cx-mono);
  font-size: var(--cx-t-sm);
}
.cx-capture-form input[type="email"]::placeholder { color: var(--cx-text-dim); }

.cx-capture-legal {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.7;
  color: var(--cx-text-dim);
  margin: 0;
  max-width: 60ch;
}
.cx-capture-msg {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.6;
  padding: var(--cx-s3) var(--cx-s4);
  border-radius: var(--cx-radius);
  margin-bottom: var(--cx-s4);
}
.cx-capture-msg.is-ok  { background: var(--cx-gold-wash); color: var(--cx-gold); }
.cx-capture-msg.is-bad { background: var(--cx-panel); color: var(--cx-danger); border: 1px solid var(--cx-danger); }

/* Honeypot: present for scripted fillers, gone for everyone else. */
.cx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- content hub ---------------------------------------------------------- */

.cx-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--cx-line);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  overflow: hidden;
}
.cx-hub-item {
  display: flex;
  flex-direction: column;
  gap: var(--cx-s2);
  background: var(--cx-bg);
  padding: var(--cx-s4);
  text-decoration: none;
  transition: background 120ms ease;
}
.cx-hub-item:hover { background: var(--cx-panel); text-decoration: none; }
.cx-hub-date {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-gold);
}
.cx-hub-title {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cx-text);
}

/* --- calculator ----------------------------------------------------------
   The drop-in markup keeps its own internal styling; this only gives it a
   container consistent with the rest of the site.                         */

.cx-calculator {
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-panel);
  padding: var(--cx-s5);
  margin: var(--cx-s6) 0;
  overflow-x: auto;
}

/* --- contact -------------------------------------------------------------- */

.cx-contact { display: grid; gap: var(--cx-s7); margin: var(--cx-s5) 0; }
@media (min-width: 860px) { .cx-contact { grid-template-columns: 1.6fr 1fr; gap: var(--cx-s8); } }

.cx-contact-row { display: grid; gap: var(--cx-s4); }
@media (min-width: 560px) { .cx-contact-row { grid-template-columns: 1fr 1fr; } }

.cx-f { margin: 0 0 var(--cx-s4); max-width: none; }
.cx-f label {
  display: block;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
  margin-bottom: var(--cx-s2);
}
.cx-f label span { text-transform: none; letter-spacing: 0; opacity: .7; }

.cx-f input,
.cx-f select,
.cx-f textarea {
  width: 100%;
  background: var(--cx-bg);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  padding: var(--cx-s3) var(--cx-s4);
  color: var(--cx-text);
  font-family: var(--cx-body);
  font-size: var(--cx-t-sm);
  line-height: 1.5;
}
.cx-f textarea { resize: vertical; min-height: 9rem; }
.cx-f select { appearance: none; -webkit-appearance: none; font-family: var(--cx-mono); }
.cx-f input:focus-visible,
.cx-f select:focus-visible,
.cx-f textarea:focus-visible { outline: 2px solid var(--cx-gold); outline-offset: 2px; }

.cx-contact-side { display: flex; flex-direction: column; gap: var(--cx-s5); }
.cx-contact-block {
  border-top: 1px solid var(--cx-line);
  padding-top: var(--cx-s3);
}
.cx-contact-block p { margin: 0; font-size: var(--cx-t-sm); line-height: 1.7; color: var(--cx-text-mut); }
.cx-contact-block .cx-label { margin-bottom: var(--cx-s2); }

.cx-channels { list-style: none; padding: 0; margin: 0; }
.cx-channels li { border-bottom: 1px solid var(--cx-line-soft); }
.cx-channels li:last-child { border-bottom: 0; }
.cx-channels a {
  display: block;
  padding: var(--cx-s3) 0;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-gold);
  text-decoration: none;
}
.cx-channels a:hover { color: var(--cx-gold-bright); }
.cx-channels a::after { content: " →"; opacity: .6; }

/* Warning banner at the head of the entry gate. */
.cx-gate-warn {
  border: 1px solid var(--cx-danger);
  border-radius: var(--cx-radius);
  background: var(--cx-bg);
  color: var(--cx-danger);
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.65;
  padding: var(--cx-s3) var(--cx-s4);
  margin: 0 0 var(--cx-s5);
}
.cx-gate-warn::before { content: "⚠  "; }

/* --- editorial pages: FAQ, Quality ---------------------------------------- */

.cx-page-lede {
  font-size: var(--cx-t-md);
  line-height: 1.65;
  color: var(--cx-text-mut);
  max-width: 60ch;
  margin: 0 0 var(--cx-s6);
}
.cx-page-footnote {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.75;
  color: var(--cx-text-dim);
  border-top: 1px solid var(--cx-line);
  padding-top: var(--cx-s4);
  margin-top: var(--cx-s6);
  max-width: 64ch;
}

/* Accordion on native <details> — no JavaScript, keyboard-operable already. */
.cx-qa {
  border-bottom: 1px solid var(--cx-line);
}
.cx-qa:first-of-type { border-top: 1px solid var(--cx-line); }

.cx-qa summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--cx-s4);
  cursor: pointer;
  list-style: none;
  padding: var(--cx-s4) var(--cx-s1);
  min-height: 2.75rem;
  font-family: var(--cx-sans);
  font-size: var(--cx-t-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cx-text);
  transition: color 120ms ease;
}
.cx-qa summary::-webkit-details-marker { display: none; }
.cx-qa summary::marker { content: ""; }
.cx-qa summary:hover { color: var(--cx-gold); }
.cx-qa summary:focus-visible { outline: 2px solid var(--cx-gold); outline-offset: -2px; }

.cx-qa summary::after {
  content: "+";
  font-family: var(--cx-mono);
  font-size: var(--cx-t-md);
  line-height: 1;
  color: var(--cx-gold);
  transition: transform 140ms ease;
}
.cx-qa[open] summary::after { content: "−"; }

.cx-qa > p {
  margin: 0;
  padding: 0 var(--cx-s1) var(--cx-s5);
  font-size: var(--cx-t-sm);
  line-height: 1.75;
  color: var(--cx-text-mut);
  max-width: 66ch;
}

/* Headings between accordion groups. */
.entry-content h2 {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: var(--cx-s7) 0 var(--cx-s4);
}
.entry-content h2:first-child { margin-top: 0; }


/* --- WhatsApp: the primary contact route ---------------------------------
   Leads the contact page rather than sitting in the sidebar, because it is
   the route we actually want people to use.                               */

.cx-wa {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--cx-s4);
  padding: var(--cx-s5);
  margin: var(--cx-s5) 0 var(--cx-s4);
  border: 1px solid var(--cx-gold);
  border-radius: var(--cx-radius);
  background: var(--cx-gold-wash);
  text-decoration: none;
  transition: background 140ms ease;
}
.cx-wa:hover { background: var(--cx-panel); text-decoration: none; }
.cx-wa:focus-visible { outline: 2px solid var(--cx-gold); outline-offset: 3px; }

.cx-wa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cx-gold);
  color: var(--cx-bg);
  flex: none;
}
.cx-wa-icon svg { width: 22px; height: 22px; display: block; }

.cx-wa-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-wa-text strong {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-md);
  font-weight: 600;
  color: var(--cx-text);
  letter-spacing: -.01em;
}
.cx-wa-text em {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  font-style: normal;
  color: var(--cx-text-mut);
  line-height: 1.5;
}
.cx-wa-go { font-family: var(--cx-mono); font-size: var(--cx-t-md); color: var(--cx-gold); flex: none; }

.cx-contact-or {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
  text-align: center;
  margin: var(--cx-s5) 0 0;
}

@media (max-width: 560px) {
  .cx-wa { grid-template-columns: auto 1fr; gap: var(--cx-s3); padding: var(--cx-s4); }
  .cx-wa-go { display: none; }
  .cx-wa-text strong { font-size: var(--cx-t-base); }
}

/* <picture> wraps an image only to offer a WebP source beside it. Removing
   it from layout keeps every existing image rule working unchanged —
   .cx-hero-bg img is height: 100% of the hero, which an inline <picture>
   parent would otherwise collapse to zero. */
picture { display: contents; }

/* --- legal information page ----------------------------------------------
   One page, linked from the footer, carrying the statutory company details
   that used to sit on every page. Plain and unstyled on purpose: it is a
   disclosure, not a piece of the shop. */

.cx-legal-intro {
  color: var(--cx-text-mut);
  font-size: var(--cx-t-sm);
  line-height: 1.7;
  max-width: 64ch;
  margin: 0 0 var(--cx-s6);
}
.cx-legal-list { margin: 0 0 var(--cx-s6); }
.cx-legal-row {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: var(--cx-s4);
  padding: var(--cx-s3) 0;
  border-bottom: 1px solid var(--cx-line);
}
.cx-legal-row dt {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
}
.cx-legal-row dd {
  margin: 0;
  color: var(--cx-text);
  font-size: var(--cx-t-sm);
}
.cx-legal-note {
  color: var(--cx-text-mut);
  font-size: var(--cx-t-sm);
  line-height: 1.7;
  max-width: 64ch;
  margin: 0;
}
@media (max-width: 640px) {
  .cx-legal-row { grid-template-columns: 1fr; gap: var(--cx-s1); }
}

/* Footer meta line: copyright, email, legal link. */
.cx-entity-meta { display: flex; flex-wrap: wrap; gap: var(--cx-s2); align-items: baseline; }
.cx-entity-sep { color: var(--cx-text-dim); }

/* --- promotion strip ------------------------------------------------------
   Sits above the research-use bar. Dark against that bar's gold so the two
   read as separate things rather than one long yellow band. Rendered only
   while the coupon is live, so it removes itself when the code expires. */

.cx-promo { background: var(--cx-bg-alt); border-bottom: 1px solid var(--cx-gold); }
.cx-promo-in {
  max-width: var(--cx-wrap);
  margin-inline: auto;
  padding: var(--cx-s2) var(--cx-s5);
  text-align: center;
}
.cx-promo-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  justify-content: center;
  text-decoration: none;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
}
.cx-promo-month { color: var(--cx-text-dim); }
.cx-promo-offer { color: var(--cx-text); font-weight: 600; }
.cx-promo-code {
  padding: .1rem .5rem;
  border: 1px dashed var(--cx-gold);
  border-radius: 4px;
  color: var(--cx-gold-bright);
  font-weight: 600;
}
.cx-promo-link:hover .cx-promo-code { background: var(--cx-gold); color: #14140f; }