/* Fonts, served from this site. They used to come from Google, which meant a
   render-blocking stylesheet on one external domain and the files themselves on
   another — two DNS lookups and two TLS handshakes before any text appeared. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/archivo-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ==========================================================================
   MetalPayment design system — dark

   Near-black surfaces, hairline borders, white type. Colour is used only
   where it carries meaning: status, and a single brass hairline reserved
   for the confidentiality partition.
   ========================================================================== */

:root {
  /* ---- LIGHT (default). Warm paper, near-black ink, violet accent. ---- */
  --ink: #faf8f5;          /* page — warm off-white */
  --surface: #ffffff;      /* cards, raised bands */
  --surface-2: #f4f1ec;    /* wells, hover */
  --line: #e6e1d8;         /* hairline */
  --line-2: #d5cec2;       /* stronger hairline */

  --paper: #16161a;        /* primary text */
  --mist: #3d3d45;         /* secondary text */
  --zinc-line: #5c5c67;    /* tertiary text */
  --graphite-600: #86868f; /* quiet text, captions */
  --graphite: #c9c4ba;

  --navy: #4f3ff0;
  --navy-600: #3d2fd4;

  /* Accent — violet. Used for the partition, active states, focus. */
  --brass: #5b4bf5;
  --brass-dim: #8b81f7;

  --positive: #0f7a5a;  --positive-bg: #e7f5ef;
  --warning: #9a6300;   --warning-bg: #fdf2e0;
  --critical: #b32430;  --critical-bg: #fceceb;
  --info: #2b5fb8;      --info-bg: #eaf1fc;

  --shadow-sm: 0 1px 2px rgba(22,22,26,0.05);
  --shadow-md: 0 4px 16px rgba(22,22,26,0.07);
  --shadow-lg: 0 24px 64px rgba(22,22,26,0.14);
  --hero-glow: rgba(91,75,245,0.10);
  --topbar-bg: rgba(250,248,245,0.82);
  --scrim: rgba(22,22,26,0.42);
  --redact-a: #ddd7cc;
  --redact-b: #cfc8ba;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-card: 12px;
  --radius-control: 8px;

  color-scheme: light;
}

/* ---- LIGHT. Also usable on a single section via data-theme="light". ---- */
[data-theme="light"] {
  --ink: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #EFF1F5;
  --line: #E4E7ED;
  --line-2: #CFD5DF;

  --paper: #10141B;
  --mist: #39414F;
  --zinc-line: #545D6C;
  --graphite-600: #656E7E;
  --graphite: #C6CBD4;

  --navy: #4F3FF0;
  --navy-600: #3D2FD4;
  --brass: #5B4BF5;
  --brass-dim: #8B81F7;

  --positive: #0F7A5A;  --positive-bg: #E7F5EF;
  --warning: #9A6300;   --warning-bg: #FDF2E0;
  --critical: #B32430;  --critical-bg: #FCECEB;
  --info: #2B5FB8;      --info-bg: #EAF1FC;

  --shadow-sm: 0 1px 2px rgba(16,20,27,0.06);
  --shadow-md: 0 4px 16px rgba(16,20,27,0.08);
  --shadow-lg: 0 24px 64px rgba(16,20,27,0.16);
  --hero-glow: rgba(91,75,245,0.10);
  --topbar-bg: rgba(247,248,250,0.86);
  --scrim: rgba(16,20,27,0.42);
  --redact-a: #DDE1E8;
  --redact-b: #CDD3DC;

  color-scheme: light;
}

/* ---- DARK. Set MP_CONFIG.THEME = "dark" in config.js to use this. ---- */
[data-theme="dark"] {
  --ink: #0A0D14;
  --surface: #10151F;
  --surface-2: #161C28;
  --line: #1D2532;
  --line-2: #293241;

  --paper: #EEF1F6;
  --mist: #BFC7D4;
  --zinc-line: #9BA5B6;
  --graphite-600: #8B94A6;
  --graphite: #353E4E;

  --navy: #1b3054;
  --navy-600: #2a4a80;

  --brass: #7C6CFF;
  --brass-dim: #5A49D6;

  --positive: #4ade9f;  --positive-bg: #0f2a21;
  --warning: #f0b45c;   --warning-bg: #2c2013;
  --critical: #f2777f;  --critical-bg: #2c1417;
  --info: #7fb4f0;      --info-bg: #101f30;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.55);
  --hero-glow: var(--hero-glow);
  --topbar-bg: rgba(10,13,20,0.82);
  --scrim: rgba(0,0,0,0.6);
  --redact-a: #22262d;
  --redact-b: #2d323a;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0;
  color: var(--paper);
}

p { margin: 0; }
dl, dd, dt { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.figure, table td, table th { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-600);
}

.ref { font-family: var(--font-mono); letter-spacing: 0.02em; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--brass); color: var(--ink); }

/* --------------------------------------------------------------------------
   The confidentiality partition
   -------------------------------------------------------------------------- */

.partition { position: relative; display: grid; gap: 2.5rem; }

@media (min-width: 768px) {
  .partition { grid-template-columns: 1fr 1fr; gap: 0; }
  .partition::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent,
      var(--brass-dim) 12%, var(--brass) 50%, var(--brass-dim) 88%, transparent);
  }
  .partition-side.left { padding-right: 3rem; }
  .partition-side.right { padding-left: 3rem; }
}

@media (max-width: 767px) {
  .partition::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brass) 50%, transparent);
  }
}

.partition-side { transition: opacity 220ms ease; outline-offset: 8px; }
.partition:hover .partition-side:not(:hover) { opacity: 0.3; }
.partition:focus-within .partition-side:not(:focus-within) { opacity: 0.3; }

.redacted {
  display: inline-block;
  min-width: 4.5rem;
  height: 1.05em;
  vertical-align: -0.15em;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg,
    var(--redact-a) 0 3px, var(--redact-b) 3px 6px);
  color: transparent;
  user-select: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* -------------------------------------------------------------------------- */
/* Layout                                                                     */
/* -------------------------------------------------------------------------- */

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.stack > * + * { margin-top: 1rem; }

.section { padding: 6rem 0; }
@media (min-width: 640px) { .section { padding: 8.5rem 0; } }

.bg-ink { background: var(--ink); }
.bg-navy { background: var(--surface); }
.bg-mist { background: var(--surface); }
.rule-y { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(14px);
}
.site-header .bar { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.site-header nav { display: flex; align-items: center; gap: 0.25rem; }
@media (min-width: 640px) { .site-header nav { gap: 0.5rem; } }

.navlink { display: none; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--zinc-line); }
.navlink:hover { color: var(--paper); }
@media (min-width: 640px) { .navlink { display: block; } }

/* -------------------------------------------------------------------------- */
/* Logo                                                                       */
/* -------------------------------------------------------------------------- */

.logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.logo-lockup { display: inline-flex; align-items: center; gap: 0.5rem; }

/* The mark ---------------------------------------------------------------- */

.mk {
  display: block; height: 1.125rem; width: auto;
  color: var(--paper);
  overflow: visible;
}
.site-header .mk { height: 1.0625rem; }
.sidebar .mk { height: 0.9375rem; }
.site-footer .mk { height: 1.25rem; }
.gate .mk, .auth-page .mk { height: 1.125rem; }

/* The wordmark ------------------------------------------------------------ */

.logo-word {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
}
.lw-a { font-weight: 500; }
.lw-b { font-weight: 700; }
.site-header .logo-word { font-size: 1rem; }
.sidebar .logo-word { font-size: 0.9375rem; }
.site-footer .logo-word { font-size: 1.1875rem; }
.logo-compact .logo-word { letter-spacing: -0.04em; }

.logo .tagline {
  display: block; margin-top: 0;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-600);
}

/* The motion --------------------------------------------------------------
   The cuts carve in rather than the mark fading up: the top sliver comes down
   first, then the two at the base open. One payment arriving, then dividing.
   Once, on mount — a logo that keeps moving is a distraction. */

/* transform-box is what makes this work. Without it an SVG child's
   transform-origin is measured from the viewport corner, not the shape, and
   the wedges scale from somewhere off to the side — which looks like nothing
   happening at all. */
.mk .mk-top, .mk .mk-bl, .mk .mk-br { transform-box: fill-box; }
.mk .mk-top { transform-origin: 50% 0%; }
.mk .mk-bl  { transform-origin: 50% 100%; }
.mk .mk-br  { transform-origin: 50% 100%; }

.mk-play .mk-top {
  animation: mkCut 520ms cubic-bezier(.22,.9,.24,1) both;
  animation-delay: 60ms;
}
.mk-play .mk-bl {
  animation: mkCut 520ms cubic-bezier(.22,.9,.24,1) both;
  animation-delay: 300ms;
}
.mk-play .mk-br {
  animation: mkCut 520ms cubic-bezier(.22,.9,.24,1) both;
  animation-delay: 380ms;
}
.logo-lockup .mk-play + .logo-word {
  animation: mkWord 560ms cubic-bezier(.22,.9,.24,1) both;
  animation-delay: 240ms;
}

@keyframes mkCut {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
@keyframes mkWord {
  0%   { opacity: 0; transform: translateX(-0.4rem); }
  100% { opacity: 1; transform: none; }
}

/* Anyone who has asked for less motion gets the finished mark immediately. */
@media (prefers-reduced-motion: reduce) {
  .mk-play .mk-top, .mk-play .mk-bl, .mk-play .mk-br,
  .logo-lockup .mk-play + .logo-word { animation: none; }
}

@media (max-width: 720px) {
  .site-header .mk { height: 0.9375rem; }
  .site-header .logo-word { font-size: 0.875rem; }
  .logo .tagline { font-size: 0.625rem; letter-spacing: 0.06em; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 500;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
  text-align: center; white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-sm { padding: 0.4375rem 0.875rem; font-size: 0.8125rem; }
.btn-md { padding: 0.5625rem 1.125rem; font-size: 0.875rem; }
.btn-lg { padding: 0.8125rem 1.5rem; font-size: 0.9375rem; }

/* Primary on dark is light — the Mercury move. */
.btn-primary { background: var(--paper); color: var(--surface); }
.btn-primary:hover { opacity: 0.88; }

.btn-onink { background: var(--paper); color: var(--surface); }
.btn-onink:hover { opacity: 0.88; }

.btn-secondary { background: transparent; color: var(--paper); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--zinc-line); background: var(--surface-2); }

.btn-outline-light { background: transparent; color: var(--paper); border-color: var(--line-2); }
.btn-outline-light:hover { border-color: var(--zinc-line); background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--zinc-line); }
.btn-ghost:hover { color: var(--paper); background: var(--surface-2); }

.btn-block { width: 100%; }

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.field { display: block; }
.field + .field { margin-top: 1.125rem; }
.field label {
  display: block; font-size: 0.8125rem; font-weight: 500;
  margin-bottom: 0.4375rem; color: var(--mist);
}
.field input {
  width: 100%; padding: 0.6875rem 0.8125rem;
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--paper);
  background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
}
.field input::placeholder { color: var(--graphite-600); }
.field input:focus {
  outline: none; border-color: var(--zinc-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 18%, transparent);
}
.field .hint { display: block; margin-top: 0.4375rem; font-size: 0.75rem; color: var(--graphite-600); }

.notice {
  padding: 0.8125rem 0.9375rem; border-radius: var(--radius-control);
  font-size: 0.8125rem; line-height: 1.5; border: 1px solid transparent;
}
.notice-error { background: var(--critical-bg); border-color: #4a2126; color: var(--critical); }
.notice-ok { background: var(--positive-bg); border-color: #1c4436; color: var(--positive); }
.notice-info { background: var(--info-bg); border-color: #1c3149; color: var(--info); }

/* -------------------------------------------------------------------------- */
/* Auth pages                                                                 */
/* -------------------------------------------------------------------------- */

.auth-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.auth-body { display: grid; place-items: center; padding: 4rem 1.5rem; }
.auth-card {
  width: 100%; max-width: 25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.auth-card h1 { font-size: 1.5rem; }

/* -------------------------------------------------------------------------- */
/* Content blocks                                                             */
/* -------------------------------------------------------------------------- */

.steps { border-top: 1px solid var(--line); margin-top: 3.5rem; }
.steps li { display: grid; gap: 0.75rem; padding: 1.875rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .steps li { grid-template-columns: 4rem 18rem 1fr; gap: 2rem; } }
.steps .n { font-family: var(--font-mono); font-size: 0.875rem; color: var(--brass-dim); }
.steps h3 { font-size: 1.125rem; }
.steps p { max-width: 38rem; font-size: 1rem; line-height: 1.7; color: var(--mist); }

.panels {
  margin-top: 3.5rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
}
@media (min-width: 640px) { .panels { grid-template-columns: repeat(3, 1fr); } }
.panel { background: var(--ink); padding: 1.875rem 1.625rem; }
.panel h3 { font-size: 0.9375rem; font-weight: 600; }
.panel p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--mist); }

.industries { margin-top: 3rem; display: grid; gap: 1.75rem 2.5rem; }
@media (min-width: 640px) { .industries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .industries { grid-template-columns: repeat(3, 1fr); } }
.industries > div { border-top: 1px solid var(--line-2); padding-top: 1rem; }
.industries h3 { font-size: 0.9375rem; font-weight: 600; }
.industries p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--mist); }

.drow { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.drow dt { color: var(--graphite-600); font-size: 0.8125rem; }
.drow dd { text-align: right; color: var(--paper); }
.drow dd.mono { font-family: var(--font-mono); }
.drow dd.emph { font-size: 1.0625rem; font-weight: 600; }

.site-footer { background: var(--ink); border-top: 1px solid var(--line); }
.site-footer .top { display: flex; flex-direction: column; gap: 2.5rem; justify-content: space-between; }
@media (min-width: 640px) { .site-footer .top { flex-direction: row; } }
.site-footer nav { display: grid; grid-template-columns: repeat(2, auto); gap: 0.625rem 3.5rem; font-size: 0.875rem; }
.site-footer nav a { color: var(--zinc-line); }
.site-footer nav a:hover { color: var(--paper); }
.site-footer .fine { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.site-footer .fine p { max-width: 48rem; font-size: 0.75rem; line-height: 1.65; color: var(--graphite-600); }

.legal { max-width: 44rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.legal h1 { font-size: 2rem; }
.legal h2 { font-size: 1.125rem; margin-top: 2.5rem; }
.legal p { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.75; color: var(--zinc-line); }
.legal .updated { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--graphite-600); }

.boot-error {
  max-width: 42rem; margin: 6rem auto; padding: 2rem;
  border: 1px solid #4a2126; border-radius: var(--radius-card); background: var(--critical-bg);
  font-family: var(--font-body); color: var(--critical);
}
.boot-error h1 { font-size: 1.25rem; color: var(--critical); }
.boot-error p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.65; }
.boot-error code {
  font-family: var(--font-mono); font-size: 0.8125rem;
  background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 3px;
}

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

/* ==========================================================================
   Application shell — signed-in surfaces
   ========================================================================== */

.app { min-height: 100dvh; display: flex; flex-direction: column; }


.app-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(14px);
}
.app-header .bar { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.app-header-left { display: flex; align-items: center; gap: 2rem; min-width: 0; }
.app-header-right { display: flex; align-items: center; gap: 1rem; }

.app-nav { display: none; gap: 0.25rem; }
@media (min-width: 900px) { .app-nav { display: flex; } }
.app-navlink {
  padding: 0.4375rem 0.75rem; font-size: 0.875rem; color: var(--zinc-line);
  border-radius: var(--radius-control);
}
.app-navlink:hover { color: var(--paper); background: var(--surface-2); }
.app-navlink.active { color: var(--paper); background: var(--surface-2); }

.who { display: none; text-align: right; line-height: 1.25; }
@media (min-width: 640px) { .who { display: block; } }
.who-name { display: block; font-size: 0.8125rem; color: var(--paper); }
.who-role { display: block; font-size: 0.6875rem; color: var(--graphite-600); }

.wrap.narrow { max-width: 46rem; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.page-head h1 { font-size: 1.75rem; margin-top: 0.375rem; }
.page-actions { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.back {
  display: inline-block; margin-bottom: 0.75rem;
  font-size: 0.8125rem; color: var(--zinc-line);
}
.back:hover { color: var(--paper); }

/* Stats ------------------------------------------------------------------- */

.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; margin-bottom: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 1.25rem 1.375rem; }
.stat-label {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite-600);
}
.stat-value { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 600; color: var(--paper); }
.stat-value.mono { font-family: var(--font-mono); letter-spacing: -0.01em; }
.stat-value.tone-ok { color: var(--positive); }

/* Cards and columns ------------------------------------------------------- */

.pad { padding: 1.625rem; }
.card-title { font-size: 0.9375rem; font-weight: 600; color: var(--paper); }
.cols { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; } }

.actions-card {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.action-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.internal-note {
  margin-top: 1.5rem; padding: 1rem 1.125rem;
  border: 1px dashed var(--line-2); border-radius: var(--radius-control);
  background: var(--surface-2);
}
.internal-note p:last-child { font-size: 0.875rem; color: var(--mist); }

/* Tables ------------------------------------------------------------------ */

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-600);
  font-weight: 400; padding: 0 0.875rem 0.75rem; border-bottom: 1px solid var(--line);
}
.table th.num, .table td.num { text-align: right; }
.table td { padding: 0.875rem; border-bottom: 1px solid var(--line); color: var(--paper); vertical-align: top; }
.table td.mono { font-family: var(--font-mono); }
.table td.ref { font-family: var(--font-mono); font-size: 0.8125rem; }
.table td.quiet { color: var(--zinc-line); }
.table td.strong { font-weight: 600; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface); }
.block { display: block; font-size: 0.75rem; margin-top: 0.1875rem; }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--paper); font-size: 0.8125rem; font-family: var(--font-body);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.linkbtn:hover { text-decoration-color: var(--zinc-line); }

.sim {
  margin-left: 0.5rem; padding: 0.0625rem 0.375rem; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em;
  text-transform: uppercase; background: var(--surface-2); color: var(--graphite-600);
}

/* Badges ------------------------------------------------------------------ */

.badge {
  display: inline-block; padding: 0.1875rem 0.5625rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-ok { background: var(--positive-bg); color: var(--positive); border-color: #1c4436; }
.badge-warn { background: var(--warning-bg); color: var(--warning); border-color: #4a3617; }
.badge-info { background: var(--info-bg); color: var(--info); border-color: #1c3149; }
.badge-bad { background: var(--critical-bg); color: var(--critical); border-color: #4a2126; }
.badge-quiet { background: var(--surface-2); color: var(--zinc-line); border-color: var(--line-2); }

/* Tabs and toolbars ------------------------------------------------------- */

.tabs {
  display: flex; gap: 0.25rem; overflow-x: auto;
  border-bottom: 1px solid var(--line); margin-bottom: 1.75rem;
}
.tabs button {
  background: none; border: 0; cursor: pointer;
  padding: 0.75rem 0.875rem; font-family: var(--font-body); font-size: 0.875rem;
  color: var(--zinc-line); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--paper); }
.tabs button.on { color: var(--paper); border-bottom-color: var(--brass); }

.toolbar {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-control); overflow: hidden; }
.segmented button {
  background: none; border: 0; cursor: pointer;
  padding: 0.4375rem 0.875rem; font-family: var(--font-body); font-size: 0.8125rem;
  color: var(--zinc-line); border-right: 1px solid var(--line-2);
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: var(--paper); }
.segmented button.on { background: var(--surface-2); color: var(--paper); }

.search {
  min-width: 16rem; padding: 0.4375rem 0.75rem;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--paper);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
}
.search::placeholder { color: var(--graphite-600); }

/* Description lists ------------------------------------------------------- */

.dlist { margin-top: 1rem; }
.dlist .drow { padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.dlist .drow:last-child { border-bottom: 0; }
.dlist dt { font-size: 0.8125rem; color: var(--graphite-600); }
.dlist dd { font-size: 0.875rem; }

/* Forms ------------------------------------------------------------------- */

.field select, .field textarea, textarea, select {
  width: 100%; padding: 0.6875rem 0.8125rem;
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--paper);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
}
textarea { resize: vertical; min-height: 4.5rem; line-height: 1.6; }
select:focus, textarea:focus {
  outline: none; border-color: var(--zinc-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 18%, transparent);
}
.field input[type="file"] { padding: 0.5rem; font-size: 0.8125rem; }

.grid2 { display: grid; gap: 1.125rem; }
.grid3 { display: grid; gap: 1.125rem; }
@media (min-width: 640px) {
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr 1fr; }
}
.grid2 .field + .field, .grid3 .field + .field { margin-top: 0; }

.formsec {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); padding: 1.625rem; margin-bottom: 1.25rem;
}
.formsec-head { margin-bottom: 1.375rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.formsec-head h2 { font-size: 0.9375rem; }
.formsec-head p { margin-top: 0.375rem; font-size: 0.8125rem; }
.formsec.tone-customer { border-left: 2px solid var(--info); }
.formsec.tone-vendor { border-left: 2px solid var(--warning); }
.formsec.tone-internal { border-left: 2px solid var(--brass-dim); }

.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }

.calc {
  margin-top: 1.375rem; padding: 1.125rem 1.25rem;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control);
}
.calc-row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.3125rem 0; font-size: 0.875rem; color: var(--zinc-line); }
.calc-row.total {
  margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  color: var(--paper); font-weight: 600; font-size: 1rem;
}
.calc-note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--graphite-600); }

/* Timeline ---------------------------------------------------------------- */

.timeline { position: relative; padding-left: 1.25rem; }
.timeline::before {
  content: ''; position: absolute; left: 3px; top: 0.5rem; bottom: 0.5rem;
  width: 1px; background: var(--line-2);
}
.timeline li { position: relative; padding: 0 0 1.5rem 0; }
.timeline li:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -1.25rem; top: 0.4375rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 3px var(--ink);
}
.tl-label { font-size: 0.875rem; color: var(--paper); }
.tl-detail { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--zinc-line); }
.tl-when { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--graphite-600); }

/* Messages ---------------------------------------------------------------- */

.msg-list { display: grid; gap: 1rem; }
.msg-list li {
  padding: 0.875rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--ink);
}
.msg-list li.mine { background: var(--surface-2); border-color: var(--line-2); }
.msg-meta { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-600); }
.msg-body { margin-top: 0.4375rem; font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap; }

/* Documents --------------------------------------------------------------- */

.upload-bar { padding: 1rem; border: 1px dashed var(--line-2); border-radius: var(--radius-control); }
.upload-controls { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; }
.upload-controls select { width: auto; min-width: 11rem; }
.upload-controls input[type="file"] {
  flex: 1; min-width: 12rem; padding: 0.4375rem;
  font-size: 0.8125rem; color: var(--zinc-line);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
}

.taglist { display: flex; gap: 0.4375rem; flex-wrap: wrap; margin-top: 0.75rem; }
.taglist li {
  padding: 0.1875rem 0.5625rem; border-radius: 3px;
  font-size: 0.75rem; background: var(--surface-2);
  color: var(--mist); border: 1px solid var(--line-2);
}

/* Lists, states, modal ---------------------------------------------------- */

.minilist { margin-top: 0.875rem; }
.minilist li { border-bottom: 1px solid var(--line); }
.minilist li:last-child { border-bottom: 0; }
.minilist a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6875rem 0; font-size: 0.875rem;
}
.minilist a:hover { color: var(--paper); }
.minilist .ref { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--zinc-line); }
.minilist a:hover .ref { color: var(--paper); }
.minilist .mono { font-family: var(--font-mono); }

.quiet { color: var(--zinc-line); font-size: 0.9375rem; line-height: 1.6; }
.strong { font-weight: 600; }

.loading { padding: 5rem 1.5rem; text-align: center; color: var(--zinc-line); font-size: 0.9375rem; }

.empty {
  padding: 4rem 2rem; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--radius-card);
}
.empty-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--paper); }
.empty-body { margin-top: 0.5rem; font-size: 0.875rem; color: var(--zinc-line); max-width: 30rem; margin-left: auto; margin-right: auto; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: var(--scrim); backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding: 3rem 1.5rem; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 34rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.625rem; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.0625rem; }
.modal-x {
  background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1;
  color: var(--graphite-600); padding: 0 0.25rem;
}
.modal-x:hover { color: var(--paper); }
.modal-body { padding: 1.625rem; }
.modal-body p { font-size: 0.9375rem; line-height: 1.6; }

.btn-danger { background: transparent; color: var(--critical); border-color: #4a2126; }
.btn-danger:hover { background: var(--critical-bg); border-color: var(--critical); }

/* ==========================================================================
   Shell — sidebar layout
   ========================================================================== */

.shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
@media (min-width: 1000px) { .shell { grid-template-columns: 15.5rem 1fr; } }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: 15.5rem; transform: translateX(-100%);
  transition: transform 180ms cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.sidebar.open { transform: translateX(0); }
@media (min-width: 1000px) { .sidebar { position: sticky; top: 0; height: 100dvh; transform: none; } }

.sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.6); }
@media (min-width: 1000px) { .sidebar-scrim { display: none; } }

.sidebar-top { padding: 1.25rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.sidebar-nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }

.sidelink {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-control);
  font-size: 0.875rem; color: var(--zinc-line);
  transition: background 120ms ease, color 120ms ease;
}
.sidelink:hover { color: var(--paper); background: var(--surface-2); }
.sidelink.active { color: var(--paper); background: var(--surface-2); }
.sidelink-dot {
  width: 4px; height: 4px; border-radius: 50%; flex: none;
  background: var(--line-2); transition: background 120ms ease, box-shadow 120ms ease;
}
.sidelink.active .sidelink-dot {
  background: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 18%, transparent);
}

.sidebar-foot { padding: 1rem 0.75rem 1.25rem; border-top: 1px solid var(--line); }
.userchip { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; }
.avatar {
  width: 1.875rem; height: 1.875rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--mist);
}
.userchip-text { min-width: 0; }
.userchip-name {
  display: block; font-size: 0.8125rem; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.userchip-role { display: block; font-size: 0.6875rem; color: var(--graphite-600); }
.signout {
  width: 100%; margin-top: 0.375rem; padding: 0.5rem 0.75rem; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8125rem; color: var(--graphite-600);
  border-radius: var(--radius-control);
}
.signout:hover { color: var(--paper); background: var(--surface-2); }

.shell-main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: 3.5rem; display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(14px);
}
.topbar-crumb {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite-600);
}
.topbar-right { margin-left: auto; }
.env-chip {
  padding: 0.25rem 0.625rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600);
}

.menu-btn {
  display: grid; gap: 3px; padding: 0.5rem 0.375rem;
  background: none; border: 0; cursor: pointer;
}
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--zinc-line); }
@media (min-width: 1000px) { .menu-btn { display: none; } }

.shell .app-main {
  flex: 1; padding: 2.5rem 0 6rem;
  /* Everything inside sizes itself against the space it actually has rather
     than against the window. The sidebar takes 15.5rem before any of this is
     drawn, so window breakpoints were wrong by about 250 pixels — which is
     what made the quote screen too tight. */
  container-type: inline-size;
  container-name: appmain;
  min-width: 0;
}
.shell .wrap { max-width: 78rem; padding: 0 1.5rem; }
@media (min-width: 1280px) { .shell .wrap { padding: 0 2.5rem; } }

/* Elevation and texture ---------------------------------------------------- */

.card {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.stats { box-shadow: var(--shadow-sm); }
.stat { background: var(--surface); }

.badge { font-family: var(--font-body); letter-spacing: 0.005em; }

.table td { transition: background 100ms ease; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table tr.clickable:hover td:first-child { box-shadow: inset 2px 0 0 var(--brass); }

/* Landing hero glow -------------------------------------------------------- */

.bg-ink { position: relative; overflow: hidden; }
.bg-ink::after {
  content: ''; position: absolute; pointer-events: none;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: 90rem; height: 45rem;
  background: radial-gradient(closest-side, var(--hero-glow), rgba(200,169,106,0) 70%);
}
.bg-ink > * { position: relative; z-index: 1; }

.site-header { background: var(--topbar-bg); }

/* Focus treatment ---------------------------------------------------------- */

:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.btn:focus-visible { outline-offset: 2px; }

/* ==========================================================================
   Marketing — mega menu, hero, product shot
   ========================================================================== */

.site-header { border-bottom: 1px solid var(--line); }
.site-header .bar { gap: 2rem; }

.mainnav { display: none; align-items: center; gap: 0.25rem; margin-right: auto; }
@media (min-width: 940px) { .mainnav { display: flex; } }
.mainnav-item {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--mist);
  border-radius: var(--radius-control);
}
.mainnav-item svg { opacity: 0.5; transition: transform 140ms ease; }
.mainnav-item:hover, .mainnav-item.on { color: var(--paper); background: var(--surface-2); }
.mainnav-item.on svg { transform: rotate(180deg); opacity: 1; }

.headcta { display: flex; align-items: center; gap: 0.5rem; }
.nav-toggle { display: grid; }
@media (min-width: 940px) { .nav-toggle { display: none; } }
.nav-toggle span { background: var(--zinc-line); }

.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  animation: megain 140ms cubic-bezier(.32,.72,0,1);
}
@keyframes megain { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.megamenu-inner {
  display: grid; gap: 2.5rem; padding-top: 2rem; padding-bottom: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .megamenu-inner { grid-template-columns: 1fr 1fr 16rem; } }
.megacol ul { margin-top: 1rem; display: grid; gap: 0.125rem; }
.megacol a {
  display: block; padding: 0.5rem 0.75rem; margin-left: -0.75rem;
  border-radius: var(--radius-control);
}
.megacol a:hover { background: var(--surface-2); }
.megatitle { display: block; font-size: 0.875rem; font-weight: 500; color: var(--paper); }
.megadetail { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--graphite-600); }
.megaside {
  padding: 1.25rem; border-radius: var(--radius-card);
  background: var(--surface-2); border: 1px solid var(--line);
  align-self: start;
}
.megaside-body { margin: 0.75rem 0 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--zinc-line); }

.mobilenav { border-top: 1px solid var(--line); background: var(--surface); padding: 1.5rem 0 2rem; }
.mobilegroup { margin-bottom: 1.5rem; }
.mobilegroup a { display: block; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--paper); }

/* Hero -------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding: 5rem 0 0; }
.hero::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  top: -20rem; left: 50%; transform: translateX(-50%);
  width: 80rem; height: 60rem;
  background: radial-gradient(closest-side, var(--hero-glow), transparent 72%);
}
.hero > * { position: relative; z-index: 1; }
.hero-copy { text-align: center; max-width: 54rem; }
.hero h1 {
  margin-top: 1.25rem; font-size: clamp(2.25rem, 5.5vw, 3.875rem);
  line-height: 1.02; letter-spacing: -0.035em;
}
.h1-dim { color: var(--graphite-600); }
.hero-sub {
  margin: 1.5rem auto 0; max-width: 40rem;
  font-size: 1.0625rem; line-height: 1.65; color: var(--zinc-line);
}
.hero-cta { margin-top: 2.25rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.eyebrow.accent { color: var(--brass); }

/* Product shot ------------------------------------------------------------ */

.shot {
  margin-top: 4rem; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.shot-chrome {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.6875rem 0.875rem; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.shot-chrome .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.shot-url {
  margin-left: 1rem; font-family: var(--font-mono);
  font-size: 0.6875rem; color: var(--graphite-600);
}
.shot-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .shot-body { grid-template-columns: 11rem 1fr; } }

.shot-side { display: none; border-right: 1px solid var(--line); padding: 1rem 0.75rem; }
@media (min-width: 760px) { .shot-side { display: block; } }
.shot-logo { padding: 0.25rem 0.75rem 1rem; }
.shot-logo .mark {
  display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem;
  border-radius: 5px; background: var(--paper); color: var(--surface);
  font-family: var(--font-display); font-size: 0.5625rem; font-weight: 700;
}
.shot-nav {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4375rem 0.75rem; border-radius: 6px;
  font-size: 0.75rem; color: var(--graphite-600);
}
.shot-nav.on { background: var(--surface-2); color: var(--paper); }
.shot-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.shot-nav.on .shot-dot { background: var(--brass); }

.shot-main { padding: 1.25rem; min-width: 0; }
.shot-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; margin-bottom: 1.25rem;
}
@media (min-width: 760px) { .shot-stats { grid-template-columns: repeat(4, 1fr); } }
.shot-stat { background: var(--surface); padding: 0.75rem 0.875rem; }
.shot-k {
  display: block; font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600);
}
.shot-v {
  display: block; margin-top: 0.3125rem; font-family: var(--font-mono);
  font-size: 0.9375rem; font-weight: 600; color: var(--paper);
}
.shot-v.pos { color: var(--positive); }

.shot-table { font-size: 0.6875rem; }
.shot-tr {
  display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr;
  gap: 0.5rem; padding: 0.5625rem 0.25rem;
  border-bottom: 1px solid var(--line); align-items: center;
}
.shot-tr:last-child { border-bottom: 0; }
.shot-tr .r { text-align: right; }
.shot-tr .mono { font-family: var(--font-mono); color: var(--mist); }
.shot-tr .strong { color: var(--paper); font-weight: 600; }
.shot-th {
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite-600); padding-bottom: 0.625rem;
}
.shot-badge {
  display: inline-block; padding: 0.0625rem 0.4375rem; border-radius: 999px;
  font-style: normal; font-size: 0.5625rem; white-space: nowrap;
  border: 1px solid transparent;
}
.shot-badge.ok { background: var(--positive-bg); color: var(--positive); border-color: color-mix(in srgb, var(--positive) 28%, transparent); }
.shot-badge.warn { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.shot-badge.quiet { background: var(--surface-2); color: var(--graphite-600); border-color: var(--line-2); }

/* Sections ---------------------------------------------------------------- */

.sec-h2 { margin-top: 1.125rem; max-width: 40rem; font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.08; letter-spacing: -0.032em; }
.side-who { margin-top: 1rem; font-size: 0.875rem; color: var(--graphite-600); }
.side-dl { margin-top: 1.25rem; font-size: 0.875rem; }
.partition-note {
  margin-top: 3.5rem; max-width: 46rem;
  font-size: 0.9375rem; line-height: 1.75; color: var(--zinc-line);
}
.bg-mist { background: var(--surface); }
.bg-navy { background: var(--surface); }
.panel { background: var(--surface); }
.site-footer { background: var(--surface); }
.site-footer .fine { border-top-color: var(--line); }

/* ==========================================================================
   The signed-in application is always dark.
   Custom properties inherit, so redefining them on .shell re-themes
   everything inside it without touching the marketing site.
   ========================================================================== */

.shell {
  --ink: #0B0F17;
  --surface: #121824;
  --surface-2: #18202D;
  --line: #1D2532;
  --line-2: #293241;

  --paper: #EEF1F6;
  --mist: #BFC7D4;
  --zinc-line: #9BA5B6;
  --graphite-600: #8B94A6;
  --graphite: #353E4E;

  --brass: #7C6CFF;
  --brass-dim: #5A49D6;

  --positive: #4ade9f;  --positive-bg: #0e2a20;
  --warning: #f0b45c;   --warning-bg: #2b2013;
  --critical: #f2777f;  --critical-bg: #2b1417;
  --info: #7fb4f0;      --info-bg: #101f30;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
  --topbar-bg: rgba(11,15,23,0.84);
  --scrim: rgba(0,0,0,0.66);
  --redact-a: #232833;
  --redact-b: #2e3440;

  color-scheme: dark;
  background: var(--ink);
  color: var(--paper);
}

.shell .btn-primary, .shell .btn-onink { background: var(--paper); color: #0b0d11; }
.shell .card { background: var(--surface); box-shadow: none; border-color: var(--line); }
.shell .stat { background: var(--surface); }

/* Charts ------------------------------------------------------------------ */

.chart { margin: 1.25rem 0 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis {
  fill: var(--graphite-600); font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.06em;
}
.chart .bar-a { fill: var(--brass); opacity: 0.92; }
.chart .bar-b { fill: var(--line-2); }
.chart .line { stroke: var(--positive); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { fill: var(--positive); stroke: var(--surface); stroke-width: 1.5; }
.chart .fill-top { stop-color: var(--positive); stop-opacity: 0.20; }
.chart .fill-bottom { stop-color: var(--positive); stop-opacity: 0; }

.chart-legend {
  display: flex; gap: 1.25rem; margin-top: 0.875rem;
  font-size: 0.75rem; color: var(--graphite-600);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }

.sw { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.sw-a, .sw-accent { background: var(--brass); }
.sw-b, .sw-quiet { background: var(--line-2); }
.sw-ok { background: var(--positive); }
.sw-warn { background: var(--warning); }
.sw-info { background: var(--info); }

.spark { width: 88px; height: 24px; margin-top: 0.625rem; display: block; }
.spark polyline { stroke: var(--zinc-line); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.spark.tone-ok polyline { stroke: var(--positive); }
.stat-foot { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--graphite-600); }

/* Stacked stage bar ------------------------------------------------------- */

.stackbar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); gap: 2px;
}
.seg { display: block; height: 100%; }
.seg-warn { background: var(--warning); }
.seg-info { background: var(--info); }
.seg-accent { background: var(--brass); }
.seg-ok { background: var(--positive); }
.seg-quiet { background: var(--line-2); }

.stacklegend { margin-top: 1.125rem; display: grid; gap: 0.5rem; }
.stacklegend li {
  display: grid; grid-template-columns: 9px 1fr auto auto;
  gap: 0.625rem; align-items: center; font-size: 0.8125rem;
}
.sl-label { color: var(--mist); }
.sl-n {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--graphite-600);
  background: var(--surface-2); padding: 0.0625rem 0.375rem; border-radius: 3px;
}
.sl-v { color: var(--paper); font-size: 0.75rem; }

/* Aging ------------------------------------------------------------------- */

.aging { display: grid; gap: 0.75rem; }
.aging li {
  display: grid; grid-template-columns: 4.25rem 1fr auto 1.5rem;
  gap: 0.75rem; align-items: center;
}
.ag-label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--graphite-600); }
.ag-track { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ag-fill { display: block; height: 100%; background: var(--brass); border-radius: 999px; }
.ag-fill.late { background: var(--warning); }
.ag-value { font-size: 0.75rem; color: var(--paper); }
.ag-n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--graphite-600); text-align: right; }

/* Concentration ----------------------------------------------------------- */

.conc { display: grid; gap: 0.75rem; }
.conc li { display: grid; grid-template-columns: 1fr 6rem 2.5rem; gap: 0.75rem; align-items: center; }
.conc-name {
  font-size: 0.8125rem; color: var(--mist);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conc-track { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.conc-fill { display: block; height: 100%; background: var(--brass-dim); border-radius: 999px; }
.conc-pct { font-size: 0.75rem; color: var(--paper); text-align: right; }

/* Metric strip ------------------------------------------------------------ */

.metrics {
  margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
}
@media (min-width: 860px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--surface); padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.m-k { font-size: 0.75rem; color: var(--graphite-600); }
.m-v { font-size: 0.9375rem; font-weight: 600; color: var(--paper); }

/* Layout helpers ---------------------------------------------------------- */

.cols-2-1 { display: grid; gap: 1.25rem; }
@media (min-width: 1080px) { .cols-2-1 { grid-template-columns: 1.65fr 1fr; } }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card-note { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600); }
.head-tools { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }

/* Command palette --------------------------------------------------------- */

.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: var(--scrim); backdrop-filter: blur(4px);
  display: grid; place-items: start center; padding: 8vh 1.5rem;
}
.cmdk {
  width: 100%; max-width: 34rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg); overflow: hidden;
}
.cmdk input {
  width: 100%; padding: 1rem 1.125rem; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--paper);
  font-family: var(--font-body); font-size: 0.9375rem;
}
.cmdk input:focus { outline: none; box-shadow: none; }
.cmdk-list { max-height: 22rem; overflow-y: auto; padding: 0.5rem; }
.cmdk-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.625rem 0.75rem; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-control); text-align: left;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--mist);
}
.cmdk-item:hover, .cmdk-item.on { background: var(--surface-2); color: var(--paper); }
.cmdk-kind {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite-600);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 0.0625rem 0.3125rem;
}
.cmdk-hint { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--graphite-600); }
.cmdk-empty { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--graphite-600); }

.kbd {
  display: inline-flex; align-items: center; gap: 0.1875rem;
  padding: 0.125rem 0.375rem; border-radius: 4px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--graphite-600);
}
.search-hint { display: flex; align-items: center; gap: 0.5rem; }

.cmd-trigger {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.3125rem 0.5rem 0.3125rem 0.75rem; margin-right: 0.75rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-control); cursor: pointer;
  font-family: var(--font-body); font-size: 0.75rem; color: var(--graphite-600);
}
.cmd-trigger:hover { color: var(--paper); border-color: var(--zinc-line); }
@media (min-width: 700px) { .cmd-trigger { display: inline-flex; } }
.topbar-right { display: flex; align-items: center; }

/* ==========================================================================
   Assurance
   ========================================================================== */

.assure {
  border: 1px solid var(--line-2); border-radius: var(--radius-card);
  padding: 1.75rem; background: var(--surface); margin-bottom: 1.25rem;
}
.assure-ok { border-color: color-mix(in srgb, var(--positive) 45%, var(--line-2)); }
.assure-ok::before {
  content: ''; display: block; height: 2px; margin: -1.75rem -1.75rem 1.5rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, var(--positive), transparent);
}
.assure-pending { border-color: color-mix(in srgb, var(--warning) 45%, var(--line-2)); }
.assure-none { border-style: dashed; }

.assure-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.assure-title { margin-top: 0.5rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.assure-ok .assure-title { color: var(--positive); }
.assure-seal {
  width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.9375rem;
  background: var(--positive-bg); color: var(--positive);
  border: 1px solid color-mix(in srgb, var(--positive) 40%, transparent);
}
.assure-body { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.65; color: var(--mist); max-width: 46rem; }

.assure-grid {
  margin-top: 1.5rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-control); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .assure-grid { grid-template-columns: repeat(3, 1fr); } }
.assure-grid > div { background: var(--surface); padding: 0.875rem 1rem; }
.assure-grid dt { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600); }
.assure-grid dd { margin-top: 0.375rem; font-size: 0.875rem; color: var(--paper); }
.assure-grid dd.mono { font-family: var(--font-mono); }

.assure-accept {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.assure-accept p { max-width: 34rem; }
.assure-accepted {
  margin-top: 1.25rem; font-family: var(--font-mono);
  font-size: 0.6875rem; color: var(--positive);
}
.assure-fine { margin-top: 1.25rem; font-size: 0.6875rem; line-height: 1.6; color: var(--graphite-600); }

.limitbox {
  padding: 1.125rem 1.25rem; margin-bottom: 1.75rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--ink);
}
.limitbox.bad { border-color: var(--critical); background: var(--critical-bg); }
.limitbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.limitbars { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem 1.5rem; }
@media (min-width: 760px) { .limitbars { grid-template-columns: repeat(4, 1fr); } }
.lb-k { display: block; font-size: 0.6875rem; color: var(--graphite-600); }
.lb-v { display: block; margin-top: 0.25rem; font-size: 0.9375rem; color: var(--paper); }
.lb-v.strong { font-weight: 600; }
.limit-warn { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--critical); }

.instrument-note {
  margin: 1.75rem 0 1.25rem; padding: 1rem 1.125rem;
  border-left: 2px solid var(--brass); background: var(--surface-2);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.checkrow {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 1rem 0; margin: 0.5rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.checkrow input { width: auto; margin-top: 0.1875rem; }
.checkrow strong { font-size: 0.875rem; color: var(--paper); }

.coverline { display: inline-flex; align-items: center; gap: 0.5rem; }
.cover-amt { font-size: 0.75rem; color: var(--mist); }
.linkbtn.block { display: block; margin-top: 0.375rem; }

.build-chip {
  margin-left: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.5625rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-600);
}
.build-tag { margin-left: 0.75rem; font-family: var(--font-mono); opacity: 0.7; }

/* Payees ------------------------------------------------------------------ */

.rolepill {
  display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px;
  font-size: 0.6875rem; background: var(--surface-2); color: var(--mist);
  border: 1px solid var(--line-2);
}
.total-row td { border-top: 1px solid var(--line-2); border-bottom: 0; }
.split-summary {
  margin-top: 1.75rem; padding: 1.125rem 1.25rem;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-control); max-width: 26rem;
}
.split-summary > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.3125rem 0; font-size: 0.875rem; color: var(--zinc-line);
}
.split-summary .tot {
  margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  color: var(--paper); font-weight: 600; font-size: 1rem;
}
.headroom {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 1rem; margin-bottom: 1.25rem;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-control); font-size: 0.8125rem; color: var(--zinc-line);
}
.headroom .strong { color: var(--paper); font-size: 0.9375rem; }

.attach {
  padding: 1.25rem; border: 1px dashed var(--line-2);
  border-radius: var(--radius-control); background: var(--ink);
}
.attach-head { margin-bottom: 1.125rem; }
.attach-head h3 { font-size: 0.875rem; font-weight: 600; }
.attach-head p { margin-top: 0.3125rem; font-size: 0.75rem; }
.attach .grid3 { margin-bottom: 1.125rem; }
.attach input[type="file"] { padding: 0.5rem; font-size: 0.75rem; }

.linkbox {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem;
  padding: 0.75rem 0.875rem; background: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
}
.linkbox code {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--mist); overflow-wrap: anywhere;
}

/* Pre-launch gate --------------------------------------------------------- */

.gate {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 2rem 1.5rem; background: var(--ink);
}
.gate-card {
  width: 100%; max-width: 26rem; padding: 2.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
.gate-title { margin-top: 0.75rem; font-size: 1.5rem; letter-spacing: -0.025em; }
.gate-body { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--zinc-line); }
.gate-fine { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--graphite-600); }

.choice { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .choice { grid-template-columns: 1fr 1fr; } }
.choice-card {
  display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer;
  padding: 1rem 1.125rem; border: 1px solid var(--line-2);
  border-radius: var(--radius-control); background: var(--surface);
}
.choice-card.on { border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 14%, transparent); }
.choice-card input { width: auto; margin-top: 0.1875rem; }
.choice-card strong { font-size: 0.875rem; color: var(--paper); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Light-to-dark scroll
   Custom properties inherit, so a section carrying data-theme="dark" re-themes
   everything inside it. No JavaScript is involved in the sections themselves --
   only the fixed header, which has to follow whatever is currently under it.
   ========================================================================== */

[data-band] { transition: background-color 320ms ease; }

.site-header {
  transition: background-color 260ms ease, border-color 260ms ease;
}
.site-header.on-dark {
  background: rgba(7, 8, 10, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  [data-band], .site-header { transition: none; }
}

/* ==========================================================================
   Small screens
   The rule throughout: nothing may make the page wider than the viewport.
   Where content genuinely needs width, it scrolls inside its own box.
   ========================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }

/* Tables scroll sideways in their own container rather than stretching the
   page. The wrapper keeps thead and tbody in one table so columns stay aligned,
   which the display:block trick on the table itself does not. */
.tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .tablewrap .table { min-width: 34rem; }
  .tablewrap { margin-inline: -0.25rem; padding-inline: 0.25rem; }
}

@media (max-width: 720px) {
  /* Toolbars stack instead of fighting for width. */
  .toolbar { flex-direction: column; align-items: stretch; }
  .search { min-width: 0; width: 100%; }
  .search-hint { display: flex; gap: 0.5rem; }
  .search-hint .search { flex: 1; }
  .head-tools { width: 100%; }
  .head-tools .segmented { flex: 1; }
  .head-tools .segmented button { flex: 1; }
  .page-head { gap: 1rem; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }

  /* Charts: the axis labels are sized for a 640-unit viewBox, so they shrink
     with it. Give them back some size once the box is narrow. */
  .chart .axis { font-size: 13px; }
  .chart-legend { flex-wrap: wrap; gap: 0.75rem; }

  /* The product shot drops to what actually matters on a phone. */
  .shot-tr { grid-template-columns: 1.5fr 1.1fr 1fr; gap: 0.375rem; }
  .shot-tr > *:nth-child(3), .shot-tr > *:nth-child(4) { display: none; }
  .shot-main { padding: 0.875rem; }
  .shot-badge { font-size: 0.5rem; padding: 0.0625rem 0.3125rem; }
  .shot-url { display: none; }

  /* Header and top bar stop crowding. */
  .topbar { padding: 0 1rem; gap: 0.625rem; }
  .build-chip { display: none; }
  .site-header .bar { gap: 0.75rem; }
  .headcta { gap: 0.375rem; }
  .btn-sm { padding: 0.4375rem 0.6875rem; font-size: 0.75rem; }

  /* Footer links stop pushing the page wide. */
  .site-footer nav { grid-template-columns: 1fr 1fr; gap: 0.625rem 1.5rem; }
  .site-footer .top { gap: 2rem; }

  /* Cards and sections tighten up. */
  .wrap, .shell .wrap { padding-inline: 1.125rem; }
  .pad, .formsec { padding: 1.125rem; }
  .section { padding: 3.5rem 0; }
  .app-main, .shell .app-main { padding: 1.5rem 0 4rem; }
  .modal-backdrop { padding: 1.5rem 1rem; }
  .modal-body, .modal-head { padding: 1.125rem; }
  .auth-card { padding: 1.5rem; }
  .gate-card { padding: 1.75rem; }

  /* Metrics and stats read better stacked than squeezed. */
  .metric { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .assure { padding: 1.25rem; }
  .assure-ok::before { margin: -1.25rem -1.25rem 1.25rem; }
  .assure-accept { flex-direction: column; align-items: stretch; }
  .conc li { grid-template-columns: 1fr 4rem 2.25rem; gap: 0.5rem; }
  .stacklegend li { grid-template-columns: 9px 1fr auto auto; gap: 0.5rem; }

  /* Upload controls stack. */
  .upload-controls { flex-direction: column; align-items: stretch; }
  .upload-controls select, .upload-controls input[type="file"] { width: 100%; min-width: 0; }

  /* The partition reads top-to-bottom on a phone. */
  .partition-side.left, .partition-side.right { padding: 0; }
  .partition { gap: 2rem; }

  /* Long references and emails wrap instead of overflowing. */
  .table td.mono, .table td.ref, .userchip-name, .megadetail { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .shot-stats { grid-template-columns: 1fr 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .env-chip { display: none; }
}

/* Anything that can be tapped should be big enough to tap. */
@media (pointer: coarse) {
  .btn-sm { min-height: 2.25rem; }
  .linkbtn { padding: 0.25rem 0; min-height: 1.75rem; }
  .tabs button { padding: 0.75rem 0.875rem; min-height: 2.75rem; }
  .sidelink, .app-navlink { min-height: 2.5rem; display: flex; align-items: center; }
}


/* ==========================================================================
   Opening screen

   Opens on the image, then settles to solid black as you scroll — the same
   move Mercury makes by scrubbing a video between two frames. One custom
   property, set once per animation frame, drives all of it.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 0;
  min-height: 88vh;
  isolation: isolate;
  background: var(--ink);
}

.hero-media {
  position: absolute; inset: 0 0 auto 0; height: 52rem; z-index: -2;
  background-image: url('hero-sm.webp');
  background-size: cover; background-position: center 44%;
  /* Drains colour and light as the screen settles, so it reads as one move. */
  filter:
    saturate(calc(1 - 0.75 * var(--scroll-dark, 0)))
    brightness(calc(1 - 0.35 * var(--scroll-dark, 0)));
}
@media (min-width: 800px)  { .hero-media { background-image: url('hero-md.webp'); } }
@media (min-width: 1500px) { .hero-media { background-image: url('hero-lg.webp'); } }

/* At rest: a dark scrim the image reads through, fading into the page. */
.hero-veil {
  position: absolute; inset: 0 0 auto 0; height: 52rem; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10,13,20,0.58) 0%,
      rgba(10,13,20,0.70) 38%,
      rgba(10,13,20,0.92) 72%,
      var(--ink) 100%),
    linear-gradient(96deg, rgba(10,13,20,0.74) 0%, rgba(10,13,20,0.18) 58%, rgba(10,13,20,0.04) 100%);
}

/* On scroll: solid black fades in over the top of it. */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 52rem; z-index: -1;
  background: var(--ink);
  opacity: var(--scroll-dark, 0);
}
.hero::after { display: none; }

/* The opening copy lifts and fades, so nothing has to change colour
   mid-scroll and nothing is ever hard to read against the veil. */
.hero-copy {
  text-align: left; max-width: 46rem;
  opacity: calc(1 - var(--scroll-dark, 0) * 1.35);
  transform: translateY(calc(var(--scroll-dark, 0) * -1.5rem));
  will-change: opacity, transform;
}
.hero h1 { margin-top: 1.25rem; line-height: 1.02; letter-spacing: -0.038em; }
.hero-sub { margin-left: 0; color: var(--mist); font-size: 1.1875rem; line-height: 1.55; max-width: 34rem; }
.hero-cta { justify-content: flex-start; }

.hero .shot { margin-top: 4.5rem; }

@media (max-width: 720px) {
  .hero { padding-top: 4rem; min-height: 78vh; }
  .hero-media, .hero-veil, .hero::before { height: 40rem; }
  .hero .shot { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy { opacity: 1; transform: none; }
  .hero-media { filter: none; }
}

/* ==========================================================================
   One colour throughout
   The public pages carry no band-specific colour of their own any more; they
   all take the dark tokens. The header no longer needs to switch.
   ========================================================================== */

.site-header, .site-header.on-dark {
  background: var(--topbar-bg);
  border-bottom-color: var(--line);
}
.megamenu { background: var(--surface); border-bottom-color: var(--line); }
.megaside { background: var(--surface-2); border-color: var(--line); }
.mobilenav { background: var(--surface); border-top-color: var(--line); }
.bg-mist, .bg-navy, .panel, .site-footer { background: var(--ink); }
.panels { background: var(--line); border-color: var(--line); }
.panel { background: var(--surface); }

/* ==========================================================================
   Two audiences
   ========================================================================== */

.aud { margin-top: 3.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .aud { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.aud-card {
  display: flex; flex-direction: column;
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* One measure for every block in the card, so the left edge is a single line
   and the right edge does not zig-zag between paragraphs. */
.aud-card > * { max-width: 30rem; }

.aud-title {
  margin-top: 1rem; font-size: 1.5rem; line-height: 1.16;
  letter-spacing: -0.028em; color: var(--paper);
}
.aud-body {
  margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--mist);
}
.aud-points {
  margin-top: auto; padding-top: 2rem; width: 100%; max-width: none;
  display: grid; gap: 0;
}
.aud-points > div {
  display: grid; gap: 0.3125rem;
  padding: 1.125rem 0; border-top: 1px solid var(--line);
}
.aud-points > div:last-child { padding-bottom: 0; }
.aud-points dt {
  font-size: 0.9375rem; font-weight: 600; color: var(--paper); letter-spacing: -0.008em;
}
.aud-points dd {
  margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--zinc-line);
  max-width: 30rem;
}

@media (max-width: 720px) { .aud-card { padding: 1.5rem; } }

/* ==========================================================================
   Sections shift tone as you pass through them
   Not a single flat colour: each band sits slightly differently, so scrolling
   reads as movement rather than one long panel.
   ========================================================================== */

#audiences { background: var(--ink); }
#partition { background: var(--ink); }
#confidentiality { background: var(--surface); border-top-color: var(--line); border-bottom-color: var(--line); }
#how-it-works { background: var(--ink); }
#industries, #request-demo { background: var(--surface); }
.site-footer { background: var(--ink); }

/* ==========================================================================
   Footer — clean. The long-form wording lives on its own page.
   ========================================================================== */

.site-footer { padding-top: 4.5rem; padding-bottom: 2.5rem; }

.footer-base {
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
  display: grid; gap: 1rem;
}
.footer-note {
  max-width: 46rem; font-size: 0.8125rem; line-height: 1.75; color: var(--zinc-line);
}
.footer-note a { color: var(--zinc-line); text-decoration: underline; text-underline-offset: 2px; }
.footer-note a:hover { color: var(--paper); }

.footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  font-size: 0.8125rem; color: var(--zinc-line);
}
.footer-meta a { color: var(--zinc-line); }
.footer-meta a:hover { color: var(--paper); }
.footer-dot { color: var(--line-2); }
.footer-meta .build-tag { margin-left: auto; font-size: 0.625rem; opacity: 0.6; }

/* Footer layout — lost when the opening-screen block was rewritten wholesale
   in the previous build, which took everything after it. Restored here. */

.footer-top {
  display: grid; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .footer-top { grid-template-columns: 17rem 1fr; gap: 4rem; } }

.footer-blurb {
  margin-top: 1.25rem; max-width: 19rem;
  font-size: 0.875rem; line-height: 1.7; color: var(--zinc-line);
}

.footer-cols { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-cols ul { margin-top: 1rem; display: grid; gap: 0.5625rem; }
.footer-cols a { font-size: 0.875rem; color: var(--mist); }
.footer-cols a:hover { color: var(--paper); }

/* ==========================================================================
   Footnotes
   A small marker on the claim; the wording numbered at the foot of the page.
   ========================================================================== */

.fn-ref {
  display: inline-block; margin-left: 0.125rem;
  color: var(--brass); text-decoration: none;
  font-family: var(--font-mono); line-height: 1;
}
.fn-ref sup { font-size: 0.5625em; letter-spacing: 0.02em; }
.fn-ref:hover { color: var(--paper); }
.fn-ref:focus-visible { outline-offset: 1px; }

.hero-disclaimer {
  margin-top: 2rem; max-width: 36rem;
  font-size: 0.8125rem; line-height: 1.7; color: var(--zinc-line);
}

.shot-sample {
  margin-left: auto; padding: 0.0625rem 0.4375rem; border-radius: 3px;
  border: 1px solid var(--line-2); background: var(--ink);
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600);
}

.fnlist {
  padding: 4rem 0 1.5rem;
  border-top: 1px solid var(--line);
}
.fnlist h2 {
  font-size: 1.125rem; font-weight: 600; color: var(--paper);
  letter-spacing: -0.018em;
}
.fnlist ol {
  margin-top: 2rem; list-style: decimal; padding-left: 1.5rem;
  display: grid; gap: 2rem;
  max-width: 60rem;
}
.fnlist li { color: var(--graphite-600); }
.fnlist li::marker { font-family: var(--font-mono); font-size: 0.6875rem; }
.fn-label { font-size: 0.9375rem; font-weight: 600; color: var(--paper); letter-spacing: -0.008em; }
.fn-body { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.75; color: var(--zinc-line); max-width: 46rem; }

/* Jumping to a footnote should not tuck it under the fixed header. */
.fnlist li { scroll-margin-top: 5rem; }
.fnlist li:target .fn-label { color: var(--brass); }

@media (max-width: 720px) {
  .fnlist { padding-top: 2.25rem; }
  .fnlist ol { gap: 1rem; }
  .hero-disclaimer { font-size: 0.6875rem; }
}

/* ==========================================================================
   Dashboard: dark chrome, light canvas

   Custom properties inherit, so putting light tokens on the content column
   re-themes everything inside it while the sidebar keeps the dark set. The
   top bar sits inside that column, so it takes the dark tokens back.
   ========================================================================== */

.shell-main {
  --ink: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #EFF1F5;
  --line: #E3E6EC;
  --line-2: #CFD4DE;

  --paper: #12151C;
  --mist: #3A4150;
  --zinc-line: #545D6C;
  --graphite-600: #656E7E;
  --graphite: #C6CBD4;

  --positive: #0F7A5A;  --positive-bg: #E7F5EF;
  --warning: #9A6300;   --warning-bg: #FDF2E0;
  --critical: #B32430;  --critical-bg: #FCECEB;
  --info: #2B5FB8;      --info-bg: #EAF1FC;

  --brass: #5B4BF5;
  --brass-dim: #8B81F7;

  --shadow-sm: 0 1px 2px rgba(18,21,28,0.06);
  --shadow-md: 0 4px 16px rgba(18,21,28,0.08);
  --shadow-lg: 0 24px 64px rgba(18,21,28,0.16);
  --scrim: rgba(18,21,28,0.42);
  --redact-a: #DDE1E8;
  --redact-b: #CDD3DC;

  color-scheme: light;
  background: var(--ink);
}

/* The bar stays with the sidebar, not the canvas. */
.shell-main .topbar {
  --paper: #F1F3F7;
  --graphite-600: #69737F;
  --line: #1D2532;
  --line-2: #293241;
  --surface: #10151F;
  background: rgba(11,15,23,0.92);
  border-bottom-color: #1D2532;
}
.shell-main .topbar .env-chip,
.shell-main .topbar .build-chip { border-color: #293241; background: #10151F; color: #69737F; }
.shell-main .cmd-trigger { background: #10151F; border-color: #293241; color: #8792A4; }
.shell-main .cmd-trigger:hover { color: #F1F3F7; border-color: #5C6575; }

.shell-main .card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); }
.shell-main .stat { background: var(--surface); }
.shell-main .btn-primary { background: #12151C; color: #fff; }
.shell-main .btn-primary:hover { opacity: 0.88; }
.shell-main .table tr.clickable:hover td { background: var(--surface-2); }

/* Charts on a light canvas. */
.shell-main .chart .bar-b { fill: #C9CFDA; }
.shell-main .chart .grid { stroke: var(--line); }
.shell-main .spark polyline { stroke: var(--zinc-line); }

/* ==========================================================================
   Flagged items
   ========================================================================== */

.flaglist { margin-top: 1rem; display: grid; gap: 0.5rem; }
.flaglist li {
  display: grid; grid-template-columns: 6px auto 1fr auto;
  gap: 0.75rem; align-items: center;
  padding: 0.625rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.flaglist li:last-child { border-bottom: 0; }
.flag-dot { width: 6px; height: 6px; border-radius: 50%; }
.flag-dot.bad { background: var(--critical); }
.flag-dot.warn { background: var(--warning); }
.flag-ref { font-family: var(--font-mono); font-size: 0.75rem; color: var(--paper); }
.flag-ref:hover { text-decoration: underline; text-underline-offset: 3px; }
.flag-why { color: var(--zinc-line); }
.flag-amt { color: var(--paper); font-size: 0.75rem; }

.metrics { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .metrics { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .metrics { grid-template-columns: repeat(8, 1fr); } }
.metric { flex-direction: column; align-items: flex-start; gap: 0.375rem; }

/* ==========================================================================
   Application form
   ========================================================================== */

.apply { padding-top: 3.5rem; padding-bottom: 6rem; }
.apply-h1 { margin-top: 0.75rem; font-size: 2rem; }
.apply-lead { margin-top: 1rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.7; color: var(--zinc-line); }

.stepper {
  margin: 2.5rem 0 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--line);
}
.stepper li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--graphite-600); }
.stepper-n {
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.625rem;
}
.stepper li.on { color: var(--paper); }
.stepper li.on .stepper-n { border-color: var(--brass); color: var(--brass); }
.stepper li.done { color: var(--zinc-line); }
.stepper li.done .stepper-n { background: var(--brass); border-color: var(--brass); color: #fff; }

.refblock { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.refblock:first-child { border-top: 0; padding-top: 0; }

.safenote {
  padding: 1.125rem 1.25rem; margin-bottom: 1.5rem;
  border-left: 2px solid var(--brass); background: var(--surface-2);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.safenote ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.safenote li {
  position: relative; padding-left: 1rem;
  font-size: 0.8125rem; line-height: 1.6; color: var(--zinc-line);
}
.safenote li::before { content: '·'; position: absolute; left: 0.25rem; color: var(--brass); }
.checkrow a { color: var(--zinc-line); text-decoration: underline; text-underline-offset: 2px; }
.checkrow a:hover { color: var(--paper); }

/* ==========================================================================
   The order ledger
   A light band. Four stages build and stay, so the finished state is the
   whole order rather than the last slide of a sequence.
   ========================================================================== */

.process {
  background: var(--ink); color: var(--paper);
  padding: 7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .process { padding: 4rem 0; } }

.process-h2 {
  margin-top: 1.125rem; max-width: 36rem;
  font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.08;
  letter-spacing: -0.032em; color: var(--paper);
}
.process-lead {
  margin-top: 1.25rem; max-width: 38rem;
  font-size: 1rem; line-height: 1.7; color: var(--zinc-line);
}

.ledger {
  margin-top: 3.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ledger-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ledger-ref { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--paper); }

.ledger-controls { display: flex; align-items: center; gap: 0.4375rem; }
.lbar {
  width: 2rem; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: var(--line-2); cursor: pointer;
  transition: background 420ms cubic-bezier(.32,.72,0,1);
}
.lbar.on { background: var(--brass); }
.lplay {
  margin-left: 0.75rem; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600);
}
.lplay:hover { color: var(--paper); }

.ledger-body { display: grid; }
@media (min-width: 1000px) { .ledger-body { grid-template-columns: 1fr 17rem; } }

/* Stages ------------------------------------------------------------------ */

.lstages { padding: 0.5rem 0; }

.lstage {
  position: relative;
  display: grid; grid-template-columns: 2.5rem 1fr;
  padding: 1.25rem 1.75rem 1.25rem 0;
  opacity: 0.28;
  transition: opacity 620ms cubic-bezier(.32,.72,0,1);
}
.lstage.on { opacity: 1; }

/* The spine, drawn once and lit as stages arrive. */
.lstage::before {
  content: ''; position: absolute; left: 1.75rem; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.lstage:first-child::before { top: 50%; }
.lstage:last-child::before { bottom: 50%; }

.lmark {
  position: relative; z-index: 1;
  width: 9px; height: 9px; margin: 0.5rem 0 0 1.375rem; border-radius: 50%;
  background: var(--line-2); box-shadow: 0 0 0 4px var(--surface);
  transition: background 620ms cubic-bezier(.32,.72,0,1),
              transform 620ms cubic-bezier(.32,.72,0,1);
}
.lstage.on .lmark { background: var(--brass); transform: scale(1.15); }

.lrow { display: grid; gap: 0.875rem; padding-left: 0.875rem; }
@media (min-width: 760px) { .lrow { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: start; } }

.ltitle { font-size: 0.9375rem; font-weight: 600; color: var(--paper); letter-spacing: -0.008em; }
.lsub { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--graphite-600); }

.llines { display: grid; gap: 0.5rem; }
.lline {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.875rem; align-items: baseline;
  padding: 0.625rem 0.875rem; border-radius: var(--radius-control);
  background: var(--surface-2); border: 1px solid transparent;
  opacity: 0; transform: translateY(6px);
  transition: opacity 520ms cubic-bezier(.32,.72,0,1),
              transform 520ms cubic-bezier(.32,.72,0,1);
}
.lstage.on .lline { opacity: 1; transform: none; }

.lname { font-size: 0.875rem; color: var(--paper); }
.lrole {
  margin-left: 0.5rem; padding: 0.0625rem 0.375rem; border-radius: 3px;
  font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--surface); color: var(--graphite-600); border: 1px solid var(--line);
}
.lref { font-size: 0.75rem; color: var(--graphite-600); }
.lamt {
  font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums;
  color: var(--paper); min-width: 6.5rem; text-align: right;
}

.lline.in  { background: var(--positive-bg); border-color: color-mix(in srgb, var(--positive) 22%, transparent); }
.lline.in .lamt, .lline.in .lref { color: var(--positive); }
.lline.out .lamt { color: var(--zinc-line); }
.lline.keep { background: var(--surface); border-color: var(--brass); }
.lline.keep .lamt, .lline.keep .lref { color: var(--brass); }
.lline.keep .lname { font-weight: 600; }

/* Position panel ---------------------------------------------------------- */

.ltotals {
  padding: 1.75rem; border-top: 1px solid var(--line); background: var(--surface-2);
}
@media (min-width: 1000px) { .ltotals { border-top: 0; border-left: 1px solid var(--line); } }
.ltotals dl { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.ltotals dl > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ltotals dt { font-size: 0.8125rem; color: var(--zinc-line); }
.ltotals dd {
  font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.ltot { margin-top: 0.375rem; padding-top: 0.875rem; border-top: 1px solid var(--line-2); }
.ltot dt { color: var(--paper); font-weight: 600; }
.ltot dd { font-size: 1.0625rem; font-weight: 600; color: var(--brass); }

.lcheck {
  margin-top: 1.5rem; display: flex; gap: 0.5rem; align-items: flex-start;
  font-size: 0.75rem; line-height: 1.5; color: var(--zinc-line);
}
.lcheck .ok { color: var(--positive); font-weight: 700; }
.lcheck .bad { color: var(--critical); font-weight: 700; }
.lmargin {
  margin-top: 0.625rem; font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--graphite-600);
}

@media (max-width: 720px) {
  .ledger-head { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem; }
  .lstage { padding-right: 1.25rem; }
  .lline { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
  .lline .lref { grid-column: 1; font-size: 0.6875rem; }
  .lamt { grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .lstage, .lline, .lmark, .lbar { transition: none; }
  .lstage { opacity: 1; }
  .lline { opacity: 1; transform: none; }
}

.lwho { max-width: 13rem; }
@media (max-width: 759px) { .lwho { max-width: none; } }

/* ==========================================================================
   Release terms
   ========================================================================== */

.release-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}

.relcard { margin-bottom: 1.25rem; }

.relgrid {
  margin-top: 1.375rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-control); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .relgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .relgrid { grid-template-columns: repeat(6, 1fr); } }
.relgrid > div { background: var(--surface); padding: 0.875rem 1rem; }
.rel-k {
  display: block; font-family: var(--font-mono); font-size: 0.5625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-600);
}
.rel-v { display: block; margin-top: 0.375rem; font-size: 0.875rem; color: var(--paper); }
.rel-v.mono { font-family: var(--font-mono); }

.condlist { margin-top: 1.375rem; display: grid; gap: 0.5rem; }
.condlist li {
  display: grid; grid-template-columns: 1.25rem 1fr auto;
  gap: 0.75rem; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line);
}
.condlist li:last-child { border-bottom: 0; }
.condbox {
  width: 1.25rem; height: 1.25rem; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--surface-2); color: transparent;
  font-size: 0.75rem; line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.condbox:hover { border-color: var(--zinc-line); }
.condbox.on { background: var(--positive); border-color: var(--positive); color: #fff; }
.cond-label { font-size: 0.875rem; color: var(--paper); }
.cond-when { font-size: 0.75rem; }

.relactions {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}

@media (max-width: 720px) {
  .release-head { flex-direction: column; }
  .relactions .btn { flex: 1; }
}

/* ==========================================================================
   Company profile
   ========================================================================== */

.logorow { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; }
.logobox {
  width: 5rem; height: 5rem; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  font-size: 0.6875rem; color: var(--graphite-600); text-align: center;
}
.logobox img { width: 100%; height: 100%; object-fit: contain; }

.tagpick { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tagopt {
  padding: 0.3125rem 0.6875rem; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--zinc-line);
  font-family: var(--font-body); font-size: 0.8125rem;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tagopt:hover { border-color: var(--zinc-line); color: var(--paper); }
.tagopt.on { background: var(--brass); border-color: var(--brass); color: #fff; }

/* ==========================================================================
   Company cards and connections
   ========================================================================== */

.ccard {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem;
  padding: 1.25rem; margin-bottom: 0.75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
@media (min-width: 760px) { .ccard { grid-template-columns: 3.25rem 1fr auto; align-items: start; } }

.ccard-logo {
  width: 3.25rem; height: 3.25rem; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 10px;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--zinc-line);
}
.ccard-logo img { width: 100%; height: 100%; object-fit: contain; }

.ccard-name {
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
  font-size: 1rem; font-weight: 600; color: var(--paper); letter-spacing: -0.01em;
}
.ccard-tag { margin-top: 0.3125rem; font-size: 0.875rem; color: var(--mist); }
.ccard-meta { margin-top: 0.375rem; font-size: 0.75rem; color: var(--graphite-600); }
.ccard-msg {
  margin-top: 0.875rem; padding: 0.75rem 0.875rem;
  background: var(--surface-2); border-radius: var(--radius-control);
  font-size: 0.8125rem; line-height: 1.6; color: var(--mist);
}
.ccard-actions { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; }
@media (min-width: 760px) { .ccard-actions { align-items: flex-end; } }
.ccard-btns { display: flex; gap: 0.5rem; }
.ccard-terms { text-align: left; }
@media (min-width: 760px) { .ccard-terms { text-align: right; } }

/* ==========================================================================
   Seller performance
   ========================================================================== */

.perftable td { vertical-align: middle; }
.perfbar {
  display: inline-block; width: 4.5rem; height: 5px; vertical-align: middle;
  background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.perffill { display: block; height: 100%; border-radius: 999px; background: var(--zinc-line); }
.perffill.good { background: var(--positive); }
.perffill.ok { background: var(--warning); }
.perffill.poor { background: var(--critical); }
.perfpct {
  margin-left: 0.5rem; font-family: var(--font-mono);
  font-size: 0.75rem; color: var(--zinc-line);
}

.rating {
  display: inline-grid; place-items: center;
  min-width: 2.25rem; padding: 0.1875rem 0.4375rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
  border: 1px solid transparent;
}
.rating.good { background: var(--positive-bg); color: var(--positive); border-color: color-mix(in srgb, var(--positive) 30%, transparent); }
.rating.ok { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.rating.poor { background: var(--critical-bg); color: var(--critical); border-color: color-mix(in srgb, var(--critical) 30%, transparent); }

/* Stacked seller bars ------------------------------------------------------ */

.chart .sbar { opacity: 0.95; }
.chart .sbar.s0 { fill: var(--brass); }
.chart .sbar.s1 { fill: var(--info); }
.chart .sbar.s2 { fill: var(--positive); }
.chart .sbar.s3 { fill: var(--warning); }
.chart .sbar.s4 { fill: var(--brass-dim); }
.chart .sbar.sother { fill: var(--line-2); }
.sbar-key.s0 { background: var(--brass); }
.sbar-key.s1 { background: var(--info); }
.sbar-key.s2 { background: var(--positive); }
.sbar-key.s3 { background: var(--warning); }
.sbar-key.s4 { background: var(--brass-dim); }

@media (max-width: 720px) {
  .logorow { flex-direction: column; }
  .ccard { grid-template-columns: 2.5rem 1fr; }
  .ccard-logo { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; }
}

/* ==========================================================================
   Getting started
   ========================================================================== */

.startsteps { margin-top: 3rem; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 900px) { .startsteps { grid-template-columns: repeat(3, 1fr); } }
.startsteps li {
  display: grid; grid-template-columns: 2rem 1fr; gap: 1rem;
  padding: 1.75rem; background: var(--surface);
}
.startn {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: #fff;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
}
.startbody { display: block; }
.startt { display: block; font-size: 1rem; font-weight: 600; color: var(--paper); letter-spacing: -0.01em; }
.startd { display: block; margin-top: 0.4375rem; font-size: 0.9375rem; line-height: 1.6; color: var(--zinc-line); }

.startcta { margin-top: 2.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.startfine { margin-top: 1.125rem; font-size: 0.875rem; color: var(--graphite-600); }

@media (max-width: 720px) {
  .startsteps li { padding: 1.25rem; }
  .startcta .btn { flex: 1; }
}

/* ==========================================================================
   Assignment of receivable
   ========================================================================== */

.agreement {
  margin-top: 0.875rem; max-height: 22rem; overflow: auto;
  padding: 1.125rem 1.25rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.75;
  color: var(--mist); white-space: pre-wrap;
}

.posnote {
  margin-top: 1.25rem; padding: 0.875rem 1.125rem;
  border-radius: var(--radius-control); border-left: 2px solid var(--line-2);
  background: var(--surface-2); font-size: 0.875rem; color: var(--paper);
}
.posnote.ok { border-left-color: var(--positive); background: var(--positive-bg); color: var(--positive); }
.posnote.warn { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
.posnote .quiet { margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.6; color: inherit; opacity: 0.85; }

.assign { padding: 1.75rem; margin-bottom: 1.5rem; }
.assign-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.assign-title {
  margin-top: 0.625rem; font-size: 1.375rem; line-height: 1.2;
  letter-spacing: -0.024em; color: var(--paper); max-width: 30rem;
}
.assign-grid {
  margin-top: 1.5rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-control); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .assign-grid { grid-template-columns: repeat(4, 1fr); } }
.assign-grid > div { background: var(--surface); padding: 0.875rem 1rem; }
.assign-sign {
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}

/* ==========================================================================
   Boot screen
   Rendered by the HTML itself, so something is on screen the moment the page
   arrives rather than after the JavaScript has parsed. React replaces it.
   ========================================================================== */

.boot {
  min-height: 100dvh; display: grid; place-items: center; gap: 1.25rem;
  align-content: center; background: #0A0D14; color: #8B94A6;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8125rem;
}
.boot-mark {
  width: 2.75rem; height: 2.2rem; background: #EEF1F6;
  animation: bootPulse 1.4s ease-in-out infinite;
  -webkit-mask: var(--boot-m) center/contain no-repeat;
          mask: var(--boot-m) center/contain no-repeat;
  --boot-m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 84"><path d="M0 0h104v84H0z" fill="white"/><path d="M44 0h16l-8 34z"/><path d="M15 84h18l-9-32z"/><path d="M71 84h18l-9-32z"/></svg>');
}
@keyframes bootPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; opacity: 0.8; } }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact { padding-top: 3.5rem; padding-bottom: 6rem; }
.contact-head { max-width: 40rem; }
.contact-grid { margin-top: 3rem; display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 20rem; gap: 3.5rem; } }

.choice-tight { grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 640px) { .choice-tight { grid-template-columns: 1fr 1fr; } }
.choice-tight .choice-card { padding: 0.875rem 1rem; }
.choice-tight .choice-card strong { font-size: 0.875rem; }
.choice-tight .quiet { font-size: 0.8125rem; margin-top: 0.1875rem; }

.contact-side { display: grid; gap: 1rem; }
.sidecard {
  padding: 1.375rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.sidecard.quiet-card { background: transparent; }
.sidecard-big {
  margin-top: 0.625rem; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--paper);
}
.sidecard .quiet { margin-top: 0.625rem; font-size: 0.8125rem; line-height: 1.6; }
.sidelist { margin-top: 0.875rem; display: grid; gap: 0.75rem; }
.sidelist li { font-size: 0.8125rem; line-height: 1.6; color: var(--zinc-line); }
.sidelist a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.sidelist a:hover { color: var(--brass); }

.refcard {
  margin-top: 1.75rem; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--brass);
  border-radius: var(--radius-card); max-width: 26rem;
}
.refcard-ref {
  display: block; margin-top: 0.5rem;
  font-size: 1.5rem; letter-spacing: 0.02em; color: var(--brass);
}

.row-bad td { background: color-mix(in srgb, var(--critical) 7%, transparent); }

@media (max-width: 720px) {
  .contact { padding-top: 2.5rem; }
  .sidecard { padding: 1.125rem; }
}

/* ==========================================================================
   Topic pages
   One claim, the facts that back it, then the detail, then the limits.
   ========================================================================== */

.topic-hero {
  padding: 6rem 0 4rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topic-title {
  margin-top: 1.125rem; max-width: 24ch;
  font-size: clamp(2.125rem, 5vw, 3.25rem); line-height: 1.05;
  letter-spacing: -0.035em; color: var(--paper);
}
.topic-lead {
  margin-top: 1.5rem; max-width: 42rem;
  font-size: 1.125rem; line-height: 1.65; color: var(--mist);
}

.topic-facts {
  margin-top: 3rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden; max-width: 46rem;
}
@media (min-width: 720px) { .topic-facts { grid-template-columns: repeat(3, 1fr); } }
.topic-facts > div { background: var(--ink); padding: 1.125rem 1.25rem; }
.topic-facts dt {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite-600);
}
.topic-facts dd { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--paper); }

.topic-body { padding: 4.5rem 0 2rem; }
.topic-block { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.topic-block:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .topic-block { display: grid; grid-template-columns: 22rem 1fr; gap: 3rem; align-items: start; }
}
.topic-block-head { display: flex; gap: 1rem; align-items: baseline; }
.topic-n { font-size: 0.75rem; color: var(--graphite-600); }
.topic-block h2 {
  font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.024em; color: var(--paper);
  max-width: 18ch;
}
.topic-block-body p {
  font-size: 1rem; line-height: 1.7; color: var(--zinc-line); max-width: 42rem;
}
@media (max-width: 899px) { .topic-block-body { margin-top: 1.125rem; } }

.topic-points { margin-top: 1.25rem; display: grid; gap: 0.625rem; }
.topic-points li {
  position: relative; padding-left: 1.375rem;
  font-size: 0.9375rem; line-height: 1.6; color: var(--mist);
}
.topic-points li::before {
  content: ''; position: absolute; left: 0; top: 0.5625rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brass);
}

.topic-not {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
}
.notlist { margin-top: 1.25rem; display: grid; gap: 0.75rem; max-width: 46rem; }
.notlist li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.9375rem; line-height: 1.6; color: var(--zinc-line);
}
.notlist li::before {
  content: '\00d7'; position: absolute; left: 0.1875rem; top: -0.0625rem;
  color: var(--graphite-600); font-size: 1rem;
}

.topic-cta {
  padding: 0 0 6rem; display: flex; gap: 0.75rem; flex-wrap: wrap;
}

@media (max-width: 720px) {
  .topic-hero { padding: 3.5rem 0 2.5rem; }
  .topic-body { padding-top: 2.5rem; }
  .topic-block { padding: 1.75rem 0; }
  .topic-cta .btn { flex: 1; }
}

/* ==========================================================================
   The escrow flow diagram
   ========================================================================== */

.eflow-wrap { padding: 3.5rem 0 1rem; }
.eflow { margin: 0; }
.eflow svg { width: 100%; height: auto; display: block; overflow: visible; }

.eflow .ef-rail { stroke: var(--line-2); stroke-width: 2; }
.eflow .ef-rail.ef-live { stroke: var(--brass); stroke-width: 3; }

.eflow .ef-node rect {
  fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5;
}
.eflow .ef-key rect {
  fill: color-mix(in srgb, var(--brass) 10%, var(--surface));
  stroke: var(--brass); stroke-width: 2;
}
.eflow .ef-you rect {
  fill: color-mix(in srgb, var(--positive) 10%, var(--surface));
  stroke: var(--positive); stroke-width: 2;
}
.eflow .ef-t {
  fill: var(--paper); font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
}
.eflow .ef-s {
  fill: var(--zinc-line); font-family: var(--font-body); font-size: 12.5px;
}
.eflow .ef-key .ef-t { fill: var(--brass); }
.eflow .ef-you .ef-t { fill: var(--positive); }
.eflow .ef-note {
  fill: var(--brass); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}

.eflow-steps {
  margin-top: 2.5rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
}
@media (min-width: 900px) { .eflow-steps { grid-template-columns: repeat(4, 1fr); } }
.eflow-steps li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem;
  padding: 1.25rem; background: var(--surface);
}
.ef-n {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: #fff; font-size: 0.6875rem; font-weight: 600;
}
.eflow-steps strong { font-size: 0.9375rem; color: var(--paper); }
.eflow-steps .quiet { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.55; }

@media (max-width: 720px) {
  .eflow-wrap { padding-top: 2rem; }
  .eflow-steps li { padding: 1rem; }
}

/* ==========================================================================
   Pricing calculator
   ========================================================================== */

.pricer {
  display: grid; gap: 1px; margin-bottom: 1.75rem;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
}
@media (min-width: 900px) { .pricer { grid-template-columns: 1fr 1fr; } }
.pricer-in, .pricer-out { background: var(--surface); padding: 1.5rem; }
.pricer-out { background: var(--surface-2); }
.pricer-empty { display: grid; place-items: center; }

.pricer-quote { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.pricer-big {
  display: block; margin-top: 0.375rem;
  font-size: 2rem; letter-spacing: -0.03em; color: var(--brass);
}

.pricer-rows { margin-top: 1.25rem; display: grid; gap: 0.625rem; }
.pricer-rows > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.pricer-rows dt { font-size: 0.8125rem; color: var(--zinc-line); }
.pricer-rows dd { font-size: 0.875rem; color: var(--paper); font-variant-numeric: tabular-nums; }
.pricer-total {
  margin-top: 0.375rem; padding-top: 0.75rem; border-top: 1px solid var(--line-2);
}
.pricer-total dt { color: var(--paper); font-weight: 600; }
.pricer-total dd { font-size: 1.0625rem; font-weight: 600; color: var(--positive); }

.pricer-note {
  margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.6; color: var(--graphite-600);
}

/* ==========================================================================
   Quoting
   The screen a seller lives in. Dense, fast to type into, and the position
   always visible alongside rather than at the bottom.
   ========================================================================== */

.qb-grid { display: grid; gap: 2rem; align-items: start; min-width: 0; }
.qb-grid > * { min-width: 0; }

/* Two columns only where both fit: the lines need about 46rem to stay
   comfortable and the running position takes 18. */
/* 76rem, not 64. Splitting at 64 left the lines with 51rem — under the 52 they
   need for all five fields — so a wider screen made the working column worse.
   76 leaves 56rem after the panel and the gap, which clears the threshold with
   room rather than landing exactly on it. */
@container appmain (min-width: 76rem) {
  .qb-grid { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; }
}
@container appmain (min-width: 80rem) {
  .qb-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
}

@supports not (container-type: inline-size) {
  @media (min-width: 1400px) { .qb-grid { grid-template-columns: minmax(0, 1fr) 19rem; } }
}

.vtag {
  margin-left: 0.4375rem; padding: 0.0625rem 0.3125rem;
  border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 0.625rem; color: var(--graphite-600);
}
.warn-text { color: var(--warning); }

/* Lines ------------------------------------------------------------------- */

.qlines { display: grid; gap: 0.75rem; }
.qline {
  padding: 0.875rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.qline:focus-within { border-color: var(--brass); }

.qline-top { display: flex; align-items: center; gap: 0.75rem; }
.qline-n { font-size: 0.6875rem; color: var(--graphite-600); flex: none; }
.qline-desc {
  flex: 1; background: transparent; border: 0; padding: 0.25rem 0;
  font-size: 0.9375rem; font-weight: 500; color: var(--paper);
}
.qline-desc:focus { outline: none; }
.qline-tools { display: flex; gap: 0.75rem; flex: none; }
.linkbtn.danger { color: var(--critical); }

.qline-spec {
  margin-top: 0.625rem; display: grid; gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container appmain (min-width: 46rem) {
  .qline-spec { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.qline-spec input {
  padding: 0.375rem 0.5rem; font-size: 0.75rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--mist);
}

.qline-money {
  margin-top: 0.5rem; display: grid; gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container appmain (min-width: 34rem) {
  .qline-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container appmain (min-width: 52rem) {
  .qline-money { grid-template-columns: 4rem 5rem minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr); }
}
.qline-money label { display: block; }
.qline-money span {
  display: block; margin-bottom: 0.1875rem;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite-600);
}
.qline-money input, .qline-money select {
  width: 100%; padding: 0.375rem 0.5rem; font-size: 0.8125rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--paper);
}

.qline-out {
  margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px solid var(--line);
  display: flex; gap: 1rem; align-items: baseline; justify-content: flex-end;
  font-size: 0.8125rem;
}
.qline-pct { font-size: 0.75rem; }
.qline-pct.ok { color: var(--positive); }
.qline-pct.warn { color: var(--warning); }
.qline-pct.bad { color: var(--critical); }

/* The running position ---------------------------------------------------- */

.qb-side { display: grid; gap: 1rem; position: sticky; top: 5rem; }
@media (max-width: 1099px) { .qb-side { position: static; } }
.qbcard {
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.qb-big {
  margin-top: 0.5rem; font-size: 1.75rem;
  letter-spacing: -0.03em; color: var(--brass);
}
.qbcard .quiet { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.5; }

.qb-rows { display: grid; gap: 0.5rem; }
.qb-rows > div { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.qb-rows dt { font-size: 0.75rem; color: var(--zinc-line); }
.qb-rows dd { font-size: 0.8125rem; color: var(--paper); font-variant-numeric: tabular-nums; }
.qb-rows dd.ok { color: var(--positive); }
.qb-rows dd.warn { color: var(--warning); }
.qb-rows dd.bad { color: var(--critical); }
.qb-total {
  margin-top: 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--line-2);
}
.qb-total dt { color: var(--paper); font-weight: 600; }
.qb-total dd { font-size: 1rem; font-weight: 600; color: var(--positive); }

.qb-payees { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.qb-payees li {
  display: flex; justify-content: space-between; gap: 0.75rem;
  font-size: 0.8125rem; color: var(--mist);
}

.qb-actions { display: grid; gap: 0.625rem; }
.qb-convert {
  margin-top: 0.375rem; padding-top: 0.875rem; border-top: 1px solid var(--line);
}
.qb-convert .quiet { margin-top: 0.625rem; }

@media (max-width: 720px) {
  .qline { padding: 0.75rem; }
  .qbcard { padding: 1rem; }
}

.qline-cat { margin-top: 0.5rem; }
.qline-cat select {
  width: 100%; padding: 0.375rem 0.5rem; font-size: 0.75rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--mist);
}
.qline-cat select:focus { border-color: var(--brass); outline: none; }

/* The per-line escrow checkbox ------------------------------------------- */

.qline-out {
  justify-content: space-between;
}
.feebox {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.6875rem; color: var(--zinc-line); cursor: pointer;
  user-select: none;
}
.feebox input { width: 0.875rem; height: 0.875rem; accent-color: var(--brass); }
.feebox:hover span { color: var(--paper); }
.qline-figs { display: inline-flex; align-items: baseline; gap: 0.75rem; }
.qline-figs .strong { color: var(--paper); font-weight: 600; }

.h2-dim { color: var(--graphite-600); }
.sec-lead {
  margin-top: 1.25rem; max-width: 38rem;
  font-size: 1.0625rem; line-height: 1.65; color: var(--zinc-line);
}

.h2-dim { color: var(--graphite-600); }
.sec-lead {
  margin-top: 1.25rem; max-width: 38rem;
  font-size: 1.0625rem; line-height: 1.65; color: var(--zinc-line);
}

/* Category tabs, and the per-category line ------------------------------- */

.cattabs {
  display: flex; gap: 0.25rem; overflow-x: auto; padding-bottom: 0.5rem;
  margin-bottom: 1rem; border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.cattab {
  flex: none; padding: 0.4375rem 0.875rem;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  font-size: 0.8125rem; color: var(--zinc-line); white-space: nowrap;
  cursor: pointer; transition: color .12s, background .12s;
}
.cattab:hover { color: var(--paper); background: var(--surface-2); }
.cattab.on {
  color: var(--paper); background: var(--surface-2);
  border-color: var(--brass);
}

.qline-row {
  margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.375rem;
}
.qf { flex: 1 1 5.5rem; min-width: 4.25rem; }
.qf-wide { flex: 2 1 8.5rem; min-width: 7rem; }
.qf span {
  display: block; margin-bottom: 0.1875rem;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite-600);
}
.qf input, .qf select {
  width: 100%; padding: 0.375rem 0.5rem; font-size: 0.8125rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--paper);
}
.qf select:focus, .qf input:focus { border-color: var(--brass); outline: none; }

.qline-hint {
  margin-top: 0.5rem; font-size: 0.75rem; color: var(--zinc-line);
}
.qline-hint strong { color: var(--brass); }
.qline-hint .linkbtn { margin-left: 0.25rem; }

@media (max-width: 720px) {
  .qf { flex: 1 1 45%; }
  .qf-wide { flex: 1 1 100%; }
}

/* Cut list --------------------------------------------------------------- */

.qline-cuts {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--line);
}
.cuts { margin-top: 0.5rem; }
.cuts-head, .cuts-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) 1.5rem;
  gap: 0.375rem; align-items: center;
}
.cuts-head {
  margin-bottom: 0.3125rem;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite-600);
}
.cuts-head .num, .cuts-row .num { text-align: right; }
.cuts-row { margin-bottom: 0.25rem; }
.cuts-row input {
  width: 100%; padding: 0.3125rem 0.4375rem; font-size: 0.8125rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--paper); text-align: right;
  font-variant-numeric: tabular-nums;
}
.cuts-row input:focus { border-color: var(--brass); outline: none; }
.cuts-row .num { font-size: 0.8125rem; color: var(--mist); }

.cuts-foot {
  margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.cuts-total { display: inline-flex; gap: 0.75rem; align-items: baseline; }
.cuts-total .strong { color: var(--brass); font-size: 0.9375rem; }

.epeers { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

.errbox {
  margin-top: 0.875rem; padding: 1rem;
  background: var(--surface-2); border: 1px solid var(--critical);
  border-radius: var(--radius-control);
}
.errbox-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}

.errtext {
  width: 100%; margin-top: 0.75rem; padding: 0.75rem;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.6;
  color: var(--mist); resize: vertical;
}

/* ==========================================================================
   Fees and tax, side by side
   ========================================================================== */

.ftpanel { display: grid; gap: 1.5rem; min-width: 0; }
.ftpanel > * { min-width: 0; }
@container appmain (min-width: 58rem) {
  .ftpanel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
}

.ftcol-head { display: flex; justify-content: space-between; align-items: baseline; }

.ftcatalog {
  margin-top: 0.75rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-control); overflow: hidden;
  max-height: 16rem; overflow-y: auto;
}
@container appmain (min-width: 38rem) {
  .ftcatalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ftcat {
  display: block; text-align: left; padding: 0.625rem 0.75rem;
  background: var(--surface); border: 0; cursor: pointer;
}
.ftcat:hover { background: var(--surface-2); }
.ftcat strong { display: block; font-size: 0.8125rem; color: var(--paper); }
.ftcat .quiet { display: block; margin-top: 0.125rem; font-size: 0.6875rem; }

.ftlist { margin-top: 0.75rem; display: grid; gap: 0.375rem; }
.ftrow {
  display: grid; gap: 0.375rem; align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container appmain (min-width: 40rem) {
  .ftrow { grid-template-columns: minmax(0,1.6fr) minmax(0,1.1fr) 4rem minmax(0,1fr); }
}
@container appmain (min-width: 62rem) {
  .ftrow {
    grid-template-columns:
      minmax(0,1.6fr) minmax(0,1.1fr) 4rem minmax(0,1fr) 2.75rem 4.5rem 1.25rem;
  }
}
.ftrow input, .ftrow select {
  width: 100%; padding: 0.375rem 0.5rem; font-size: 0.8125rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; color: var(--paper);
}
.ftrow input:focus, .ftrow select:focus { border-color: var(--brass); outline: none; }
.ftnum { text-align: right; font-variant-numeric: tabular-nums; }
.fttax {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.625rem; color: var(--graphite-600); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fttax input { width: 0.8125rem; height: 0.8125rem; accent-color: var(--brass); }
.ftamt { text-align: right; font-size: 0.8125rem; color: var(--paper); }

.ftsum {
  margin-top: 0.5rem; padding-top: 0.625rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.8125rem; color: var(--zinc-line);
}
.ftsum .strong { color: var(--brass); font-size: 0.9375rem; }

.fttaxsum {
  margin-top: 1.25rem; padding-top: 0.875rem; border-top: 1px solid var(--line);
  display: grid; gap: 0.5rem;
}
.fttaxsum > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.fttaxsum dt { font-size: 0.75rem; color: var(--zinc-line); }
.fttaxsum dd { font-size: 0.8125rem; color: var(--paper); font-variant-numeric: tabular-nums; }
.fttaxtotal { padding-top: 0.5rem; border-top: 1px solid var(--line-2); }
.fttaxtotal dt { color: var(--paper); font-weight: 600; }
.fttaxtotal dd { color: var(--brass); font-weight: 600; }

/* Charges that carry a cost, and site requirements --------------------------- */

.ftcost { opacity: 0.85; }
.ftcost:focus { opacity: 1; }
.ftsub { font-size: 0.75rem; color: var(--graphite-600); border-top: 0; padding-top: 0; }
.ftmargin { margin-left: 0.5rem; font-size: 0.6875rem; }
.ftmargin.ok { color: var(--positive); }
.ftmargin.bad { color: var(--critical); }

.acclist { margin-top: 0.625rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.accbox {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.4375rem 0.75rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; font-size: 0.8125rem; color: var(--zinc-line); cursor: pointer;
}
.accbox:hover { border-color: var(--line-2); color: var(--paper); }
.accbox input { width: 0.875rem; height: 0.875rem; accent-color: var(--brass); }
.accbox:has(input:checked) { border-color: var(--brass); color: var(--paper); }