/* ══════════════════════════════════════════════════════════════
   Public pages (/new/*) — shared stylesheet

   The first block is a faithful copy of the design that ships inline in
   frontend/index.html: same tokens, same component names, same values. It is a
   copy on purpose — the instruction for this work was not to touch any existing
   page, and extracting the landing's inline <style> would have changed how the
   live homepage is served. When someone decides to dedupe, the move is to delete
   this block, point index.html at this file, and change nothing else.

   The second block is what only the new pages need: forms, stat tiles, FAQ,
   plans, screenshot frames, the deck. It defines no tokens of its own.
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & tokens ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #1e1e2e;
  --bg2:       #252538;
  --bg3:       #2d2d45;
  --surface:   #323250;
  --pink:      #e879a0;
  --pink-lt:   #f4a0c0;
  --pink-dk:   #b5527a;
  --teal:      #7dd3c8;
  --text:      #e8e8f0;
  --text-muted:#9898b8;
  --radius:    12px;
  --max:       1160px;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── Utility ── */
.accent { color: var(--pink); }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--pink-dk);
  color: var(--pink-lt);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* ── NAV ── */
/* The sticky <nav> sits inside #shell-nav, so it can only stick within that wrapper's
   (nav-high) box and scrolled away with the page. The wrapper itself must stick. */
#shell-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(30, 30, 46, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--surface);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
}

.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--pink), #6b2bff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color .2s;
}

.nav-links a:hover { color: var(--text); }

@media (max-width: 640px) {
  .nav-links { display: none; }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--pink-dk));
  color: #fff;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--pink-lt), var(--pink));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 121, 160, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--pink);
  border: 1.5px solid var(--pink-dk);
}

.btn-outline:hover { background: rgba(232,121,160,0.08); }

/* ── HERO ── */
.hero {
  padding: 96px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(232,121,160,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 24px;
}

.hero p {
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── SECTION BASE ── */
section { padding: 80px 24px; }
section:nth-child(even) { background: var(--bg2); }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 12px;
}

.section-header p {
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
}

/* ── CARDS ── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color .2s, transform .2s;
}

.card:hover {
  border-color: var(--pink-dk);
  transform: translateY(-3px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(232,121,160,0.2), rgba(107,43,255,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ── FLOW ── */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .flow { grid-template-columns: 1fr; }
}

.flow-step {
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  position: relative;
}

.flow-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--pink-dk);
  z-index: 1;
}

@media (max-width: 900px) {
  .flow-step:not(:last-child)::after { display: none; }
}

.flow-step + .flow-step { margin-left: -1px; }

.flow-icon {
  font-size: 2rem;
  margin-bottom: 14px;
}

.flow-step h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.flow-step p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.highlight-box {
  background: rgba(232,121,160,0.08);
  border-left: 3px solid var(--pink);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── CTA BANNER ── */
.cta-banner {
  background: linear-gradient(135deg, rgba(232,121,160,0.12) 0%, rgba(107,43,255,0.12) 100%);
  border: 1px solid var(--surface);
  border-radius: 20px;
  padding: 64px 48px;
  text-align: center;
  margin: 0 24px;
}

.cta-banner h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.cta-banner p {
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto 36px;
}

/* ── FOOTER ── */
footer {
  background: var(--bg);
  border-top: 1px solid var(--surface);
  padding: 40px 24px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color .2s;
}

.footer-links a:hover { color: var(--pink); }

.footer-copy {
  color: var(--text-muted);
  font-size: 0.8rem;
  width: 100%;
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--surface);
}

/* ── LANG SWITCHER ── */
.landing-lang-switch { position: relative; }

.landing-lang-toggle {
  background: var(--surface);
  border: 1px solid var(--bg3);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .2s;
}

.landing-lang-toggle:hover { background: var(--bg3); }

.landing-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 100px;
}

.landing-lang-dropdown.open {
  display: flex;
  flex-direction: column;
}

.landing-lang-option {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  transition: background .15s, color .15s;
}

.landing-lang-option:hover {
  background: var(--surface);
  color: var(--text);
}

.landing-lang-option.active {
  color: var(--pink);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Public pages (new/) — components the landing does not have
   ══════════════════════════════════════════════════════════════ */

/* ── Provenance seals: ● measured · ◐ derived · ○ theoretical ── */
.seal {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.seal-measured::before    { content: '● '; color: var(--teal); }
.seal-derived::before     { content: '◐ '; color: var(--pink-lt); }
.seal-theoretical::before { content: '○ '; color: var(--text-muted); }

/* ── Stat tiles ── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat {
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: 24px 22px;
  text-align: center;
}

.stat-num {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--pink);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 6px 0 10px;
}

/* ── Screenshot frame (Kleber's "show the software") ── */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.shot {
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--surface);
}

.shot-placeholder {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px;
  background: repeating-linear-gradient(
    45deg, var(--bg2), var(--bg2) 12px, var(--bg3) 12px, var(--bg3) 24px);
  border-bottom: 1px solid var(--surface);
}

.shot-caption {
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Plans ── */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.plan {
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.plan.featured { border-color: var(--pink-dk); }

.plan h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.plan-price {
  font-size: 0.9rem;
  color: var(--pink-lt);
  margin-bottom: 16px;
}

.plan-tiers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  flex: 1;
}

.plan-tiers li {
  font-size: 0.87rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}

.plan-tiers li::before {
  content: '•';
  color: var(--pink);
  flex-shrink: 0;
}

/* ── FAQ ── */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.faq details {
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: 18px 22px;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  color: var(--pink);
  font-weight: 700;
  flex-shrink: 0;
}

.faq details[open] summary::after { content: '–'; }

.faq details p {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── Form ── */
.pf {
  max-width: 780px;
  margin: 0 auto;
  background: var(--bg3);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
}

.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field.full { grid-column: 1 / -1; }

.pf-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pf-field label .req { color: var(--pink); }

.pf-input,
.pf-select,
.pf-textarea {
  background: var(--bg2);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  width: 100%;
  transition: border-color .2s;
}

.pf-input:focus,
.pf-select:focus,
.pf-textarea:focus {
  outline: none;
  border-color: var(--pink-dk);
}

.pf-input.invalid,
.pf-select.invalid { border-color: #ef4444; }

.pf-textarea { min-height: 96px; resize: vertical; }

.pf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

.pf-check input { margin-top: 4px; flex-shrink: 0; }

/* The honeypot: present in the DOM, never shown, never focusable. */
.pf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pf-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  align-items: center;
}

.pf-error {
  color: #fca5a5;
  font-size: 0.82rem;
  min-height: 1.2em;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ── "Not configured yet" note (contact channels pending Viviane) ── */
.pending-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px dashed rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
}

.pending-note::before { content: '⚠'; }

/* ── Who does what ── */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 32px;
  width: 100%;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--surface);
}

.person-name {
  font-size: 0.88rem;
  font-weight: 600;
}

.person-role {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.person-bio {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 6px;
}

.person-orcid {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.person-orcid a:hover { color: var(--pink); }

/* ── Disclaimer ── */
.disclaimer {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  line-height: 1.6;
}

/* ── 3D brain card (homepage hero) ── */
.lb-card {
  margin: 56px auto 0;
  max-width: 900px;
  height: 460px;
  background: var(--bg2);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.lb-caption {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .lb-card { height: 320px; }
}

/* ── Claim review marker ──────────────────────────────────────
   Where Viviane's copy claims more than the software does, the claim stays
   visible in a review colour with a tooltip explaining the gap, rather than
   being silently rewritten. Removed claim by claim as she confirms wording. */
.claim-review {
  color: #fbbf24;
  border-bottom: 1px dashed rgba(245, 158, 11, 0.7);
  cursor: help;
  position: relative;
}

.claim-review::after {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.6);
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: 2px;
}

.claim-review:focus {
  outline: 2px solid rgba(245, 158, 11, 0.6);
  outline-offset: 2px;
}

/* ── A button whose channel is not configured yet ── */
.btn-pending {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ── Pricing section (js/public-plans.js) ──────────────────
   Built on the existing .plans/.plan cards the placeholder used, so the section
   keeps its look after switching to the real catalogue. Only the pieces the
   placeholder never had are new: the period toggle, the saving badge and the
   trial line. */
.plan-period-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.plan-period-toggle .btn { padding: 8px 20px; font-size: 0.85rem; }

.plan-period {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 4px;
}
.plan-saving {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(232, 121, 160, 0.14);
  color: var(--pink);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.plan-trial {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.plan-credits { color: var(--pink-lt); }
/* The one "Credit-based *" note under the grid, and the credit-packs line (ST 159). */
.plan-notes { max-width: 780px; margin: 24px auto 0; }
.plan-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.plan-note-ref { color: var(--pink); text-decoration: none; }
.plan-credit-based { white-space: nowrap; }
[hidden].pf-hint { display: none; }
.pf-check.is-disabled { opacity: 0.45; cursor: not-allowed; }
.pf-check.is-disabled input { cursor: not-allowed; }
.su-login-link { color: var(--pink-lt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.su-terms-link { color: var(--pink-lt); text-decoration: underline; text-underline-offset: 3px; }
.su-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(245,158,11,.55); background: rgba(245,158,11,.08); font-size: 0.82rem; line-height: 1.45; }
.su-notice b { color: #f59e0b; }
.su-notice-more { color: #f59e0b; text-decoration: underline; font-weight: 600; white-space: nowrap; }
.su-notice-more-body { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(245,158,11,.35); }
.su-notice-more-body p { margin: 4px 0 0; }
.terms-modal-body { max-height: 60vh; overflow-y: auto; font-size: 0.9rem; line-height: 1.5; margin: 10px 0 14px; }
.terms-modal-body h1, .terms-modal-body h2, .terms-modal-body h3 { font-size: 1rem; margin: 14px 0 4px; }
.pf-pw { position: relative; }
.pf-pw .pf-input { padding-right: 50px; }
.pf-pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--pink-lt);
}
.pf-pw-toggle:hover, .pf-pw-toggle:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); outline: none; }
.pf-pw-toggle[aria-pressed="true"] { color: #fff; }
/* Hide the browser's own reveal icon: it is faint and would sit under ours. */
.pf-pw input::-ms-reveal, .pf-pw input::-ms-clear { display: none; }
/* Space is always reserved, so the status appearing on blur never moves the button under the pointer. */
#su-taxid-status { display: block; min-height: 1.4em; }
#su-taxid-status.ok { color: #6fdc9b; }
#su-taxid-status.bad { color: #ff8a8a; }
.plan-fn { font-size: 0.7em; margin-left: 2px; vertical-align: super; line-height: 0; }
.plan-fn a { color: var(--pink-lt); text-decoration: none; font-weight: 700; }
.plan-fn a:hover { text-decoration: underline; }
html { scroll-behavior: smooth; }
.plan-estimate-link { display: inline-block; margin: 2px 0 8px; font-size: 0.8rem; color: var(--pink-lt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-estimate-link:hover { color: var(--pink); }
.estimate-list { margin: 6px 0 14px; padding-left: 1.2em; }
.estimate-list li { margin: 3px 0; }
#estimate-modal-body h4 { margin: 14px 0 4px; font-size: 1rem; }
.pack-estimate { margin-top: 6px; font-size: 0.78rem; line-height: 1.35; color: var(--text-muted); }
.plan-packs-link { color: var(--pink-lt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-packs-link:hover { color: var(--pink); }

/* ── Credit-packs modal ── */
body.packs-open { overflow: hidden; }
.packs-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10, 10, 20, 0.7); backdrop-filter: blur(4px);
}
.packs-dialog {
  position: relative; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--surface); border-radius: var(--radius);
  padding: 28px;
}
.packs-dialog h3 { margin: 0 0 8px; font-size: 1.2rem; }
.packs-x {
  position: absolute; top: 10px; right: 14px; background: none; border: 0;
  color: var(--text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.packs-x:hover { color: var(--text); }
.packs-dialog.packs-wide { max-width: 1040px; }
.packs-wide .packs-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .packs-wide .packs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .packs-wide .packs-grid { grid-template-columns: 1fr; } }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.pack-card {
  border: 1px solid var(--surface); border-radius: var(--radius); padding: 18px 14px;
  text-align: center; background: rgba(255, 255, 255, 0.02);
}
.pack-name { font-weight: 600; margin-bottom: 6px; }
.pack-credits { font-size: 1.5rem; font-weight: 700; color: var(--pink-lt); }
.pack-credits span { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
.pack-price { margin-top: 8px; font-size: 1.05rem; }
.packs-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ── Signup (new/signup/) ──────────────────────────────── */
.signup-hero { padding-bottom: 24px; }
.signup-type { display: flex; gap: 20px; flex-wrap: wrap; }
.pf-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
#signup .pf-form { max-width: 760px; margin: 0 auto; }

/* An #anchor lands below the sticky header, not under it. --nav-h is set by
   PublicShell._holdHash from the real header height. */
section[id] { scroll-margin-top: calc(var(--nav-h, 72px) + 8px); }