/* =========================================================================
   WSPR Curate — design tokens (on-brand with wspr.xyz)
   Palette and type pulled directly from wspr.xyz: near-black sections,
   a pale blush-pink section, and a single coral/salmon accent, with a
   bold condensed all-caps display face and a soft geometric body face —
   matching their actual look rather than a generic template.
   The one deliberately near-black "sealed" treatment on THIS site is
   reserved for the Event/Result Key boxes, which now doubles as an echo
   of wspr.xyz's own black section rhythm rather than an invented contrast.
   ========================================================================= */
:root {
  --black: #0d0d0d;
  --black-raised: #171514;

  --blush: #f7ded9;
  --blush-raised: #fdf5f2;
  --blush-sunken: #f0d2cb;

  --line: #e6c9c0;
  --line-on-black: #332d2a;

  --ink: #201c1a;
  --ink-dim: #6b5f58;
  --ink-faint: #a3948b;

  --paper-text: #f5ede8;
  --paper-text-dim: #cabdb5;

  --coral: #e2967f;
  --coral-deep: #c97a62;
  --coral-tint: rgba(226, 150, 127, 0.14);

  --signal: #b3503c;
  --signal-bg: rgba(179, 80, 60, 0.1);
  --ok: #4c7a5c;
  --ok-bg: rgba(76, 122, 92, 0.12);

  --font-display: "Anton", "Archivo Black", sans-serif;
  --font-body: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 4px;
  --max-width: 880px;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 26px rgba(60, 30, 20, 0.08);
  --shadow-seal: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 32px rgba(0, 0, 0, 0.4);
}

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

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Short pages (the screening confirmation, error states) used to leave
     the footer floating partway down with bare background beneath it,
     which reads as a broken page rather than a deliberate end. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > footer.site-footer { flex-shrink: 0; }

a { color: var(--coral-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

p { color: var(--ink-dim); }
.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------
   Shell / black header bar (matches wspr.xyz's nav treatment)
   --------------------------------------------------------------------- */
.shell { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.nav {
  background: var(--black);
  padding: 22px 0;
  border-bottom: 3px solid var(--coral);
}

/* nowrap above the phone breakpoint. The signed-in name is the only
   flexible piece (see below), so a long name or a long button label
   shortens the name instead of dropping the whole action group onto a
   second row -- which is what happened to the owner, whose label and
   button are both longer than a curator's. The two media queries at
   680px put wrapping back, where the collapsible menu needs its own row. */
.nav-inner { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 20px; flex-wrap: nowrap; }

/* Wordmark lockup ----------------------------------------------------
   WSPR │ Curator
        │ Suite

   The name and the product, joined by a rule. WSPR keeps the coral and
   the display face; "Curator Suite" sits quieter beside it in the body
   face, stacked so the lockup stays compact enough for a nav bar.

   Sized against the mark on wspr.xyz — roughly 1.4x the cap height of
   what this was, with letter-spacing to close the width gap that Anton,
   being a condensed face, otherwise leaves. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.wordmark:hover { text-decoration: none; }

.wordmark-name {
  font-family: var(--font-display);
  /* The bar this sits in stops growing at --max-width (880px), so the
     wordmark has to stop growing too. Letting it keep scaling on vw meant
     that on a wide monitor the lockup got bigger while its container
     didn't, and the nav wrapped onto a second row once a signed-in
     curator had a name and two buttons beside it. 1.85rem is where it
     lands at the width the shell tops out. */
  font-size: clamp(1.75rem, 2.4vw, 1.85rem);
  letter-spacing: 0.14em;
  /* Trailing letter-spacing leaves a gap after the final R; pulling it
     back keeps the rule optically where it belongs. */
  margin-right: -0.14em;
  color: var(--coral);
  text-transform: uppercase;
  line-height: 1;
}
.wordmark:hover .wordmark-name { color: var(--coral-deep); }

.wordmark-rule {
  width: 1px;
  /* No height of its own: stretch to whatever the tallest thing in the
     lockup is (the WSPR name). Giving this an em height made it measure
     against .wordmark's font-size rather than the type next to it, which
     on a phone left a divider taller than both halves and pushed the
     whole header open. */
  align-self: stretch;
  background: var(--line-on-black);
}

.wordmark-suite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-text);
  line-height: 1.15;
}

/* On a light background the lockup has to invert or it disappears. */
.band:not(.band-dark) .wordmark-suite { color: var(--ink); }
.band:not(.band-dark) .wordmark-rule { background: var(--line); }

@media (max-width: 560px) {
  /* Keep the lockup, shrink it — the nav still has to hold a sign-in
     button and a menu toggle on one row. */
  .wordmark { gap: 9px; }
  .wordmark-name { font-size: 1.55rem; letter-spacing: 0.1em; margin-right: -0.1em; }
  .wordmark-suite { font-size: 0.56rem; letter-spacing: 0.12em; }
}

.nav-links { display: flex; align-items: center; gap: 22px; font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.01em; flex-wrap: wrap; }

/* Mobile: collapse the nav into a hamburger toggle instead of letting
   everything wrap into two or three tall rows. Hidden entirely above
   the breakpoint, where the normal inline nav-links row is used. */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--line-on-black);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--paper-text); }

@media (max-width: 680px) {
  .nav-hamburger { display: flex; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 18px;
    margin-top: 14px;
    border-top: 1px solid var(--line-on-black);
  }
  .nav-links.nav-links-open { display: flex; }
  .nav-signed-in { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.nav-links a { color: var(--paper-text-dim); }
.nav-links a.current { color: var(--coral); }
.nav-links a:hover { color: var(--paper-text); text-decoration: none; }

main { padding: 56px 0 96px; }

/* The landing page is nothing but full-bleed bands, and every band brings
   its own vertical padding. main's padding on top of that showed up as a
   strip of blush between the header and the hero (and again above the
   footer) that read as a rendering fault rather than spacing. */
main.bands { padding: 0; }

/* Same rhythm argument as .section: what breathes on a desktop is dead
   space on a phone. */
@media (max-width: 680px) {
  main { padding: 32px 0 56px; }
}

footer.site-footer {
  background: var(--black);
  padding: 28px 0 32px;
  color: var(--paper-text-dim);
  font-size: 0.85rem;
}
footer.site-footer a { color: var(--coral); }

/* ---------------------------------------------------------------------
   Hero (landing page)
   --------------------------------------------------------------------- */
/* Top padding is the hero's own now that main no longer supplies any on
   the landing page. */
.hero { padding: 56px 0 72px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* The key exists to fill the second column. Once the grid stacks there
     is no second column, so all it does is put 250px between the sign-in
     button and the next thing worth reading. Its caption restates the
     lede directly above it, and the whole block is already aria-hidden,
     so nothing is lost by dropping it here. */
  .hero-visual { display: none; }
}

.hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.3rem);
  line-height: 1.1;
  margin: 18px 0 22px;
}
.hero h1 em { color: var(--coral-deep); font-style: normal; }

.hero p.lede { max-width: 54ch; font-size: 1.05rem; }

.hero-visual svg { width: 100%; height: auto; display: block; }
.hero-visual-caption { font-size: 0.85rem; color: var(--ink-faint); text-align: center; margin-top: 16px; max-width: 26ch; margin-left: auto; margin-right: auto; }

/* The one deliberately dark, "sealed" element on the page. */
.token-demo {
  margin-top: 40px;
  border: 1px solid var(--line-on-black);
  background: var(--black);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-seal);
  max-width: 560px;
}
.token-demo .label { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; color: var(--paper-text-dim); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.token-demo .line { font-family: var(--font-mono); font-size: 0.95rem; color: var(--paper-text); min-height: 1.4em; word-break: break-all; }
.token-demo .line .sealed { color: var(--coral); }

/* ---------------------------------------------------------------------
   Owner sign-in gate — the same "sealed" dark treatment as the key
   boxes and the token demo, since this genuinely is the one locked door
   in the whole product.
   --------------------------------------------------------------------- */
.seal-gate {
  display: flex;
  justify-content: center;
  /* 10vh read as generous on a laptop and as a wall of empty pink on a
     phone, where it stacked on main's own padding and pushed the one
     thing you came here to do most of a screen down. */
  padding: clamp(20px, 7vh, 72px) 0;
  min-height: 62vh;
  align-items: center;
}
@media (max-width: 680px) {
  /* On a phone the card is taller than the viewport anyway, so vertical
     centering has nothing to centre and min-height only adds slack. */
  .seal-gate { padding: 16px 0 36px; min-height: 0; }
  .seal-gate-card { padding: 32px 24px; }
}
.seal-gate-card {
  width: 100%;
  max-width: 440px;
  background: var(--black);
  border: 1px solid var(--line-on-black);
  border-radius: var(--radius);
  padding: 44px 40px;
  box-shadow: var(--shadow-seal);
  text-align: center;
}
.seal-gate-card.wide { max-width: 580px; }
.seal-gate-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--coral);
  letter-spacing: 0.14em;
  /* Tight to the eyebrow beneath it, so "WSPR" and "Curator Suite"
     read as one name rather than the eyebrow belonging to "Sign in". */
  margin-bottom: 6px;
}
/* ...and the heading gets its own air below the name. */
.seal-gate-card .eyebrow { margin-bottom: 22px; }
.seal-gate-card h1 {
  font-size: 1.7rem;
  margin: 6px 0 10px;
}
.seal-gate-card p {
  font-size: 0.92rem;
  margin-bottom: 26px;
}
.seal-gate-card .field { text-align: center; margin-bottom: 22px; }
.seal-gate-card input {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
}
.seal-gate-card input:focus { border-color: var(--coral); }

/* Password fields: masked, with a reveal control sitting inside the box. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 96px; }
.pw-show {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-deep);
}
.pw-show:hover { color: var(--coral); }
.seal-gate-card .field { text-align: left; }

/* --- Invitation page ---------------------------------------------------- */
/* The gate card is near-black, so anything inheriting the page's ink colour
   disappears on it. Sign-in set these inline; the invitation page has more
   of them, so they belong here. */
.seal-gate-card h1 { color: var(--paper-text); }
.seal-gate-card p { color: var(--paper-text-dim); }
.seal-gate-card label { color: var(--paper-text-dim); }
.seal-gate-card .hint { color: var(--paper-text-dim); opacity: 0.8; }
.seal-gate-card .wordmark-suite { text-align: left; }
.invite-lead { color: var(--paper-text); font-weight: 600; font-size: 1.04rem; margin-bottom: 22px; }
.invite-box { color: var(--paper-text-dim); border-top: 1px solid var(--line-on-black);
  border-bottom: 1px solid var(--line-on-black); padding: 18px 0; margin: 22px 0; }
.invite-box strong { color: var(--paper-text); display: block; margin-bottom: 4px; }
.invite-cta { display: inline-block; min-width: 230px; }
.invite-cred { display: grid; grid-template-columns: auto 1fr; gap: 14px 20px; text-align: left;
  max-width: 360px; margin: 22px auto; padding: 20px; border: 1px solid var(--line-on-black);
  border-radius: var(--radius); background: rgba(226, 150, 127, 0.06); }
.invite-cred dt { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral); align-self: center; font-weight: 600; }
.invite-cred dd { margin: 0; font-family: var(--font-mono); font-size: 1.05rem;
  color: var(--paper-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cred-show { background: none; border: 0; cursor: pointer; padding: 0; font-family: var(--font-body);
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-deep);
  font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.seal-gate-card #loginAlert .alert { text-align: left; }

.gate-steps { text-align: left; margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.gate-step { display: flex; gap: 14px; align-items: baseline; }
.gate-step-num { font-family: var(--font-display); color: var(--coral); font-size: 1.1rem; flex: 0 0 auto; min-width: 1.4em; }
.gate-step-text { font-size: 0.92rem; color: var(--paper-text-dim); }
.gate-step-text strong { color: var(--paper-text); font-weight: 600; }

.gate-manual { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-on-black); text-align: left; }
.gate-manual-label { font-size: 0.85rem; color: var(--paper-text-dim); margin-bottom: 10px; }
.gate-manual input { background: #ffffff; border-color: #ffffff; color: var(--ink); }
.gate-manual input:focus { border-color: var(--coral); }
.gate-manual-alert { font-size: 0.82rem; color: var(--signal); margin-top: 8px; min-height: 1.2em; }

/* ---------------------------------------------------------------------
   Steps band
   --------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step-card { background: var(--blush-raised); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; transition: background 0.15s ease; }
.step-card:hover { background: var(--coral-tint); }
.step-numeral { font-family: var(--font-display); color: var(--coral-deep); font-size: 1.6rem; }
.step-card h3 { font-size: 1.05rem; margin-bottom: 2px; }
.step-card p { font-size: 0.92rem; margin: 0; }
.step-card .enter { margin-top: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--coral-deep); }

.principles { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 720px) { .principles { grid-template-columns: 1fr; } }
.principle dt { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; text-transform: none; color: var(--coral-deep); margin-bottom: 6px; }
.principle dd { margin: 0; font-size: 0.92rem; color: var(--ink-dim); }

/* ---------------------------------------------------------------------
   Page headers
   --------------------------------------------------------------------- */
.page-head { margin-bottom: 40px; max-width: 62ch; }
.page-head h1 {
  font-size: 2rem;
  margin-top: 10px;
  display: inline-block;
  border-bottom: 4px solid var(--coral);
  padding-bottom: 8px;
}
.page-head p { font-size: 1rem; margin-top: 16px; }

/* ---------------------------------------------------------------------
   Panels & cards
   --------------------------------------------------------------------- */
.panel {
  background: var(--blush-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-panel);
}
.panel h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; letter-spacing: 0; }
.panel h2 .numeral { color: var(--coral-deep); font-family: var(--font-display); }
.hint { font-size: 0.85rem; color: var(--ink-faint); margin-top: 4px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
label { display: block; font-size: 0.9rem; color: var(--ink); margin-bottom: 6px; font-weight: 500; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"], textarea, select {
  width: 100%;
  background: var(--blush-sunken);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 72px; }
input[type="text"].mono-input, input[type="password"].mono-input, textarea.mono-input { font-family: var(--font-mono); font-size: 0.88rem; }
input:focus, textarea:focus, select:focus { border-color: var(--coral); }

.field { margin-bottom: 20px; }
.char-count { font-size: 0.75rem; color: var(--ink-faint); text-align: right; margin-top: 4px; font-family: var(--font-mono); }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 200px; }

fieldset { border: none; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: 12px; font-size: 0.95rem; color: var(--ink); font-weight: 500; }

.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-option {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  background: var(--blush-sunken); transition: border-color 0.12s ease, background 0.12s ease;
}
.radio-option:hover { border-color: var(--coral); }
.radio-option input { margin-top: 3px; accent-color: var(--coral-deep); }
.radio-option.selected { border-color: var(--coral); background: var(--coral-tint); }
.radio-option span { font-size: 0.92rem; }

/* Dimension rows: label + 1-5 box picker */
.dim-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.dim-row:last-child { border-bottom: none; }
@media (max-width: 640px) { .dim-row { grid-template-columns: 1fr; gap: 10px; } }
.dim-label { font-size: 0.92rem; font-weight: 500; }
.dim-readout { font-family: var(--font-body); font-size: 0.88rem; color: var(--coral-deep); margin-top: 6px; min-height: 1.2em; line-height: 1.4; }

.pick-boxes { display: flex; gap: 8px; }
.pick-box {
  flex: 1;
  aspect-ratio: 1;
  max-width: 52px;
  border: 1px solid var(--line);
  background: var(--blush-sunken);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.pick-box:hover { border-color: var(--coral); }
.pick-box.selected { border-color: var(--coral); background: var(--coral); color: var(--black); font-weight: 600; }

.weight-select { width: auto; min-width: 160px; }

/* Custom question builder */
.cq-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; background: var(--blush-sunken); position: relative; }
.cq-block .cq-remove { position: absolute; top: 14px; right: 14px; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--signal); background: none; border: none; cursor: pointer; }
.cq-conditional { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.option-row { display: flex; gap: 8px; margin-bottom: 8px; }
.option-row input { flex: 1; }
.option-row button { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em;
  padding: 12px 22px; border-radius: var(--radius);
  border: 1px solid var(--coral); background: transparent; color: var(--coral-deep);
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--coral); color: var(--black); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--coral); color: var(--black); font-weight: 600; }
.btn-primary:hover { background: var(--coral-deep); color: var(--black); }
.btn-ghost { border-color: var(--line); color: var(--ink-dim); }
.btn-ghost:hover { background: var(--blush-sunken); color: var(--ink); }
/* The header bar is always near-black, so ANY ghost button inside it needs
   the light treatment -- not just the ones in the collapsible link list.
   Scoping this to .nav-links left the persistent "Sign out" button with
   dark ink on a dark bar, i.e. invisible. */
.nav .btn-ghost { border-color: var(--line-on-black); color: var(--paper-text-dim); }
.nav .btn-ghost:hover { background: var(--black-raised); color: var(--paper-text); }
.nav-signed-in { display: flex; align-items: center; gap: 14px; }
.nav-signed-in-name { font-family: var(--font-body); font-size: 0.85rem; color: var(--paper-text-dim); }
.nav-signed-in-name strong { color: var(--paper-text); font-weight: 600; }
.btn-small { padding: 7px 12px; font-size: 0.75rem; }

/* ---------------------------------------------------------------------
   Key display — deliberately "sealed" dark, echoing wspr.xyz's black bands
   --------------------------------------------------------------------- */
.key-output {
  background: var(--black); border: 1px solid var(--line-on-black); border-radius: var(--radius);
  padding: 16px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--paper-text);
  word-break: break-all; margin-bottom: 10px;
}
.key-id { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: 0.08em; color: var(--coral-deep); }
.key-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.copy-feedback { font-size: 0.8rem; color: var(--ok); font-family: var(--font-body); font-weight: 500; opacity: 0; transition: opacity 0.15s ease; }
.copy-feedback.show { opacity: 1; }

/* ---------------------------------------------------------------------
   Alerts / status
   --------------------------------------------------------------------- */
.alert { border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; margin-bottom: 20px; border: 1px solid transparent; }
.alert-error { background: var(--signal-bg); border-color: var(--signal); color: var(--signal); }
.alert-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.alert-info { background: var(--coral-tint); border-color: var(--coral); color: var(--coral-deep); }

.status-badge {
  display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em;
  text-transform: none; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor;
}
.status-compatible, .status-met { color: var(--ok); }
.status-mismatch { color: var(--ink-faint); }
.status-failed { color: var(--signal); }
.status-info { color: var(--coral-deep); }

.dashboard-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.dashboard-tab {
  background: none; border: none; padding: 10px 18px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dashboard-tab:hover { color: var(--ink); }
.dashboard-tab.active { color: var(--coral-deep); border-bottom-color: var(--coral); }

/* ---------------------------------------------------------------------
   Report (decoder)
   --------------------------------------------------------------------- */
.report-hero { border: 1px solid var(--line); background: var(--blush-raised); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-panel); }
.report-hero.fit-strong { border-color: var(--ok); }
.report-hero.fit-conditional { border-color: var(--coral); }
.report-hero.fit-low { border-color: var(--line); }
.report-hero.fit-failed { border-color: var(--signal); }

.overall-number { font-family: var(--font-display); font-size: 2.8rem; color: var(--ink); }
.overall-label { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; margin-top: 6px; color: var(--ink-dim); }

.vector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; margin-top: 16px; }
.vector-item { font-size: 0.85rem; }
.vector-item .k { color: var(--ink-faint); }
.vector-item .v { font-family: var(--font-mono); color: var(--coral-deep); margin-left: 6px; }

.archetype-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .archetype-pair { grid-template-columns: 1fr; } }

/* --- Archetype comparison ------------------------------------------------
   One row per dimension instead of two stacked columns of numbers: the
   curator sees where the prospect sits against what they asked for without
   doing the subtraction, and the card stays balanced either way. */
.archetype-side h3 { margin: 6px 0 0; }
.archetype-desc { font-size: 0.88rem; color: var(--ink-dim); margin: 10px 0 0; }
.overall-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.overall-row .overall-label { margin-top: 0; }
.level-meter { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 18px; }
.level-meter i { flex: 1; height: 20px; border-radius: 2px; background: var(--blush-sunken); }
.level-meter i.on { height: 34px; background: var(--coral); }
.level-meter i.edge { height: 27px; background: var(--coral); opacity: 0.45; }
@media (max-width: 480px) { .level-meter { gap: 2px; height: 28px; } .level-meter i { height: 16px; } .level-meter i.on { height: 28px; } .level-meter i.edge { height: 22px; } }
.room-read { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.room-read p { margin: 8px 0 0; font-size: 0.92rem; color: var(--ink-dim); max-width: 70ch; }
.score-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }

.cmp-table { margin-top: 20px; border-top: 1px solid var(--line); }
.cmp-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(90px, 2fr) auto 46px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.cmp-row.cmp-head { border-bottom: 1px solid var(--line); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 0; }
.cmp-head .cmp-bar-head { letter-spacing: 0.04em; text-transform: none; font-size: 0.66rem; }
.cmp-label { color: var(--ink-dim); }
.cmp-bar { position: relative; height: 8px; border-radius: 4px; background: var(--blush-sunken); }
.cmp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--coral); }
.cmp-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.cmp-nums { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }
.cmp-nums b { color: var(--ink); font-weight: 600; }
.cmp-gap { font-family: var(--font-mono); font-size: 0.8rem; text-align: right; color: var(--ink-faint); }
.cmp-gap.gap-close { color: var(--ok); }
.cmp-gap.gap-mid { color: var(--coral-deep); }
.cmp-gap.gap-wide { color: var(--signal); font-weight: 600; }


@media (max-width: 640px) {
  .cmp-row { grid-template-columns: 1fr auto 40px; grid-template-areas: "label nums gap" "bar bar bar"; gap: 6px 12px; }
  .cmp-label { grid-area: label; }
  .cmp-nums { grid-area: nums; }
  .cmp-gap { grid-area: gap; }
  .cmp-bar { grid-area: bar; }
  .cmp-row.cmp-head .cmp-bar-head { display: none; }
  .score-split { grid-template-columns: 1fr; }
}

.cq-report-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; background: var(--blush-raised); }
.cq-report-item .q-text { font-size: 0.95rem; margin-bottom: 8px; }
.cq-report-item .meta { font-size: 0.82rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.cq-report-item .answer { font-family: var(--font-body); font-weight: 600; color: var(--ink); }

.linkback { margin-top: 32px; font-size: 0.88rem; }
.skeleton { color: var(--ink-faint); font-family: var(--font-body); font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   v2 — event dashboard, applicant tables, admin controls

   Same restraint as the rest of the site: one accent, flat surfaces, no
   new colour vocabulary. Fit states reuse the ok/coral/signal roles the
   report already uses, so "strong" means the same thing everywhere a
   curator sees it.
   --------------------------------------------------------------------- */

/* Event cards ------------------------------------------------------- */
.event-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  border: 1px solid var(--line);
  background: var(--blush-raised);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.event-card:hover,
.event-card:focus-visible { border-color: var(--coral); transform: translateY(-1px); }
.event-card-name { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; color: var(--ink); }
.event-card-side { text-align: right; }
.event-card-count { font-family: var(--font-display); font-size: 1.8rem; color: var(--coral-deep); line-height: 1; }
.event-card-fits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

@media (max-width: 560px) {
  .event-card { grid-template-columns: 1fr; }
  .event-card-side { text-align: left; display: flex; align-items: baseline; gap: 8px; }
}

/* Fit pills --------------------------------------------------------- */
.fit-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.fit-pill.fit-strong { color: var(--ok); }
.fit-pill.fit-conditional { color: var(--coral-deep); }
.fit-pill.fit-low { color: var(--ink-faint); }
.fit-pill.fit-failed { color: var(--signal); }

/* Data tables ------------------------------------------------------- */
/* Wide tables scroll inside their own container rather than pushing the
   page sideways on a phone. */
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono); }
.data-table th.num { font-family: var(--font-body); }
.data-table tbody tr[data-open-applicant] { cursor: pointer; }
.data-table tbody tr[data-open-applicant]:hover { background: var(--blush-sunken); }
.data-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* Activity log ------------------------------------------------------ */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.activity-item:last-child { border-bottom: none; }
.activity-when { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; }
.activity-item.actor-system .activity-what { color: var(--ink-faint); font-style: italic; }

@media (max-width: 560px) {
  .activity-item { flex-direction: column; gap: 3px; }
}

/* Retention status --------------------------------------------------- */
/* Deliberately prominent. A deletion promise is only worth as much as
   the job behind it, and a sweep that quietly stopped running looks
   exactly like one with nothing to do. */
.retention-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  background: var(--blush-raised);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.86rem;
  color: var(--ink-dim);
}
.retention-status.stale { border-left-color: var(--signal); color: var(--signal); }
.retention-status .k {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Inline transfer control ------------------------------------------- */
.transfer-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.transfer-row select { max-width: 240px; }

/* Diagnostics output ------------------------------------------------ */
.alert-detail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid currentColor;
  opacity: 0.8;
  word-break: break-word;
}
.diag-output {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--black);
  color: var(--paper-text);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* Modals ------------------------------------------------------------ */
/* Replaces window.prompt() for anything with a fixed set of right
   answers — a picker can't be mistyped, and it keeps admin dialogs
   inside the site's own design rather than the browser's. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-card {
  background: var(--blush-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 28px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.modal-description { margin-bottom: 20px; }
.modal-body .field { margin-bottom: 16px; }
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; justify-content: center; }
}

/* Two-line table cells ---------------------------------------------- */
/* Lets a table carry a name and its context in one column instead of
   spending a whole column on each, which is what made the event table
   wrap onto three lines per row. */
.cell-primary { color: var(--ink); }
.cell-sub { color: var(--ink-faint); font-size: 0.78rem; margin-top: 2px; }
.cell-sub code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--coral-deep); }
.cell-secondary { font-size: 0.8rem; color: var(--ink-faint); margin-top: 2px; }

.data-table td { white-space: nowrap; }
.data-table td:first-child { white-space: normal; }

/* Collapsed system section ------------------------------------------- */
/* Diagnostics belong within reach, not on screen. Closed by default,
   with a one-line status so a healthy system says so quietly and a
   broken one still gets a banner at the top of the page. */
.system-details {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.system-details summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  list-style: none;
}
.system-details summary::-webkit-details-marker { display: none; }
.system-details summary::before {
  content: "▸";
  margin-right: 8px;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  display: inline-block;
}
.system-details[open] summary::before { transform: rotate(90deg); }
.system-details summary:hover { color: var(--ink-dim); }
.system-summary-status {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.82rem;
  margin-left: auto;
}
.system-summary-status.state-ok { color: var(--ok); }
.system-summary-status.state-problem { color: var(--signal); }
.system-summary-status.state-unknown { color: var(--ink-faint); }
.system-details-body { padding: 8px 0 24px; }

/* =========================================================================
   Landing page — sales-page depth

   Same palette and type as everywhere else; what changes is rhythm.
   Full-bleed strips break up long stretches of prose, comparison and
   retention blocks carry meaning in their structure, and section
   spacing is wide enough that thirteen sections read as a considered
   argument rather than a wall.
   ========================================================================= */

.section { padding: 78px 0; }
/* Vertical rhythm that reads as generous on a desktop reads as dead space
   on a phone, where 78px top and bottom stacks into 156px of empty band
   between every section. */
@media (max-width: 680px) {
  .section { padding: 52px 0; }
  .strip { padding: 26px 0; }
  .hero { padding: 34px 0 44px; }
}
.section > .eyebrow { margin-bottom: 10px; }
.section h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; max-width: 20ch; }
.section-lede { max-width: 66ch; font-size: 1.02rem; margin-bottom: 18px; }
.section-lede em { color: var(--ink); font-style: italic; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Credibility strip -------------------------------------------------- */
/* Exactly three. A fourth wrapped onto its own row and read as a
   mistake rather than a list. */
.strip { padding: 34px 0; }
.strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
}
@media (max-width: 700px) { .strip-inner { grid-template-columns: 1fr; gap: 18px; } }
.strip-item { display: flex; flex-direction: column; gap: 3px; }
.strip-item strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--coral);
}
.strip-item span { font-size: 0.84rem; color: var(--paper-text-dim); }

/* Comparison --------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  background: var(--blush-raised);
}
.compare-col h3 { font-size: 1rem; margin-bottom: 16px; }
.compare-col ul { list-style: none; margin: 0; padding: 0; }
.compare-col li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.compare-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-family: var(--font-body);
}
.compare-without { border-left: 3px solid var(--signal); }
.compare-without li::before { content: "✕"; color: var(--signal); }
.compare-with { border-left: 3px solid var(--ok); }

/* --- Pricing ------------------------------------------------------------
   Two cards, not a tier table: there is only one product and one future
   price, and a three-column tier grid would imply choices that don't
   exist. The pilot card leads because it is the one that applies today. */
.price-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .price-pair { grid-template-columns: 1fr; } }
.price-card { background: var(--blush-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-panel); }
.price-card-now { border-color: var(--coral); }
.price-figure { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; margin: 10px 0 6px; color: var(--ink); }
.price-unit { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--ink-dim); letter-spacing: 0; }
.price-tbd { color: var(--ink-faint); }
.price-sub { font-size: 0.88rem; color: var(--ink-dim); margin: 0 0 18px; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 0.9rem; color: var(--ink-dim); }
.price-list li::before { content: "—"; position: absolute; left: 0; color: var(--coral); }
.band-dark .price-card { background: var(--black-raised); border-color: var(--line-on-black); box-shadow: none; }
.band-dark .price-card-now { border-color: var(--coral); }
.band-dark .price-figure { color: var(--paper-text); }
.band-dark .price-sub,
.band-dark .price-list li { color: var(--paper-text-dim); }
.band-dark .price-unit { color: var(--paper-text-dim); }
.compare-with li::before { content: "✓"; color: var(--ok); }

/* Four-across steps -------------------------------------------------- */
.steps-four { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Prospect flow ------------------------------------------------------ */
.prospect-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
  counter-reset: prospect;
}
.prospect-step {
  border-top: 2px solid var(--coral);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.prospect-step .k {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.prospect-step span:last-child { font-size: 0.86rem; color: var(--ink-faint); line-height: 1.5; }

/* Dimensions --------------------------------------------------------- */
.dimension-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  margin-top: 28px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dimension {
  background: var(--blush-raised);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dimension .k {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--coral-deep);
}
.dimension span:last-child { font-size: 0.84rem; color: var(--ink-faint); line-height: 1.45; }

/* Retention table ---------------------------------------------------- */
.retention-table {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.retention-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--blush-raised);
  align-items: baseline;
  font-size: 0.92rem;
}
.retention-row:last-child { border-bottom: none; }
.retention-row > span:last-child {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--coral-deep);
  white-space: nowrap;
  font-size: 0.88rem;
}
.retention-head {
  background: var(--blush-sunken);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.retention-head > span:last-child { color: var(--ink-faint); font-size: 0.72rem; }
@media (max-width: 560px) {
  .retention-row { grid-template-columns: 1fr; gap: 6px; }
  .retention-row > span:last-child { white-space: normal; }
}

/* Fit / not-fit ------------------------------------------------------ */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col h3 { font-size: 1rem; margin-bottom: 14px; }
.check-list, .cross-list { list-style: none; margin: 0; padding: 0; }
.check-list li, .cross-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.cross-list li::before { content: "✕"; position: absolute; left: 0; color: var(--ink-faint); font-weight: 700; }

/* FAQ ---------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 30px 18px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 15px;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--coral-deep);
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--coral-deep); }
.faq-item p { margin: 0 0 20px; max-width: 68ch; font-size: 0.94rem; }

.closing { text-align: left; }
.closing h2 { max-width: 24ch; }

/* Footer ------------------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
}
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; }
.footer-grid strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-text);
  margin-bottom: 2px;
}
.footer-grid p { color: var(--paper-text-dim); font-size: 0.86rem; margin: 0; max-width: 34ch; }
.footer-grid a { color: var(--paper-text-dim); font-size: 0.86rem; }
.footer-grid a:hover { color: var(--coral); }
.footer-grid .hint { color: var(--ink-faint); font-size: 0.8rem; }
.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--coral);
  letter-spacing: 0.14em;
  line-height: 1;
}
.footer-base {
  border-top: 1px solid var(--line-on-black);
  padding-top: 20px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}


/* =========================================================================
   Alternating bands

   The page reads as blocks rather than one unbroken field of blush,
   matching the rhythm of the rest of the brand. A dark band doesn't get
   its own component styles — it redefines the surface tokens locally,
   so every card, table and border inside it inverts automatically and
   nothing can be left behind when a new component is added.
   ========================================================================= */
.band { background: var(--blush); }

.band-dark {
  --blush: var(--black);
  --blush-raised: var(--black-raised);
  --blush-sunken: #221f1d;
  --ink: var(--paper-text);
  --ink-dim: var(--paper-text-dim);
  --ink-faint: #8d827a;
  --line: var(--line-on-black);
  --shadow-panel: var(--shadow-seal);
  background: var(--black);
  color: var(--paper-text);
}
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--paper-text); }
.band-dark p { color: var(--paper-text-dim); }
.band-dark a:not(.btn) { color: var(--coral); }
.band-dark .btn-ghost { border-color: var(--line-on-black); color: var(--paper-text-dim); }
.band-dark .btn-ghost:hover { background: var(--black-raised); color: var(--paper-text); }
.band-dark .hint { color: #8d827a; }

/* The closing sits one step lighter than the footer it leads into, so
   the two dark blocks stay legible as two blocks. */
.band-closing { background: var(--black-raised); }
.band-closing h2 { max-width: 24ch; }

.band-hero { padding-bottom: 0; }

/* Four-up grids ------------------------------------------------------ */
/* A 2×2 square rather than a row of three with a lonely fourth
   underneath — which is what auto-fit produced at this width. */
.steps-quad { grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 640px) { .steps-quad { grid-template-columns: 1fr; } }

.prospect-quad {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 640px) { .prospect-quad { grid-template-columns: 1fr; } }
.prospect-quad .prospect-step {
  border: 1px solid var(--line);
  border-top: 2px solid var(--coral);
  border-radius: var(--radius);
  background: var(--blush-raised);
  padding: 20px 22px;
}
.prospect-step .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--coral);
  letter-spacing: 0.08em;
}

/* Sign-in overlay ---------------------------------------------------- */
.signin-backdrop { align-items: flex-start; padding-top: 8vh; }
.signin-overlay-card { position: relative; max-width: 440px; width: 100%; }
.signin-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--paper-text-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.signin-close:hover { color: var(--paper-text); }
@media (max-width: 480px) { .signin-backdrop { padding: 16px; align-items: center; } }

/* A centred column needs its header centred too, or the value reads as
   belonging to the column beside it. */
.data-table th.center, .data-table td.center { text-align: center; }


/* =========================================================================
   Touch devices — stop iOS zooming the page on focus

   Safari on iOS zooms the viewport whenever a focused input's text is
   smaller than 16px. The site's fields were 14–15px, so tapping "Your
   key" on a phone blew the page up and left the person pinching back
   out before they could type. Nothing was actually broken; it just felt
   broken, which is the same thing to whoever is holding the phone.

   16px on touch widths is the whole fix. maximum-scale=1 in the
   viewport tag would also stop it, and is the wrong answer — it takes
   pinch-zoom away from everyone who needs it.
   ========================================================================= */
@media (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  textarea,
  select,
  input[type="text"].mono-input,
  input[type="password"].mono-input,
  textarea.mono-input {
    font-size: 16px;
  }
}

/* Sign-in overlay on a small screen: sit near the top, keep breathing
   room at the edges, and scroll inside itself rather than off-screen. */
@media (max-width: 560px) {
  .signin-backdrop { padding: 20px 16px; align-items: flex-start; }
  .signin-overlay-card {
    padding: 28px 22px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
  .seal-gate-card { padding: 30px 22px; }
}


/* Nav actions that never collapse ------------------------------------ */
/* The hamburger hides navigation, not the primary action. */
.nav-persistent { display: flex; align-items: center; gap: 10px; order: 3; }

/* The signed-in name is context, not an action. It's hidden until the
   page knows who you are, and it's the first thing dropped when the bar
   gets tight -- the two buttons and the menu toggle have to keep their
   row on a phone, and the name is the only one of the four that isn't
   something you click. Toggled by class rather than an inline style so
   the media query below can still override it. */
.nav-persistent .nav-signed-in-name { display: none; }
.nav-persistent .nav-signed-in-name.is-visible {
  display: inline;
  /* The one part of the bar allowed to give: it shrinks and ellipsises so
     the buttons keep their full labels and the row never breaks. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-persistent > .btn { flex-shrink: 0; }
/* Brighter and heavier than the section links beside it, so the name
   reads as who you are rather than as one more thing to click. */
.nav-persistent .nav-signed-in-name { color: var(--paper-text); font-weight: 600; }

/* Long/short label pair for the signed-in destination button. Below 430px
   the full word ("Administration") pushes the wordmark and menu toggle
   onto a second row, so the abbreviation takes over. */
.lbl-short { display: none; }
@media (max-width: 430px) {
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
}
@media (max-width: 900px) {
  .nav-persistent .nav-signed-in-name.is-visible { display: none; }
}

/* Sign out exists twice in the landing markup -- once in the persistent
   row, once inside the collapsible menu -- because on a phone the row
   can't hold the wordmark, two buttons and the menu toggle without
   wrapping onto a second line. Both start hidden; signing in reveals
   them; these two rules make sure only one is ever on screen. */
.js-signout { display: none; }
.js-signout.is-visible { display: inline-flex; }
#landingSignOutBtnMenu.is-visible { display: none; }
@media (max-width: 680px) {
  #landingSignOutBtn.is-visible { display: none; }
  #landingSignOutBtnMenu.is-visible { display: inline-flex; }
}
.nav-persistent .nav-hamburger { display: none; }

@media (max-width: 680px) {
  .nav-persistent .nav-hamburger { display: flex; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links { order: 4; }
}

/* Access codes ------------------------------------------------------- */
/* Meant to be read aloud and typed, so it's set large, spaced, and in
   the mono face where every character is unambiguous. */
.access-code-display {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--coral-deep);
  background: var(--blush-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
  word-break: break-all;
}
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--coral-deep);
}
@media (max-width: 480px) {
  .access-code-display { font-size: 1.2rem; letter-spacing: 0.08em; padding: 14px; }
}

/* Ready-to-send message --------------------------------------------- */
.message-preview {
  background: var(--blush-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  margin: 0 0 12px;
}

/* Grouped copy actions ----------------------------------------------- */
/* Buttons that belong together sit together. A per-button "Copied"
   label holds its space even at zero opacity, which spaced these out
   like gapped teeth — so they share one confirmation instead. */
.key-actions-tight { gap: 8px; flex-wrap: wrap; }
.key-actions-tight .copy-feedback { margin-left: 6px; }


/* The nav bar has to stay comfortable now the wordmark carries weight. */
.nav { padding: 20px 0; }
.nav-inner { gap: 18px; }

/* The phone-size reduction lives with the rest of the lockup rules now
   (see .wordmark-name / .wordmark-suite above). The old rule here set a
   font-size on .wordmark itself, which stopped meaning anything once the
   lockup made it a flex container. */


/* Hero eyebrow -------------------------------------------------------
   Coral everywhere else, black here — and the rule behind that is
   worth stating rather than treating as a one-off:

   THE EYEBROW GOES BLACK ONLY WHERE IT SITS DIRECTLY ABOVE CORAL
   HEADLINE TEXT.

   Every other section has a black headline, so a coral eyebrow gives
   contrast and there's nothing to compete with. In the hero the
   headline itself carries the accent, and two coral elements stacked
   on top of each other blur into one another — the eye can't tell
   where the label ends and the headline begins. One accent per view;
   here it belongs to the headline. */
.hero .eyebrow { color: var(--ink); }