@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/space-grotesk/space-grotesk-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --bg: #f5f4fb;
  --surface: #ffffff;
  --surface-sunken: #faf9fd;
  --border: #e5e2f0;
  --border-strong: #cdc6e6;
  --text: #16152b;
  --muted: #666284;
  --muted-2: #9a95b8;
  --primary: #4f3ce0;
  --primary-dark: #372aa8;
  --primary-soft: #efeafc;
  --accent: #ff5c39;
  --accent-dark: #e0431f;
  --accent-soft: #ffe6dd;
  --ink: #0c0a1f;
  --ink-2: #16132f;
  --on-ink: #f6f4ff;
  --on-ink-muted: #ada6d6;
  --danger: #c0362c;
  --danger-soft: #fbeceb;
  --success: #157347;
  --success-soft: #e7f6ee;
  --warning: #93650a;
  --warning-soft: #fdf3df;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 16, 45, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 16, 45, 0.08), 0 1px 3px rgba(20, 16, 45, 0.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------- Brand mark (shared by sidebar + public header + login) ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  font-family: inherit;
}
.link-btn:hover { color: var(--text); text-decoration: underline; }
.link-btn.danger-text { color: var(--danger); }
.link-btn.danger-text:hover { color: var(--danger); text-decoration: underline; }
.link-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- App shell (sidebar layout, admin pages) ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 20;
  transition: width 0.15s ease;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 14px 16px 18px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
}
.sidebar-brand:hover { text-decoration: none; }

.sidebar-toggle {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.sidebar-toggle:hover { background: var(--surface-sunken); color: var(--text); }
.sidebar-toggle svg { width: 14px; height: 14px; transition: transform 0.15s ease; }

.sidebar-nav {
  flex: 1;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-nav a:hover { color: var(--text); background: var(--surface-sunken); text-decoration: none; }
.sidebar-nav a.active { color: var(--primary); background: var(--primary-soft); font-weight: 600; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  flex-shrink: 0;
}
.user-meta { min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: 248px;
  transition: margin-left 0.15s ease;
}

/* ---------- Admin portal (visually distinct dark sidebar — this is a
   different, more privileged area than the regular customer app) ---------- */

.sidebar-admin {
  background: var(--ink);
  border-right-color: var(--ink-2);
}
.sidebar-admin .sidebar-brand,
.sidebar-admin .user-name { color: var(--on-ink); }
.sidebar-admin .user-email { color: var(--on-ink-muted); }
.sidebar-admin .sidebar-toggle { border-color: rgba(246, 244, 255, 0.2); color: var(--on-ink-muted); }
.sidebar-admin .sidebar-toggle:hover { background: rgba(246, 244, 255, 0.08); color: var(--on-ink); }
.sidebar-admin .sidebar-nav a { color: var(--on-ink-muted); }
.sidebar-admin .sidebar-nav a:hover { color: var(--on-ink); background: rgba(246, 244, 255, 0.08); }
.sidebar-admin .sidebar-nav a.active { color: #fff; background: var(--primary); }
.sidebar-admin .sidebar-footer { border-top-color: var(--ink-2); }
.sidebar-admin .link-btn { color: var(--on-ink-muted); }
.sidebar-admin .link-btn:hover { color: var(--on-ink); }
.brand-mark-admin { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.user-avatar-admin { background: rgba(255, 92, 57, 0.18); color: var(--accent); }
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-bottom: 1px solid var(--accent);
  padding: 10px 24px;
  font-size: 13.5px;
  font-weight: 600;
}
.impersonation-banner span { display: flex; align-items: center; gap: 8px; }
.impersonation-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.impersonation-banner .link-btn { color: var(--accent-dark); font-weight: 700; text-decoration: underline; }
.impersonation-banner .link-btn:hover { color: var(--accent-dark); }
.admin-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* ---------- Public (unauthenticated) header ---------- */

.topbar-public {
  display: flex;
  align-items: center;
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

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

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.container.narrow { max-width: 460px; }
.container.wide { max-width: 1320px; }
.container.prose { max-width: 760px; }
.container.prose h2 { margin-top: 36px; }
.container.prose h3 { margin-top: 24px; }
.container.prose ul, .container.prose ol { padding-left: 22px; }
.container.prose li { margin-bottom: 6px; }
.container.prose .legal-updated { color: var(--muted); font-size: 13.5px; margin-top: -8px; }

/* ---------- Sidebar collapse (desktop only — mobile has its own compact
   horizontal layout below and shouldn't be affected by this state) ---------- */

@media (min-width: 861px) {
  html.sidebar-collapsed .sidebar { width: 72px; }
  html.sidebar-collapsed .main-content { margin-left: 72px; }
  html.sidebar-collapsed .sidebar-label { display: none; }

  html.sidebar-collapsed .sidebar-brand-row { justify-content: center; padding: 18px 8px 16px; }
  html.sidebar-collapsed .sidebar-brand { gap: 0; }
  html.sidebar-collapsed .sidebar-toggle { position: absolute; top: 60px; right: -13px; background: var(--surface); box-shadow: var(--shadow-sm); }
  html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

  html.sidebar-collapsed .sidebar-nav { padding: 4px 12px; }
  html.sidebar-collapsed .sidebar-nav a { justify-content: center; padding: 10px; }

  html.sidebar-collapsed .sidebar-footer { align-items: center; }
  html.sidebar-collapsed .sidebar-user { justify-content: center; }
  html.sidebar-collapsed .sidebar-footer form { display: flex; justify-content: center; }
}

h1, h2, h3 { font-family: var(--font-display); }

h1 { font-size: 23px; margin: 0 0 22px; letter-spacing: -0.01em; font-weight: 700; }
h2 {
  font-size: 15px;
  margin: 0 0 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.page-header h1 { margin: 0; }

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 20px;
}

.card-sm { max-width: 480px; }
.card-md { max-width: 600px; }
.danger-zone { border-color: var(--danger-soft); background: var(--danger-soft); }
.danger-zone h2 { color: var(--danger); }

/* ---------- Onboarding ---------- */

.onboard-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.onboard-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onboard-card h2 { margin-bottom: 6px; }
.onboard-card p { margin: 0 0 14px; max-width: 46em; }

/* ---------- Dashboard stats ---------- */

.grid-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat .icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary);
}
.stat .icon svg { width: 18px; height: 18px; }
.stat .n { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat .label { color: var(--muted); font-size: 12.5px; }

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

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

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--border-strong);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-sunken); }

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.pending, .badge.archived { background: var(--surface-sunken); color: var(--muted); border: 1px solid var(--border); }
.badge.viewed { background: var(--warning-soft); color: var(--warning); }
.badge.signed { background: var(--success-soft); color: var(--success); }
.badge.revoked, .badge.expired { background: var(--danger-soft); color: var(--danger); }
.badge.active { background: var(--success-soft); color: var(--success); }
.badge.suspended { background: var(--danger-soft); color: var(--danger); }
.badge.plan-free { background: var(--surface-sunken); color: var(--muted); border: 1px solid var(--border); }
.badge.plan-business { background: var(--primary-soft); color: var(--primary); }
.badge.plan-enterprise { background: var(--accent-soft); color: var(--accent-dark); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease, box-shadow 0.12s ease;
}
/* Every icon used inline in a button was rendering at its unconstrained
   browser default (~50px) instead of a normal icon size, since no rule ever
   set an explicit width/height on it — that's what made buttons like
   "Create from scratch" balloon into tall squares with wrapped text instead
   of a normal pill. One rule fixes it for every button in the app, not just
   new ones. */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { background: var(--primary-dark); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: none; }
.btn.secondary:hover { background: var(--surface-sunken); border-color: var(--primary); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #9c2b23; }

.btn.btn-sm { padding: 6px 12px; font-size: 12.5px; gap: 6px; box-shadow: none; }
.btn.btn-sm svg { width: 14px; height: 14px; }

/* Row-level action buttons inside a table cell — small buttons instead of
   plain underlined links, wrapping cleanly if the cell gets narrow. */
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Table pagination (built by table-search.js, not hand-written) ---------- */
.table-pagination {
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.table-pagination-info { min-width: 90px; text-align: center; }

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

label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.field .hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input[readonly] { background: var(--surface-sunken); color: var(--muted); }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 3px;
  background: var(--surface-sunken);
  margin-bottom: 20px;
  gap: 2px;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  margin: 0;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.segmented input:checked + label { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

fieldset { border: none; padding: 0; margin: 0; }

/* ---------- Dropzone ---------- */

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
  color: var(--muted);
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dropzone svg { color: var(--muted-2); }
.dropzone.dragover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.dropzone.dragover svg { color: var(--primary); }
.dropzone .filename { font-weight: 600; color: var(--text); }
.dropzone .filename.filename-error { color: var(--danger); }

/* ---------- Notices ---------- */

.error-box, .notice-box, .warn-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.error-box { background: var(--danger-soft); color: var(--danger); }
.notice-box { background: var(--success-soft); color: var(--success); }
.warn-box { background: var(--warning-soft); color: var(--warning); }
.error-box svg, .notice-box svg, .warn-box svg { flex-shrink: 0; margin-top: 1px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.break-all { word-break: break-all; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Misc components ---------- */

.link-copy { display: flex; gap: 8px; align-items: center; }
.link-copy input {
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.mfa-secret-key {
  text-align: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.mfa-backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.mfa-backup-codes span { text-align: center; font-size: 14px; }

.pdf-frame {
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  background: #fff;
}

.sig-pad-wrap {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  margin-bottom: 8px;
  touch-action: none;
}
canvas#sigPad { display: block; width: 100%; height: 180px; cursor: crosshair; position: relative; z-index: 1; }
.sig-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 14px;
  pointer-events: none;
  text-align: center;
  padding: 8px;
}
.sig-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audit-list { font-size: 13px; list-style: none; margin: 0; padding: 0; }
.audit-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.audit-list li:last-child { border-bottom: none; }
.audit-list .event-name { font-weight: 600; text-transform: capitalize; }

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
}
.empty-state svg { color: var(--muted-2); margin-bottom: 8px; }

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

.definition-list { font-size: 14px; }
.definition-list dt { color: var(--muted); font-size: 12.5px; margin-top: 12px; }
.definition-list dt:first-child { margin-top: 0; }
.definition-list dd { margin: 2px 0 0; }

footer.legal { color: var(--muted-2); font-size: 12px; margin-top: 32px; text-align: center; }

/* ---------- Utility classes ----------
   Kept here rather than as inline style="" attributes so the strict
   style-src 'self' CSP (no 'unsafe-inline') doesn't silently drop them. */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none; }
.inline { display: inline; }

/* ---------- Modal (reusable — any page can add one) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 31, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  z-index: 100;
  overflow-y: auto;
}
/* Same specificity as .modal-overlay's own display:flex, so this must come
   after it in source order to actually win and hide the modal. */
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 480px;
  padding: 24px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h2 { margin: 0; }
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--text); background: var(--surface-sunken); }

/* ---------- Searchable table toolbar (reusable — any table can add one) ---------- */
.table-toolbar { margin-bottom: 14px; }
.table-search-wrap {
  position: relative;
  max-width: 320px;
}
.table-search-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted-2);
  pointer-events: none;
}
.table-search-input {
  width: 100%;
  padding: 8px 12px 8px 33px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.table-search-input:focus { outline: none; border-color: var(--primary); }
.table-no-match { text-align: center; padding: 18px !important; }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
}
.checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 3px 0 0;
}
.field-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0 16px; }

.text-center { text-align: center; }
.btn-block { width: 100%; justify-content: center; }

.login-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 auto 18px;
}
.login-mark.brand-mark-admin { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }

/* ---------- Responsive ---------- */

/* ---------- Field editor / field-driven signing ---------- */

.toolbox-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.toolbox-btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.pdf-pages { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pdf-page-wrap {
  position: relative;
  background: #fff;
  box-shadow: var(--shadow-md);
  line-height: 0;
}
.pdf-page-wrap canvas { display: block; width: 100%; height: auto; }
.pdf-page-number {
  position: absolute;
  bottom: -22px;
  left: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: normal;
}

/* ---------- Composer: document + right-hand field-settings sidebar ---------- */
.compose-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.compose-layout .doc-page-wrap, .compose-layout .pdf-pages { flex: 1; min-width: 0; }

.field-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field-sidebar-title { margin: 0; font-size: 15px; }
.field-sidebar-row { display: flex; flex-direction: column; gap: 6px; }
.field-sidebar-row label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field-sidebar-row input[type="text"] {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 13.5px;
  font-family: inherit;
}
.field-sidebar-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.field-sidebar-hint { margin: -4px 0 0; }

.field-sidebar-segmented {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.field-sidebar-segmented button {
  flex: 1;
  border: none;
  background: var(--surface);
  color: var(--muted);
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.field-sidebar-segmented button + button { border-left: 1px solid var(--border-strong); }
.field-sidebar-segmented button.active { background: var(--primary); color: #fff; }

.field-sidebar-delete { align-self: flex-start; }


/* Field overlays on the signing page itself (read/fill mode, not the editor) */
.sign-field {
  position: absolute;
  display: flex;
}
.sign-field input[type="text"], .sign-field input[type="date"] {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 2px 4px;
  font-size: 13px;
  border: 1.5px solid var(--primary);
  border-radius: 3px;
  background: var(--primary-soft);
  font-family: inherit;
  color: var(--text);
}
.sign-field input[type="text"]:invalid, .sign-field input[type="date"]:invalid { border-color: var(--danger); }
.sign-field .sign-field-canvas-wrap {
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--primary);
  border-radius: 3px;
  background: var(--primary-soft);
  position: relative;
  touch-action: none;
}
.sign-field canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.sign-field .sign-field-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--muted-2);
  pointer-events: none;
  text-align: center;
  padding: 2px;
}
.sign-field-header {
  position: absolute;
  top: -20px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  background: var(--surface);
  padding: 1px 3px;
  border-radius: 3px;
  z-index: 2;
}
.sign-field-tool-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}
.sign-field-tool-btn:hover { color: var(--primary); }

/* Sender-filled fields the recipient can't edit — deliberately NOT styled
   like an app widget (no box, no border, no UI font): these values should
   read as if they were always part of the document, not something a piece
   of software dropped in afterward. Editable fields (.sign-field input
   above) keep their green box/background on purpose — those really are
   interactive controls and should look like it — but a locked value is
   never interactive, so nothing here should visually suggest it might be. */
.sign-field-locked-value {
  width: 100%;
  height: 100%;
  display: flex;
  /* Bottom, not center — the field is placed over a printed blank line, and
     that line sits at the bottom of the box, not its middle. Matches the
     same bottom-anchored placement stampField() uses in the final PDF
     (src/services/pdf.js), so what's previewed here doesn't shift once it's
     actually baked in. */
  align-items: flex-end;
  padding: 0 4px 1px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1;
  color: #1a1a1a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Opaque and matching the page underneath — not decorative, this covers
     whatever the document actually printed in this spot (almost always a
     run of underscores) so the value replaces it instead of both showing at
     once. White, not transparent: the pdf.js canvas behind this overlay is
     rendered content, not a real DOM element this box could "blend into"
     any other way. */
  background: #fff;
}
.sign-field-locked-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* A recipient ("Them") field shown on the sender's own fill-in screen
   (request_new.ejs, request_fill.ejs) — context only, never editable here,
   so unlike a locked value it deliberately looks like UI chrome (dashed,
   muted, labeled) rather than trying to blend into the document. */
.sign-field-recipient-ghost {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: 3px;
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  text-align: center;
  padding: 2px;
}

/* ---------- Template composer (in-browser document editor) ---------- */

.compose-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  position: sticky;
  top: 12px;
  z-index: 5;
  box-shadow: var(--shadow-sm);
}
.compose-toolbar .spacer { flex: 1; }
.compose-toolbar .tb-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  flex-shrink: 0;
}
.tb-btn svg { width: 17px; height: 17px; }
.tb-btn:hover { background: var(--surface-sunken); }
.tb-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.tb-btn.tb-bold { font-weight: 700; }
.tb-btn.tb-italic { font-style: italic; }
.tb-btn.tb-underline { text-decoration: underline; }

.tb-select {
  margin: 0;
  width: auto;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  flex-shrink: 0;
}

.doc-page-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
  overflow-x: auto;
}

.doc-page {
  position: relative;
  width: 816px;
  min-height: 1056px;
  flex-shrink: 0;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 96px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
  outline: none;
}
.doc-page:focus { box-shadow: var(--shadow-md), 0 0 0 3px var(--primary-soft); }
.doc-page h1 { font-size: 26px; margin: 0 0 16px; }
.doc-page h2 { font-size: 20px; margin: 24px 0 12px; display: block; }
.doc-page h3 { font-size: 16px; margin: 20px 0 10px; }
.doc-page p, .doc-page div { margin: 0 0 14px; }
.doc-page .align-left { text-align: left; }
.doc-page .align-center { text-align: center; }
.doc-page .align-right { text-align: right; }
.doc-page ul, .doc-page ol { margin: 0 0 14px; padding-left: 28px; }
.doc-page img { max-width: 100%; height: auto; }
.doc-page hr { border: none; border-top: 1px solid #999; margin: 20px 0; }
.doc-page .doc-columns { display: flex; gap: 24px; margin: 0 0 14px; }
.doc-page .doc-column { flex: 1; min-width: 0; margin-bottom: 0; }
.doc-page .doc-column p:last-child { margin-bottom: 0; }

/* An approximate guide to where the real PDF will paginate (see
   updatePageBreakMarkers in template-composer.js) — a plain dashed rule
   across the content width with a small floating label, deliberately
   unobtrusive since it's a rough estimate, not a promise. */
.page-break-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed #b91c1c;
  pointer-events: none;
}
.page-break-marker span {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #b91c1c;
  font-size: 10.5px;
  font-weight: 600;
  padding: 0 8px;
  white-space: nowrap;
}

/* Field markers dropped onto the composed document — deliberately blank (no
   "Signature"/"Text" wording baked in) so they don't duplicate whatever
   label the author already typed next to them. One consistent color for
   every field type (no more distinguishing signature/initials/text/date by
   color) — position and size are both set inline by JS as real px values,
   not by this stylesheet, so the field can be dragged anywhere on the page
   and resized freely instead of sitting fixed in the text flow. */
.field-chip {
  position: absolute;
  border-radius: 4px;
  cursor: move;
  user-select: none;
  border: 1.5px solid #0f8a5f;
  /* Barely-there tint — just enough to see the box's edges, not enough to
     hide the document's own printed blank underneath it. The old, much more
     opaque fill made it impossible to see whether a box actually lined up
     with the real underline/blank it was meant to cover until after
     sending a real document and finding out it didn't. */
  background: rgba(15, 138, 95, 0.05);
  box-shadow: var(--shadow-sm);
}
.field-chip.selected { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A live, realistic preview of how a filled-in value will actually sit in
   this spot — same serif font and same bottom-anchored position
   stampField() uses for the real thing (src/services/pdf.js) — so resizing/
   moving the box here is judged against what will actually render, not an
   empty rectangle. Falls back to a small centered type name when there's no
   placeholder text yet to preview (see .placeholder-hint), and always shows
   the type name for signature/initials, which don't render as text. */
.field-chip-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 4px 1px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.field-chip-preview.placeholder-hint {
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #0f8a5f;
  opacity: 0.7;
}

.field-chip-resize {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 11px;
  height: 11px;
  background: var(--primary);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    position: static;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .main-content { margin-left: 0; }
  .sidebar-brand-row { padding: 14px 16px 10px; }
  .sidebar-toggle { display: none; }
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 12px 12px;
    gap: 4px;
  }
  .sidebar-nav a { white-space: nowrap; }
  .sidebar-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
  }
}

@media (max-width: 640px) {
  .topbar-public { padding: 10px 16px; }
  .container { padding: 24px 16px 56px; }
  .card { padding: 18px; }
  table { min-width: 0; font-size: 13px; }
  th, td { padding: 9px 6px; }
}

/* ---------- Landing page ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.lp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.lp-btn:active { transform: translateY(0); }
.lp-btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -8px rgba(255, 92, 57, 0.65); }
.lp-btn-accent:hover { background: var(--accent-dark); }
.lp-btn-ghost { background: transparent; color: var(--on-ink); border-color: rgba(246, 244, 255, 0.28); }
.lp-btn-ghost:hover { background: rgba(246, 244, 255, 0.08); border-color: rgba(246, 244, 255, 0.5); }
.lp-btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ----- Nav ----- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.lp-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lp-nav .brand { font-family: var(--font-display); font-size: 17px; }
.lp-nav-links { display: flex; gap: 28px; }
.lp-nav-links a { color: var(--muted); font-weight: 600; font-size: 14px; position: relative; }
.lp-nav-links a:hover { color: var(--text); text-decoration: none; }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ----- Hero (dark) ----- */

.lp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 420px at 12% -10%, rgba(79, 60, 224, 0.55), transparent 60%),
    radial-gradient(600px 460px at 100% 10%, rgba(255, 92, 57, 0.28), transparent 55%),
    var(--ink);
  padding: 84px 32px 76px;
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(246, 244, 255, 0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 40%, transparent 100%);
  pointer-events: none;
}
.lp-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(246, 244, 255, 0.08);
  border: 1px solid rgba(246, 244, 255, 0.18);
  color: var(--on-ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.lp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.lp-hero h1 {
  font-family: var(--font-display);
  color: var(--on-ink);
  font-size: 50px;
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.lp-accent-text { color: var(--accent); }
.lp-hero-sub { font-size: 17.5px; color: var(--on-ink-muted); line-height: 1.65; margin: 0 0 30px; max-width: 480px; }
.lp-hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.lp-trust-row { display: flex; flex-wrap: wrap; gap: 18px 26px; padding: 0; margin: 0; list-style: none; }
.lp-trust-row li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--on-ink-muted); }
.lp-trust-row svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* ----- Hero illustration (pure CSS/SVG "document" mockup) ----- */

.lp-hero-visual { position: relative; height: 380px; }
.lp-doc-card {
  position: absolute;
  width: 300px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  padding: 22px;
}
.lp-doc-card.back {
  top: 18px;
  left: 48px;
  transform: rotate(-6deg);
  opacity: 0.6;
  filter: saturate(0.7);
}
.lp-doc-card.front { top: 46px; left: 6px; transform: rotate(3deg); z-index: 2; }
.lp-doc-line { height: 8px; border-radius: 4px; background: var(--border); margin-bottom: 10px; }
.lp-doc-line.w-70 { width: 70%; }
.lp-doc-line.w-90 { width: 90%; }
.lp-doc-line.w-50 { width: 50%; }
.lp-doc-sig {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
}
.lp-doc-sig svg { width: 110px; height: 40px; color: var(--primary); }
.lp-doc-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(21, 115, 71, 0.6);
}
.lp-doc-badge svg { width: 16px; height: 16px; }
.lp-float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px 8px 8px;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  z-index: 3;
}
.lp-float-chip .ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-float-chip .ic svg { width: 13px; height: 13px; }
.lp-float-chip.c1 { top: 8px; right: 12px; }
.lp-float-chip.c2 { bottom: 30px; left: -6px; }

/* ----- Trust bar ----- */

.lp-trust-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 20px 32px; }
.lp-trust-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 40px;
}
.lp-trust-bar-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.lp-trust-bar-item svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }

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

.lp-section { padding: 88px 32px; }
.lp-section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-section-inner { max-width: 1100px; margin: 0 auto; }
.lp-section-eyebrow {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.lp-section-title { font-family: var(--font-display); font-size: 34px; font-weight: 700; text-align: center; margin: 0 0 14px; letter-spacing: -0.01em; }
.lp-section-sub { font-size: 16.5px; color: var(--muted); text-align: center; margin: 0 auto 52px; max-width: 560px; line-height: 1.6; }

/* ----- Features ----- */

.lp-feature-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.lp-feature-hero {
  background: linear-gradient(160deg, var(--primary-soft), var(--surface) 75%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
}
.lp-feature-hero .lp-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.lp-feature-hero .lp-feature-icon svg { width: 24px; height: 24px; }
.lp-feature-hero h3 { font-family: var(--font-display); font-size: 19px; margin: 4px 0 10px; }
.lp-feature-hero p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0; max-width: 34em; }

.lp-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.lp-feature-icon svg { width: 19px; height: 19px; }
.lp-feature-card:nth-child(2) .lp-feature-icon,
.lp-feature-grid > :nth-child(2) .lp-feature-icon { background: var(--accent-soft); color: var(--accent-dark); }
.lp-feature-grid > :nth-child(3) .lp-feature-icon { background: var(--success-soft); color: var(--success); }
.lp-feature-card h3 { font-size: 15px; margin: 0 0 7px; }
.lp-feature-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ----- How it works ----- */

.lp-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.lp-steps::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 16.5%;
  right: 16.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
}
.lp-step { position: relative; text-align: center; }
.lp-step-num {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 auto 18px;
  box-shadow: 0 0 0 6px var(--bg);
}
.lp-step h3 { font-size: 16px; margin: 0 0 8px; }
.lp-step p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; max-width: 260px; margin-inline: auto; }

/* ----- CTA band (dark) ----- */

.lp-cta-band {
  background: linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
  padding: 64px 32px;
  text-align: center;
}
.lp-cta-band h2 { font-family: var(--font-display); color: var(--on-ink); font-size: 30px; margin: 0 0 14px; font-weight: 700; }
.lp-cta-band p { color: var(--on-ink-muted); font-size: 16px; margin: 0 0 30px; }

/* ----- Pricing ----- */

.lp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.lp-price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}
.lp-price-card.featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--primary-soft);
  transform: scale(1.03);
}
.lp-price-card.dark {
  background: var(--ink);
  border-color: var(--ink-2);
}
.lp-price-card.dark, .lp-price-card.dark .lp-price-desc { color: var(--on-ink-muted); }
.lp-price-card.dark .lp-price-name, .lp-price-card.dark .lp-price-amount { color: var(--on-ink); }
.lp-price-card.dark .lp-price-features li { color: var(--on-ink); }
.lp-price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-price-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.lp-price-amount { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; }
.lp-price-amount.lp-price-text { font-size: 26px; }
.lp-price-amount .lp-price-period { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--muted); }
.lp-price-desc { font-size: 13.5px; color: var(--muted); margin: 8px 0 22px; }
.lp-price-features { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.lp-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
  padding: 7px 0;
}
.lp-price-features li svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.lp-price-features li.unavailable { color: var(--muted-2); }
.lp-price-features li.unavailable svg { color: var(--muted-2); }
.lp-price-card.dark .lp-price-features li.unavailable { color: #6b678f; }

/* ----- FAQ (native accordion, zero JS) ----- */

.lp-faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.lp-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 20px;
}
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--muted); transition: transform 0.15s ease; }
.lp-faq-item[open] .lp-faq-chevron { transform: rotate(45deg); color: var(--primary); }
.lp-faq-item p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }

/* ----- Contact ----- */

.lp-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.lp-align-left { text-align: left; }
.lp-contact-info h2 { text-align: left; font-size: 30px; margin-bottom: 14px; }
.lp-contact-info p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin: 0 0 22px; max-width: 34em; }
.lp-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.lp-contact-email svg { width: 18px; height: 18px; color: var(--primary); }
.lp-signup-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; }

/* ----- Footer ----- */

.lp-footer { background: var(--ink); padding: 56px 32px 28px; }
.lp-footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(246, 244, 255, 0.12);
}
.lp-footer .brand { font-family: var(--font-display); color: var(--on-ink); font-size: 17px; }
.lp-footer-tagline { color: var(--on-ink-muted); font-size: 14px; margin: 14px 0 0; max-width: 30em; line-height: 1.6; }
.lp-footer-col h4 { color: var(--on-ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; }
.lp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-footer-col a { color: var(--on-ink-muted); font-size: 14px; }
.lp-footer-col a:hover { color: var(--on-ink); text-decoration: none; }
.lp-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 22px;
  color: var(--on-ink-muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-visual { height: 300px; order: -1; }
  .lp-feature-hero-grid, .lp-feature-grid { grid-template-columns: 1fr 1fr; }
  .lp-contact-grid { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .lp-nav-links { display: none; }
  .lp-hero { padding: 56px 20px 48px; }
  .lp-hero h1 { font-size: 34px; }
  .lp-hero-sub { font-size: 16px; }
  .lp-section { padding: 56px 20px; }
  .lp-section-title { font-size: 25px; }
  .lp-feature-hero-grid, .lp-feature-grid { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; gap: 28px; }
  .lp-steps::before { display: none; }
  .lp-price-card.featured { order: -1; transform: none; }
  .lp-footer-grid { grid-template-columns: 1fr; }
}