/* ==========================================================================
   NXXS RESEARCH — "The NXXS Vault"
   Single stylesheet. Every colour, font family, font size and spacing value
   is declared once in :root below and referenced through var() everywhere.
   Layout is flexbox only — no CSS grid. No absolute or fixed positioning;
   the site header is the one sticky element.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-bg:            #070a10;
  --c-surface:       #101722;
  --c-raised:        #172131;
  --c-sunken:        #0b111a;
  --c-line:          #1e2836;
  --c-line-strong:   #30405a;
  --c-text:          #f1f4f8;
  --c-text-2:        #aebac9;
  --c-text-3:        #7d8a9b;
  --c-action:        #2459d9;
  --c-action-hover:  #3a72f0;
  --c-cold:          #9ec8ff;
  --c-metal:         #aeb7c4;
  --c-plate:         #fafafa;
  --c-plate-edge:    #e2e3e6;
  --c-ok:            #74d6a0;
  --c-wait:          #e8c07d;
  --c-off:           #8894a5;
  --c-focus:         #9ec8ff;
  --c-on-action:     #ffffff;
  --c-scrim-0:       rgba(7, 10, 16, 0);
  --c-scrim-1:       rgba(7, 10, 16, 0.45);
  --c-scrim-2:       rgba(7, 10, 16, 0.82);
  --c-scrim-3:       rgba(7, 10, 16, 0.96);
  --c-header-bg:     rgba(7, 10, 16, 0.92);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Archivo", "Helvetica Neue", "Arial", sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", "Arial", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --fs-2xs:        0.6875rem;
  --fs-xs:         0.75rem;
  --fs-sm:         0.8125rem;
  --fs-md:         0.9375rem;
  --fs-base:       1rem;
  --fs-lg:         1.125rem;
  --fs-xl:         1.375rem;
  --fs-2xl:        1.75rem;
  --fs-3xl:        2.125rem;
  --fs-display:    2.375rem;
  --fs-display-lg: 3.5rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.06;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --ls-display: -0.015em;
  --ls-wide:    0.14em;
  --ls-wider:   0.26em;

  /* ---- Space ----------------------------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  --gutter:      20px;
  --section-pad: 56px;

  /* ---- Line, radius, shape --------------------------------------------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --radius: 4px;
  --notch: 14px;

  /* ---- Measure --------------------------------------------------------- */
  --w-page:   1240px;
  --w-text:   66ch;
  --w-narrow: 320px;
  --w-form:   680px;
  --h-tap:    44px;
  --h-bar:    36px;
  --h-nav:    62px;
  --h-hero:   78svh;
  --h-plate:  200px;
  --h-thumb:  76px;
  --h-rule:   1px;
  --z-header: 20;

  /* ---- Motion ---------------------------------------------------------- */
  --t-fast: 160ms;
  --t-mid:  220ms;
  --t-slow: 420ms;
  --ease:   cubic-bezier(0.22, 0.61, 0.24, 1);

  /* ---- Flex sizing helpers --------------------------------------------- */
  --card-gap: 20px;
  --card-2up: calc((100% - var(--card-gap)) / 2);
  --card-3up: calc((100% - (var(--card-gap) * 2)) / 3);
  --card-4up: calc((100% - (var(--card-gap) * 3)) / 4);
  --split-2up: calc((100% - var(--s-8)) / 2);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: var(--s-0);
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img,
video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-cold);
  text-decoration-thickness: var(--bw-1);
  text-underline-offset: var(--s-1);
}
a:hover { color: var(--c-text); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: var(--s-0);
  color: var(--c-text);
}

p  { margin: var(--s-0); }
ul { margin: var(--s-0); padding: var(--s-0); list-style: none; }

:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: var(--bw-2);
  border-radius: var(--radius);
}

::selection { background-color: var(--c-action); color: var(--c-on-action); }

.skip-link {
  display: block;
  width: var(--bw-1);
  height: var(--bw-1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--c-on-action);
}
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: var(--s-3) var(--s-5);
  clip-path: none;
  background-color: var(--c-action);
}

.visually-hidden {
  display: block;
  width: var(--bw-1);
  height: var(--bw-1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Shared primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack       { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-tight { gap: var(--s-2); }
.stack-loose { gap: var(--s-7); }

.row         { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.row-between { justify-content: space-between; }
.row-top     { align-items: flex-start; }

.section {
  padding-block: var(--section-pad);
  border-top: var(--bw-1) solid var(--c-line);
}
.section-flat    { border-top: none; }
.section-surface { background-color: var(--c-surface); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.section-head-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-cold);
}
.eyebrow-muted { color: var(--c-text-3); }

.title-page  { font-size: var(--fs-3xl); }
.title-major { font-size: var(--fs-2xl); }
.title-minor { font-size: var(--fs-xl); }
.title-card  { font-size: var(--fs-lg); }

.lede  { font-size: var(--fs-lg); color: var(--c-text-2); max-width: var(--w-text); }
.prose { color: var(--c-text-2); max-width: var(--w-text); }
.note  { font-size: var(--fs-sm); color: var(--c-text-3); max-width: var(--w-text); }

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.rule {
  height: var(--h-rule);
  border: none;
  background-color: var(--c-line);
  margin: var(--s-0);
}


/* ---- Two-column reading band ------------------------------------------- */
.duo       { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.duo-main  { display: flex; flex-direction: column; gap: var(--s-4); flex: 2 1 var(--w-narrow); min-width: 0; }
.duo-aside { flex: 1 1 var(--w-narrow); min-width: 0; }

/* ---- Buttons ----------------------------------------------------------- */

.button-primary,
.button-secondary,
.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--h-tap);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius);
  border: var(--bw-1) solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.button-primary {
  background-color: var(--c-action);
  color: var(--c-on-action);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.button-primary:hover { background-color: var(--c-action-hover); color: var(--c-on-action); }
.button-primary[disabled],
.button-primary[aria-disabled="true"] {
  background-color: var(--c-raised);
  color: var(--c-text-3);
  cursor: not-allowed;
}

.button-secondary {
  background-color: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.button-secondary:hover { border-color: var(--c-cold); color: var(--c-cold); }
.button-secondary[disabled],
.button-secondary[aria-disabled="true"] { color: var(--c-text-3); cursor: not-allowed; }

.button-quiet {
  background-color: transparent;
  color: var(--c-text-2);
  padding-inline: var(--s-3);
}
.button-quiet:hover { color: var(--c-text); }

.button-block { width: 100%; }

/* ---- Status chips and marks -------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius);
  border: var(--bw-1) solid var(--c-line-strong);
  background-color: var(--c-sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-2);
  white-space: normal;
  overflow-wrap: anywhere;
}
.card-sizes .chip,
.variant-row .chip { white-space: nowrap; }
.chip-dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: 50%;
  background-color: var(--c-off);
  flex: none;
}
.chip-ok   { color: var(--c-ok); }
.chip-wait { color: var(--c-wait); }
.chip-off  { color: var(--c-off); }
.chip-ok   .chip-dot { background-color: var(--c-ok); }
.chip-wait .chip-dot { background-color: var(--c-wait); }
.chip-off  .chip-dot { background-color: var(--c-off); }
.chip-sample { border-style: dashed; color: var(--c-text-3); }

/* Real bullet elements — this stylesheet uses no visible pseudo-elements. */
.bullet-list { display: flex; flex-direction: column; gap: var(--s-3); }
.bullet-item { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--c-text-2); }
.bullet-mark {
  width: var(--s-2);
  height: var(--s-2);
  margin-top: var(--s-2);
  flex: none;
  background-color: var(--c-action);
  transform: rotate(45deg);
}
.bullet-mark-cold { background-color: var(--c-cold); }
.bullet-mark-quiet { background-color: var(--c-text-3); }

.step-list  { display: flex; flex-direction: column; gap: var(--s-5); }
.step-item  { display: flex; gap: var(--s-4); align-items: flex-start; }
.step-index {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--s-8);
  height: var(--s-8);
  flex: none;
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-cold);
}
.step-body { display: flex; flex-direction: column; gap: var(--s-2); }

/* ---- Panels and notices ------------------------------------------------ */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
}
.panel-raised { background-color: var(--c-raised); }
.panel-quiet  { background-color: var(--c-sunken); }
.panel-accent { border-left: var(--bw-3) solid var(--c-action); }

.notice {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border: var(--bw-1) dashed var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.notice-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-wait);
}

/* ---- Data display ------------------------------------------------------ */

.spec-list { display: flex; flex-direction: column; }
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  padding-block: var(--s-3);
  border-bottom: var(--bw-1) solid var(--c-line);
}
.spec-key   { color: var(--c-text-3); font-size: var(--fs-md); }
.spec-value {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--c-text);
  text-align: right;
  overflow-wrap: anywhere;
}

.table-scroll { overflow-x: auto; border: var(--bw-1) solid var(--c-line); border-radius: var(--radius); }
.table-data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  min-width: var(--w-form);
}
.table-data th,
.table-data td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: var(--bw-1) solid var(--c-line);
  white-space: nowrap;
}
.table-data th {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: var(--fw-medium);
  background-color: var(--c-sunken);
}
.table-data td { color: var(--c-text-2); }
.table-data tr:last-child td { border-bottom: none; }

/* ---- Form mockup elements ---------------------------------------------- */

.form-mock  { display: flex; flex-direction: column; gap: var(--s-5); max-width: var(--w-form); }
.field      { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 var(--w-narrow); }
.field-label{ font-size: var(--fs-sm); color: var(--c-text-2); }
.field-hint { font-size: var(--fs-xs); color: var(--c-text-3); }
.field-row  { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.input-text,
.input-select,
.input-area {
  width: 100%;
  min-height: var(--h-tap);
  padding: var(--s-3) var(--s-4);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease);
}
.input-area { min-height: var(--h-plate); resize: vertical; }
.input-text:hover,
.input-select:hover,
.input-area:hover { border-color: var(--c-cold); }
.input-text::placeholder,
.input-area::placeholder { color: var(--c-text-3); }

.check-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.check-row:hover { border-color: var(--c-line-strong); }
.check-box {
  width: var(--s-5);
  height: var(--s-5);
  flex: none;
  margin-top: var(--s-1);
  accent-color: var(--c-action);
}
.check-text { font-size: var(--fs-md); color: var(--c-text-2); }

/* ==========================================================================
   Site header — authored once, injected on every page
   ========================================================================== */

.site-header {
  position: sticky;
  top: var(--s-0);
  z-index: var(--z-header);
  background-color: var(--c-header-bg);
  backdrop-filter: blur(var(--s-3));
  border-bottom: var(--bw-1) solid var(--c-line);
}

.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--h-bar);
  padding: var(--s-2) var(--gutter);
  background-color: var(--c-action);
  color: var(--c-on-action);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-display);
  text-align: center;
}
.announce-close {
  min-height: var(--s-6);
  padding: var(--s-1) var(--s-2);
  background: transparent;
  border: none;
  color: var(--c-on-action);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--h-nav);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  color: var(--c-text);
  text-decoration: none;
}
.brand-mark  { width: var(--s-7); height: auto; flex: none; }
.brand-words { display: flex; flex-direction: column; gap: var(--s-1); }
.brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: 1;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-cold);
  line-height: 1;
}

.nav-links { display: none; align-items: center; gap: var(--s-6); }
.nav-link {
  padding-block: var(--s-2);
  border-bottom: var(--bw-2) solid transparent;
  color: var(--c-text-2);
  font-size: var(--fs-md);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--c-text); }
.nav-link[aria-current="page"] { color: var(--c-text); border-bottom-color: var(--c-action); }

.nav-tools { display: flex; align-items: center; gap: var(--s-1); }
.tool-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: var(--h-tap);
  min-height: var(--h-tap);
  padding-inline: var(--s-2);
  background: transparent;
  border: var(--bw-1) solid transparent;
  border-radius: var(--radius);
  color: var(--c-text-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tool-button:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.tool-icon  { width: var(--s-5); height: var(--s-5); flex: none; }
.tool-count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--c-cold); }

.menu-toggle { display: flex; }

.menu-panel {
  display: none;
  flex-direction: column;
  padding-block: var(--s-4) var(--s-8);
  border-top: var(--bw-1) solid var(--c-line);
}
.menu-panel[data-open="true"] { display: flex; }
.menu-link {
  display: flex;
  align-items: center;
  min-height: var(--h-tap);
  padding-block: var(--s-3);
  border-bottom: var(--bw-1) solid var(--c-line);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-decoration: none;
}
.menu-link:hover { color: var(--c-cold); }
.menu-note { padding-top: var(--s-5); }

/* ==========================================================================
   Site footer — authored once, injected on every page
   ========================================================================== */

.site-footer {
  margin-top: var(--s-11);
  padding-block: var(--s-10) var(--s-7);
  border-top: var(--bw-1) solid var(--c-line);
  background-color: var(--c-sunken);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-9);
  justify-content: space-between;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-form);
  max-width: var(--w-form);
}
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--s-9); }
.footer-col  { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.footer-link { color: var(--c-text-2); font-size: var(--fs-md); text-decoration: none; }
.footer-link:hover { color: var(--c-cold); }

.ruo-band {
  margin-top: var(--s-9);
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--bw-1) solid var(--c-line);
}

/* ==========================================================================
   Entry agreement — the access chamber
   ========================================================================== */

.gate-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg);
  background-image: linear-gradient(var(--c-scrim-1), var(--c-scrim-2)),
                    url("../img/web/website%20background-poster.jpg");
  background-size: cover;
  background-position: center top;
}
.gate-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--s-8);
}
.gate-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  width: 100%;
  max-width: var(--w-form);
  margin-inline: auto;
  padding: var(--s-8) var(--s-7);
  background-color: var(--c-scrim-3);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
}
.gate-mark { width: var(--s-11); height: auto; }
.gate-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gate-error { min-height: var(--s-5); color: var(--c-wait); font-size: var(--fs-sm); }
.gate-foot { padding-block: var(--s-6); }

/* ==========================================================================
   Hero and page heads
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--h-hero);
  padding-block: var(--s-11) var(--s-9);
  background-color: var(--c-bg);
  background-image: linear-gradient(var(--c-scrim-1), var(--c-scrim-0) 28%, var(--c-scrim-2) 70%, var(--c-scrim-3)),
                    url("../img/web/nxxs-vault-hero-mobile.jpg");
  background-size: cover;
  background-position: center center;
}
.hero-inner   { display: flex; flex-direction: column; gap: var(--s-5); max-width: var(--w-text); }
.hero-title   { font-size: var(--fs-display); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

.hero-enter {
  opacity: 0;
  transform: translateY(var(--s-4));
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.hero-enter[data-revealed="true"] { opacity: 1; transform: translateY(var(--s-0)); }

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-9) var(--s-7);
  border-bottom: var(--bw-1) solid var(--c-line);
}

.crumbs    { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crumb-link{ color: var(--c-text-3); font-size: var(--fs-sm); text-decoration: none; }
.crumb-link:hover { color: var(--c-cold); }
.crumb-sep { color: var(--c-text-3); font-size: var(--fs-sm); }

/* ==========================================================================
   Specimen index — product cards
   ========================================================================== */

.card-list { display: flex; flex-wrap: wrap; gap: var(--card-gap); }

.card-product {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
  overflow: hidden;
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.card-product:hover {
  border-color: var(--c-line-strong);
  background-color: var(--c-raised);
  color: var(--c-text);
}

.card-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-plate);
  padding: var(--s-4);
  background-color: var(--c-plate);
  border-bottom: var(--bw-1) solid var(--c-plate-edge);
}
.card-plate-image { max-height: 100%; width: auto; object-fit: contain; }

.card-body  { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1 1 auto; }
.card-top   { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.card-index { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--c-text-3); }
.card-name  { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.card-sizes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: var(--bw-1) solid var(--c-line);
}
.card-price  { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--c-text); }
.card-action { font-size: var(--fs-sm); color: var(--c-cold); }

.shelf {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  padding-bottom: var(--s-4);
  scroll-snap-type: x mandatory;
}
.shelf .card-product { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }

/* ==========================================================================
   Catalog
   ========================================================================== */

.catalog-layout { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.catalog-side {
  display: none;
  flex-direction: column;
  gap: var(--s-6);
  flex: 0 0 var(--w-narrow);
  max-width: var(--w-narrow);
}
.catalog-main { display: flex; flex-direction: column; gap: var(--s-6); flex: 1 1 var(--w-form); min-width: 0; }

.search-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.search-row .input-text { flex: 1 1 var(--w-narrow); }

.chip-scroll { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); }
.chip-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  padding: var(--s-2) var(--s-4);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip-toggle:hover { color: var(--c-text); border-color: var(--c-cold); }
.chip-toggle[aria-pressed="true"] {
  background-color: var(--c-action);
  border-color: var(--c-action);
  color: var(--c-on-action);
}

.result-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.result-row .input-select { width: auto; }

/* The PRD asks for a bottom-sheet filter drawer. Fixed positioning is not
   allowed by the build rules, so filters expand in the document flow. */
.filter-panel {
  display: none;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-surface);
}
.filter-panel[data-open="true"] { display: flex; }
.filter-group   { display: flex; flex-direction: column; gap: var(--s-3); }
.filter-panel .chip-scroll { flex-wrap: wrap; overflow-x: visible; padding-bottom: var(--s-0); }
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   Product detail
   ========================================================================== */

.product-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  align-items: flex-start;
  padding-block: var(--s-8);
}
.product-media { display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 var(--w-form); min-width: 0; }
.product-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-7);
  background-color: var(--c-plate);
  border: var(--bw-1) solid var(--c-plate-edge);
  border-radius: var(--radius);
}
.thumb-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.thumb-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-thumb);
  height: var(--h-thumb);
  padding: var(--s-2);
  background-color: var(--c-plate);
  border: var(--bw-2) solid var(--c-plate-edge);
  border-radius: var(--radius);
  cursor: pointer;
}
.thumb-button[aria-pressed="true"] { border-color: var(--c-action); }
.thumb-button img { max-height: 100%; object-fit: contain; }

.product-buy   { display: flex; flex-direction: column; gap: var(--s-5); flex: 1 1 var(--w-form); min-width: 0; }
.product-title { font-size: var(--fs-3xl); }
.price-row     { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.price-value   { font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--c-text); }

.variant-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.variant-button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: var(--h-tap);
  padding: var(--s-2) var(--s-5);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  color: var(--c-text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.variant-button:hover { border-color: var(--c-cold); color: var(--c-text); }
.variant-button[aria-pressed="true"] {
  border-color: var(--c-action);
  background-color: var(--c-raised);
  color: var(--c-text);
}

.qty-row     { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.qty-control { display: flex; align-items: center; border: var(--bw-1) solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; }
.qty-button {
  width: var(--h-tap);
  height: var(--h-tap);
  background-color: var(--c-sunken);
  border: none;
  color: var(--c-text);
  font-size: var(--fs-lg);
  cursor: pointer;
}
.qty-button:hover { background-color: var(--c-raised); }
.qty-value {
  width: var(--s-11);
  height: var(--h-tap);
  border: none;
  background-color: var(--c-bg);
  color: var(--c-text);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
}
.buy-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.buy-actions .button-primary { flex: 1 1 var(--w-narrow); }

.detail-layout { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.detail-main   { display: flex; flex-direction: column; gap: var(--s-9); flex: 1 1 var(--w-form); min-width: 0; }
.detail-side   { display: flex; flex-direction: column; gap: var(--s-5); flex: 1 1 var(--w-narrow); min-width: 0; }

.accordion-item { border-bottom: var(--bw-1) solid var(--c-line); }
.accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--h-tap);
  padding-block: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  list-style: none;
  cursor: pointer;
}
.accordion-body { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-5); color: var(--c-text-2); }
.accordion-sign { flex: none; font-family: var(--font-mono); color: var(--c-cold); }

/* ==========================================================================
   Cart, checkout, account
   ========================================================================== */

.order-layout { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.order-main   { display: flex; flex-direction: column; gap: var(--s-5); flex: 1 1 var(--w-form); min-width: 0; }
.order-side   { display: flex; flex-direction: column; gap: var(--s-5); flex: 1 1 var(--w-narrow); min-width: 0; }

.line-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-4);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
}
.line-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s-12);
  height: var(--s-12);
  flex: none;
  padding: var(--s-2);
  background-color: var(--c-plate);
  border-radius: var(--radius);
}
.line-plate img { max-height: 100%; object-fit: contain; }
.line-body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 var(--w-narrow); min-width: 0; }
.line-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }

.total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-2);
  color: var(--c-text-2);
  font-size: var(--fs-md);
}
.total-row-grand {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: var(--bw-1) solid var(--c-line);
  color: var(--c-text);
  font-size: var(--fs-lg);
}
.total-value { font-family: var(--font-mono); }

.progress-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.progress-step {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}
.progress-step[data-state="current"] { border-color: var(--c-action); color: var(--c-text); }
.progress-step[data-state="done"]    { color: var(--c-text-2); }

.tab-row { display: flex; flex-wrap: wrap; gap: var(--s-2); border-bottom: var(--bw-1) solid var(--c-line); }
.tab-button {
  min-height: var(--h-tap);
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: none;
  border-bottom: var(--bw-2) solid transparent;
  color: var(--c-text-3);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  cursor: pointer;
}
.tab-button:hover { color: var(--c-text); }
.tab-button[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-action); }
.tab-body { display: none; padding-top: var(--s-6); }
.tab-body[data-active="true"] { display: flex; flex-direction: column; gap: var(--s-6); }

/* ==========================================================================
   Bands, split pathways, legal pages
   ========================================================================== */

.split-list { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.card-path {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-form);
  padding: var(--s-7);
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
}

.band-image {
  border-block: var(--bw-1) solid var(--c-line);
  background-color: var(--c-surface);
  background-image: linear-gradient(var(--c-scrim-2), var(--c-scrim-2)),
                    url("../img/web/nxxs-vault-hero-desktop.jpg");
  background-size: cover;
  background-position: center;
}

.stat-list { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1 1 var(--w-narrow);
  padding: var(--s-6);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
}
.stat-key {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-cold);
}

.toc-list  { display: flex; flex-direction: column; gap: var(--s-2); }
.toc-link  { padding-block: var(--s-1); color: var(--c-text-2); font-size: var(--fs-md); text-decoration: none; }
.toc-link:hover { color: var(--c-cold); }

.legal-body  { display: flex; flex-direction: column; gap: var(--s-8); max-width: var(--w-text); }
.legal-block { display: flex; flex-direction: column; gap: var(--s-3); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-6);
  border: var(--bw-1) dashed var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
}

/* ==========================================================================
   Small phones - 399px and down
   The four header tools plus the wordmark exceed 360px, so the search icon
   moves into the menu, where a Search catalog link takes its place.
   ========================================================================== */

@media (max-width: 399px) {
  .nav-bar { gap: var(--s-2); }
  .tool-search { display: none; }
}

/* ==========================================================================
   Tablet — 768px and up
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-pad: 72px;
    --card-gap: 24px;
    --fs-display: 3rem;
    --h-plate: 240px;
    --w-narrow: 300px;
  }

  .card-product { flex: 0 1 var(--card-2up); }
  .shelf .card-product { flex: 0 0 46%; }
  .menu-link { font-size: var(--fs-2xl); }
}

/* ==========================================================================
   Desktop — 1024px and up
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-pad: 96px;
    --fs-display: 3.5rem;
    --h-hero: 84svh;
    --h-plate: 260px;
    --w-narrow: 320px;
  }

  .nav-links   { display: flex; }
  .menu-toggle { display: none; }
  .menu-panel,
  .menu-panel[data-open="true"] { display: none; }

  .catalog-side  { display: flex; }
  .filter-toggle { display: none; }
  .filter-panel  { display: flex; }

  .hero {
    background-image: linear-gradient(to right, var(--c-scrim-3), var(--c-scrim-2) 44%, var(--c-scrim-0) 82%),
                      url("../img/web/nxxs-vault-hero-desktop.jpg");
    background-position: center right;
  }

  .card-product { flex: 0 1 var(--card-3up); }
  .shelf { overflow-x: visible; flex-wrap: wrap; }
  .shelf .card-product { flex: 0 1 var(--card-3up); }

  .product-media { flex: 1 1 var(--split-2up); }
  .product-buy   { flex: 1 1 var(--split-2up); }
  .detail-main   { flex: 3 1 var(--w-form); }
  .detail-side   { flex: 1 1 var(--w-narrow); max-width: var(--w-narrow); }
  .order-side    { flex: 1 1 var(--w-narrow); max-width: var(--w-narrow); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .hero-enter { opacity: 1; transform: none; }
}


/* ==========================================================================
   NXXS RESEARCH — "Flow" layer
   The minimal-scroll experience. Loads on top of nxxs.css and reuses its
   tokens and primitives; everything new is declared once in :root below.

   Same build rules as the base sheet: flexbox only, no CSS grid, no absolute
   or fixed positioning, no visible pseudo-elements, no literal colour or
   length outside :root.
   ========================================================================== */

:root {
  /* ---- Flow measures ---------------------------------------------------- */
  --h-deck:      54px;
  --h-otp:       60px;
  --w-otp:       48px;
  --h-hero-card: 200px;
  --h-bundle:    150px;
  --h-tile:      140px;
  --h-meter:     6px;
  --w-summary:   340px;
  --w-rail:      200px;

  --stage-min: calc(100svh - var(--h-nav) - var(--h-bar) - var(--h-deck));
  --stage-fixed: 620px;

  --fs-otp:   1.5rem;
  --fs-money: 1.75rem;

  --card-flow-2up: calc((100% - var(--card-gap)) / 2);
  --card-flow-3up: calc((100% - (var(--card-gap) * 2)) / 3);
  --card-flow-4up: calc((100% - (var(--card-gap) * 3)) / 4);

  --lift: -2px;
  --drift-in: 14px;

  --t-stage: 380ms;
  --t-drift: 24s;
}

/* ==========================================================================
   Deck — one page, several full-height stages, one visible at a time
   ========================================================================== */

.deck { display: flex; flex-direction: column; }

/* A full-height stage already ends the page; the footer needs no extra gap. */
.site-footer { margin-top: var(--s-0); }

/* At 200% text the header tools wrap rather than push the page sideways. */
.nav-bar { flex-wrap: wrap; }

.deck-bar {
  border-bottom: var(--bw-1) solid var(--c-line);
  background-color: var(--c-sunken);
}

.deck-rail {
  display: flex;
  align-items: stretch;
  gap: var(--s-1);
  min-height: var(--h-deck);
  overflow-x: auto;
  scrollbar-width: none;
}

.deck-tab {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  min-height: var(--h-deck);
  padding-inline: var(--s-4);
  border: none;
  border-bottom: var(--bw-2) solid transparent;
  background: transparent;
  color: var(--c-text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.deck-tab:hover { color: var(--c-text); }
.deck-tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-action); }

.deck-index {
  color: var(--c-cold);
  font-size: var(--fs-2xs);
}

.stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--stage-min);
  padding-block: var(--s-8);
}
.stage[hidden] { display: none; }

/* Flex containers need an explicit rule to honour the hidden attribute. */
.tile[hidden],
.bag-list[hidden],
.bag-empty[hidden],
.notice[hidden],
.summary[hidden] { display: none; }
.stage-flush { padding-block: var(--s-0); }
.stage-surface { background-color: var(--c-surface); }

.stage-body { display: flex; flex-direction: column; gap: var(--s-6); }

/* Stage entrance. One animation, transform and opacity only. */
.stage-live .stage-body { animation: stage-in var(--t-stage) var(--ease) both; }

@keyframes stage-in {
  from { opacity: 0; transform: translateY(var(--drift-in)); }
  to   { opacity: 1; transform: translateY(var(--s-0)); }
}

/* Footfall line under every stage: where the visitor is, and what is next. */
.stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: var(--bw-1) solid var(--c-line);
}

/* ==========================================================================
   Animated hero
   ========================================================================== */

.stage-hero {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(var(--c-scrim-1), var(--c-scrim-2) 62%, var(--c-scrim-3)),
    url("../img/web/nxxs-vault-hero-mobile.jpg");
  background-size: cover;
  background-position: center center;
  animation: hero-drift var(--t-drift) var(--ease) infinite alternate;
}

@keyframes hero-drift {
  from { background-position: 48% center; }
  to   { background-position: 52% center; }
}

.hero-shell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  flex: 1 1 var(--w-narrow);
  min-width: 0;
}
.hero-title { font-size: var(--fs-display); }

/* The rotating name is its own element, never a differently coloured run
   inside the heading. */
.hero-title-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-size: var(--fs-display);
  color: var(--c-cold);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-note { flex: 1 1 100%; }

/* ---- Rotating specimen card -------------------------------------------- */

.hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-narrow);
  min-width: 0;
  padding: var(--s-5);
  background-color: var(--c-header-bg);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
}

.hero-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-hero-card);
  padding: var(--s-4);
  background-color: var(--c-plate);
  border: var(--bw-1) solid var(--c-plate-edge);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-plate img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.hero-card[data-swapping="true"] .hero-plate img { opacity: 0; transform: translateY(var(--drift-in)); }

.hero-facts { display: flex; flex-direction: column; gap: var(--s-3); }
.hero-name  { font-size: var(--fs-2xl); }
.hero-price { font-family: var(--font-mono); font-size: var(--fs-money); color: var(--c-text); }

.hero-buy { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--bw-1) solid var(--c-line);
}
.hero-dots { display: flex; gap: var(--s-2); }
.hero-dot {
  width: var(--s-2);
  height: var(--s-2);
  padding: var(--s-0);
  border: none;
  border-radius: 50%;
  background-color: var(--c-line-strong);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.hero-dot[aria-current="true"] { background-color: var(--c-cold); }

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-tap);
  min-height: var(--h-tap);
  padding: var(--s-0);
  background: transparent;
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon-button:hover { color: var(--c-cold); border-color: var(--c-cold); }
.icon-glyph { width: var(--s-5); height: var(--s-5); flex: none; }

/* ==========================================================================
   Shop — bundles and quick add
   ========================================================================== */

.shop-layout { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: flex-start; }
.shop-main   { display: flex; flex-direction: column; gap: var(--s-5); flex: 3 1 var(--w-narrow); min-width: 0; }
.shop-side   { display: flex; flex-direction: column; gap: var(--s-4); flex: 0 1 var(--w-summary); min-width: 0; }

.tile-row { display: flex; flex-wrap: wrap; gap: var(--card-gap); }

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1 1 var(--card-flow-2up);
  min-width: 0;
  padding: var(--s-4);
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tile:hover { border-color: var(--c-line-strong); transform: translateY(var(--lift)); }

.tile-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-tile);
  padding: var(--s-3);
  background-color: var(--c-plate);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile-plate img { max-height: 100%; width: auto; object-fit: contain; }

.tile-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
}
.tile-name  { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.tile-price { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--c-text); }
.tile-foot  { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; }

/* Size selector inside a tile: real buttons, no hidden radios. */
.size-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.size-button {
  min-height: var(--h-tap);
  padding: var(--s-2) var(--s-3);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.size-button:hover { border-color: var(--c-cold); color: var(--c-text); }
.size-button[aria-pressed="true"] {
  background-color: var(--c-action);
  border-color: var(--c-action);
  color: var(--c-on-action);
}

/* ---- Bundles ------------------------------------------------------------ */

.bundle-row { display: flex; flex-wrap: wrap; gap: var(--card-gap); }

.bundle {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-narrow);
  min-width: 0;
  padding: var(--s-5);
  background-color: var(--c-raised);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.bundle:hover { border-color: var(--c-cold); transform: translateY(var(--lift)); }
.bundle-lead { border-left: var(--bw-3) solid var(--c-action); }

.bundle-head  { display: flex; flex-direction: column; gap: var(--s-2); }
.bundle-name  { font-size: var(--fs-xl); }
.bundle-strip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--h-bundle);
  padding: var(--s-3);
  background-color: var(--c-plate);
  border-radius: var(--radius);
  overflow: hidden;
}
.bundle-strip img { max-height: 100%; width: auto; object-fit: contain; flex: 1 1 auto; min-width: 0; }

.bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.bundle-now   { font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--c-text); }
.bundle-was   { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--c-text-3); text-decoration: line-through; }
.bundle-body  { display: flex; flex-direction: column; gap: var(--s-4); margin-top: auto; }

/* ==========================================================================
   Bag — a stage, not a separate page
   ========================================================================== */

.bag-list { display: flex; flex-direction: column; gap: var(--s-3); }

.bag-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3);
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
}
.bag-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-thumb);
  height: var(--h-thumb);
  flex: none;
  padding: var(--s-2);
  background-color: var(--c-plate);
  border-radius: var(--radius);
  overflow: hidden;
}
.bag-plate img { max-height: 100%; width: auto; object-fit: contain; }
.bag-facts { display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 var(--w-narrow); min-width: 0; }
.bag-money { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--c-text); }

.step-group {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: none;
}
.step-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-tap);
  min-height: var(--h-tap);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  cursor: pointer;
}
.step-button:hover { border-color: var(--c-cold); color: var(--c-cold); }
.step-count {
  min-width: var(--h-tap);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}

.bag-empty { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }

/* ==========================================================================
   Summary panel — reused by bag and checkout
   ========================================================================== */

.summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
}
.summary-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--bw-1) solid var(--c-line-strong);
}
.summary-figure { font-family: var(--font-mono); font-size: var(--fs-money); color: var(--c-text); }

/* ==========================================================================
   One-screen checkout
   ========================================================================== */

.pay-layout { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: flex-start; }
.pay-main   { display: flex; flex-direction: column; gap: var(--s-5); flex: 2 1 var(--w-narrow); min-width: 0; }
.pay-side   { display: flex; flex-direction: column; gap: var(--s-4); flex: 0 1 var(--w-summary); min-width: 0; }

.meter {
  display: flex;
  gap: var(--s-1);
  height: var(--h-meter);
  border-radius: var(--radius);
  overflow: hidden;
}
.meter-part { flex: 1 1 auto; background-color: var(--c-line); transition: background-color var(--t-mid) var(--ease); }
.meter-part[data-done="true"] { background-color: var(--c-action); }

.group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background-color: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease);
}
.group[data-done="true"] { border-color: var(--c-line-strong); }
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.group-index {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pay-methods { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pay-method {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: flex-start;
  flex: 1 1 var(--card-flow-2up);
  min-width: 0;
  min-height: var(--h-tap);
  padding: var(--s-3) var(--s-4);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text-2);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pay-method:hover { border-color: var(--c-cold); color: var(--c-text); }
.pay-method[aria-pressed="true"] { border-color: var(--c-action); color: var(--c-text); }
.pay-method-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

/* ==========================================================================
   Join — phone or email, then a confirmation code
   ========================================================================== */

.join-layout { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.join-main   { display: flex; flex-direction: column; gap: var(--s-5); flex: 1 1 var(--w-form); min-width: 0; }
.join-aside  { display: flex; flex-direction: column; gap: var(--s-4); flex: 1 1 var(--w-rail); min-width: 0; }

.toggle-row {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
}
.toggle-button {
  flex: 1 1 var(--card-flow-2up);
  min-height: var(--h-tap);
  padding-inline: var(--s-4);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--c-text-3);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toggle-button:hover { color: var(--c-text); }
.toggle-button[aria-pressed="true"] { background-color: var(--c-action); color: var(--c-on-action); }

.otp-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.otp-box {
  width: var(--w-otp);
  height: var(--h-otp);
  padding: var(--s-0);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-otp);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease);
}
.otp-box:hover { border-color: var(--c-cold); }
.otp-box[data-filled="true"] { border-color: var(--c-action); }

.join-step { display: flex; flex-direction: column; gap: var(--s-4); }
.join-step[hidden] { display: none; }

.done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s-11);
  height: var(--s-11);
  border: var(--bw-2) solid var(--c-ok);
  border-radius: 50%;
  color: var(--c-ok);
}
.done-glyph { width: var(--s-8); height: var(--s-8); }

/* ==========================================================================
   Account dashboard
   ========================================================================== */

.board { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: flex-start; }
.board-side { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 var(--w-rail); min-width: 0; }
.board-main { display: flex; flex-direction: column; gap: var(--s-5); flex: 3 1 var(--w-narrow); min-width: 0; }

.board-tab {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--h-tap);
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: var(--bw-1) solid transparent;
  border-left: var(--bw-3) solid transparent;
  border-radius: var(--radius);
  color: var(--c-text-3);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.board-tab:hover { color: var(--c-text); }
.board-tab[aria-selected="true"] {
  background-color: var(--c-surface);
  border-left-color: var(--c-action);
  color: var(--c-text);
}

.board-panel { display: flex; flex-direction: column; gap: var(--s-5); }
.board-panel[hidden] { display: none; }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1 1 var(--w-narrow);
  min-width: 0;
  padding: var(--s-4);
  background-color: var(--c-sunken);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
}
.stat-figure { font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--c-text); }

/* ==========================================================================
   Affiliate ledger
   ========================================================================== */

.split-row { display: flex; flex-wrap: wrap; gap: var(--card-gap); align-items: stretch; }
.split-half {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-narrow);
  min-width: 0;
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
}
.split-allow { border-left: var(--bw-3) solid var(--c-ok); }
.split-deny  { border-left: var(--bw-3) solid var(--c-wait); }

/* ==========================================================================
   Breakpoints — the tokens change, the rules stay put
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --h-hero-card: 300px;
    --h-tile: 150px;
    --w-otp: 56px;
    --h-otp: 68px;
  }
  .tile { flex: 0 1 var(--card-flow-3up); }
  .pay-method { flex: 1 1 var(--card-flow-3up); }
}

@media (min-width: 1024px) {
  :root {
    --h-deck: 60px;
    --h-hero-card: 280px;
    --h-bundle: 170px;
    --h-tile: 160px;
  }
  .stage-hero {
    background-image:
      linear-gradient(to right, var(--c-scrim-3), var(--c-scrim-2) 46%, var(--c-scrim-0) 88%),
      url("../img/web/nxxs-vault-hero-desktop.jpg");
  }
  @keyframes hero-drift {
    from { background-position: 68% center; }
    to   { background-position: 72% center; }
  }
  .hero-copy { flex: 1 1 var(--split-2up); }
  .hero-card { flex: 1 1 var(--split-2up); }
  .hero-title { font-size: var(--fs-display-lg); }
  .tile { flex: 0 1 var(--card-flow-4up); }
}

@media (max-width: 479px) {
  .deck-tab { padding-inline: var(--s-3); }
  .deck-index { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-hero { animation: none; }
  .stage-live .stage-body { animation: none; }
  .tile:hover,
  .bundle:hover { transform: none; }
}