/* ====================================================================
   Signaturios — Design System v2
   All values flow from :root tokens. Tweak there to retheme.
   ==================================================================== */

/* ── Google Fonts ───────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */

:root {
  /* Typefaces */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Gray ramp — 10-step, slightly cool-neutral */
  --gray-1:  #f9f9fb;
  --gray-2:  #f2f2f5;
  --gray-3:  #e5e5ea;
  --gray-4:  #d4d4da;
  --gray-5:  #bebec8;
  --gray-6:  #9d9daa;
  --gray-7:  #7b7b88;
  --gray-8:  #595966;
  --gray-9:  #373742;
  --gray-10: #1c1c1f;

  /* Surfaces */
  --bg:             var(--gray-1);
  --surface:        #ffffff;
  --surface-raised: var(--gray-1);
  --border:         var(--gray-3);
  --border-strong:  var(--gray-4);
  --divider:        var(--gray-3);

  /* Dark surfaces (hero, code blocks, footer) */
  --dark:          #111110;
  --dark-raised:   #1a1a1e;
  --dark-border:   #28282e;
  --dark-text:     #96969e;
  --dark-text-dim: #52525a;
  --dark-text-strong: #ededec;

  /* Text */
  --text:            var(--gray-10);
  --text-2:          var(--gray-8);
  --text-3:          var(--gray-6);
  --text-muted:      var(--gray-8);   /* secondary text on light surfaces — 6:1 on white */
  --text-placeholder: var(--gray-5);

  /* Accent — single saturated color, CTAs on light only */
  --accent:       #18181b;
  --accent-hover: #27272a;
  --accent-fg:    #fafafa;

  /* Accent on dark surfaces — light button on dark/hero backgrounds */
  --accent-d:       #f4f4f5;
  --accent-d-hover: #e4e4e7;
  --accent-d-fg:    #18181b;

  /* Type scale — referenced by landing-page bento tiles */
  --text-xl:  1.25rem;   /* 20px — bento tile headings */
  --text-2xl: 1.75rem;   /* 28px — featured (left) bento title */

  /* Semantic (used only where content demands it) */
  --link:    #2563eb;
  --success: #16a34a;
  --error:   #dc2626;
  --warn:    #d97706;

  /* Radius */
  --r-xs:  3px;
  --r-sm:  4px;
  --r-md:  6px;    /* buttons, inputs */
  --r-lg:  10px;   /* cards, panels */
  --r-xl:  12px;   /* large cards */
  --r-2xl: 16px;
  --r-pill: 999px;

  /* 8-base spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Shadows — reserved for genuinely floating elements */
  --shadow-float: 0 1px 3px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.08);
  --shadow-deep:  0 2px 4px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.07);

  /* Layout */
  --max-w:   1200px;
  --prose-w: 68ch;
}

/* ── Reset ──────────────────────────────────────────────────────── */

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ── Header ─────────────────────────────────────────────────────── */

.header {
  height: 54px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand em { color: var(--link); font-style: normal; }

.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .01em;
}

/* ── Full-height split layout (signing page) ────────────────────── */

body.full-height { height: 100vh; overflow: hidden; }

.sign-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 54px);
}

.pdf-pane {
  flex: 1;
  background: #28282e;
  position: relative;
  overflow: hidden;
}

.pdf-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.18);
  font-size: 13px;
  pointer-events: none;
}

.pdf-pane iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.sign-sidebar {
  width: 390px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
}

.sign-sidebar .sidebar-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

/* ── Centered page layout ───────────────────────────────────────── */

.page-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
}

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  padding: 40px 38px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-float);
  text-align: center;
}

.page-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}

.page-sub {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Status icons ───────────────────────────────────────────────── */

.status-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-5);
}

.icon-success { background: #f0fdf4; border-color: #bbf7d0; }
.icon-error   { background: #fef2f2; border-color: #fecaca; }
.icon-info    { background: #eff6ff; border-color: #bfdbfe; }
.icon-warning { background: #fffbeb; border-color: #fde68a; }

/* ── Badges ─────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  border: 1px solid;
}

.badge-aes  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.badge-ses  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-done { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

/* ── Signer card ────────────────────────────────────────────────── */

.signer-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
}

.signer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-1);
}

.signer-name { font-size: 15px; font-weight: 500; color: var(--text); }
.signer-id   { font-size: 13px; color: var(--text-2); margin-top: var(--sp-1); }

/* ── Divider ────────────────────────────────────────────────────── */

.divider { border: none; border-top: 1px solid var(--divider); margin: var(--sp-5) 0; }

/* ── Consent ────────────────────────────────────────────────────── */

.consent-intro {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
}

.consent-label {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  user-select: none;
}

.consent-label:hover { border-color: var(--gray-5); background: var(--gray-1); }
.consent-label.is-checked { border-color: var(--accent); background: var(--gray-1); }

.consent-chk {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.consent-text { font-size: 13px; line-height: 1.65; color: var(--text); }

/* ── Buttons ────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 11px var(--sp-5);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, transform .07s;
  margin-top: 14px;
  letter-spacing: .01em;
}

.btn:active { transform: scale(.99); }

.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary[disabled], .btn-primary:disabled {
  background: var(--gray-4); border-color: var(--gray-4);
  color: var(--gray-6); cursor: not-allowed; transform: none;
}

.btn-bankid { background: #193e4f; color: #fff; border-color: #193e4f; }
.btn-bankid:hover { background: #102d3a; border-color: #102d3a; }

.btn-outline {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover { background: var(--gray-1); border-color: var(--gray-5); }

/* ── Alert ──────────────────────────────────────────────────────── */

.alert-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--error);
  margin-bottom: var(--sp-3);
  text-align: left;
}

.alert-error svg { flex-shrink: 0; margin-top: 1px; }

/* ── Details table ──────────────────────────────────────────────── */

.details {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--sp-5) 0;
  text-align: left;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--divider);
}

.detail-row:last-child { border-bottom: none; }

.detail-key {
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
  padding-top: 1px;
  white-space: nowrap;
}

.detail-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  word-break: break-all;
}

/* ── Mobile PDF link ────────────────────────────────────────────── */

.pdf-mobile-link {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--sp-4);
  transition: background .12s;
}

.pdf-mobile-link:hover { background: var(--gray-2); }
.pdf-mobile-link svg { flex-shrink: 0; color: var(--text-3); }

/* ── Footnote ───────────────────────────────────────────────────── */

.footnote {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.7;
  margin-top: var(--sp-5);
  text-align: left;
}

.footnote strong { color: var(--text-2); font-weight: 500; }

.auth-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* ── Responsive (sign / card pages) ────────────────────────────── */

@media (max-width: 760px) {
  body.full-height { height: auto; overflow: auto; }
  .sign-layout { flex-direction: column; height: auto; overflow: visible; }
  .pdf-pane { display: none; }
  .pdf-mobile-link { display: flex; }
  .sign-sidebar { width: 100%; border-left: none; padding: 20px 18px 32px; }
  .header { padding: 0 var(--sp-4); }
  .card { padding: 28px 20px 32px; }
  .page-title { font-size: 19px; }
  .dash-main { padding: var(--sp-6) var(--sp-4); }
  .dash-billing-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   Landing page
   ==================================================================== */

.lp-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ── Nav ─────────────────────────────────────────────────────────── */

.lp-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.lp-nav-link {
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  transition: color .12s;
  letter-spacing: .01em;
}

.lp-nav-link:hover,
.lp-nav-active { color: var(--text); font-weight: 500; }

.lp-nav-cta {
  width: auto;
  padding: var(--sp-2) var(--sp-4);
  font-size: 13.5px;
  margin-top: 0;
  display: inline-flex;
}

/* ── Hero ────────────────────────────────────────────────────────── */

.lp-hero {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: var(--sp-10) 0 var(--sp-9);
}

/* No gradient — removed intentionally */
.lp-hero::before { display: none; }

.lp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: var(--sp-5);
}

.lp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 58px);
  font-weight: 600;
  line-height: 1.07;
  color: #ededec;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-5);
}

.lp-hero-title em {
  color: #ededec;
  font-style: normal;
  opacity: .5;
}

.lp-hero-sub {
  font-size: 16px;
  color: var(--dark-text);
  line-height: 1.65;
  max-width: 500px;
  margin: 0 auto var(--sp-7);
}

.lp-hero-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.lp-btn-hero {
  width: auto;
  padding: 11px var(--sp-6);
  font-size: 14px;
  margin-top: 0;
  display: inline-flex;
  background: var(--accent-d);
  color: var(--accent-d-fg);
  border-color: var(--accent-d);
}
.lp-btn-hero:hover {
  background: var(--accent-d-hover);
  border-color: var(--accent-d-hover);
}

.lp-btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 11px var(--sp-6);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  margin-top: 0;
  background: transparent;
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  letter-spacing: .01em;
}

.lp-btn-outline-light:hover {
  background: rgba(255,255,255,.05);
  border-color: #3e3e44;
}

.lp-trust {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.lp-trust-item {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--dark-text-dim);
}

.lp-trust-sep { color: #2a2a30; }

/* ── Section base ────────────────────────────────────────────────── */

.lp-section      { padding: var(--sp-9) 0; }
.lp-section-gray { background: var(--gray-2); }
.lp-section-dark { background: var(--dark); }

.lp-section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}

.lp-section-sub {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: var(--sp-7);
  max-width: 520px;
}

.lp-centered { text-align: center; }
.lp-centered.lp-section-sub { margin-left: auto; margin-right: auto; }
.lp-title-light { color: #ededec; }
.lp-sub-light   { color: var(--dark-text); }

/* ── Compare (Problem / Solution) ──────────────────────────────── */

.lp-compare {
  display: flex;
  align-items: stretch;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
}

.lp-compare-col  { flex: 1; padding: var(--sp-7) var(--sp-6); }
.lp-compare-pain { background: #fdf9f9; }
.lp-compare-good { background: #f7fdf8; }

.lp-compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
}

.lp-compare-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.lp-compare-pain .lp-compare-label { color: #b91c1c; }
.lp-compare-good .lp-compare-label { color: #15803d; }

.lp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-list li {
  font-size: 14px;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}

.lp-list-pain li { color: #7f1d1d; }
.lp-list-good li { color: #14532d; }

.lp-list-pain li::before {
  content: "\2715";
  position: absolute; left: 0;
  color: #dc2626; font-weight: 600; font-size: 11px; top: 2px;
}

.lp-list-good li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: #16a34a; font-weight: 600; font-size: 11px; top: 2px;
}

/* ── Code section ────────────────────────────────────────────────── */

.lp-code-intro { text-align: center; margin-bottom: var(--sp-6); }

.lp-code-wrap {
  max-width: 740px;
  margin: 0 auto 28px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid #1c1c22;
}

.lp-code-tab {
  background: #161618;
  color: var(--dark-text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.lp-code-tab-resp { border-top: 1px solid #0e0e10; }

.lp-code-status {
  display: inline-block;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.16);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
  letter-spacing: .04em;
}

.lp-code {
  background: #0d0d10;
  margin: 0;
  padding: var(--sp-5);
  overflow-x: auto;
}

.lp-code code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: #c8c8d4;
  white-space: pre;
  display: block;
}

/* Syntax tints */
.lc-dim    { color: #44444e; }
.lc-method { color: #f5a623; font-weight: 500; }
.lc-str    { color: #7ecaa0; }
.lc-key    { color: #78b4ff; }

.lp-code-note {
  text-align: center;
  font-size: 14px;
  color: var(--dark-text);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.lp-code-note code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid #1c1c22;
  border-radius: var(--r-sm);
  padding: 1px var(--sp-1);
  color: #78b4ff;
}

.inline-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--gray-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px var(--sp-1);
  color: var(--text);
}

/* ── Feature cards ───────────────────────────────────────────────── */

.lp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.lp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  transition: border-color .15s, transform .15s;
}

.lp-card:hover {
  border-color: var(--gray-5);
  transform: translateY(-1px);
}

.lp-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.lp-icon-blue,
.lp-icon-green,
.lp-icon-purple { background: var(--gray-2); border-color: var(--gray-4); color: var(--text-2); }

.lp-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lp-card-body {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.7;
}

/* ── Tiers ───────────────────────────────────────────────────────── */

.lp-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.lp-tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

.lp-tier-featured { border-color: var(--accent); }

.lp-tier-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: var(--sp-4) 0 var(--sp-2);
  letter-spacing: -0.02em;
}

.lp-tier-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}

.lp-tier-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lp-tier-list li {
  font-size: 14px;
  color: var(--text-2);
  padding-left: 20px;
  position: relative;
  line-height: 1.55;
}

.lp-tier-list li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--success); font-weight: 600; font-size: 11px; top: 2px;
}

/* ── CTA banner ──────────────────────────────────────────────────── */

/* Gradient removed — solid dark */
.lp-cta-section {
  background: var(--dark);
  padding: var(--sp-9) 0;
  text-align: center;
}

.lp-cta-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 600;
  color: #ededec;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
  line-height: 1.1;
}

.lp-cta-sub {
  font-size: 15px;
  color: var(--dark-text);
  margin-bottom: var(--sp-7);
  line-height: 1.65;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.lp-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px var(--sp-7);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  background: var(--accent-d);
  color: var(--accent-d-fg);
  border: 1px solid var(--accent-d);
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, transform .07s;
  letter-spacing: .01em;
}

.lp-btn-cta:hover  { background: var(--accent-d-hover); border-color: var(--accent-d-hover); }
.lp-btn-cta:active { transform: scale(.99); }

/* ── Footer ──────────────────────────────────────────────────────── */

.lp-footer {
  background: var(--dark);
  border-top: 1px solid var(--dark-border);
  padding: var(--sp-6) 0;
  text-align: center;
}

.lp-footer-brand {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #ededec;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

.lp-footer-brand em { font-style: normal; opacity: .35; }

.lp-footer-links {
  display: flex;
  gap: var(--sp-5);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.lp-footer-links a {
  font-size: 13px;
  color: var(--dark-text-dim);
  text-decoration: none;
  font-weight: 500;
  transition: color .12s;
}

.lp-footer-links a:hover { color: var(--dark-text); }

.lp-footer-note {
  font-size: 11.5px;
  color: var(--dark-text-dim);
  line-height: 1.7;
}

/* ── Landing responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .lp-cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .lp-tiers { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .lp-container    { padding: 0 var(--sp-4); }
  .lp-hero         { padding: var(--sp-8) 0; }
  .lp-section      { padding: var(--sp-8) 0; }
  .lp-cta-section  { padding: var(--sp-8) 0; }
  .lp-hero-title   { letter-spacing: -0.025em; }
  .lp-compare      { flex-direction: column; }
  .lp-compare-vs   {
    writing-mode: horizontal-tb;
    padding: var(--sp-2);
    border-left: none; border-right: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .lp-compare-col  { padding: var(--sp-6) var(--sp-5); }
  .lp-btn-hero, .lp-btn-outline-light {
    width: 100%; justify-content: center;
  }
  .lp-hero-actions { flex-direction: column; padding: 0 var(--sp-3); }
  .lp-nav-link     { display: none; }
  .lp-code-wrap    { margin-left: -4px; margin-right: -4px; border-radius: var(--r-md); }
}

/* ====================================================================
   eID method selector
   ==================================================================== */

.eid-doc-label {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
  text-align: left;
}

.eid-doc-label strong { color: var(--text); font-weight: 500; }

.eid-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
  text-align: left;
}

.eid-method-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition: border-color .12s, background .12s;
  cursor: pointer;
}

.eid-method-btn:hover {
  border-color: var(--gray-5);
  background: var(--gray-1);
}

.eid-country-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--gray-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-2);
}

.eid-method-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eid-method-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}

.eid-country-name {
  font-size: 12px;
  color: var(--text-3);
}

.eid-arrow { flex-shrink: 0; color: var(--text-3); transition: color .12s; }
.eid-method-btn:hover .eid-arrow { color: var(--text-2); }

/* ====================================================================
   Developer portal — forms, key reveal, dashboard
   ==================================================================== */

.form-group {
  margin-bottom: var(--sp-3);
  text-align: left;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--sp-1);
}

.form-input {
  width: 100%;
  padding: 10px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
  outline: none;
}

.form-input:focus {
  border-color: var(--gray-8);
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}

.form-input::placeholder { color: var(--text-placeholder); }

/* ── Key reveal ─────────────────────────────────────────────────── */

.key-reveal {
  background: var(--dark);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
}

.key-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #7ecaa0;
  flex: 1;
  word-break: break-all;
  line-height: 1.6;
}

.key-copy-btn {
  background: var(--dark-raised);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-sm);
  color: var(--dark-text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px var(--sp-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}

.key-copy-btn:hover { background: #28282e; color: #e0e0e6; }
.key-copy-btn.copied { color: #7ecaa0; border-color: rgba(126,202,160,.35); }

.key-usage {
  background: var(--gray-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  margin-bottom: var(--sp-1);
}

.key-usage-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

.key-usage pre { margin: 0; }

.key-usage code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}

/* ── Dashboard ──────────────────────────────────────────────────── */

.dash-main {
  flex: 1;
  padding: var(--sp-8) var(--sp-6);
}

.dash-container {
  max-width: 880px;
  margin: 0 auto;
}

.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.dash-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-1);
  letter-spacing: -0.02em;
}

.dash-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-1);
  letter-spacing: -0.015em;
}

.dash-sub {
  font-size: 13.5px;
  color: var(--text-2);
}

.dash-new-btn {
  width: auto;
  padding: var(--sp-2) var(--sp-4);
  font-size: 13.5px;
  margin-top: 0;
  white-space: nowrap;
}

.dash-key-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.dash-key-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}

.dash-key-item.dash-key-revoked {
  background: var(--gray-1);
  border-color: var(--gray-3);
  opacity: .58;
}

.dash-key-prefix {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}

.dash-key-prefix code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
}

.dash-tag-active {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}

.dash-tag-revoked {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}

.dash-tag-live {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}

.dash-tag-test {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}

.dash-env-select {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px var(--sp-3);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.dash-env-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

.key-block-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sign-test-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--r-md);
  padding: 8px 14px;
  text-align: center;
  margin-bottom: 16px;
}

.dash-section-sep {
  height: 1px;
  background: var(--border);
  margin: var(--sp-7) 0;
}

.dash-webhook-form {
  margin-bottom: var(--sp-4);
}

.dash-webhook-fields {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.dash-webhook-url {
  flex: 1;
  min-width: 220px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px var(--sp-3);
  outline: none;
}

.dash-webhook-url:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

.dash-key-meta {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  font-family: var(--font-mono);
}

.dash-revoke-btn {
  background: transparent;
  border: 1px solid var(--gray-3);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px var(--sp-3);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}

.dash-revoke-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--error);
}

.dash-empty {
  padding: var(--sp-7);
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  background: var(--gray-1);
  border: 1px dashed var(--gray-4);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}

.dash-info {
  background: var(--dark);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}

.dash-info-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dark-text-dim);
  margin-bottom: var(--sp-3);
}

.dash-code { margin: 0; overflow-x: auto; }

.dash-code code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dark-text);
  white-space: pre;
  display: block;
  line-height: 1.8;
}

/* ── Billing cards ─────────────────────────────────────────────── */

.dash-billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.dash-billing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.dash-billing-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

.dash-billing-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.dash-billing-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: var(--sp-1);
}

.dash-billing-bar-bg {
  height: 4px;
  background: var(--gray-3);
  border-radius: 2px;
  overflow: hidden;
  margin: var(--sp-2) 0;
}

.dash-billing-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s;
}

/* ====================================================================
   Docs page
   ==================================================================== */

.docs-wrap {
  display: flex;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-10);
  gap: var(--sp-8);
}

.docs-sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
}

.docs-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-toc-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-2);
}

.docs-toc-link {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  padding: 5px var(--sp-2);
  border-radius: var(--r-md);
  border-left: 2px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
  line-height: 1.4;
}

.docs-toc-link:hover { color: var(--text); background: var(--gray-2); }

.docs-toc-link.active {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--gray-2);
  font-weight: 500;
}

.docs-toc-sub { padding-left: 18px; font-size: 12.5px; }

.docs-content { flex: 1; min-width: 0; }

.docs-section { scroll-margin-top: 70px; }

.docs-h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.docs-h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.02em;
}

.docs-h3 {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin: var(--sp-6) 0 var(--sp-2);
  letter-spacing: -0.01em;
}

.docs-h3:first-child { margin-top: 0; }

.docs-ic-h {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  background: var(--gray-2);
  border: 1px solid var(--border);
  padding: 1px var(--sp-1);
  border-radius: var(--r-sm);
}

.docs-lead {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 var(--sp-3);
  max-width: var(--prose-w);
}

.docs-p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 var(--sp-3);
  max-width: var(--prose-w);
}

.docs-ic {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--gray-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.docs-link { color: var(--link); text-decoration: none; font-weight: 500; }
.docs-link:hover { text-decoration: underline; }

.docs-divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: var(--sp-7) 0;
}

.docs-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-2);
}

.docs-endpoint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--gray-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  flex-wrap: wrap;
}

.docs-method {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.docs-method-post { background: #dbeafe; color: #1d4ed8; }
.docs-method-get  { background: #dcfce7; color: #15803d; }

.docs-path {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
}

.docs-auth-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.docs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-4);
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.docs-table th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--gray-1);
  border-bottom: 1px solid var(--border);
}

.docs-table td {
  padding: 10px var(--sp-3);
  color: var(--text-2);
  border-bottom: 1px solid var(--gray-2);
  vertical-align: top;
  line-height: 1.6;
}

.docs-table tr:last-child td { border-bottom: none; }

.param-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--gray-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.param-type {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #6366f1;
  white-space: nowrap;
}

.param-req {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--error);
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.param-opt {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--gray-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.param-default { font-style: normal; font-size: 11px; color: var(--text-3); }

.docs-note {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 var(--sp-4);
}

.docs-note-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a5f; }
.docs-note-info svg { color: #3b82f6; }
.docs-note-warn { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.docs-note-warn svg { color: #d97706; }

.code-example {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid #1c1c22;
  margin: 0 0 var(--sp-2);
}

.code-tabs {
  display: flex;
  background: #161618;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid #0e0e10;
}

.code-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dark-text-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  letter-spacing: .02em;
}

.code-tab:hover { color: var(--dark-text); }

.code-tab.active {
  color: #e0e0e8;
  border-bottom-color: #6366f1;
}

.code-panel { display: none; }
.code-panel:first-of-type { display: block; }
.code-panel .lp-code { border-radius: 0; border: none; margin: 0; }

.docs-how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-5);
}

.docs-how-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}

.docs-how-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--gray-2);
  border: 1px solid var(--gray-4);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.docs-how-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.docs-how-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0;
}

.docs-footer-cta {
  border-top: 1px solid var(--divider);
  padding-top: var(--sp-7);
  margin-top: var(--sp-5);
  text-align: center;
}

.docs-footer-cta p {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}

/* ── Docs responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .docs-wrap {
    flex-direction: column;
    padding: var(--sp-6) var(--sp-4) var(--sp-9);
  }

  .docs-sidebar {
    width: 100%;
    position: static;
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-2);
  }

  .docs-toc { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1); }
  .docs-toc-title { display: none; }

  .docs-toc-link, .docs-toc-sub {
    padding: 4px var(--sp-2);
    border-left: none;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px;
  }

  .docs-toc-link.active {
    background: var(--gray-2);
    border-color: var(--gray-5);
  }

  .docs-how-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   Code blocks v2 — window chrome system
   ==================================================================== */

/* ── Extended syntax tokens ──────────────────────────────────────── */
.lc-num  { color: #f0883e; }
.lc-bool { color: #c3956c; }
.lc-kw   { color: #e06c75; }
.lc-fn   { color: #dcbdfb; }

/* ── .cb — chrome code block ─────────────────────────────────────── */
.cb {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid #1e1e27;
  background: #0d0d10;
}

/* ── Chrome bar ──────────────────────────────────────────────────── */
.cb-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #16161a;
  border-bottom: 1px solid #0d0d12;
  padding: 0 var(--sp-3);
  height: 36px;
  flex-shrink: 0;
}

/* ── Traffic-light dots ──────────────────────────────────────────── */
.cb-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.cb-dots span {
  width: 11px;
  height: 11px;
  border-radius: var(--r-pill);
  display: block;
  transition: background .15s;
}

.cb-dots span:nth-child(1) { background: #3c1f1f; }
.cb-dots span:nth-child(2) { background: #3c3020; }
.cb-dots span:nth-child(3) { background: #1f3020; }

.cb:hover .cb-dots span:nth-child(1) { background: #ff5f57; }
.cb:hover .cb-dots span:nth-child(2) { background: #febc2e; }
.cb:hover .cb-dots span:nth-child(3) { background: #28c840; }

/* ── Chrome label ────────────────────────────────────────────────── */
.cb-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #46465a;
  letter-spacing: .02em;
  flex: 1;
}

/* ── Status badge ────────────────────────────────────────────────── */
.cb-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.14);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
  letter-spacing: .03em;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Copy button ─────────────────────────────────────────────────── */
.cb-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid #28282f;
  border-radius: var(--r-sm);
  color: #46465a;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px var(--sp-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, border-color .12s, background .12s;
  letter-spacing: .02em;
  margin-left: auto;
  line-height: 1;
}

/* When a status badge is present, don't double-push with auto margin */
.cb-status + .cb-copy-btn { margin-left: var(--sp-2); }

.cb-copy-btn:hover {
  background: #1e1e28;
  border-color: #38383f;
  color: var(--dark-text);
}

.cb-copy-btn.cb-copied {
  color: #7ecaa0;
  border-color: rgba(126,202,160,.3);
}

/* ── Tabbed chrome ───────────────────────────────────────────────── */
.cb-chrome-tabs {
  gap: 0;
  padding-left: var(--sp-3);
}

.cb-chrome-tabs .cb-dots { margin-right: var(--sp-3); flex-shrink: 0; }

.cb-tab-list { display: flex; flex: 1; }

.cb-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #46465a;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 var(--sp-3);
  height: 36px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
  letter-spacing: .02em;
}

.cb-tab:hover { color: var(--dark-text); }

.cb-tab.active {
  color: #e0e0ea;
  border-bottom-color: #7878ec;
}

/* ── Panels ──────────────────────────────────────────────────────── */
.cb-panel          { display: none; }
.cb-panel-active   { display: block; }

/* ── Code area ───────────────────────────────────────────────────── */
.cb-pre {
  background: #0d0d10;
  margin: 0;
  padding: var(--sp-5);
  overflow-x: auto;
  display: flex;
  scrollbar-width: thin;
  scrollbar-color: #282836 transparent;
}

.cb-pre::-webkit-scrollbar       { height: 5px; }
.cb-pre::-webkit-scrollbar-track  { background: transparent; }
.cb-pre::-webkit-scrollbar-thumb  { background: #282836; border-radius: 2px; }

.cb-pre code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: #c8c8d4;
  white-space: pre;
  display: block;
  flex: 1;
}

/* ── Line number gutter ──────────────────────────────────────────── */
.cb-gutter {
  color: #2a2a3c;
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
  padding: 0 var(--sp-3) 0 var(--sp-5);
  border-right: 1px solid #1c1c28;
  margin-right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  white-space: pre;
  min-width: 28px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Pair wrapper: request + response as one unit ────────────────── */
.cb-pair {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid #1e1e27;
}

.cb-pair > .cb {
  border: none;
  border-radius: 0;
}

.cb-pair > .cb + .cb {
  border-top: 1px solid #14141c;
}

/* ── Hero code specimen ──────────────────────────────────────────── */
.cb-hero {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 16px 64px rgba(0,0,0,.6),
    0 4px 20px rgba(0,0,0,.4);
}

/* ── Hero split layout ───────────────────────────────────────────── */
.lp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.lp-hero-left { text-align: left; }

.lp-hero-left .lp-hero-sub {
  margin: 0 0 var(--sp-7);
  max-width: 44ch;
}

.lp-hero-left .lp-hero-actions {
  justify-content: flex-start;
  margin-bottom: var(--sp-5);
}

.lp-hero-left .lp-trust { justify-content: flex-start; }

/* ── Responsive: hero + cb ───────────────────────────────────────── */
@media (max-width: 960px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .lp-hero-right { display: none; }
}

@media (max-width: 760px) {
  .cb-pre code { font-size: 11.5px; }
  .cb-gutter    { font-size: 11.5px; }
}

/* ── Trust band ─────────────────────────────────────────────────── */
.lp-trust-band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}

.lp-tb-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
}

.lp-tb-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: 100px;
  padding: 5px var(--sp-4);
  white-space: nowrap;
  background: var(--dark);
  letter-spacing: 0.01em;
}

.lp-tb-pill svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Bento feature grid ─────────────────────────────────────────── */
.lp-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}

.lp-bento-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lp-bento-left {
  /* This is the large hero tile — taller, more content */
}

.lp-bento-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lp-bento-right .lp-bento-tile {
  flex: 1;
}

.lp-bento-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.lp-bento-left .lp-bento-title {
  font-size: var(--text-2xl);
}

.lp-bento-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 52ch;
}

.lp-bento-body-sm {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.lp-bento-standards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
}

.lp-bento-std {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: 4px;
  padding: 3px 8px;
  background: var(--dark);
  letter-spacing: 0.02em;
}

/* Mini code block inside bento tile */
.lp-bento-mini-code {
  border: 1px solid #1e1e27;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0d0d10;
  margin-top: auto;
}

.lp-bmc-bar {
  background: #16161a;
  border-bottom: 1px solid #0d0d12;
  padding: 0 var(--sp-3);
  height: 30px;
  display: flex;
  align-items: center;
}

.lp-bmc-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #5c5c80;
}

.lp-bmc-pre {
  margin: 0;
  padding: var(--sp-4) var(--sp-4);
  background: #0d0d10;
  overflow-x: auto;
}

.lp-bmc-pre code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #c8c8d4;
  white-space: pre;
}

/* eID chips inside bento tile */
.lp-bento-eids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}

.lp-bento-eid {
  font-size: 11.5px;
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  padding: 4px 10px;
  background: var(--dark);
  font-family: var(--font-mono);
}

/* ── Audit trail specimen (dark section) ────────────────────────── */
.lp-section-dark {
  background: var(--dark);
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
}

.lp-title-light { color: var(--dark-text-strong); }
.lp-sub-light   { color: var(--dark-text); }

.lp-audit-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.lp-audit-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp-audit-facts {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-audit-facts li {
  font-size: 13.5px;
  color: var(--dark-text);
  padding-left: var(--sp-5);
  position: relative;
  line-height: 1.5;
}

.lp-audit-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dark-text);
  opacity: 0.5;
}

/* Audit trail specimen card */
.lp-audit-specimen {
  display: flex;
  justify-content: center;
}

.lp-at-card {
  width: 100%;
  max-width: 420px;
  background: #0a0a0d;
  border: 1px solid #1e1e27;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}

.lp-at-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid #141420;
  background: #0d0d12;
}

.lp-at-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #46465a;
}

.lp-at-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #4ade80;
  background: rgba(74,222,128,.07);
  border: 1px solid rgba(74,222,128,.14);
  border-radius: 100px;
  padding: 2px 9px;
  letter-spacing: 0.03em;
}

.lp-at-rows {
  padding: var(--sp-2) 0;
}

.lp-at-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px var(--sp-5);
  gap: var(--sp-4);
  border-bottom: 1px solid #0f0f18;
}

.lp-at-row:last-child { border-bottom: none; }

.lp-at-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6464a0;
  flex-shrink: 0;
  white-space: nowrap;
}

.lp-at-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #c8c8d4;
  text-align: right;
  word-break: break-all;
}

.lp-at-green { color: #4ade80; }
.lp-at-dim   { color: #585870; }
.lp-at-hash  { color: #7878ec; font-size: 10.5px; }

.lp-at-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid #141420;
  background: #0d0d12;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #4ade80;
  opacity: 0.8;
}

/* ── Responsive: bento + audit ──────────────────────────────────── */
@media (max-width: 900px) {
  .lp-bento {
    grid-template-columns: 1fr;
  }

  .lp-bento-right {
    flex-direction: row;
  }

  .lp-audit-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}

@media (max-width: 640px) {
  .lp-bento-right {
    flex-direction: column;
  }

  .lp-bento-left .lp-bento-title {
    font-size: var(--text-xl);
  }
}

/* ====================================================================
   Motion — hover lifts, scroll-reveal
   Applies only when the OS/browser allows motion.
   All animation is transform + opacity only.
   ==================================================================== */

/* Hard reset for users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Button hover lifts ─────────────────────────────────────────── */
  .btn {
    transition: background .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease, box-shadow .15s ease;
  }

  .btn:hover:not([disabled]):not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }

  .btn:active:not([disabled]):not(:disabled) {
    transform: scale(.99) translateY(0);
  }

  .lp-btn-outline-light {
    transition: background .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease, box-shadow .15s ease;
  }

  .lp-btn-outline-light:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }

  .lp-btn-hero {
    transition: background .15s ease, border-color .15s ease,
                transform .15s ease, box-shadow .15s ease;
  }

  .lp-btn-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
  }

  .lp-btn-cta {
    transition: background .15s ease, border-color .15s ease,
                transform .15s ease, box-shadow .15s ease;
  }

  .lp-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 14px rgba(0,0,0,.3);
  }

  /* ── Card / tile hover ──────────────────────────────────────────── */
  .lp-bento-tile {
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  .lp-bento-tile:hover {
    border-color: var(--gray-4);
    box-shadow: var(--shadow-float);
  }

  .lp-tier {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  .lp-tier:hover {
    border-color: var(--gray-5);
    box-shadow: var(--shadow-float);
    transform: translateY(-2px);
  }

  .lp-tier-featured:hover {
    border-color: var(--accent);
  }

  .lp-at-card {
    transition: box-shadow .2s ease;
  }

  .lp-at-card:hover {
    box-shadow: 0 12px 48px rgba(0,0,0,.65), 0 3px 12px rgba(0,0,0,.35);
  }

  /* ── Nav link ───────────────────────────────────────────────────── */
  .lp-nav-link {
    transition: color .15s ease;
  }

  /* ── Docs TOC links ─────────────────────────────────────────────── */
  .docs-toc-link {
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }

  /* ── Scroll-reveal ──────────────────────────────────────────────── */
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s ease;
  }

  [data-reveal].revealed {
    opacity: 1;
    transform: none;
  }

}

/* ====================================================================
   Docs layout polish
   ==================================================================== */

/* Cap the prose column — tables and code blocks still scroll internally */
.docs-content {
  max-width: 760px;
}

/* Sidebar width bump + cleaner border separation */
.docs-sidebar {
  width: 220px;
}

/* Active link — use a subtle tinted background instead of just border */
.docs-toc-link.active {
  color: var(--text);
  border-left-color: var(--link);
  background: rgba(37, 99, 235, 0.05);
  font-weight: 500;
}

/* TOC group section label — secondary label within the TOC */
.docs-toc-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--sp-4) var(--sp-2) var(--sp-1);
  display: block;
}

/* First label has no top padding */
.docs-toc-group-label:first-child {
  padding-top: 0;
}

/* Thin separator line between TOC groups */
.docs-toc-sep {
  height: 1px;
  background: var(--border);
  margin: var(--sp-2) 0;
}

/* h2 sections get more breathing room */
.docs-h2 {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
}

/* Endpoint badge row: ensure it doesn't overflow on narrow content */
.docs-endpoint {
  flex-wrap: wrap;
}

/* Responsive: hide TOC separators and labels when pills mode */
@media (max-width: 900px) {
  .docs-toc-sep       { display: none; }
  .docs-toc-group-label { display: none; }
}