/*
 * CyberSygn. Design system.
 *
 * Modern editorial. Paper-and-ink palette in light mode, warm graphite
 * in dark mode. Transitional serif display, geometric sans body, mono
 * for technical labels. One accent color, used sparingly.
 *
 * Color scheme follows the user's operating system preference
 * automatically via prefers-color-scheme. There is no manual toggle.
 *
 * Used by every page: marketing (/), preview (/preview/), dashboard
 * (/dashboard/), and the invite acceptance page.
 */

/* ========================================================================
   1. TOKENS. LIGHT MODE (default).
   ======================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg:           #F7F8FB;
  --bg-2:         #EFF1F6;
  --bg-3:         #E4E7EE;
  --surface:      #FFFFFF;
  --surface-2:    #F7F8FB;

  /* Type. Navy (#011434) comes from the new CYBERSYGN logo. Slightly
     more saturated than the previous near-black so the lockup and
     body text live in the same color family. */
  --text:         #011434;
  --text-2:       #3A4258;
  /* --text-3 was #7079A0 which hit ~4.3:1 against --bg, passing WCAG AA
     for large text only. Tightened to #4F5874 (~7.2:1) so captions, hints,
     and tertiary labels read cleanly. */
  --text-3:       #4F5874;
  --text-on-dark: #F7F8FB;

  /* Borders */
  --line:         rgba(1, 20, 52, 0.08);
  --line-2:       rgba(1, 20, 52, 0.14);
  --line-strong:  rgba(1, 20, 52, 0.28);

  /* Accent: electric cyan from the new logo's lightning accents. The
     darker --accent-text is for foreground text on light surfaces
     where the bright cyan would fail WCAG contrast. */
  --accent:       #00CBF6;
  --accent-soft:  rgba(0, 203, 246, 0.10);
  --accent-line:  rgba(0, 203, 246, 0.32);
  --accent-text:  #007496;
  --accent-glow:  rgba(0, 203, 246, 0.36);

  /* Secondary accent: magenta-violet for highlights and second-tier emphasis */
  --accent-2:     #B644E6;
  --accent-2-soft: rgba(182, 68, 230, 0.10);

  /* Status */
  --ok:           #1E8A5F;
  --ok-soft:      rgba(30, 138, 95, 0.10);
  --warn:         #C9831D;
  --warn-soft:    rgba(201, 131, 29, 0.12);
  --danger:       #D63B47;
  --danger-soft:  rgba(214, 59, 71, 0.12);

  /* Field colors for preview app */
  --field-sig:    var(--accent);
  --field-date:   var(--ok);
  --field-init:   var(--warn);
  --field-check:  var(--text-2);

  /* Shadows */
  --shadow-card:  0 1px 2px rgba(10, 14, 26, 0.04),
                  0 8px 24px -12px rgba(10, 14, 26, 0.10);
  --shadow-pop:   0 1px 2px rgba(10, 14, 26, 0.06),
                  0 24px 48px -16px rgba(10, 14, 26, 0.18);
  --shadow-doc:   0 1px 2px rgba(10, 14, 26, 0.04),
                  0 20px 50px -24px rgba(10, 14, 26, 0.22);
  --shadow-glow:  0 0 0 1px var(--accent-line),
                  0 4px 24px -4px var(--accent-glow);

  /* Type: drop the serif. Modern brand uses Inter for display + body
     with tighter tracking, JetBrains Mono for technical labels. */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-d1: clamp(40px, 5.6vw, 76px);
  --t-d2: clamp(32px, 3.6vw, 52px);
  --t-d3: clamp(22px, 2vw, 30px);
  --t-d4: 20px;
  --t-l:  18px;
  --t:    16px;
  --t-s:  14px;
  --t-sm: 14px;
  --t-xs: 12px;
  --t-m:  11px;

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

  /* Layout */
  --gutter:    clamp(20px, 4vw, 40px);
  --max-page:  1280px;
  --max-text:  640px;

  /* Radii */
  --r-sm: 4px; --r: 8px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ========================================================================
   2. DARK MODE. Native via prefers-color-scheme. No JS, no toggle.
   Honors the operating system setting automatically and updates live
   when the user changes their OS appearance.
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #011434;
    --bg-2:         #07193D;
    --bg-3:         #0C1F46;
    --surface:      #061838;
    --surface-2:    #0A1C40;

    --text:         #F0F3FA;
    --text-2:       #BFC6D9;
    /* --text-3 was #828AA3 = ~4.5:1 vs navy bg, borderline AA. Raised
       to #ACB2C8 (~7:1, WCAG AAA) so captions, hints, and tertiary
       labels stay readable in dark mode. */
    --text-3:       #ACB2C8;
    --text-on-dark: #011434;

    --line:         rgba(240, 243, 250, 0.08);
    --line-2:       rgba(240, 243, 250, 0.14);
    --line-strong:  rgba(240, 243, 250, 0.32);

    --accent:       #00CBF6;
    --accent-soft:  rgba(0, 203, 246, 0.14);
    --accent-line:  rgba(0, 203, 246, 0.36);
    --accent-text:  #6EDEFA;
    --accent-glow:  rgba(0, 203, 246, 0.42);

    --accent-2:     #C36BFF;
    --accent-2-soft: rgba(195, 107, 255, 0.14);

    --ok:           #46D097;
    --ok-soft:      rgba(70, 208, 151, 0.14);
    --warn:         #F4B850;
    --warn-soft:    rgba(244, 184, 80, 0.14);
    --danger:       #FF5D6D;
    --danger-soft:  rgba(255, 93, 109, 0.14);

    --shadow-card:  0 1px 2px rgba(0,0,0,0.36), 0 8px 24px -12px rgba(0,0,0,0.54);
    --shadow-pop:   0 1px 2px rgba(0,0,0,0.44), 0 24px 48px -16px rgba(0,0,0,0.64);
    --shadow-doc:   0 1px 2px rgba(0,0,0,0.40), 0 20px 50px -24px rgba(0,0,0,0.64);
    --shadow-glow:  0 0 0 1px var(--accent-line),
                    0 4px 32px -4px var(--accent-glow);
  }
}

/* color-scheme is set by <meta name="color-scheme" content="light dark"> on
   each HTML page, so the browser knows to honor the system preference for
   form controls and scrollbars natively. */

/* ========================================================================
   2b. FORCED THEMES (slice 95 — embed widget)
   Embeds set <html data-theme="dark|light"> via URL params. We re-apply
   the relevant variable block so the iframe matches the embedder's
   chrome regardless of the visitor's OS preference. data-theme="auto"
   (or absent) keeps prefers-color-scheme behavior.
   ======================================================================== */
:root[data-theme="dark"] {
  --bg:           #011434;
  --bg-2:         #07193D;
  --bg-3:         #0C1F46;
  --surface:      #061838;
  --surface-2:    #0A1C40;
  --text:         #F0F3FA;
  --text-2:       #BFC6D9;
  --text-3:       #ACB2C8;
  --text-on-dark: #011434;
  --line:         rgba(240, 243, 250, 0.08);
  --line-2:       rgba(240, 243, 250, 0.14);
  --line-strong:  rgba(240, 243, 250, 0.32);
  --accent-soft:  rgba(0, 203, 246, 0.14);
  --accent-line:  rgba(0, 203, 246, 0.36);
  --accent-text:  #6EDEFA;
  --accent-glow:  rgba(0, 203, 246, 0.42);
  --ok:           #46D097;
  --ok-soft:      rgba(70, 208, 151, 0.14);
  --warn:         #F4B850;
  --warn-soft:    rgba(244, 184, 80, 0.14);
}
/* Forced light: explicitly restore the default variables in case the OS
   preference is dark and a Studio embedder wants light to win. We re-
   declare via the same baseline values that :root sets in section 1. */
:root[data-theme="light"] {
  --bg:           #F7F8FB;
  --bg-2:         #EFF1F6;
  --surface:      #FFFFFF;
  --text:         #011434;
  --text-2:       #3A4258;
  --text-3:       #4F5874;
  --text-on-dark: #FFFFFF;
  --line:         rgba(1, 20, 52, 0.08);
  --line-2:       rgba(1, 20, 52, 0.14);
  --line-strong:  rgba(1, 20, 52, 0.28);
  --accent-soft:  rgba(0, 203, 246, 0.10);
  --accent-line:  rgba(0, 203, 246, 0.32);
  --accent-text:  #007496;
  --accent-glow:  rgba(0, 203, 246, 0.36);
  --ok:           #1E8A5F;
  --ok-soft:      rgba(30, 138, 95, 0.10);
  --warn:         #C9831D;
  --warn-soft:    rgba(201, 131, 29, 0.12);
}

/* ========================================================================
   3. RESET + BASE
   ======================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
iframe, video { max-width: 100%; }

input, select, textarea { font-size: 16px; }

a { color: inherit; text-decoration: none; transition: color 160ms var(--ease); }
a:hover { color: var(--accent-text); }

button { font: inherit; cursor: pointer; }

::selection { background: var(--accent-soft); color: var(--accent-text); }

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

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

/* ========================================================================
   4. LAYOUT
   ======================================================================== */

.container {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ========================================================================
   5. TYPOGRAPHY
   ======================================================================== */

.kicker {
  font-family: var(--mono);
  font-size: var(--t-m);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.kicker--muted { color: var(--text-3); }
.kicker--muted::before { background: var(--line-strong); }

.h-display {
  font-family: var(--display);
  font-size: var(--t-d1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--text);
  font-feature-settings: "kern", "ss01", "cv11";
  overflow-wrap: break-word;
}
.h-display em { font-style: normal; font-weight: 300; color: var(--text-2); letter-spacing: -0.04em; }
.h-display .dot { color: var(--accent); }
.h-display .accent { color: var(--accent); }

.h-section {
  font-family: var(--display);
  font-size: var(--t-d2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}
.h-section em { font-style: normal; font-weight: 300; color: var(--text-2); }

.h-sub {
  font-family: var(--display);
  font-size: var(--t-d3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--text);
}

.h-card {
  font-family: var(--display);
  font-size: var(--t-d4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--text);
}

.lede {
  font-size: var(--t-l);
  line-height: 1.55;
  color: var(--text-2);
  max-width: var(--max-text);
  margin: 0;
  overflow-wrap: anywhere;
}

.body-2  { color: var(--text-2); font-size: var(--t-s); line-height: 1.6; }
.caption { color: var(--text-3); font-size: var(--t-xs); line-height: 1.5; }

.mono-label {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

/* ========================================================================
   6. BUTTONS
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 20px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 160ms var(--ease),
              border-color 160ms var(--ease),
              color 160ms var(--ease),
              transform 80ms var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

@media (pointer: coarse) {
  .btn, .masthead__link--cta, .filter-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 640px) {
  .filter-chip { padding: 11px 16px; }
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root .btn--primary,
  :root .btn--primary:hover { color: #0A0E1A; }
}

.btn--ink {
  background: var(--text);
  color: var(--text-on-dark);
  border-color: var(--text);
}
.btn--ink:hover { background: var(--text-2); border-color: var(--text-2); color: var(--text-on-dark); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: var(--bg-2); border-color: var(--line-strong); color: var(--text); }

.btn--sm { padding: 8px 14px; font-size: var(--t-xs); border-radius: var(--r-sm); }
.btn--lg { padding: 16px 28px; font-size: var(--t); }
.btn--block { width: 100%; }

.btn-arrow { display: inline-block; transition: transform 200ms var(--ease-spring); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ========================================================================
   7. WORDMARK. CyberSygn lockup.
   The brand mark is the image lockup (S-mark + CYBERSYGN type), shipped
   in two color variants. The light-mode page uses the navy variant; the
   dark-mode page uses the white variant. CSS swaps between them via the
   prefers-color-scheme media query so the swap is automatic with the OS
   appearance setting.
   ======================================================================== */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  line-height: 0;       /* image is the only visual; no font baseline */
  height: 32px;         /* baseline target size; overridden on larger contexts */
  flex-shrink: 0;
}

.wordmark__img {
  display: block;
  height: 100%;
  width: auto;
  /* Path resolves relative to styles.css, so all four HTML pages
     (index, preview/index, dashboard/index, dashboard/join) load the
     same file regardless of their own depth. The dark-mode variant is
     swapped via the content overrides below. */
  content: url("./brand/lockup-navy@2x.png");
}

@media (prefers-color-scheme: dark) {
  :root .wordmark__img {
    content: url("./brand/lockup-white@2x.png");
  }
}

.wordmark:hover .wordmark__img {
  opacity: 0.86;
  transition: opacity 160ms var(--ease);
}

/* The page-context pill ("preview", "dashboard", "invitation") still
   renders as text alongside the image lockup. */
.wordmark__context {
  font-family: var(--mono);
  font-size: var(--t-m);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  line-height: 1;
  align-self: center;
  padding-block: 2px;
}
.wordmark__context::before {
  content: "// ";
  color: var(--accent);
  font-weight: 600;
  opacity: 0.6;
}

/* ========================================================================
   8. MASTHEAD
   ======================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
  gap: var(--s-4);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.masthead__link {
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.masthead__link:hover { color: var(--text); }
.masthead__link--cta {
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.masthead__link--cta:hover { border-color: var(--text); background: var(--text); color: var(--text-on-dark); }

@media (max-width: 640px) {
  .masthead__inner { flex-wrap: wrap; row-gap: var(--s-2); gap: var(--s-3); }
  .masthead__nav { flex-wrap: wrap; gap: var(--s-3); }
  .masthead__link { font-size: 13px; }
  .wordmark__context { display: none; }
  .masthead__link--cta { padding: 11px 16px; font-size: var(--t-s); white-space: nowrap; }
}

/* ========================================================================
   9. HERO
   ======================================================================== */

/* ============================================================================
   CINEMATIC HERO — Apple-style scroll-driven video background.
   The <video> plays scrubbed by scroll position over a full-bleed
   container. If no MP4 is present, the CSS/SVG placeholder fills the
   canvas with an animated detect-fields-on-PDF scene that conveys the
   same product story. See docs/HIGGSFIELD-VIDEO-PROMPTS.md for the
   real-video workflow.
   ============================================================================ */
.cinematic-hero {
  position: relative;
  width: 100%;
  /* Taller stage so the document occupies more of the frame and the
     end-of-loop highlights read clearly. */
  height: 85vh;
  min-height: 560px;
  max-height: 940px;
  overflow: hidden;
  background: var(--bg);
  /* Pull the cinematic up one pixel to sit under the masthead's
     bottom border so the seam disappears. */
  margin-top: -1px;
  /* Hero pulls up further so the cinematic bleeds into the hero copy
     instead of leaving a visible bottom border. */
  margin-bottom: calc(-1 * clamp(80px, 14vh, 160px));
}
.cinematic-hero__stage {
  position: absolute;
  inset: 0;
  display: grid;
}
.cinematic-hero__video,
.cinematic-hero__placeholder {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the bottom of the source video so the end-of-loop frame
     surfaces the document's highlighted signature row in the visible
     frame. Combined with the +15% taller .cinematic-hero this gives
     the document real presence at every viewport size without bars. */
  object-position: center bottom;
}
.cinematic-hero__video {
  opacity: 0;
  transition: opacity 1200ms var(--ease);
}
/* Once the video has ended, fade it out so the static last frame
   gives way to the logo overlay sitting on the placeholder. */
.cinematic-hero[data-video-ended="true"] .cinematic-hero__video {
  opacity: 0;
}
.cinematic-hero[data-video-ready="true"] .cinematic-hero__video {
  opacity: 1;
}
.cinematic-hero[data-video-ready="true"] .cinematic-hero__placeholder {
  opacity: 0;
  pointer-events: none;
}
.cinematic-hero__placeholder {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, #072554 50%, var(--bg) 100%);
  transition: opacity 800ms var(--ease);
}
.cinematic-hero__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cinematic-hero__paper {
  transform-origin: 800px 450px;
  animation: ciPaperFloat 12s ease-in-out infinite;
}
.cinematic-hero__field {
  opacity: 0;
  animation: ciFieldReveal 8s ease-in-out infinite;
}
.cinematic-hero__field[data-step="1"] { animation-delay: 1.0s; }
.cinematic-hero__field[data-step="2"] { animation-delay: 1.4s; }
.cinematic-hero__field[data-step="3"] { animation-delay: 1.8s; }
.cinematic-hero__field[data-step="4"] { animation-delay: 2.2s; }
.cinematic-hero__scan {
  opacity: 0;
  animation: ciScan 6s ease-in-out infinite;
}
/* ── PDF gallery (documents we handle) ───────────────────── */
.pdf-gallery {
  padding-block: var(--s-6);
}
.pdf-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
.pdf-tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.pdf-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(1, 20, 52, 0.30);
}
.pdf-tile__paper {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(1, 20, 52, 0.08);
  padding: 16px 14px;
  margin-bottom: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.pdf-tile__line {
  display: block;
  height: 4px;
  background: rgba(1, 20, 52, 0.18);
  border-radius: 2px;
}
.pdf-tile__line--90 { width: 90%; }
.pdf-tile__line--80 { width: 80%; }
.pdf-tile__line--70 { width: 70%; }
.pdf-tile__line--60 { width: 60%; }
.pdf-tile__sig {
  display: block;
  margin-top: auto;
  height: 14px;
  width: 60%;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 2px;
}
.pdf-tile__date {
  display: block;
  margin-top: 6px;
  height: 12px;
  width: 35%;
  border: 1px solid var(--ok);
  background: rgba(30, 138, 95, 0.10);
  border-radius: 2px;
}
.pdf-tile__init {
  display: block;
  margin-top: 6px;
  height: 12px;
  width: 18%;
  border: 1px solid var(--warn);
  background: rgba(201, 131, 29, 0.10);
  border-radius: 2px;
}
.pdf-tile__name {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.pdf-tile__sub {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  line-height: 1.5;
}
.pdf-gallery__cta {
  margin-top: var(--s-5);
  text-align: center;
}

/* ── DocuSign-tax calculator ─────────────────────────────── */
.calc {
  padding-block: var(--s-6);
}
.calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
@media (max-width: 720px) {
  .calc__grid { grid-template-columns: 1fr; }
}
.calc__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.calc__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc__field > span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.calc__field input {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--t);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.calc__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.calc__output {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.calc__row:nth-last-of-type(1) {
  border-bottom: 0;
}
.calc__row-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.calc__row-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.calc__row--accent .calc__row-label { color: var(--accent-text); }
.calc__row--accent .calc__row-num { color: var(--accent-text); }

@media (max-width: 480px) {
  .calc__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .calc__row-num { font-size: 24px; }
}

/* ── Founder widget ──────────────────────────────────────── */
.founder-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 150;
  font-family: var(--sans);
}
.founder-widget__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 203, 246, 0.35),
              0 2px 4px rgba(1, 20, 52, 0.20);
  transition: transform 200ms var(--ease);
}
.founder-widget__btn:hover {
  transform: scale(1.05);
}
.founder-widget__panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 64px -16px rgba(1, 20, 52, 0.45);
}
.founder-widget__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
}
.founder-widget__close:hover {
  background: var(--bg-2);
  color: var(--text);
}
.founder-widget__lede {
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.founder-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.founder-widget__email,
.founder-widget__msg {
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--text);
  resize: vertical;
}
.founder-widget__email:focus,
.founder-widget__msg:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.founder-widget__small {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  line-height: 1.5;
}
.founder-widget__done {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  background: var(--ok-soft);
  color: var(--ok);
  border-radius: var(--r);
  font-size: var(--t-sm);
  text-align: center;
}
@media (max-width: 640px) {
  .founder-widget { bottom: 12px; right: 12px; }
  body:has(.sticky-cta:not([hidden])) .founder-widget { bottom: 84px; }
}

/* ── Status page ─────────────────────────────────────────── */
.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.status-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.status-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-3);
}
.status-item.is-ok .status-item__dot { background: var(--ok); }
.status-item.is-down .status-item__dot { background: var(--warn); }
.status-item__label {
  font-family: var(--sans);
  font-size: var(--t);
  color: var(--text);
}
.status-item__state {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.status-item.is-ok .status-item__state { color: var(--ok); }
.status-item.is-down .status-item__state { color: var(--warn); }
.status-ok { color: var(--ok); }
.status-warn { color: var(--warn); }

/* ── Trust strip (above pricing) ─────────────────────────── */
.trust-strip {
  padding-block: var(--s-6);
}
.trust-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.trust-tile {
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.trust-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(1,20,52,0.30);
}
.trust-tile svg {
  width: 24px;
  height: 24px;
  color: var(--accent-text);
  margin-bottom: var(--s-2);
}
.trust-tile__title {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
}
.trust-tile__sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  line-height: 1.55;
}

/* ── Origin proof section ────────────────────────────────── */
.origin-proof__list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.origin-proof__item {
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.origin-proof__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.origin-proof__name {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.origin-proof__city {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.origin-proof__empty {
  padding: var(--s-5);
  background: var(--bg-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  text-align: center;
  color: var(--text-2);
  grid-column: 1 / -1;
}
.origin-proof__empty a { color: var(--accent-text); }

/* ── Press strip ─────────────────────────────────────────── */
.press-strip {
  padding-block: var(--s-5);
}
.press-strip__kicker { text-align: center; }
.press-grid {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4) var(--s-6);
}
.press-grid li {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  opacity: 0.7;
  transition: opacity 220ms var(--ease), color 220ms var(--ease);
}
.press-grid li:hover {
  opacity: 1;
  color: var(--text);
}

/* ── FAQ above pricing ───────────────────────────────────── */
.faq-pre__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
.faq-pre__item {
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 220ms var(--ease);
}
.faq-pre__item[open] {
  border-color: var(--accent-line);
}
.faq-pre__item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--t);
  color: var(--text);
}
.faq-pre__item summary::-webkit-details-marker { display: none; }
.faq-pre__item summary::marker { display: none; }
.faq-pre__item summary::after {
  content: "+";
  float: right;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--accent-text);
  transition: transform 220ms var(--ease);
}
.faq-pre__item[open] summary::after {
  content: "−";
}
.faq-pre__item p {
  margin: var(--s-3) 0 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.faq-pre__item a { color: var(--accent-text); }

/* ── Blog ─────────────────────────────────────────────────── */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.blog-card {
  padding: var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(1,20,52,0.30);
}
.blog-card h2 {
  margin: var(--s-2) 0 var(--s-3);
  letter-spacing: -0.015em;
}
.blog-card h2 a {
  color: var(--text);
  text-decoration: none;
}
.blog-card h2 a:hover { color: var(--accent-text); }
.blog-card p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.blog-post {
  max-width: 760px;
  padding: var(--s-7) 0 var(--s-8);
}
.blog-post__head {
  margin-bottom: var(--s-6);
}
.blog-post__head h1 {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--display);
  letter-spacing: -0.025em;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.05;
}
.blog-post__head .lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
}
.blog-post__body h2 {
  margin-top: var(--s-6);
  font-family: var(--display);
  letter-spacing: -0.015em;
  font-size: 28px;
  line-height: 1.2;
}
.blog-post__body h3 {
  margin-top: var(--s-5);
  font-size: 20px;
  letter-spacing: -0.01em;
}
.blog-post__body p,
.blog-post__body ul,
.blog-post__body ol {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}
.blog-post__body strong { color: var(--text); }
.blog-post__body a { color: var(--accent-text); }
.blog-post__body a:hover { text-decoration: underline; }
.blog-post__body blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--text-2);
  font-style: italic;
}
.blog-post__body pre {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.blog-post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-3) 0;
  font-size: var(--t-sm);
}
.blog-post__body th,
.blog-post__body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.blog-post__body th {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--bg-2);
}
.blog-post__foot {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--bg-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.blog-post__foot p { margin: 0 0 var(--s-2); color: var(--text-2); }
.blog-post__foot a { color: var(--accent-text); font-weight: 500; }

/* ── Founder card on /about/ ─────────────────────────────── */
.founder-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
}
.founder-card__photo svg {
  display: block;
  border-radius: 50%;
}
.founder-card__name {
  margin: var(--s-3) 0 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.founder-card__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.founder-card__contact {
  margin: var(--s-2) 0 0;
  font-family: var(--mono);
  font-size: 12px;
}
.founder-card__contact a { color: var(--accent-text); }

.prose p {
  margin: 0 0 var(--s-3);
  font-size: var(--t);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 720px;
}
.promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.promise-list li {
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--t);
  line-height: 1.6;
  color: var(--text-2);
}
.promise-list strong { color: var(--text); }

/* ── Billing-cycle toggle ─────────────────────────────────
   Pill toggle above the pricing grid. Annual carries a "save 20%" badge. */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 0 auto var(--s-3);
  font-family: var(--sans);
}
.billing-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.billing-toggle__opt:hover:not(.is-active) { color: var(--text); }
.billing-toggle__opt.is-active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(1,20,52,0.08);
}
.billing-toggle__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .billing-toggle__opt { padding: 6px 12px; font-size: 13px; }
}

/* Container has the toggle centered — wrap section__head accordingly. */
.section[id="pricing"] .section__head + .billing-toggle {
  display: flex;
  justify-content: center;
  width: fit-content;
}
/* Center the toggle in the section by giving it auto margins inside the container. */
#pricing .billing-toggle { margin-left: auto; margin-right: auto; display: inline-flex; }
#pricing > .container { text-align: center; }
#pricing > .container > .section__head { text-align: left; }
#pricing > .container > .pricing { text-align: left; }

/* Annual price footnote on each tier card. */
.tier__price-foot {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

/* ── Demo-first reassurance strip ─────────────────────────── */
.demo-first {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.demo-first svg {
  flex: 0 0 18px;
  color: var(--accent-text);
  margin-top: 1px;
}
.demo-first strong { color: var(--accent-text); }
@media (max-width: 640px) {
  .demo-first { text-align: left; }
}

/* ── Pricing restructure: value anchor, core ladder, founder deals ─── */
/* Value anchor: frames the flat price against the metered, per-seat norm. */
.price-anchor {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.price-anchor svg { flex: 0 0 18px; color: var(--accent-text); margin-top: 1px; }
.price-anchor strong { color: var(--text); }

/* Core ladder: three clean choices (Demo / Solo / Studio). */
.pricing.pricing--core { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) {
  .pricing.pricing--core { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Per-card reassurance under the Solo CTA (featured card is dark). */
.tier--featured .tier__reassure {
  margin-top: -2px;
  text-align: center;
  font-size: var(--t-xs);
  color: rgba(251, 248, 241, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root .tier--featured .tier__reassure { color: rgba(20, 20, 26, 0.72); }
}

/* Founding-deals band, set apart below the core ladder. */
.founder-deals { margin-top: var(--s-7); }
.founder-deals__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 var(--s-4);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.founder-deals__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}
.pricing.pricing--founder {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 620px) {
  .pricing.pricing--founder { grid-template-columns: 1fr; max-width: 460px; }
}
.tier--founder { background: var(--surface-2); }

/* ── Exit-intent modal ───────────────────────────────────── */
.exit-intent {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 240ms var(--ease);
  pointer-events: none;
}
.exit-intent.is-open { opacity: 1; pointer-events: auto; }
.exit-intent.is-closing { opacity: 0; }
.exit-intent__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 20, 52, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.exit-intent__card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  max-width: 460px;
  width: calc(100vw - var(--s-4));
  box-shadow: 0 32px 64px -16px rgba(1,20,52,0.45),
              0 4px 12px rgba(1,20,52,0.15);
  transform: translateY(16px) scale(0.98);
  transition: transform 280ms var(--ease);
}
.exit-intent.is-open .exit-intent__card {
  transform: translateY(0) scale(1);
}
.exit-intent__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 20px;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.exit-intent__close:hover {
  background: var(--bg-2);
  color: var(--text);
}
.exit-intent__title {
  margin: var(--s-2) 0 var(--s-2);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.exit-intent__lede {
  margin: 0 0 var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.exit-intent__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.exit-intent__input {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--text);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.exit-intent__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.exit-intent__small {
  margin: var(--s-3) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .exit-intent__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .exit-intent, .exit-intent__card { transition: none; }
}

.cinematic-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(1,20,52,0) 0%, rgba(1,20,52,0.14) 60%, rgba(1,20,52,0.48) 100%),
    /* Stronger bottom-to-bg gradient so the bottom of the cinematic
       fully dissolves into the hero text section underneath — no
       visible band, just a soft handoff. */
    linear-gradient(180deg, rgba(1,20,52,0) 55%, var(--bg) 92%);
  pointer-events: none;
}

/* CyberSygn logo overlay over the cinematic. JS drives the opacity from
   video.currentTime so the logo fades out at the start of every loop
   iteration and fades back in at the end — a soft brand bookend on each
   replay. Centered, scaled to read at any viewport. */
.cinematic-hero__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  opacity: 1;  /* JS will overwrite per-frame; this is the initial state */
  transition: opacity 80ms linear;
}
.cinematic-hero__logo img {
  width: clamp(180px, 28vw, 420px);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35));
}
@media (prefers-reduced-motion: reduce) {
  /* Hold the logo at full opacity rather than animating it on/off. */
  .cinematic-hero__logo { opacity: 1; }
}

/* Glassy haze: a frosted-glass sheen behind the logo, in front of the video.
   Lives between the video/placeholder (z 0) and the logo (z 2). It settles in
   instantly, holds for a beat, then fades out by ~1.4s — a touch faster than
   the logo's ~1.6s opening fade — leaving the crisp video behind. */
.cinematic-hero__haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  background:
    radial-gradient(48% 42% at 50% 46%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(214, 234, 255, 0.10) 48%,
      rgba(255, 255, 255, 0) 78%);
  animation: ci-haze-out 1.4s var(--ease) forwards;
  will-change: opacity;
}
@keyframes ci-haze-out {
  0%   { opacity: 0; }
  9%   { opacity: 1; }   /* settle in fast — reads as already present */
  40%  { opacity: 1; }   /* hold the frost a beat */
  100% { opacity: 0; }   /* fade away, a touch ahead of the logo */
}
@media (prefers-reduced-motion: reduce) {
  /* No opening flourish for reduced-motion users. */
  .cinematic-hero__haze { animation: none; opacity: 0; }
}

@keyframes ciPaperFloat {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-14px) rotate(0.4deg); }
}
@keyframes ciFieldReveal {
  0%, 6%   { opacity: 0; transform: translateY(4px); }
  14%, 70% { opacity: 1; transform: translateY(0); }
  78%, 100%{ opacity: 0; transform: translateY(-4px); }
}
@keyframes ciScan {
  0%, 8%   { opacity: 0; transform: translateY(0); }
  12%      { opacity: 0.7; }
  60%      { opacity: 0.7; transform: translateY(540px); }
  70%, 100%{ opacity: 0; transform: translateY(540px); }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero__paper,
  .cinematic-hero__field,
  .cinematic-hero__scan { animation: none; }
  .cinematic-hero__field { opacity: 1; }
}
@media (max-width: 640px) {
  .cinematic-hero { height: 50vh; min-height: 320px; }
}

.hero {
  /* Tighter top padding so the hero copy sits closer to the bottom
     of the cinematic — they should read as one composition, not two
     stacked sections. Bottom padding unchanged. */
  padding-block: clamp(20px, 4vh, 60px) clamp(48px, 8vh, 96px);
  position: relative;
  z-index: 1;  /* above the cinematic's negative-margin bleed */
}

/* ── Origin wall (web/origin/) ─────────────────────────
   Public grid of every Origin member. Card per member with
   number, optional name, optional city, join date. Empty
   state pitches the first spot. */
.origin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.origin-card {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  position: relative;
}
.origin-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(1,20,52,0.18);
}
.origin-card__num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: flex-start;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.origin-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.origin-card__name {
  margin: 0;
  font-family: var(--display, var(--sans));
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  word-break: break-word;
}
.origin-card__city {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.origin-card__date {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.origin-empty {
  text-align: center;
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, transparent, var(--accent-soft));
  margin-top: var(--s-4);
}
.origin-empty__kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  margin: 0 0 var(--s-2);
}
.origin-empty__title {
  margin: 0 0 var(--s-3);
}
.origin-empty__lede {
  margin: 0 auto var(--s-5);
  max-width: 480px;
  color: var(--text-2);
  line-height: 1.55;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

.hero__kicker { margin-bottom: var(--s-5); }
.hero__title  { margin-bottom: var(--s-5); }
.hero__lede   { margin-bottom: var(--s-6); max-width: 520px; }

.hero__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.hero__note-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

/* Demo doc */

.demo-doc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-doc);
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}

.demo-doc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 3px;
  background: var(--accent);
  border-radius: var(--r-lg) 0 0 0;
}

.demo-doc__filename {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.demo-doc__title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  color: var(--text);
}

.demo-doc__line {
  height: 5px;
  background: var(--bg-3);
  border-radius: 3px;
  margin-bottom: 7px;
}
.demo-doc__line--80 { width: 80%; }
.demo-doc__line--60 { width: 60%; }
.demo-doc__line--70 { width: 70%; }
.demo-doc__lines { margin-bottom: var(--s-4); }

.demo-field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: 18px;
}
.demo-field__label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  min-width: 56px;
}
.demo-field__box {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
  position: relative;
}
.demo-field__hl {
  position: absolute;
  inset: -10px -4px -8px -4px;
  border: 1.5px solid var(--field-sig);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  opacity: 0;
  animation: field-reveal 480ms var(--ease-spring) forwards;
}
.demo-field__tag {
  position: absolute;
  top: -14px;
  left: -1px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--field-sig);
  color: #fff;
  padding: 3px 6px;
  border-radius: 3px 3px 0 0;
}
@media (prefers-color-scheme: dark) {
  :root .demo-field__tag { color: #0A0E1A; }
}

.demo-field--date .demo-field__hl  { border-color: var(--field-date); background: var(--ok-soft); }
.demo-field--date .demo-field__tag { background: var(--field-date); }
.demo-field--init .demo-field__hl  { border-color: var(--field-init); background: var(--warn-soft); }
.demo-field--init .demo-field__tag { background: var(--field-init); }

.demo-field:nth-of-type(1) .demo-field__hl { animation-delay: 200ms; }
.demo-field:nth-of-type(2) .demo-field__hl { animation-delay: 380ms; }
.demo-field:nth-of-type(3) .demo-field__hl { animation-delay: 560ms; }
.demo-field:nth-of-type(4) .demo-field__hl { animation-delay: 740ms; }

@keyframes field-reveal {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Interactive hero demo loop --------------------------------------
   8-second cycle: scan → detect → sign → "Signed" → reset. Replaces
   the one-time field-reveal on .demo-doc--live so the hero stays alive
   without a real user interacting. Respects prefers-reduced-motion.

   Phase timeline (8s total):
     0.0–0.5s   Clean. Filename and title only.
     0.5–1.6s   Scan line sweeps top-to-bottom.
     0.7–2.0s   Fields fade in one by one with the existing reveal.
     2.0–3.4s   Counter ticks 0 → 4 (handled by JS).
     3.4–4.6s   Signature ink draws inside the Landlord box.
     4.6–6.0s   "Signed" badge pops in.
     6.0–8.0s   Hold. Fade everything back to clean. Loop.
*/

.demo-doc--live .demo-field__hl {
  animation: demo-hl-cycle 8s var(--ease-spring) infinite both;
}
.demo-doc--live .demo-field:nth-of-type(1) .demo-field__hl { animation-delay: 0.70s; }
.demo-doc--live .demo-field:nth-of-type(2) .demo-field__hl { animation-delay: 0.95s; }
.demo-doc--live .demo-field:nth-of-type(3) .demo-field__hl { animation-delay: 1.20s; }
.demo-doc--live .demo-field:nth-of-type(4) .demo-field__hl { animation-delay: 1.45s; }
@keyframes demo-hl-cycle {
  0%, 4%      { opacity: 0; transform: scale(0.88); }   /* delay 0% / 4% = pre-cycle clean state */
  10%         { opacity: 1; transform: scale(1.04); }   /* pop */
  18%, 70%    { opacity: 1; transform: scale(1); }      /* held */
  78%, 100%   { opacity: 0; transform: scale(0.92); }   /* fade for next cycle */
}

/* Scan line: a thin cyan bar that drops from the top of the document
   during the detection phase. */
.demo-doc__scan {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 30%,
    var(--accent) 70%,
    transparent 100%);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: demo-scan 8s infinite linear;
}
@keyframes demo-scan {
  0%, 4%   { opacity: 0; transform: translateY(0); }
  6%       { opacity: 1; transform: translateY(0); }
  18%      { opacity: 1; transform: translateY(280px); }
  20%      { opacity: 0; transform: translateY(280px); }
  100%     { opacity: 0; transform: translateY(280px); }
}

/* Signature ink: SVG path drawn left-to-right inside the Landlord
   signature box. The stroke uses dasharray + dashoffset for the
   handwriting effect. */
.demo-field__ink {
  position: absolute;
  inset: -10px -4px -8px -4px;
  width: calc(100% + 8px);
  height: calc(100% + 18px);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.demo-field__ink path {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: demo-ink 8s infinite ease-out;
}
@keyframes demo-ink {
  0%, 40%    { stroke-dashoffset: 360; opacity: 0; }
  42%        { stroke-dashoffset: 360; opacity: 1; }
  60%        { stroke-dashoffset: 0; opacity: 1; }
  75%, 100%  { stroke-dashoffset: 0; opacity: 1; }
}
.demo-doc--live .demo-field:nth-of-type(1) .demo-field__ink {
  animation: demo-ink-visibility 8s infinite linear;
}
@keyframes demo-ink-visibility {
  0%, 40%    { opacity: 0; }
  42%, 75%   { opacity: 1; }
  78%, 100%  { opacity: 0; }
}

/* "Signed" badge: pops in at the end of the cycle. */
.demo-doc__signed {
  position: absolute;
  top: 14px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--ok);
  color: var(--text-on-dark, #fff);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  animation: demo-signed 8s infinite ease-out;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--ok) 70%, transparent);
}
.demo-doc__signed svg {
  width: 12px;
  height: 12px;
}
@keyframes demo-signed {
  0%, 60%    { opacity: 0; transform: scale(0.85); }
  62%        { opacity: 1; transform: scale(1.15); }
  68%, 88%   { opacity: 1; transform: scale(1); }
  92%, 100%  { opacity: 0; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-doc--live .demo-field__hl,
  .demo-doc__scan,
  .demo-field__ink path,
  .demo-doc--live .demo-field:nth-of-type(1) .demo-field__ink,
  .demo-doc__signed {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .demo-doc__scan { display: none; }
}

.demo-doc__counter {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--text);
  color: var(--text-on-dark);
  border-radius: var(--r);
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  box-shadow: var(--shadow-pop);
  transform: rotate(2deg);
}
.demo-doc__counter-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.demo-doc__counter-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  line-height: 1.1;
  text-align: left;
}

/* ========================================================================
   10. PROOF STRIP
   ======================================================================== */

.proof {
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
@media (max-width: 720px) {
  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}

.proof__num {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
  color: var(--text);
}
.proof__num .unit {
  color: var(--accent);
  font-size: 0.45em;
  margin-left: 2px;
  font-style: italic;
  vertical-align: 0.4em;
}
.proof__label {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin: 0;
}

/* ========================================================================
   11. SECTIONS
   ======================================================================== */

.section { padding-block: clamp(64px, 10vh, 120px); }
.section--alt { background: var(--bg-2); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) {
  .section__head { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
}

.section__title { margin: var(--s-3) 0 0; }
.section__lede  { margin: 0; }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.step:hover { border-color: var(--line-2); transform: translateY(-2px); }

.step__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  margin-bottom: var(--s-4);
  display: block;
}
.step__title { margin: 0 0 var(--s-3); }
.step__body { color: var(--text-2); font-size: var(--t-s); line-height: 1.6; margin: 0; }

/* ========================================================================
   12. PRICING
   ======================================================================== */

.pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1080px) { .pricing { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
@media (max-width: 560px)  { .pricing { grid-template-columns: 1fr; } }

.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.tier:hover { border-color: var(--line-2); }

.tier--featured {
  background: var(--text);
  color: var(--text-on-dark);
  border-color: var(--text);
  position: relative;
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
}
.tier--featured:hover { transform: translateY(-8px); }
@media (prefers-color-scheme: dark) {
  :root .tier--featured { background: var(--accent); color: #0A0E1A; border-color: var(--accent); }
}

.tier--featured .tier__name,
.tier--featured .tier__price-num { color: inherit; }

.tier__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root .tier__badge { background: var(--bg); color: var(--text); }
}

.tier__name {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
  color: var(--text-3);
  font-weight: 500;
}
.tier--featured .tier__name { color: rgba(251, 248, 241, 0.6); }
@media (prefers-color-scheme: dark) {
  :root .tier--featured .tier__name { color: rgba(20, 20, 26, 0.72); }
}

.tier__price { display: flex; align-items: baseline; gap: 4px; }
.tier__price-num {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier__price-unit {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.tier--featured .tier__price-unit { color: rgba(251, 248, 241, 0.6); }
@media (prefers-color-scheme: dark) {
  :root .tier--featured .tier__price-unit { color: rgba(20, 20, 26, 0.72); }
}

.tier__hook { font-size: var(--t-s); color: var(--text-2); margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.tier--featured .tier__hook { color: rgba(251, 248, 241, 0.78); }
@media (prefers-color-scheme: dark) {
  :root .tier--featured .tier__hook { color: rgba(20, 20, 26, 0.82); }
}

.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-s); }
.tier__list li { padding-left: 18px; position: relative; color: var(--text-2); }
.tier__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-text);
}
.tier--featured .tier__list li { color: rgba(251, 248, 241, 0.82); }
.tier--featured .tier__list li::before { color: var(--accent); }

/* Push the tier's CTA button to the card bottom so a row of cards
   aligns regardless of how many list items each one has. */
.tier > .btn--block { margin-top: auto; }

.tier__remaining {
  margin: 0;
  text-align: center;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tier--featured .tier__remaining { color: rgba(251, 248, 241, 0.78); }
.tier__remaining-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 7px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent);
  animation: founding-pulse 2.2s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tier__remaining-dot--full {
  background: var(--text-3);
  animation: none;
}
@keyframes founding-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tier__remaining-dot { animation: none; }
}

/* On the featured (navy) tier, btn--primary needs an inverse treatment so
   it does not blend into the card. We use the bright accent instead. */
.tier--featured .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink, var(--text));
}
.tier--featured .btn--primary:hover {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root .tier--featured .tier__list li { color: rgba(20, 20, 26, 0.82); }
  :root .tier--featured .tier__list li::before { color: rgba(20, 20, 26, 0.62); }
}

/* ========================================================================
   13. FOUNDING
   ======================================================================== */

.founding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .founding { grid-template-columns: 1fr; } }

.founding-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
@media (prefers-color-scheme: dark) {
  :root .founding-form { background: var(--surface-2); }
}

.founding-form__head {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  margin: 0 0 var(--s-4);
}

.founding-form__title { margin: 0 0 var(--s-5); }

.field { position: relative; margin-bottom: var(--s-3); }
.field__input,
.field__textarea {
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t);
  padding: 22px 14px 8px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
  transition: border-color 160ms var(--ease);
}
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field__textarea { min-height: 96px; resize: vertical; }
.field__label {
  position: absolute;
  top: 18px;
  left: 14px;
  font-size: var(--t-s);
  color: var(--text-3);
  pointer-events: none;
  transition: transform 160ms var(--ease), color 160ms var(--ease), font-size 160ms var(--ease);
  background: transparent;
  padding-inline: 2px;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field__textarea:focus + .field__label,
.field__textarea:not(:placeholder-shown) + .field__label {
  transform: translateY(-10px);
  font-size: 10px;
  color: var(--accent-text);
}

/* ========================================================================
   13a. LANDING-PAGE COMPONENTS (breadcrumb, alt-grid, doc-grid)
   ======================================================================== */

.breadcrumb {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding-block: var(--s-4) 0;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb [aria-current="page"] { color: var(--text); }

.alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.alt-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 240ms var(--ease-spring), transform 240ms var(--ease-spring), box-shadow 240ms;
}
.alt-card:hover {
  border-color: var(--accent-text);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(1, 20, 52, 0.18);
}
.alt-card__title { margin: 0; }
.alt-card__body { color: var(--text-2); line-height: 1.65; margin: 0; }
.alt-card__cta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.doc-grid {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.doc-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text-2);
  line-height: 1.6;
}
.doc-card strong { color: var(--text); display: block; margin-bottom: 4px; font-weight: 600; }

/* ========================================================================
   13b. FAQ
   ======================================================================== */

.faq {
  display: grid;
  gap: var(--s-3);
  max-width: 760px;
  margin-inline: auto;
  margin-top: var(--s-6);
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 200ms var(--ease-spring), background 200ms;
}
.faq__item[open] { border-color: var(--line-strong); }
.faq__q {
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
  font-size: var(--t);
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: calc(var(--s-5) + 28px);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--accent-text);
  font-weight: 300;
  transition: transform 200ms var(--ease-spring);
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--accent-text); }
.faq__a {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-2);
  line-height: 1.65;
}
.faq__a p { margin: 0; }

/* ========================================================================
   13c. COMPARISON TABLE
   ======================================================================== */

.compare-table-wrap {
  margin-top: var(--s-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: var(--t-sm);
}
.compare th,
.compare td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.compare thead th {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 500;
  background: var(--bg-2);
  border-bottom-color: var(--line-strong);
}
.compare tbody th {
  font-weight: 600;
  color: var(--text);
  width: 30%;
  background: var(--bg-2);
}
.compare__us {
  background: color-mix(in srgb, var(--accent-text) 6%, transparent);
  font-weight: 600;
  color: var(--text);
}
.compare thead th.compare__us {
  background: color-mix(in srgb, var(--accent-text) 12%, var(--bg-2));
  color: var(--accent-text);
}
.compare tr:last-child th,
.compare tr:last-child td { border-bottom: none; }
.compare .check {
  color: var(--accent-text);
  font-weight: 600;
}
.compare .check::before { content: "✓ "; }
.compare .cross {
  color: var(--text-3);
}
.compare .cross::before { content: "— "; }

/* ========================================================================
   13d. TOAST + STICKY CTA
   ======================================================================== */

.toast {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 60;
  pointer-events: none;
}
.toast__inner {
  pointer-events: auto;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  box-shadow: 0 14px 30px -12px rgba(1, 20, 52, 0.32);
  max-width: 720px;
  margin-inline: auto;
  font-size: var(--t-sm);
}
.toast[data-state="owner"] .toast__inner {
  background: var(--accent-text);
}
.toast[data-state="success"] .toast__inner {
  background: var(--accent-text);
  color: var(--text-on-dark, #fff);
}
.toast__message {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.5;
  font-size: var(--t-sm);
  color: inherit;
}
.toast__action {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
  font-size: var(--t-sm);
}
.toast__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.78;
  transition: opacity 160ms var(--ease);
}
.toast__close:hover { opacity: 1; }
.toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

/* Dashboard subscription banner */
/* Origin wall self-edit panel on the dashboard. Lets Origin members
   set their public display name + city. Mirrors the identity-panel
   visual treatment so it feels native to the dashboard chrome. */
.origin-panel {
  margin: var(--s-3) 0;
  padding: var(--s-4);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}
.origin-panel__head {
  margin-bottom: var(--s-3);
}
.origin-panel__body {
  margin: 4px 0 0;
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.55;
}
.origin-panel__body strong {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.origin-panel__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
@media (max-width: 640px) {
  .origin-panel__form { grid-template-columns: 1fr; }
}
.origin-panel__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.origin-panel__label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.origin-panel__input {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-sm);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.origin-panel__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.origin-panel__buttons {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.origin-panel__status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.origin-panel__status--ok { color: var(--ok); }
.origin-panel__status--err { color: var(--warn); }

.sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-text);
  border-radius: var(--r);
  background: var(--bg);
  flex-wrap: wrap;
}
.sub-banner[data-tier="free"] {
  border-left-color: var(--text-3);
}
.sub-banner[data-tier="owner"] {
  border-left-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 6%, var(--bg));
}
.sub-banner[data-tier="founding"] {
  border-left-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 4%, var(--bg));
}
.sub-banner__left { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.sub-banner__tier {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  font-weight: 600;
}
.sub-banner__detail {
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.sub-banner__right { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.toast__text { line-height: 1.45; }
/* Older .toast__close styles removed in favor of the canonical
   definition above near .toast__message. Same selector, same
   intent, but the duplicate was overriding with slightly heavier
   padding. */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--text);
  color: var(--bg);
  border-top: 1px solid var(--text);
  box-shadow: 0 -10px 24px -12px rgba(1, 20, 52, 0.32);
  animation: stickyIn 280ms var(--ease-spring);
}
@keyframes stickyIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  flex-wrap: wrap;
}
.sticky-cta__copy { flex: 1 1 280px; }
.sticky-cta__title {
  margin: 0;
  font-weight: 600;
  font-size: var(--t);
  line-height: 1.3;
}
.sticky-cta__sub {
  margin: 4px 0 0;
  font-size: var(--t-sm);
  opacity: 0.78;
  line-height: 1.4;
}
.sticky-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.sticky-cta__close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  opacity: 0.55;
  padding: 6px 8px;
}
.sticky-cta__close:hover { opacity: 1; }

/* Icon close/dismiss buttons must clear a 44px touch target. */
.sticky-cta__close, .toast__close, .owner-pill__close, .modal-card__close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* On the sticky CTA, override .btn--ghost so it reads cleanly on the dark surface. */
.sticky-cta .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--bg);
}
.sticky-cta .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--bg);
}

@media (max-width: 640px) {
  .sticky-cta__sub { display: none; }
  .sticky-cta__inner { padding-block: 10px; }
}

/* ========================================================================
   13d1. DASHBOARD EMPTY STATE (stats strip, welcome, utility row)
   ----
   Shown when the doc list is empty. Even with zero documents and no owner
   token, the page reads as a real dashboard: live founding count, free-tier
   counter, real-world-test stat, three-step checklist, utility row.
   ======================================================================== */

.dash-empty {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-top: var(--s-3);
}

/* ── Roadmap (slice 87) ──────────────────────────────── */
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 980px) {
  .roadmap { grid-template-columns: 1fr; }
}
.roadmap__column h2 { margin-bottom: 4px; }
.roadmap__column .caption { margin-bottom: var(--s-4); color: var(--text-3); }
.roadmap__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.roadmap__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 140ms var(--ease), transform 200ms var(--ease);
}
.roadmap__item:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.roadmap__vote {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.roadmap__vote:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.roadmap__vote:disabled { opacity: 0.6; cursor: not-allowed; }
.roadmap__vote.is-voted {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.roadmap__vote-arrow { font-size: 10px; line-height: 1; }
.roadmap__vote-count { font-variant-numeric: tabular-nums; }
.roadmap__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.roadmap__desc { margin: 0; color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; }

/* ── Co-signing presence pill (slice 86) ────────────────
   Floats top-right of the viewport while in signer mode.
   Lists every signer with their initials swatch, name, and
   current page + fill %. Auto-updates from 2s poll. */
.co-sign-pill {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 12px 28px -10px rgba(1,20,52,0.18);
  font-family: var(--mono);
  font-size: 11px;
}
.co-sign-pill__signer {
  display: grid;
  grid-template-columns: 18px auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 2px;
}
.co-sign-pill__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
}
.co-sign-pill__name {
  color: var(--text);
  font-weight: 500;
  font-family: var(--sans);
  font-size: 12px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-sign-pill__status {
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.co-sign-pill__pct {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* Slice 92: live-state visual cues. A leading dot on each signer row
   shows whether they're online (green), idle (amber), or offline (gray).
   Self gets a slightly muted appearance so the user can mentally
   distinguish their own row from the others. */
.co-sign-pill__signer {
  position: relative;
}
.co-sign-pill__signer::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.co-sign-pill__signer--online::before { background: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent); }
.co-sign-pill__signer--idle::before   { background: var(--warn); }
.co-sign-pill__signer--offline::before { background: var(--text-3); opacity: 0.6; }
.co-sign-pill__signer--self {
  opacity: 0.8;
  background: var(--bg-2);
  border-radius: 6px;
  margin: -2px -4px;
  padding: 2px 4px;
}
@media (max-width: 768px) {
  .co-sign-pill {
    top: auto;
    bottom: 240px;
    left: 16px;
    right: 16px;
  }
}

/* ── Template library (slice 105) ────────────────────── */
.tmpl-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-5);
}
@media (max-width: 640px) {
  .tmpl-controls { grid-template-columns: 1fr; }
}
.tmpl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.tmpl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}
.tmpl-card { padding: 0; }
.tmpl-card__btn {
  appearance: none;
  display: block;
  width: 100%;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.tmpl-card__btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 18px 36px -20px var(--accent-glow);
}
.tmpl-card__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tmpl-card__preview {
  position: relative;
  aspect-ratio: 8.5 / 11;
  background: var(--surface, #fff);
  border-radius: 6px;
  padding: 18px 22px;
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.tmpl-card__lines { display: flex; flex-direction: column; gap: 6px; }
.tmpl-card__lines span {
  display: block;
  height: 4px;
  background: rgba(1, 20, 52, 0.12);
  border-radius: 2px;
}
.tmpl-card__lines span:nth-child(1) { width: 70%; }
.tmpl-card__lines span:nth-child(2) { width: 90%; }
.tmpl-card__lines span:nth-child(3) { width: 60%; }
.tmpl-card__fields {
  position: absolute;
  left: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tmpl-card__field {
  display: block;
  width: 120px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
}
.tmpl-card__field--init {
  width: 70px;
  border-color: #46d097;
  background: rgba(70, 208, 151, 0.18);
}
.tmpl-card__title {
  margin: 0 0 6px;
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
}
.tmpl-card__short {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

.tmpl-modal__actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.tmpl-modal__actions .btn { flex: 1 1 auto; }
@media (max-width: 480px) {
  .tmpl-modal__actions { flex-direction: column; }
  .tmpl-modal__actions .btn { width: 100%; }
}

/* ── Paywall modal (slice 104) ───────────────────────── */
.paywall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
}
@media (max-width: 640px) {
  .paywall-grid { grid-template-columns: 1fr; }
}
.paywall-tier {
  position: relative;
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.paywall-tier--featured {
  border-color: var(--accent);
  box-shadow: 0 6px 24px -10px var(--accent-glow);
}
.paywall-tier__badge {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 2px 10px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
}
.paywall-tier__price {
  margin: var(--s-2) 0;
  font-family: var(--display, var(--sans));
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.paywall-tier__price strong { font-weight: 700; font-size: 36px; }
.paywall-tier ul {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
}
.paywall-tier li {
  padding: 4px 0 4px 18px;
  position: relative;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.paywall-tier li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-text);
  font-weight: 700;
}

/* ── Blog cache (slice 103) ───────────────────────────── */
.blog-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-5);
}
.blog-search {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
}
.blog-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blog-cat {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.blog-cat:hover { border-color: var(--accent); color: var(--accent-text); }
.blog-cat.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
@media (max-width: 640px) {
  .blog-cat {
    padding: 10px 14px;
    font-size: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .tmpl-cats, .blog-cats { gap: 8px; }
}
@media (max-width: 560px) {
  .blog-controls { grid-template-columns: 1fr; }
}
.blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.blog-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.blog-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px var(--accent-glow);
}
.blog-card__link {
  display: block;
  padding: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.blog-card__cat {
  margin: 0 0 var(--s-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}
.blog-card__title {
  margin: 0 0 var(--s-2);
  font-family: var(--display, var(--sans));
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
}
.blog-card__desc {
  margin: 0 0 var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.blog-card__date {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.blog-empty {
  margin: var(--s-5) 0;
  text-align: center;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: var(--t-sm);
}

/* Post layout */
.post__article { padding-block: var(--s-6) var(--s-8); }
.post__crumb {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.post__crumb a { color: var(--accent-text); }
.post__category { color: var(--text-2); }
.post__title {
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--display, var(--sans));
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.post__date {
  margin: 0 0 var(--s-5);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}
.post__hook {
  margin: var(--s-4) 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--accent);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.post__intro {
  margin: var(--s-4) 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}
.post__h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--display, var(--sans));
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.post__p {
  margin: 0 0 var(--s-3);
  color: var(--text-2);
  line-height: 1.7;
  font-size: 16px;
}
.post__disclaimer {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.post__cta {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  text-align: center;
}
.post__cta-title {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--display, var(--sans));
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.post__related {
  margin-top: var(--s-7);
}
.post__related-list {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.post__related-list a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.post__related-list a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px var(--accent-glow);
}
.post__related-cat {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  margin-bottom: var(--s-2);
}
.post__related-list strong {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}
.post__related-desc {
  color: var(--text-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.post__related-meta {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

/* ── Blog post: reading progress, header meta, share, prev/next ── */

/* Thin reading-progress bar pinned to the top of the viewport. */
.post-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.post-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .post-progress__bar { transition: none; }
}

/* Header meta row: category · date · reading time · word count. */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.post__meta-cat {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.post__meta-sep { color: var(--line-strong); }

/* Share row: X / LinkedIn / Copy link. */
.post__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
}
.post__share-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-right: var(--s-1);
}
.post__share-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease);
}
.post__share-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.post__share-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.post__share-copy.is-copied {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* Long-form body: comfortable measure + generous rhythm. */
.post__body { max-width: 66ch; }
.post__body :is(ul, ol) {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
  color: var(--text-2);
  line-height: 1.7;
}
.post__body li { margin-bottom: var(--s-2); }
.post__body blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-style: italic;
  line-height: 1.6;
}
.post__body pre {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}
.post__body code {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* Prev / Next navigation. */
.post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.post__nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.post__nav-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px var(--accent-glow);
}
.post__nav-link--next { text-align: right; }
.post__nav-link--empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.post__nav-dir {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.post__nav-title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
@media (max-width: 560px) {
  .post__nav { grid-template-columns: 1fr; }
  .post__nav-link--next { text-align: left; }
}

/* ── Blog index: count line + featured card ── */
.blog-count {
  margin: 0 0 var(--s-4);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--s-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.blog-card__meta .blog-card__cat { margin: 0; }
.blog-card__meta .blog-card__date { font-size: 10px; }
.blog-card__dot { color: var(--line-strong); }
.blog-card__read { color: var(--text-3); }
.blog-card__more {
  display: inline-block;
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}
.blog-card--featured {
  grid-column: 1 / -1;
  position: relative;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  border-color: var(--accent-line);
}
.blog-card--featured .blog-card__link { padding: var(--s-5); }
.blog-card--featured .blog-card__title {
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.18;
  margin-bottom: var(--s-3);
}
.blog-card--featured .blog-card__desc {
  font-size: 16px;
  max-width: 60ch;
}
.blog-card__ribbon {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media (max-width: 560px) {
  .blog-card--featured .blog-card__link { padding: var(--s-4); }
  .blog-card__ribbon { top: var(--s-3); right: var(--s-3); }
}

/* ── Bulk-send CSV upload (slice 96) ──────────────────── */
.bulk-csv-drop {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--bg-2);
  text-align: center;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.bulk-csv-drop[data-dragging="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.bulk-csv-drop__title { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.bulk-csv-drop__sub { margin: 0; font-size: var(--t-sm); color: var(--text-2); }
.bulk-csv-drop__link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-text);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.bulk-csv-drop__status { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; color: var(--accent-text); }
.bulk-csv-preview {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.bulk-csv-preview li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulk-csv-preview li {
  display: grid;
  grid-template-columns: 36px 1fr 1.4fr auto;
  gap: var(--s-2);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.bulk-csv-preview li:last-child { border-bottom: 0; }
.bulk-csv-preview .row-num { color: var(--text-3); }
.bulk-csv-preview .row-status { font-size: 11px; color: var(--ok); }
.bulk-csv-preview .is-bad { background: var(--warn-soft); }
.bulk-csv-preview .is-bad .row-status { color: var(--warn); }
.bulk-csv-preview .row-more { font-style: italic; color: var(--text-3); padding: 8px 10px; }

/* ── Webhooks panel (slice 93) ────────────────────────── */
.webhook-panel {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.webhook-panel__head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); margin-bottom: var(--s-3); }
.webhook-panel__body { margin: 6px 0 0; color: var(--text-2); font-size: var(--t-sm); line-height: 1.55; }
.webhook-panel__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--accent-line);
  align-self: start;
}
.webhook-panel__form fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3); margin: var(--s-3) 0; }
.webhook-panel__form fieldset legend { padding: 0 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.webhook-panel__form fieldset label { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: var(--t-sm); color: var(--text-2); }
.webhook-form__field { display: flex; flex-direction: column; gap: 6px; }
.webhook-form__label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.webhook-form__field input[type=url] {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}
.webhook-form__status { margin-left: var(--s-2); font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.webhook-config { display: grid; gap: var(--s-3); }
.webhook-config__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-2); align-items: baseline; }
.webhook-config__url { font-family: var(--mono); font-size: 12px; color: var(--text); word-break: break-all; }
.webhook-config__secret-state { font-size: var(--t-sm); color: var(--text-2); }
.webhook-config__actions { display: flex; gap: var(--s-2); }
.webhook-secret-banner {
  padding: var(--s-3) var(--s-4);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--r);
}
.webhook-secret-banner__head { margin: 0 0 var(--s-2); color: var(--warn); font-size: var(--t-sm); }
.webhook-secret-banner__code {
  margin: 0 0 var(--s-2);
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  white-space: pre-wrap;
}
.webhook-log__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 4px; }
.webhook-log__item {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: var(--s-2);
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
}
.webhook-log__item--ok { border-left: 2px solid var(--ok); }
.webhook-log__item--fail { border-left: 2px solid var(--warn); }
@media (max-width: 520px) {
  .webhook-config__row { grid-template-columns: 1fr; }
  .webhook-log__item { grid-template-columns: 1fr auto; row-gap: 2px; }
}
.webhook-log__attempts { color: var(--text-3); }
.webhook-log__empty { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* ── Brand panel (slice 90) ───────────────────────────── */
.brand-panel {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.brand-panel__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: start;
  margin-bottom: var(--s-3);
}
.brand-panel__body {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.brand-panel__tier-badge {
  align-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--accent-line);
}
.brand-form { display: grid; gap: var(--s-3); }
.brand-form__row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--s-3);
}
.brand-form__field { display: flex; flex-direction: column; gap: 6px; }
.brand-form__label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.brand-form input[type=url],
.brand-form input[type=text] {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}
.brand-form__color-row {
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: var(--s-2);
  align-items: center;
}
.brand-form__swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--accent);
}
.brand-form__actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.brand-form__status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.brand-form__status[data-state="saved"] { color: var(--ok); }
.brand-form__status[data-state="error"] { color: var(--warn); }
.brand-preview {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.brand-preview__card {
  margin-top: var(--s-2);
  padding: var(--s-4);
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
}
.brand-preview__logo {
  min-height: 32px;
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-preview__logo img { max-height: 48px; max-width: 240px; }
.brand-preview__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.brand-preview__body {
  margin: 6px 0 14px;
  color: var(--text-2);
  font-size: var(--t-sm);
}
.brand-preview__cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #011434;
  font-weight: 600;
  font-size: var(--t-sm);
}
@media (max-width: 640px) {
  .brand-panel__head { grid-template-columns: 1fr; }
  .brand-form__row { grid-template-columns: 1fr; }
}

/* ── Affiliate panel (slice 84) ──────────────────────── */
.affiliate-panel {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
}
.affiliate-panel__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-4);
}
.affiliate-panel__body {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.affiliate-panel__earned {
  text-align: right;
}
.affiliate-panel__earned-num {
  display: block;
  font-family: var(--display, var(--sans));
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ok);
  line-height: 1;
}
.affiliate-panel__earned-label {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.affiliate-panel__share {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.affiliate-panel__share-input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0;
}
.affiliate-panel__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
}
.affiliate-stat {
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.affiliate-stat__num {
  display: block;
  font-family: var(--display, var(--sans));
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.affiliate-stat__label {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
@media (max-width: 640px) {
  .affiliate-panel__head { grid-template-columns: 1fr; text-align: left; }
  .affiliate-panel__earned { text-align: left; }
  .affiliate-panel__share { grid-template-columns: 1fr; }
}

/* ── Founder's home (slice 81) ────────────────────────
   Four-card KPI strip + sparkline at the top of the
   dashboard. Always rendered when sender has docs. */
.founder-home {
  margin-bottom: var(--s-5);
}
.founder-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.founder-home__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 140ms var(--ease), transform 200ms var(--ease);
}
.founder-home__card:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}
.founder-home__num {
  font-family: var(--display, var(--sans));
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.founder-home__label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  margin: 6px 0 0;
}
.founder-home__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  margin: 0;
}
.founder-home__sparkline {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.founder-home__sparkline-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* Stats strip: 4 cards in a responsive grid. */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.dash-stats__card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease-spring);
}
.dash-stats__card:hover { border-color: var(--line-strong); }
.dash-stats__num {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.dash-stats__num-mini {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
}
.dash-stats__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 6px;
}
.dash-stats__hint {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}
.dash-stats__hint a {
  color: var(--accent-text);
  text-decoration: none;
}
.dash-stats__hint a:hover { text-decoration: underline; }

/* Welcome hero with three numbered steps on the right. */
.dash-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-text) 4%, var(--bg)) 0%,
    var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
@media (max-width: 880px) {
  .dash-welcome { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); }
}
.dash-welcome__copy h2 {
  margin: var(--s-2) 0 var(--s-3);
}
.dash-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.dash-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.dash-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 200ms var(--ease);
}
.dash-step:hover { border-color: var(--line-strong); }
.dash-step__num {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  display: inline-flex;
  align-items: flex-start;
  padding-top: 2px;
}
.dash-step__title {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: var(--t);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.dash-step__detail {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.dash-step__detail a { color: var(--accent-text); }

/* Quick-reference utility row at the bottom of empty state. */
.dash-util {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.dash-util__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease-spring), background 200ms;
}
.dash-util__item:hover {
  border-color: var(--accent-text);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent-text) 4%, var(--bg));
}
.dash-util__kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.dash-util__title {
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* ========================================================================
   13d2. OWNER ANALYTICS PANEL (dashboard, owner-only)
   ======================================================================== */

.owner-panel {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-text) 8%, var(--bg)) 0%,
    var(--bg) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-text) 30%, var(--line));
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.owner-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.owner-panel__controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.owner-panel__window {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.owner-panel__window select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-xs);
  text-transform: uppercase;
}
.owner-panel__refresh {
  padding: 6px 14px;
  font-size: var(--t-xs);
}
.owner-panel__body { min-height: 80px; }
.owner-panel__empty {
  color: var(--text-3);
  font-style: italic;
  margin: 0;
}
.owner-panel__notice {
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text-2);
  line-height: 1.6;
}
.owner-panel__notice p { margin: 0 0 var(--s-2); }
.owner-panel__notice p:last-child { margin-bottom: 0; }
.owner-panel__notice a { color: var(--accent-text); }

.owner-panel__kpis {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.owner-panel__kpi {
  flex: 1 1 140px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.owner-panel__kpi-num {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.owner-panel__kpi-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.owner-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.owner-panel__col--wide { grid-column: span 2; }
@media (max-width: 720px) {
  .owner-panel__col--wide { grid-column: span 1; }
}
.owner-panel__col {
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.owner-panel__h {
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 500;
}
.owner-panel__list { list-style: none; padding: 0; margin: 0; }
.owner-panel__list-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--t-sm);
}
.owner-panel__list-row:last-child { border-bottom: none; }
.owner-panel__list-key {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.owner-panel__list-val {
  color: var(--accent-text);
  font-weight: 600;
  flex: 0 0 auto;
}

/* Owner diagnostic tools (test-email + health check) */
.owner-panel__tools {
  margin-top: var(--s-5);
  border-top: 1px dashed var(--line);
  padding-top: var(--s-4);
}
.owner-panel__tools-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding: 6px 0;
}
.owner-panel__tools-summary::-webkit-details-marker { display: none; }
.owner-panel__tools-summary::before {
  content: "▸ ";
  color: var(--accent-text);
}
.owner-panel__tools[open] .owner-panel__tools-summary::before { content: "▾ "; }
.owner-panel__tools-body {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.owner-panel__form-label {
  font-size: var(--t-sm);
  color: var(--text-2);
  margin: 0 0 6px;
}
.owner-panel__form-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.owner-panel__form-input {
  flex: 1 1 220px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sm);
}
.owner-panel__form-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.owner-panel__form-btn { padding: 8px 18px; font-size: var(--t-sm); }
.owner-panel__form-status {
  margin: 6px 0 0;
  font-size: var(--t-xs);
  font-family: var(--mono);
  color: var(--text-3);
}
.owner-panel__pre {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  color: var(--text-2);
}

/* ========================================================================
   13e. LEGAL PAGES (privacy, terms)
   ======================================================================== */

.legal {
  padding-block: var(--s-6) var(--s-7);
}
.legal__container {
  max-width: 760px;
}
.legal__title {
  margin-top: var(--s-3);
}
.legal__meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-block: var(--s-3) var(--s-6);
}
.legal__notice {
  border: 1px solid var(--accent-line, var(--line-strong));
  background: color-mix(in srgb, var(--accent-text) 6%, transparent);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-5);
  color: var(--text);
  line-height: 1.65;
}
.legal__notice strong { color: var(--accent-text); }
.legal h2 {
  font-family: var(--display, var(--sans));
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.legal p {
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: var(--s-3);
}
.legal p strong { color: var(--text); }
.legal__list {
  list-style: none;
  padding: 0;
  margin-block: var(--s-3) var(--s-4);
}
.legal__list li {
  padding-left: 1.5em;
  position: relative;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: var(--s-2);
}
.legal__list li::before {
  content: "›";
  position: absolute;
  left: 0.4em;
  color: var(--accent-text);
}
.legal a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover { text-decoration-thickness: 2px; }

/* ========================================================================
   14. FOOTER
   ======================================================================== */

.colophon {
  margin-top: auto;
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  color: var(--text-3);
  font-size: var(--t-xs);
}
.colophon__links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.colophon a { color: var(--text-2); }
.colophon a:hover { color: var(--text); }
.colophon__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.colophon__col { display: flex; flex-direction: column; gap: 10px; }
.colophon__col a {
  font-size: var(--t-sm);
  text-decoration: none;
  line-height: 1.4;
}
.colophon__head {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 0 0 4px;
  font-weight: 600;
}
@media (max-width: 720px) {
  .colophon__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
  .colophon__grid > div:first-child { grid-column: 1 / -1; }
}

/* ========================================================================
   15. UTILITY
   ======================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ========================================================================
   16. STATUS PILL (used by hero note + preview/dashboard)
   ======================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--bg);
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.pill--ok      { color: var(--ok); border-color: var(--ok-soft); background: var(--ok-soft); }
.pill--ok .pill__dot { background: var(--ok); }
.pill--accent  { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.pill--accent .pill__dot { background: var(--accent); }

/* ========================================================================
   17. DASHBOARD. Uses tokens above; rebuilt for the new design system.
   ======================================================================== */

.dashboard {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.dashboard__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.dashboard__head .kicker { margin-bottom: var(--s-3); }
.dashboard__head .lede { margin-top: var(--s-3); max-width: 56ch; }

.dashboard__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-end;
}

@media (max-width: 760px) {
  .dashboard__head { grid-template-columns: 1fr; align-items: start; }
  .dashboard__actions { flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: var(--s-3); }
  .dashboard__actions > * { flex: 1 1 auto; }
  .dashboard__actions .btn,
  .dashboard__actions .btn--sm,
  .ws-switcher__select,
  #ws-manage {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Identity backup panel */
.identity-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
  display: grid;
  gap: var(--s-3);
}
.identity-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.identity-panel__head .kicker { margin: 0 0 var(--s-2); }
.identity-panel__body {
  font-size: var(--t-s);
  color: var(--text-2);
  margin: 0;
  max-width: 60ch;
  line-height: 1.5;
}
.identity-panel__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.identity-panel__close:hover { background: var(--bg-2); color: var(--accent-text); }
.identity-panel__field { display: grid; gap: 6px; }
.identity-panel__label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.identity-panel__input {
  font: inherit;
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  letter-spacing: 0.02em;
}
.identity-panel__buttons { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* State cards */
.state-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}
.state-card .kicker { display: inline-flex; margin-bottom: var(--s-4); }
.state-card__kicker {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  margin: 0 0 var(--s-2);
}
.state-card__body {
  color: var(--text-2);
  font-size: 15px;
  margin: 0 auto var(--s-4);
  max-width: 60ch;
}
.state-card__actions { margin-top: var(--s-4); display: inline-flex; }
.state-card--error { border-left: 3px solid var(--accent); }
.state-card--error .state-card__kicker { color: var(--accent-text); }

/* Filter chips */
.dashboard__filters {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.filter-chip {
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.filter-chip:hover { border-color: var(--line-strong); color: var(--text); }
.filter-chip--active {
  background: var(--text);
  color: var(--text-on-dark);
  border-color: var(--text);
}
.filter-chip__count {
  font-variant-numeric: tabular-nums;
  background: var(--bg-2);
  color: var(--text);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  min-width: 22px;
  text-align: center;
}
.filter-chip--active .filter-chip__count {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-on-dark);
}

/* Doc list */
.docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.docs-list__empty {
  padding: var(--s-7) var(--s-6);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-l);
  color: var(--text-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}

.doc-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.doc-row:hover { border-color: var(--line-2); }
.doc-row--open { border-color: var(--text); box-shadow: var(--shadow-card); }

.doc-row__summary {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background-color 120ms var(--ease);
}
.doc-row__summary:hover { background: var(--bg-2); }
.doc-row__left { min-width: 0; }
.doc-row__title {
  font-family: var(--serif);
  font-size: var(--t-d4);
  font-weight: 500;
  margin: 0 0 var(--s-1);
  letter-spacing: -0.01em;
  word-break: break-word;
  color: var(--text);
}
.doc-row__meta {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-m);
  color: var(--text-3);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.doc-row__meta-sep { color: var(--line-strong); }

.doc-row__right {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}

.doc-row__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
.doc-row__status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.doc-row__status--complete { color: var(--ok); }
.doc-row__status--active { color: var(--accent-text); }

.doc-row__caret {
  font-size: 10px;
  color: var(--text-3);
  transition: transform 200ms var(--ease);
}
.doc-row--open .doc-row__caret { transform: rotate(180deg); }

.doc-row__detail {
  border-top: 1px solid var(--line);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-2);
  display: grid;
  gap: var(--s-4);
}
.doc-row__loading {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-s);
  color: var(--text-3);
}
.doc-row__top-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.doc-row__audit-note {
  font-size: var(--t-s);
  color: var(--text-2);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
  line-height: 1.55;
}

/* Signer rows */
.signer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }

.signer-status {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  position: relative;
}
.signer-status--complete {
  background: var(--ok-soft);
  border-color: var(--ok);
}

.signer-status__swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text);
  color: var(--text-on-dark);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signer-status--complete .signer-status__swatch { background: var(--ok); }

.signer-status__meta { min-width: 0; }
.signer-status__name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
}
.signer-status__email {
  font-family: var(--mono);
  font-size: var(--t-m);
  color: var(--text-3);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signer-status__pill {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.signer-status__pill--complete { background: var(--ok-soft); color: var(--ok); }
.signer-status__pill--partial { background: var(--warn-soft); color: var(--warn); }
.signer-status__pill--pending { background: var(--bg-3); color: var(--text-2); }

.signer-status__reminders {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  white-space: nowrap;
}

.signer-status__actions { display: inline-flex; gap: var(--s-2); }

.signer-status__note {
  grid-column: 1 / -1;
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
}

@media (max-width: 720px) {
  .signer-status { grid-template-columns: 32px 1fr; gap: var(--s-3); }
  .signer-status__pill,
  .signer-status__reminders,
  .signer-status__actions { grid-column: 2 / 3; }
  .signer-status__actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* Workspace switcher */
.ws-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 8px 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.ws-switcher__label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.ws-switcher__select {
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
  outline: none;
}
.ws-switcher__select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* iOS input-zoom: bump controls whose hardcoded font-size wins over the
   global input,select,textarea{font-size:16px} guard by specificity. */
.affiliate-panel__share-input,
.identity-panel__input,
.ws-switcher__select,
.webhook-form__field input[type=url],
.brand-form input[type=url],
.brand-form input[type=text],
.owner-panel__form-input,
.owner-panel__window select {
  font-size: 16px;
}

/* Workspace modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 26, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) max(var(--s-4), env(safe-area-inset-bottom));
  backdrop-filter: blur(6px);
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 0;
  max-width: 560px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.modal-card--wide { max-width: 640px; }
.modal-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.modal-card__kicker {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  display: block;
  margin-bottom: var(--s-2);
}
.modal-card__title {
  font-family: var(--serif);
  font-size: var(--t-d3);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--text);
}
.modal-card__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  margin-left: var(--s-3);
}
.modal-card__close:hover { background: var(--bg-2); color: var(--text); }
.modal-card__body { padding: var(--s-5) var(--s-6); }
.modal-card__lede { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--t-s); line-height: 1.6; }
.modal-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  gap: var(--s-3);
  flex-wrap: wrap;
}
.modal-card__footer-left,
.modal-card__footer-right { display: inline-flex; gap: var(--s-2); }

/* ----- Sticky add-field group (5 type buttons in the sidebar) ----- */
.add-field-group {
  margin: 0;
  padding: var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
}
.add-field-group__label {
  margin: 0 0 var(--s-2);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
  line-height: 1.4;
  text-transform: none;
}
.add-field-group__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.add-field-btn {
  flex: 1 1 auto;
  min-width: 60px;
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.add-field-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.add-field-btn[data-active="true"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.add-field-group__hint {
  margin: var(--s-2) 0 0;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--accent-text);
  line-height: 1.4;
}

/* ----- CV-detected field box: small AI badge ----- */
.field-box[data-source="cv"]::before {
  content: "AI";
  position: absolute;
  top: -8px;
  right: -4px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bg);
  background: var(--accent-2, var(--accent));
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 3;
  pointer-events: none;
}

/* ----- Field-box drag + resize handles -----
   .field-box's full ruleset (border, background, cursor, etc.) lives
   further down. Here we only ship the touch behavior that the drag
   handler depends on. Keeping it separate from the visual ruleset
   reflects the dual purpose: visual presentation + interaction surface. */
.field-box {
  touch-action: none; /* prevent page-scroll while dragging */
}
/* Coarse-pointer touch hit area: pads the tappable region to ~44px so
   small field-boxes (e.g. 22px checkboxes) toggle reliably on phones. */
@media (pointer: coarse) {
  .field-box::after {
    content: "";
    position: absolute;
    inset: -12px;
  }
}
.field-box__handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border: 1.5px solid var(--bg);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 160ms var(--ease);
  z-index: 3;
}
.field-box:hover .field-box__handle,
.field-box.is-focused .field-box__handle { opacity: 1; }
.field-box__handle--nw { top: -5px; left: -5px;  cursor: nwse-resize; }
.field-box__handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.field-box__handle--sw { bottom: -5px; left: -5px;  cursor: nesw-resize; }
.field-box__handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* Touch: hover-revealed controls (handles, edit pencil, remove x, reassign
   chip) are invisible/unreachable on coarse pointers — show + enlarge them. */
@media (pointer: coarse) {
  .field-box.is-focused .field-box__handle { opacity: 1; width: 24px; height: 24px; }
  .field-box.is-focused .field-box__handle--nw { top: -12px; left: -12px; }
  .field-box.is-focused .field-box__handle--ne { top: -12px; right: -12px; }
  .field-box.is-focused .field-box__handle--sw { bottom: -12px; left: -12px; }
  .field-box.is-focused .field-box__handle--se { bottom: -12px; right: -12px; }
  .field-box.is-focused .field-box__edit { opacity: 1; width: 32px; height: 32px; }
  .signer-row__remove { opacity: 1; width: 32px; height: 32px; top: -10px; right: -10px; }
  .field-box__chip { width: 28px; height: 28px; font-size: 11px; top: -18px; }
}

/* ----- Manual-add type chooser modal ----- */
.add-type-chooser {
  position: fixed;
  z-index: 70;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 14px 32px -10px rgba(1, 20, 52, 0.32);
  padding: var(--s-3);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  max-width: 280px;
}
.add-type-chooser__hint {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin: 0 0 6px;
}
.add-type-chooser__btn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: var(--t-sm);
  cursor: pointer;
  color: var(--text);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.add-type-chooser__btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
@media (max-width: 480px) {
  .add-type-chooser { right: 8px; max-width: none; }
}

/* ----- Add-field mode (manual field placement on the preview page) ----- */
body[data-add-mode="true"] .page-shell { cursor: crosshair; }
body[data-add-mode="true"] .overlay { pointer-events: auto; }
body[data-add-mode="true"] .page-shell::after {
  content: "Click a spot to place a new field. Esc to cancel.";
  position: absolute;
  top: -22px;
  right: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

/* ----- AI-training consent checkbox (preview empty state) ----- */
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.consent-row:hover { border-color: var(--line-strong); }
.consent-row input[type="checkbox"] {
  flex: 0 0 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent-text);
}
.consent-row__text {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.consent-row__text strong { color: var(--text); font-weight: 600; }

/* ----- Signature pad (signing modal) -----
   The pad is intentionally paper-white in BOTH light and dark mode so the
   user's ink is always visible. A signature pad is a piece of paper on a
   desk, not a screen surface; the ink stays the same color as it would on
   real paper. Inkwell colors (current: #15151A near-black) stay legible
   against the white pad regardless of page theme.
*/
.sigpad {
  margin-block: var(--s-3);
}
.sigpad__canvas {
  display: block;
  width: 100%;
  height: 180px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: crosshair;
  touch-action: none;
  box-shadow: inset 0 1px 2px rgba(1, 20, 52, 0.04);
}
.sigpad__hint {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0 0 var(--s-2);
}
@keyframes sigpad-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.sigpad__canvas--shake {
  animation: sigpad-shake 380ms var(--ease);
  border-color: var(--danger, #d04141);
}
@media (prefers-reduced-motion: reduce) {
  .sigpad__canvas--shake { animation: none; }
}

/* Workspace member list */
.ws-member-list { list-style: none; margin: var(--s-3) 0 var(--s-7); padding: 0; display: grid; gap: var(--s-2); }
.ws-member {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.ws-member__swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text);
  color: var(--text-on-dark);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-member__meta { min-width: 0; }
.ws-member__name { font-family: var(--serif); font-size: 15px; font-weight: 500; margin: 0; color: var(--text); }
.ws-member__email { font-family: var(--mono); font-size: var(--t-m); color: var(--text-3); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-member__role {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
}

.ws-invite-head {
  font-family: var(--serif);
  font-size: var(--t-d4);
  font-weight: 500;
  margin: var(--s-4) 0 var(--s-3);
  letter-spacing: -0.005em;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--text);
}
.ws-invite-form { display: grid; gap: var(--s-2); }
.ws-invite-result {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: var(--s-2);
}
.ws-invite-result[data-kind="success"] { border-left: 3px solid var(--ok); }
.ws-invite-result[data-kind="error"]   { border-left: 3px solid var(--accent); color: var(--accent-text); }

/* Link rows in send and invite modals */
.link-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.6fr) auto auto;
  align-items: center;
  gap: var(--s-2);
}
.link-row__url {
  font: inherit;
  font-family: var(--mono);
  font-size: var(--t-m);
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-row__url:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); color: var(--text); }

.send-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.send-list__row { padding: var(--s-3); background: var(--bg-2); border-radius: var(--r); }
.send-list__meta { min-width: 0; }
.send-list__name { font-family: var(--serif); font-size: 14px; font-weight: 500; margin: 0; color: var(--text); }
.send-list__email { font-family: var(--mono); font-size: var(--t-m); margin: 2px 0 0; color: var(--text-3); }

.send-note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.send-note__kicker { font-family: var(--mono); font-size: var(--t-m); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin: 0 0 var(--s-2); }
.send-note__body { margin: 0; color: var(--text-2); font-size: var(--t-s); line-height: 1.55; }

/* ── Signer microsite ───────────────────────────────────
   Post-submit modal for magic-link signers. Two visual zones:
   the status (you submitted) and the wedge (claim your own).
   The wedge is the conversion machinery. */
.signer-microsite__status {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-radius: var(--r);
  margin-bottom: var(--s-4);
}
.signer-microsite__convert {
  padding: var(--s-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
}
.signer-microsite__wedge .kicker { color: var(--accent-text); margin: 0 0 var(--s-2); }
.signer-microsite__wedge h3 { margin: 0 0 var(--s-3); }
.signer-microsite__wedge p { margin: 0 0 var(--s-2); color: var(--text-2); }
.signer-microsite__wedge p:last-child { margin-bottom: 0; color: var(--text); }

/* ── CC additional recipients block ─────────────────────
   Sits in the send modal under the per-signer list. Captures
   comma-separated emails to copy when the doc completes. */
.cc-section {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cc-section__kicker {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-2);
  margin: 0 0 var(--s-2);
}
.cc-section__help {
  margin: 0 0 var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.cc-section__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.cc-section__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.cc-section__input::placeholder {
  color: var(--text-3);
  opacity: 0.7;
}
.cc-section__preview {
  margin: var(--s-2) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  line-height: 1.45;
  word-break: break-word;
}
.cc-section__preview--has {
  color: var(--accent-text);
}
.cc-section__preview--drop {
  color: var(--warn);
}

@media (max-width: 640px) {
  .link-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .link-row__url { font-size: 10px; }
}

/* Preview colophon (small footer on preview/dashboard pages) */
.preview-colophon {
  text-align: center;
  padding: var(--s-5) var(--s-4);
  font-size: var(--t-xs);
  color: var(--text-3);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* Preview body class kept for backward compat */
.preview { background: var(--bg); color: var(--text); }

/* ========================================================================
   18. UPLOAD CHOICES (preview drop zone)
   ======================================================================== */

.upload-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.upload-choice {
  padding: 14px 22px;
}
.upload-choice__icon {
  width: 18px;
  height: 18px;
  margin-right: 2px;
}

@media (max-width: 540px) {
  .upload-choices { flex-direction: column; align-items: stretch; }
  .upload-choices .upload-choice { width: 100%; justify-content: center; }
  .dropzone-card__or { text-align: center; padding-top: var(--s-2); }
}

/* ========================================================================
   19. OWNER PILL (in masthead when owner mode is active)
   ======================================================================== */

.owner-pill {
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.owner-pill[data-active="true"] { display: inline-flex; }
.owner-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.owner-pill__close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0 0 0 4px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
}
.owner-pill__close:hover { opacity: 1; }

/* ========================================================================
   20. MODE PICKER (after detection, before sending)
   ======================================================================== */

.mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
@media (max-width: 640px) {
  .mode-picker { grid-template-columns: 1fr; }
}

.mode-choice {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 80ms var(--ease);
}
.mode-choice:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.mode-choice:active { transform: translateY(1px); }
.mode-choice[data-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mode-choice__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
}
.mode-choice__title {
  font-family: var(--serif);
  font-size: var(--t-d4);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.mode-choice__body {
  margin: 0;
  font-size: var(--t-s);
  color: var(--text-2);
  line-height: 1.55;
}

/* ========================================================================
   21. IN-PERSON HANDOFF (between signers)
   ======================================================================== */

.handoff {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  text-align: center;
}
.handoff__kicker {
  font-family: var(--mono);
  font-size: var(--t-m);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin: 0 0 var(--s-4);
}
.handoff__name {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--s-5);
  max-width: 720px;
}
.handoff__name .dot { color: var(--accent); }
.handoff__body {
  font-size: var(--t-l);
  color: var(--text-2);
  max-width: 480px;
  margin: 0 0 var(--s-7);
  line-height: 1.55;
}
.handoff__cta {
  padding: 22px 36px;
  font-size: var(--t-l);
  min-width: 280px;
}
.handoff__skip {
  margin-top: var(--s-5);
  font-size: var(--t-s);
  color: var(--text-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
}
.handoff__skip:hover { color: var(--text-2); text-decoration-color: var(--text-3); }

/* ========================================================================
   22. IPAD-FRIENDLY: bigger touch targets when in-person mode active
   ======================================================================== */

body[data-in-person="true"] .btn:not(.btn--sm) {
  min-height: 48px;
  padding-block: 14px;
  font-size: 15px;
}
body[data-in-person="true"] .signers-panel__as-select {
  font-size: 16px;
  padding: 10px 12px;
}

/* ========================================================================
   Detection sidebar: collapsible "Body fields" group. Long, dense
   contracts (Native Roofing etc.) can produce 60+ inline body blanks
   alongside the dedicated signature block. Primary fields render
   inline above; secondary fields collapse into a click-to-expand
   group below with duplicate labels merged (e.g. "Phone × 4").
   ======================================================================== */

.field-list__collapsible {
  list-style: none;
  margin-top: var(--s-3);
}
.field-list__collapsible details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
}
.field-list__collapsible details[open] {
  border-color: var(--line-strong);
}
.field-list__group--toggle {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  transition: background 180ms var(--ease);
}
.field-list__group--toggle:hover {
  background: color-mix(in srgb, var(--accent-text) 6%, transparent);
  color: var(--accent-text);
}
.field-list__group--toggle::-webkit-details-marker { display: none; }
.field-list__group--toggle::after {
  content: "+";
  margin-left: 8px;
  font-size: 16px;
  font-weight: 300;
  color: var(--accent-text);
  transition: transform 200ms var(--ease-spring);
  display: inline-block;
}
details[open] > .field-list__group--toggle::after {
  content: "−";
}
.field-list__inner {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Annotate deduplicated body rows with their repeat count via the row's data
   attribute. The "× N" is already inlined into the label by the JS, so the
   styling is just visual contrast: dashed bottom border so the eye can
   distinguish unique groupings inside the body list. */
.field-row[data-count] {
  border-bottom: 1px dashed var(--line);
}

/* ========================================================================
   Per-page render error placeholder. Shown when one page fails to
   render but the document is otherwise usable. The rest of the
   document still renders, the detection sidebar is still accurate,
   and the signed PDF still includes this page.
   ======================================================================== */

.page-shell--error {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: var(--s-5);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--text-2);
}
.page-shell--error .page-shell__index {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn);
}
.page-shell__error-body p {
  margin: 0 0 var(--s-2);
  line-height: 1.55;
}
.page-shell__error-body .caption {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  word-break: break-word;
}

/* ========================================================================
   PREVIEW APP LAYOUT. Two states: empty (dropzone) and loaded (result).
   Loaded state is a grid: rendered PDF pages on the left, persistent
   sidebar on the right. The sidebar is sticky and scrolls independently
   so the user can read a long doc while still seeing the field list.
   ======================================================================== */

.layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.layout--empty .dropzone-wrap { display: flex; }
.layout--empty .result        { display: none; }
.layout--loaded .dropzone-wrap { display: none; }
.layout--loaded .result        { display: grid; }

/* ============================================================================
   APPLE-STYLE PREVIEW LAYER (slice 58)
   Layered upgrades to the /preview/ page only, scoped via .layout--apple.
   - Atmospheric background scene behind the dropzone card
   - Bigger display typography, more whitespace, softer chrome
   - Glass-blur on sidebar in result view
   - Brand color discipline: navy/cyan/paper only
   - Dark mode auto-honored via existing :root prefers-color-scheme tokens
   ============================================================================ */

.layout--apple { position: relative; isolation: isolate; }

.preview-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.preview-atmos svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--text);
}
.preview-atmos__glow {
  transform-origin: 50% 50%;
  animation: paDrift 24s ease-in-out infinite alternate;
}
.preview-atmos__glow--a { animation-delay: 0s; }
.preview-atmos__glow--b { animation-delay: -12s; }
@keyframes paDrift {
  0%   { transform: translate(0, 0)    scale(1.00); }
  50%  { transform: translate(40px, -30px) scale(1.10); }
  100% { transform: translate(-30px, 40px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .preview-atmos__glow { animation: none; }
}

/* Layer the dropzone above the atmospheric scene. */
.layout--apple .dropzone-wrap {
  position: relative;
  z-index: 1;
  min-height: 70vh;
  padding-block: clamp(48px, 8vh, 96px);
}
.layout--apple .dropzone-card {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(1,20,52,0.05),
    0 8px 24px -8px rgba(1,20,52,0.10),
    0 40px 80px -32px rgba(1,20,52,0.18);
}
.layout--apple .dropzone-card__copy {
  padding: clamp(28px, 4vw, 56px);
}
.layout--apple .dropzone-card__headline {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.layout--apple .dropzone-card__kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: clamp(16px, 2vw, 20px);
}
.layout--apple .dropzone-card__lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 52ch;
}
.layout--apple .dropzone-card__actions {
  gap: 12px;
}
.layout--apple .upload-choice {
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 12px;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background 160ms var(--ease);
}
.layout--apple .upload-choice.btn--primary {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 18px -6px var(--accent-glow);
  animation: appleInviteIdle 4.4s ease-in-out infinite;
  animation-delay: 6s;
}
.layout--apple .upload-choice.btn--primary:hover,
.layout--apple .upload-choice.btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 10px 24px -8px var(--accent-glow);
  animation: none;
}
/* Gentle Apple-style invitation: a soft glow expands then collapses
   every 4 seconds, only after the user has been on the page for 6
   seconds without taking action. Subtle enough to feel like ambient
   product life, not desperate marketing. */
@keyframes appleInviteIdle {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 6px 18px -6px var(--accent-glow);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.22) inset,
      0 8px 28px -4px var(--accent-glow),
      0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .layout--apple .upload-choice.btn--primary { animation: none; }
}
.layout--apple .dropzone-card__or {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-left: 4px;
}
.layout--apple .dropzone-card__hints li {
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--sans);
  letter-spacing: 0;
}
.layout--apple .dropzone-card__hints li::before {
  color: var(--accent);
}

/* Free-gate form: a touch more breathing room and a softer container. */
.layout--apple .free-gate {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 2.5vw, 32px);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  border: 1px solid var(--line);
}
.layout--apple .free-gate__title {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Drag-over state: cyan glow ring instead of a tint. More premium. */
.layout--apple .dropzone-wrap.is-dragging {
  background: transparent;
}
.layout--apple .dropzone-wrap.is-dragging .dropzone-card {
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-line),
    0 8px 24px -8px rgba(1,20,52,0.10),
    0 40px 80px -32px rgba(1,20,52,0.18);
  transform: scale(1.008);
}

/* ── Result view: soft floating chrome, glass sidebar ──────────── */
.layout--apple .result__pages {
  padding-block: clamp(24px, 4vh, 48px) clamp(64px, 10vh, 120px);
}
.layout--apple .page-shell {
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(1,20,52,0.06),
    0 24px 48px -20px rgba(1,20,52,0.18),
    0 60px 100px -32px rgba(1,20,52,0.10);
}
.layout--apple .sidebar {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
}
.layout--apple .sidebar__head {
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px);
}
.layout--apple .doc-card__title {
  font-size: 18px;
  letter-spacing: -0.018em;
}
.layout--apple .sidebar__action {
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 2vw, 28px);
}

/* Floating toolbar polish: slightly bigger, more shadow lift. */
.layout--apple .doc-toolbar {
  padding: 7px 9px;
  box-shadow:
    0 1px 2px rgba(1,20,52,0.06),
    0 16px 36px -20px rgba(1,20,52,0.22);
}

/* Dark mode adjustments: navy-tinted shadows go invisible against navy
   backgrounds, so swap to neutral/cyan-tinted elevation cues. Atmosphere
   glow brightens slightly so the scene reads in dim conditions. The
   page-shell carries the most weight here — it's the "document on a
   desk" metaphor and needs honest separation from the navy background. */
@media (prefers-color-scheme: dark) {
  .layout--apple .dropzone-card {
    background: color-mix(in srgb, var(--bg) 76%, transparent);
    border-color: var(--line-2);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 8px 24px -8px rgba(0,0,0,0.45),
      0 40px 80px -32px rgba(0,0,0,0.55);
  }
  .layout--apple .sidebar {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    box-shadow: -1px 0 0 rgba(255,255,255,0.03);
  }
  .layout--apple .page-shell {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 24px 48px -20px rgba(0,0,0,0.55),
      0 60px 100px -32px rgba(0,0,0,0.35);
  }
  .layout--apple .doc-toolbar {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 16px 36px -20px rgba(0,0,0,0.55);
  }
  .layout--apple .upload-choice.btn--primary {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 6px 18px -6px var(--accent-glow),
      0 12px 28px -12px rgba(0,0,0,0.6);
  }
  .layout--apple .free-gate {
    background: color-mix(in srgb, var(--bg-2) 60%, transparent);
    border-color: var(--line-2);
  }
  .preview-atmos__glow--a { opacity: 1.3; }
  .preview-atmos__grid { opacity: 0.6; }
}

/* ---- Dropzone (empty state) ---- */
.dropzone-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-5);
  min-height: 60vh;
  transition: background 200ms var(--ease);
}
.dropzone-wrap.is-dragging {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.dropzone-wrap.is-dragging .dropzone-card {
  border-color: var(--accent);
  transform: scale(1.005);
}

.dropzone-card {
  width: 100%;
  max-width: 1080px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(1,20,52,0.06), 0 20px 40px -16px rgba(1,20,52,0.14));
  transition: transform 200ms var(--ease-spring), border-color 200ms var(--ease);
  position: relative;
}
@media (max-width: 880px) {
  .dropzone-card { grid-template-columns: 1fr; }
  .dropzone-card__demo { display: none; }
}
.dropzone-card__copy {
  padding: var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dropzone-card__kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin: 0 0 var(--s-3);
}
.dropzone-card__headline {
  font-family: var(--display, var(--sans));
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.dropzone-card__lede {
  font-size: var(--t);
  color: var(--text-2);
  margin: 0 0 var(--s-5);
  line-height: 1.6;
}
.dropzone-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.dropzone-card__or {
  font-size: var(--t-sm);
  color: var(--text-3);
  font-style: italic;
}
.dropzone-card__hints {
  list-style: none;
  padding: var(--s-4) 0 0;
  margin: var(--s-5) 0 0;
  display: grid;
  gap: var(--s-2);
  border-top: 1px solid var(--line);
}
.dropzone-card__hints li {
  font-size: var(--t-xs);
  color: var(--text-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
}
.dropzone-card__hints li::before {
  content: "→";
  color: var(--accent-text);
}
.dropzone-card__demo {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  padding: var(--s-6);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropzone-card__demo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(1,20,52,0.03) 1px, transparent 1px);
  background-size: 100% 24px;
  pointer-events: none;
}

/* ==========================================================================
   LIVE DEMO (preview empty state). Auto-playing 4-phase loop:
     Phase 1 (0.0s - 1.6s): paper slides into view ("upload")
     Phase 2 (1.6s - 4.4s): scan line sweeps + field boxes pop in ("detect")
     Phase 3 (4.4s - 8.4s): ink flows into the signature line ("sign")
     Phase 4 (8.4s - 10.4s): green check overlays + status reads "Done"
     Loop restart at 12s.
   Honors prefers-reduced-motion: keyframes pause and final state freezes.
   ========================================================================== */

.live-demo {
  width: 100%;
  max-width: 360px;
  position: relative;
}
.live-demo__stage {
  position: relative;
  perspective: 1200px;
}

/* Corner filename tag */
.live-demo__corner {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--text);
  color: var(--text-on-dark);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 4;
}

/* Phase status (top-right of stage) */
.live-demo__status {
  position: absolute;
  top: -12px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  z-index: 4;
}
.live-demo__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: live-demo-pulse 1.6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes live-demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Paper. White, soft drop-shadow, slight tilt for depth */
.live-demo__paper {
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  padding: 22px 22px 30px;
  box-shadow:
    0 1px 2px rgba(1, 20, 52, 0.10),
    0 18px 38px -18px rgba(1, 20, 52, 0.28);
  transform: translateY(28px) rotateX(6deg);
  opacity: 0;
  animation: live-demo-paper-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards,
             live-demo-loop 12s infinite 12s linear;
  color: rgba(1, 20, 52, 0.86);
}
@keyframes live-demo-paper-in {
  to { transform: translateY(0) rotateX(0deg); opacity: 1; }
}
@keyframes live-demo-loop {
  0%, 100% { /* held by paper-in */ }
}

.live-demo__masthead {
  border-bottom: 1px solid rgba(1, 20, 52, 0.10);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.live-demo__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #011434;
  margin: 0;
}
.live-demo__sub {
  font-family: var(--sans);
  font-size: 9px;
  color: rgba(1, 20, 52, 0.72);
  margin-top: 2px;
}

.live-demo__form {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.live-demo__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(1, 20, 52, 0.72);
}
.live-demo__row > span:first-child { flex: 0 0 56px; }
.live-demo__line {
  flex: 1;
  height: 1px;
  background: rgba(1, 20, 52, 0.30);
}
.live-demo__line--long  { flex: 1.4; }
.live-demo__line--short { flex: 0.6; }

.live-demo__para {
  display: grid;
  gap: 4px;
  margin: 12px 0;
}
.live-demo__txt {
  height: 3px;
  background: rgba(1, 20, 52, 0.10);
  border-radius: 1px;
}
.live-demo__txt--90 { width: 90%; }
.live-demo__txt--70 { width: 70%; }

.live-demo__sigblock {
  border-top: 1px solid rgba(1, 20, 52, 0.10);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}
.live-demo__sigrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.live-demo__sig-label {
  flex: 0 0 70px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(1, 20, 52, 0.72);
  padding-bottom: 2px;
}
.live-demo__sig-base {
  flex: 1;
  height: 18px;
  border-bottom: 1px solid rgba(1, 20, 52, 0.45);
  position: relative;
}
.live-demo__sig-base--short { flex: 0.5; }
.live-demo__sig-ink {
  position: absolute;
  bottom: 1px;
  left: 4px;
  width: 0;
  height: 11px;
  /* SVG signature-like squiggle drawn as a clip-path. The ink "draws"
     by animating width from 0 to 100% during phase 3. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 18'><path d='M2,14 C8,8 14,2 22,6 C30,10 32,16 40,14 C48,12 50,4 58,8 C66,12 68,16 76,12 C84,8 86,2 94,8 C102,14 106,16 114,10 C122,4 126,8 138,12' fill='none' stroke='%23011434' stroke-width='1.6' stroke-linecap='round'/></svg>")
    no-repeat left center / 100% 100%;
  animation: live-demo-ink 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 4.6s forwards,
             live-demo-ink-loop 12s infinite linear;
}
.live-demo__sig-ink--date {
  /* For the date field, replace the squiggle with typed-text look. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 14'><text x='2' y='11' font-family='monospace' font-size='10' fill='%23011434'>05 / 30 / 2026</text></svg>")
    no-repeat left center / 100% 100%;
  animation: live-demo-ink 1.4s ease-out 6.0s forwards,
             live-demo-ink-loop 12s infinite linear;
}
@keyframes live-demo-ink {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes live-demo-ink-loop {
  /* Reset to 0 at the start of each loop. Setting width:0 on the
     0% keyframe and letting the per-phase animation re-fill is what
     produces the loop. */
  0%   { width: 100%; }
  88%  { width: 100%; }
  90%  { width: 0; }
  100% { width: 0; }
}

/* Field-box overlays now nest INSIDE their line / signature-base so
   alignment is automatic regardless of font, padding, or wrap. Each
   line is position: relative so the overlay's absolute positioning
   resolves to the line itself. The overlay extends slightly above
   and below the baseline so it visually "wraps" the line rather
   than sitting on top of it. */
.live-demo__line,
.live-demo__sig-base,
.live-demo__init-box {
  position: relative;
}
.live-demo__field {
  position: absolute;
  inset: -5px -2px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  animation: live-demo-field-in 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) var(--ld-delay, 2s) forwards,
             live-demo-field-loop 12s infinite linear;
}
.live-demo__field[data-type="text"]      { border-color: var(--accent); background: var(--accent-soft); }
.live-demo__field[data-type="signature"] { border-color: var(--accent); background: var(--accent-soft); }
.live-demo__field[data-type="date"]      { border-color: var(--ok);     background: var(--ok-soft); }
.live-demo__field[data-type="initial"]   { border-color: var(--warn);   background: var(--warn-soft); }

@keyframes live-demo-field-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes live-demo-field-loop {
  0%    { opacity: 1; }
  84%   { opacity: 1; }
  87%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* Inline initial marker (small box mid-paragraph) */
.live-demo__inline-init {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.live-demo__inline-init .live-demo__txt {
  flex: 1;
  margin: 0;
}
.live-demo__init-box {
  flex: 0 0 22px;
  height: 14px;
  border: 1px solid rgba(1, 20, 52, 0.35);
  border-radius: 2px;
  background: rgba(1, 20, 52, 0.02);
}

/* Scan line. Sweeps top-to-bottom during phase 2. */
.live-demo__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent 100%);
  box-shadow:
    0 0 6px 0 var(--accent),
    0 0 20px 4px color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: 0;
  animation: live-demo-scan 2.4s cubic-bezier(0.4, 0, 0.6, 1) 1.6s forwards,
             live-demo-scan-loop 12s infinite linear;
}
@keyframes live-demo-scan {
  0%   { opacity: 0; top: 0; }
  10%  { opacity: 0.95; }
  90%  { opacity: 0.95; }
  100% { opacity: 0; top: 100%; }
}
@keyframes live-demo-scan-loop {
  0%   { top: 0; opacity: 0; }
  100% { top: 0; opacity: 0; }
}

/* Final completion check, appears in phase 4 */
.live-demo__done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  opacity: 0;
  animation: live-demo-done-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 8.4s forwards,
             live-demo-done-out 0.5s ease-in 10.8s forwards,
             live-demo-done-loop 12s infinite linear;
  border-radius: 4px;
}
.live-demo__done svg {
  width: 56px;
  height: 56px;
  color: var(--ok);
  transform: scale(0.4);
  opacity: 0;
  animation: live-demo-check 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 8.6s forwards,
             live-demo-check-loop 12s infinite linear;
}
@keyframes live-demo-done-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes live-demo-done-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes live-demo-done-loop { 0%, 100% { opacity: 0; } }
@keyframes live-demo-check     { to { transform: scale(1); opacity: 1; } }
@keyframes live-demo-check-loop { 0%, 100% { transform: scale(0.4); opacity: 0; } }

/* Phase indicator dots */
.live-demo__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.live-demo__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(1, 20, 52, 0.18);
  transition: background 240ms var(--ease);
}
.live-demo__dot[data-step="1"] { animation: live-demo-dot1 12s infinite linear 0s; }
.live-demo__dot[data-step="2"] { animation: live-demo-dot2 12s infinite linear 0s; }
.live-demo__dot[data-step="3"] { animation: live-demo-dot3 12s infinite linear 0s; }
.live-demo__dot[data-step="4"] { animation: live-demo-dot4 12s infinite linear 0s; }
@keyframes live-demo-dot1 {
  0%, 13%   { background: var(--accent); transform: scale(1.3); }
  14%, 100% { background: rgba(1, 20, 52, 0.18); transform: scale(1); }
}
@keyframes live-demo-dot2 {
  0%, 13%   { background: rgba(1, 20, 52, 0.18); }
  14%, 36%  { background: var(--accent); transform: scale(1.3); }
  37%, 100% { background: rgba(1, 20, 52, 0.18); transform: scale(1); }
}
@keyframes live-demo-dot3 {
  0%, 36%   { background: rgba(1, 20, 52, 0.18); }
  37%, 69%  { background: var(--accent); transform: scale(1.3); }
  70%, 100% { background: rgba(1, 20, 52, 0.18); transform: scale(1); }
}
@keyframes live-demo-dot4 {
  0%, 69%   { background: rgba(1, 20, 52, 0.18); }
  70%, 92%  { background: var(--ok); transform: scale(1.3); }
  93%, 100% { background: rgba(1, 20, 52, 0.18); transform: scale(1); }
}

/* Reduced motion: pause every animation; show the final state of the
   doc as a still (paper visible, all field overlays visible, no
   scanning, no ink animation). Visitor still sees what the product
   produces, just without motion. */
@media (prefers-reduced-motion: reduce) {
  .live-demo__paper,
  .live-demo__field,
  .live-demo__scan,
  .live-demo__done,
  .live-demo__done svg,
  .live-demo__dot,
  .live-demo__sig-ink,
  .live-demo__status-dot {
    animation: none !important;
  }
  .live-demo__paper { transform: none; opacity: 1; }
  .live-demo__field { opacity: 1; }
  .live-demo__scan  { opacity: 0; }
  .live-demo__done  { opacity: 0; }
  .live-demo__sig-ink { width: 100%; }
}

/* ---- Result layout (loaded state) ---- */
.result {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  min-height: calc(100vh - 60px);
}
@media (max-width: 980px) {
  .result { grid-template-columns: 1fr; }
}

.result__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}
.result__pages {
  padding: var(--s-4) var(--s-5) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  align-items: center;
  min-width: 0;
}

/* ── Floating document toolbar ─────────────────────────
   Pinned to the top of the document scroll area.
   Carries prev/next field navigation and edit-mode toggle.
   Soft glass effect so the document underneath shows through. */
.doc-toolbar {
  position: sticky;
  top: 64px;
  z-index: 12;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--s-4) 0 0;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(1,20,52,0.06), 0 12px 28px -16px rgba(1,20,52,0.20);
  font-family: var(--sans);
}
.doc-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.doc-toolbar__btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.doc-toolbar__btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.doc-toolbar__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.doc-toolbar__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.doc-toolbar__pos {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  justify-content: center;
}
.doc-toolbar__pos-current { font-weight: 600; color: var(--text); }
.doc-toolbar__pos-sep { color: var(--line-2); }
.doc-toolbar__pos-total { color: var(--text-3); }
.doc-toolbar__pos-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-left: 4px;
}
.doc-toolbar__sep {
  width: 1px;
  height: 18px;
  background: var(--line-2);
  margin: 0 4px;
}
.doc-toolbar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.doc-toolbar__toggle:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.doc-toolbar__toggle[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
}
.doc-toolbar__toggle[aria-pressed="true"]:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
  color: var(--bg);
}
.doc-toolbar__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .doc-toolbar__btn { min-width: 44px; min-height: 44px; }
  .doc-toolbar__toggle { min-height: 44px; }
}
@media (max-width: 640px) {
  .doc-toolbar__toggle-label { display: none; }
  .doc-toolbar__pos-label { display: none; }
  .doc-toolbar__pos { min-width: 60px; padding: 0 6px; }
  .doc-toolbar { gap: 2px; padding: 4px 6px; top: 56px; }
  .doc-toolbar__btn { width: 40px; height: 40px; }
  .doc-toolbar__toggle { padding: 6px 10px; }
  .doc-toolbar__sep { margin: 0 2px; }

  /* Sidebar action zone shrinks on phones — smaller padding so the
     primary CTA stays one tap above the fold instead of pushed below. */
  .sidebar__action { padding: var(--s-3) var(--s-4); }
  .sidebar__head { padding: var(--s-4); }
  .sidebar__legend,
  .sidebar__tools-summary { padding-left: var(--s-4); padding-right: var(--s-4); }
  .sidebar__tools-body { padding-left: var(--s-4); padding-right: var(--s-4); }

  /* Doc card shrinks: smaller icon, tighter type. */
  .doc-card__icon { flex: 0 0 32px; width: 32px; height: 32px; }
  .doc-card__title { font-size: 15px; }
}

/* ── Very small phones (iPhone SE width = 375) ───────── */
@media (max-width: 380px) {
  .doc-toolbar__pos { min-width: 44px; font-size: 11px; }
  .doc-toolbar__toggle svg { width: 12px; height: 12px; }
}

.page-shell {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(1,20,52,0.08), 0 18px 32px -16px rgba(1,20,52,0.18);
  max-width: 100%;
  animation: pageEnter 480ms var(--ease-spring) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-shell:nth-child(1) { animation-delay: 0ms; }
.page-shell:nth-child(2) { animation-delay: 80ms; }
.page-shell:nth-child(3) { animation-delay: 160ms; }
.page-shell:nth-child(n+4) { animation-delay: 220ms; }

.page-shell__index {
  position: absolute;
  top: -22px;
  left: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.page-shell canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-shell { animation: none; }
}

/* ---- Sidebar ---- */
.sidebar {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  border-left: 1px solid var(--line);
}
@media (max-width: 980px) {
  .sidebar {
    position: static;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ── Mobile signing UX (slice 79) ─────────────────────────
   At phone widths the sidebar becomes a bottom sheet pinned to the
   viewport edge. Collapsed by default with just the primary CTA + a
   handle. Tap-to-expand reveals the full workspace. Signing is
   one-handed and thumb-reachable. Large touch targets (44pt min). */
@media (max-width: 768px) {
  .result {
    grid-template-columns: 1fr !important;
    padding-bottom: 240px;  /* room for the bottom sheet peek + last fields */
  }
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 40;
    max-height: 86vh;
    height: auto;
    border-top: 1px solid var(--line);
    border-left: 0;
    border-radius: 18px 18px 0 0;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 -20px 60px rgba(1,20,52,0.18);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(calc(100% - 220px - env(safe-area-inset-bottom)));
    transition: transform 320ms var(--ease);
    overflow-y: auto;
  }
  .sidebar[data-sheet="open"] {
    transform: translateY(0);
  }
  /* Grab handle so users learn it's draggable. */
  .sidebar::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
    margin: 10px auto 4px;
    flex: 0 0 auto;
  }
  /* Bigger touch targets on every interactive element inside the sheet. */
  .sidebar .btn,
  .sidebar .add-field-btn,
  .sidebar .signer-row__name,
  .sidebar .signer-row__email,
  .sidebar .signers-panel__as-select {
    min-height: 44px;
    font-size: 16px;
  }
  /* The primary CTA stays visible even when sheet is collapsed. */
  .sidebar__action {
    padding-block: 8px;
  }
  /* Field type tags larger on mobile so signers can read which is
     which from the thumb position. */
  .field-box__tag {
    font-size: 12px;
    padding: 3px 7px;
  }
  /* Doc toolbar at the top sits a bit smaller on phones. */
  .doc-toolbar {
    top: 64px;
    padding: 4px 6px;
  }
}

/* Focus zoom: when a field is focused on mobile, briefly scale the
   surrounding page into view. CSS hint; JS toggles the data attribute. */
@media (max-width: 768px) {
  .field-box.is-focused {
    box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px var(--accent-line);
  }
}
.sidebar__head {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}

/* ── Document identity card ─────────────────────────────
   Filename + page/field meta + a small icon. Replaces the
   old "Detection report" crumb + bare filename + 3-stat grid
   pattern. The icon roots the visual hierarchy; meta line
   carries pages·fields lightly so the eye moves down to the
   progress bar and CTA rather than parking on cold numbers. */
.doc-card {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.doc-card__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
}
.doc-card__icon svg {
  width: 18px;
  height: 18px;
}
.doc-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.doc-card__title {
  font-family: var(--display, var(--sans));
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: break-word;
}
.doc-card__meta {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.doc-card__sep {
  margin: 0 6px;
  color: var(--line-2);
}

/* ── Primary action zone ─────────────────────────────────
   Progress bar on top tells the user where they are. Big
   primary button below is the only action that matters.
   Sits inside its own padded zone with bottom border so the
   eye treats it as a single unit. */
.sidebar__action {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-2);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 80%, white));
  transition: width 240ms var(--ease), background 240ms var(--ease);
}
.progress--complete .progress__fill {
  background: var(--ok);
}
.progress__text {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-2);
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.progress__text strong {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.progress--complete .progress__text {
  color: var(--ok);
}
.progress--complete .progress__text strong {
  color: var(--ok);
}

/* Inline hint for "add a field, click on the page" — moved
   here so it lives next to the primary action and the user
   sees it without scrolling to the tools disclosure. */
.add-field-hint {
  margin: 0;
  min-height: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--accent-text);
  line-height: 1.4;
}
.add-field-hint:empty {
  display: none;
}

/* ── Compact legend ─────────────────────────────────────
   Horizontal row, no longer a 2-column grid. Single line
   when sidebar is wide, wraps gracefully when narrow. */
.sidebar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}

/* ── Tools & templates disclosure ───────────────────────
   Collapsed by default. Holds the "add missed field"
   panel, save-template, and load-another buttons —
   secondary actions that don't need to compete with the
   primary CTA for visual real estate. */
.sidebar__tools {
  border-bottom: 1px solid var(--line);
}
.sidebar__tools-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.sidebar__tools-summary::-webkit-details-marker { display: none; }
.sidebar__tools-summary::marker { content: ""; }
.sidebar__tools-summary:hover {
  background: var(--bg-2);
  color: var(--text);
}
.sidebar__tools-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.sidebar__tools[open] .sidebar__tools-summary {
  color: var(--text);
  background: var(--bg-2);
}
.sidebar__tools-chev {
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: transform 200ms var(--ease);
}
.sidebar__tools[open] .sidebar__tools-chev {
  transform: rotate(180deg);
  color: var(--accent-text);
}
.sidebar__tools-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-4);
  background: var(--bg-2);
}

/* ── Signer-mode visibility ─────────────────────────────
   Magic-link recipients should not see sender-only controls.
   Hide: edit-fields toggle, add-field group, save template,
   load another document, email-copy. The signers panel
   collapses to just the recipient's own row (no add). */
.is-signer-mode .doc-toolbar__toggle,
.is-signer-mode .doc-toolbar__sep,
.is-signer-mode .add-field-group,
.is-signer-mode #save-template-button,
.is-signer-mode #email-copy-button,
.is-signer-mode #reset-button,
.is-signer-mode #add-signer,
.is-signer-mode .signers-panel__as {
  display: none !important;
}

/* Decline-to-sign link. Visible ONLY in signer mode — sender-mode
   has nothing to decline. Styled as a quiet link, not a button:
   destructive actions should feel deliberate, not loud. */
.decline-link {
  display: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 6px 0 0;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 140ms var(--ease);
}
.decline-link:hover {
  color: var(--warn);
  text-decoration-color: var(--warn);
}
.decline-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.is-signer-mode .decline-link { display: block; }
/* Drop the "Tools & templates" disclosure altogether when only the
   snapshot button remains inside — the lone button gets promoted to
   the sidebar action zone via specific JS, but for safety hide an
   empty disclosure rather than show an empty body. */
.is-signer-mode .sidebar__tools-body {
  padding-top: var(--s-2);
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-chip i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid currentColor;
  background: currentColor;
  opacity: 0.5;
}
.legend-chip[data-type="signature"] { color: var(--accent-text); }
.legend-chip[data-type="date"]      { color: var(--ok); }
.legend-chip[data-type="initial"]   { color: var(--warn); }
.legend-chip[data-type="checkbox"]  { color: var(--text-2); }
.legend-chip[data-type="text"]      { color: var(--text-3); }

/* ---- Field list inside the sidebar ---- */
.field-list {
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0;
  overflow-y: auto;
  flex: 1;
}
.field-list__empty {
  padding: var(--s-5);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
/* Actionable empty state — embeds a CTA so the surface isn't inert. */
.field-list__empty--actionable {
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  margin: var(--s-3) var(--s-5);
  padding: var(--s-4);
  border-radius: 6px;
}
.field-list__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.field-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  align-items: center;
  cursor: pointer;
  transition: background 160ms var(--ease);
  border-bottom: 1px solid var(--line);
}
.field-row:hover { background: var(--bg-2); }
.field-row.is-focused {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.field-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 8px;
}
.field-row[data-type="date"]     .field-row__dot { background: var(--ok); }
.field-row[data-type="initial"]  .field-row__dot { background: var(--warn); }
.field-row[data-type="checkbox"] .field-row__dot { background: var(--text-2); }
.field-row[data-type="text"]     .field-row__dot { background: var(--text-3); }
.field-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.field-row__type {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.field-row__label {
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.field-row__conf {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* Error banner (used when render or detection fails) */
.error-banner {
  margin: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--danger-soft, color-mix(in srgb, var(--danger, #d04141) 12%, transparent));
  border: 1px solid var(--danger, #d04141);
  border-radius: var(--r);
  color: var(--danger, #d04141);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* Status indicator pill in masthead */
.pill[data-state="idle"]  { background: var(--bg-2); color: var(--text-2); }
.pill[data-state="busy"]  { background: var(--accent-soft); color: var(--accent-text); }
.pill[data-state="done"]  { background: var(--ok-soft); color: var(--ok); }
.pill[data-state="error"] { background: var(--danger-soft, rgba(208,65,65,0.12)); color: var(--danger, #d04141); }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--r-pill, 999px);
}

/* ========================================================================
   Field-box overlay. Drawn on top of each rendered PDF page in the
   preview app. Pass 6 in detect.js classifies fields as primary
   (dedicated signature block) or secondary (body inline fill-ins).
   By default only primary fields show. The toolbar toggle adds
   `data-show-all="true"` to the body, which reveals everything.
   ======================================================================== */

.field-box {
  position: absolute;
  pointer-events: auto;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
  z-index: 2;
}
/* Staggered detection reveal: each box has a per-element delay set via
   CSS custom property --reveal-delay; the keyframe runs once on first
   paint and lands the box in place. Reduced-motion users skip it. */
@keyframes field-box-reveal {
  0%   { opacity: 0; transform: scale(0.82); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.field-box[data-reveal="true"] {
  animation: field-box-reveal 360ms var(--ease-spring) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .field-box[data-reveal="true"] { animation: none; }
}

.field-box[data-type="date"]       { border-color: var(--ok);     background: var(--ok-soft); }
.field-box[data-type="initial"]    { border-color: var(--warn);   background: var(--warn-soft); }
.field-box[data-type="checkbox"]   { border-color: var(--text-2); background: rgba(74, 80, 96, 0.08); }
.field-box[data-type="text"]       { border-color: var(--text-3); background: rgba(128, 136, 160, 0.08); }
.field-box:hover { border-color: var(--accent-text); }

/* Confidence-floor slider sets data-hidden on body fields below the
   floor. Primary fields (the signature block) are exempt. See
   applyConfidenceFloorToBox in web/preview/app.js. */
.field-box[data-hidden="true"] {
  display: none;
}
.field-box[data-primary="false"][data-hidden="false"] {
  /* Body fields revealed by lowering the slider: dashed border + slight
     opacity so they read as "auto-detected, not in the primary block". */
  border-style: dashed;
  opacity: 0.7;
}
.field-box[data-primary="false"][data-hidden="false"]:hover {
  opacity: 1;
}

.field-box__tag {
  position: absolute;
  top: -16px;
  left: -1px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 2px 2px 0 0;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
/* Show the type tag in three cases:
   (1) edit mode is on (user wants to see/manage field placements)
   (2) the field is hovered
   (3) the field is focused (clicked, or just navigated to via prev/next)
   In sign-mode (default), tags stay invisible so the document reads
   clean, exactly as the signer will see it after flatten. */
.is-edit-mode .field-box__tag,
.field-box:hover .field-box__tag,
.field-box.is-focused .field-box__tag { opacity: 1; }
.field-box[data-type="date"]     .field-box__tag { background: var(--ok); }
.field-box[data-type="initial"]  .field-box__tag { background: var(--warn); }
.field-box[data-type="checkbox"] .field-box__tag { background: var(--text-2); }
.field-box[data-type="text"]     .field-box__tag { background: var(--text-3); }

.field-box__chip {
  position: absolute;
  top: -14px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
  background: var(--text-2);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  line-height: 1;
  z-index: 3;
  transition: opacity 160ms var(--ease);
}
/* Single-signer mode: there's nobody to assign TO, so the dots are
   pure noise. Hide them unless the user is in edit mode or the field
   itself is hovered/focused — the latter exposes the chip on demand
   for the rare case where a user wants to add a second signer. */
.is-single-signer .field-box__chip { opacity: 0; pointer-events: none; }
.is-single-signer.is-edit-mode .field-box__chip,
.is-single-signer .field-box:hover .field-box__chip,
.is-single-signer .field-box.is-focused .field-box__chip {
  opacity: 1;
  pointer-events: auto;
}

/* Template-state badge in the sidebar head. Different intent colors
   tell the user whether prior work loaded without reading text. */
/* Template reliability pill. Sits under the doc-card and
   tells the user qualitatively how trustworthy the detected
   field set is. Public template = trusted, saved = your own,
   restored-edits = you have unsaved work, none = heuristic. */
.template-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--s-3) 0 0;
  padding: 4px 10px 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid transparent;
  max-width: 100%;
}
.template-state::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}
.template-state[data-state="applied-public"]  {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  color: var(--ok);
}
.template-state[data-state="applied-private"] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-text);
}
.template-state[data-state="restored-edits"]  {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--warn);
}
.template-state[data-state="none"] {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--text-3);
}

/* Single-line "Download PDF" button. Progress now lives in the
   progress bar above, so the button stays a clean primary CTA. */
#sign-button {
  flex-direction: row;
  white-space: normal;
  gap: var(--s-2);
  line-height: 1.2;
  padding-block: 14px;
  font-weight: 600;
  font-size: var(--t);
  letter-spacing: -0.005em;
}
#sign-button .sign-btn__label {
  display: inline;
  font-weight: 600;
}
#sign-button .sign-btn__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 200ms var(--ease);
}
#sign-button:not(:disabled):hover .sign-btn__arrow {
  transform: translateY(1px);
}
/* Disabled primary button: keep it readable but unmistakeably off.
   Default .btn--primary[disabled] state is fine; this just lifts
   the contrast on the label so users see what's coming. */
#sign-button:disabled {
  opacity: 0.5;
}

/* Filled-field appearance. The box sits on top of the WHITE rendered
   PDF page; the goal is ink-on-paper. Backdrop reduces to almost
   transparent so the fill content (typed text, checkmark, signature
   image) is what reads. Border thins to a subtle outline so the user
   can still click to edit. */
.field-box--filled {
  background: rgba(1, 20, 52, 0.02);
  border-style: solid;
  border-color: rgba(1, 20, 52, 0.18);
}
.field-box--filled .field-box__tag { opacity: 0; }
.field-box--other-signer { opacity: 0.35; }
.field-box.is-focused { box-shadow: 0 0 0 3px var(--accent-line); }

/* Prev/Next nav landing pulse. Brief glow so the user spots where the
   viewport just jumped to. Self-clearing after 700ms via JS. */
.field-box--nav-pulse {
  animation: fieldNavPulse 700ms var(--ease) both;
}
@keyframes fieldNavPulse {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  40%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 3px var(--accent-line); }
}
@media (prefers-reduced-motion: reduce) {
  .field-box--nav-pulse { animation: none; }
}

.field-box__fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 4px;
  font-family: var(--display);
  font-size: 13px;
  /* Hard-coded navy ink: the fill is rendered on the WHITE PDF page,
     not on the page background. var(--text) flips to white in dark
     mode and made fills unreadable. Ink is always dark on paper. */
  color: #011434;
  pointer-events: none;
}
.field-box__fill--text   { font-style: italic; }
.field-box__fill--check  {
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #011434;
  line-height: 1;
}
.field-box__signature {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Confidence-threshold slider. Replaces the prior binary primary /
   secondary toggle. Lets the sender pick how aggressively the detector
   filters body inline fill-ins. Primary signature-block fields are
   exempt from filtering. */
.field-slider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--text-2);
}
.field-slider__label {
  white-space: nowrap;
  color: var(--text-3);
}
.field-slider__input {
  width: 120px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-3);
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
}
.field-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.field-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.field-slider__readout {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 90px;
}
.field-slider__count {
  font-size: 10px;
  color: var(--text-3);
  padding-left: 8px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

/* ========================================================================
   Sender controls: per-field edit button + context menu.
   Right-click a detected field box to change its type, promote /
   demote it, or remove it. Edits persist via the senderEdits Map
   in web/preview/app.js.
   ======================================================================== */

.field-box__edit {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  border-radius: 2px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 120ms var(--ease), background 120ms var(--ease);
}
.field-box:hover .field-box__edit { opacity: 1; }
.field-box__edit:hover { background: var(--surface); color: var(--text); }

.field-menu {
  position: absolute;
  z-index: 100;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--s-3);
  font-family: var(--sans);
  font-size: var(--t-s);
  color: var(--text);
}
.field-menu__heading {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--text-3);
  padding: 0 var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field-menu__type-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--s-2) var(--s-2);
}
.field-menu__type-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-right: var(--s-2);
}
.field-menu__type-btn {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: lowercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 120ms var(--ease), color 120ms var(--ease), background 120ms var(--ease);
}
.field-menu__type-btn:hover {
  border-color: var(--line-2);
  color: var(--text);
}
.field-menu__type-btn[data-active="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.field-menu__sep {
  height: 1px;
  background: var(--line);
  margin: var(--s-2) 0;
}
.field-menu__action {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--t-s);
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.field-menu__action:hover { background: var(--bg-2); }
.field-menu__action--danger { color: var(--danger); }
.field-menu__action--danger:hover { background: var(--danger-soft); }

/* ============================================================================
   SLICE 36: UNIFIED VISUAL POLISH PASS
   ----------------------------------------------------------------------------
   Site-wide polish layer. Activated by polish.js setting
   <html data-polish="on">. Effect across every customer-facing page:

     1. Smooth scroll for in-page anchors.
     2. Cyan accessible focus rings on interactive elements.
     3. Brand-honoring gradient backgrounds on hero, section--alt, dropzone.
     4. Scroll-driven fade-up reveal on sections, cards, tiles, FAQ.
     5. Card hover lifts on tier, alt-card, doc-card, faq__item, dash-stats__card.
     6. Button micro-interactions: glow on hover, scale-down on click.
     7. Tightened display-typography kerning + optical sizing.

   Pure presentation. No logic changes. No new vendors. Respects
   prefers-reduced-motion: every keyframe stops; reveals show static.
   ============================================================================ */

:root[data-polish="on"] {
  scroll-behavior: smooth;
}

/* ---- 2. Focus rings (accessibility + polish in one) ---- */
:root[data-polish="on"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:root[data-polish="on"] .btn:focus-visible { outline-offset: 4px; }

/* ---- 3. Brand-honoring gradient backgrounds ---- */
:root[data-polish="on"] .hero {
  background:
    radial-gradient(ellipse 100% 60% at 70% 0%,
      color-mix(in srgb, var(--accent) 8%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
:root[data-polish="on"] .section--alt {
  background:
    linear-gradient(180deg,
      var(--bg-2) 0%,
      color-mix(in srgb, var(--accent) 3%, var(--bg-2)) 100%);
}
:root[data-polish="on"] .dropzone-wrap {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,
      color-mix(in srgb, var(--accent) 6%, transparent) 0%,
      transparent 70%),
    var(--bg);
}

/* ---- 4. Scroll-driven entrance reveal ---- */
[data-reveal="hidden"] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
[data-reveal="visible"] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--polish-delay, 0ms),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--polish-delay, 0ms);
}

/* ---- 5. Card hover lifts ---- */
:root[data-polish="on"] .tier,
:root[data-polish="on"] .alt-card,
:root[data-polish="on"] .doc-card,
:root[data-polish="on"] .faq__item,
:root[data-polish="on"] .dash-stats__card,
:root[data-polish="on"] .dash-util__item,
:root[data-polish="on"] .dash-step {
  transition:
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 240ms ease,
    border-color 240ms ease;
}
:root[data-polish="on"] .tier:hover,
:root[data-polish="on"] .alt-card:hover,
:root[data-polish="on"] .doc-card:hover,
:root[data-polish="on"] .faq__item:hover,
:root[data-polish="on"] .dash-stats__card:hover,
:root[data-polish="on"] .dash-util__item:hover,
:root[data-polish="on"] .dash-step:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(1, 20, 52, 0.08),
    0 18px 32px -16px rgba(1, 20, 52, 0.20);
  border-color: var(--line-strong);
}
:root[data-polish="on"] .tier--featured:hover {
  /* Featured tier already has emphasis; gentler lift. */
  transform: translateY(-2px);
}

/* ---- 6. Button micro-interactions ---- */
:root[data-polish="on"] .btn--primary {
  position: relative;
  transition:
    transform 100ms ease,
    box-shadow 240ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
:root[data-polish="on"] .btn--primary:hover {
  box-shadow:
    0 4px 12px -4px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
:root[data-polish="on"] .btn--primary:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 60ms;
}
:root[data-polish="on"] .btn--ghost {
  transition:
    transform 100ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}
:root[data-polish="on"] .btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}
:root[data-polish="on"] .btn--ghost:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 60ms;
}

/* ---- 7. Tightened display-typography ---- */
:root[data-polish="on"] .h-display {
  letter-spacing: -0.025em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  text-rendering: geometricPrecision;
}
:root[data-polish="on"] .h-section {
  letter-spacing: -0.018em;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ---- 8. Subtle ambient detail on the masthead so the chrome reads premium ---- */
:root[data-polish="on"] .masthead {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 96%, var(--bg-2)) 0%,
      var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
}

/* ---- 9. Reduced-motion override: keep gradients + focus rings,
        skip reveals + hovers. Browser-default scrollbars + form controls
        stay system-native. ---- */
@media (prefers-reduced-motion: reduce) {
  :root[data-polish="on"] { scroll-behavior: auto; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  :root[data-polish="on"] .tier,
  :root[data-polish="on"] .alt-card,
  :root[data-polish="on"] .doc-card,
  :root[data-polish="on"] .faq__item,
  :root[data-polish="on"] .dash-stats__card,
  :root[data-polish="on"] .dash-util__item,
  :root[data-polish="on"] .dash-step,
  :root[data-polish="on"] .btn--primary,
  :root[data-polish="on"] .btn--ghost {
    transition: none !important;
  }
  :root[data-polish="on"] .tier:hover,
  :root[data-polish="on"] .alt-card:hover,
  :root[data-polish="on"] .doc-card:hover,
  :root[data-polish="on"] .faq__item:hover,
  :root[data-polish="on"] .dash-stats__card:hover,
  :root[data-polish="on"] .dash-util__item:hover,
  :root[data-polish="on"] .dash-step:hover {
    transform: none !important;
  }
}

/* ============================================================================
   SLICE 37: COHESION PASS
   ----------------------------------------------------------------------------
   Extends the slice-36 polish layer to every remaining card-like
   component, adds a one-time page-load hero entrance (separate from
   scroll-driven reveals), and normalizes cross-page rhythm.
   ============================================================================ */

/* ---- Hover lifts extended to the components slice 36 skipped ---- */
:root[data-polish="on"] .sub-banner,
:root[data-polish="on"] .signer-status,
:root[data-polish="on"] .owner-panel,
:root[data-polish="on"] .compare tbody tr {
  transition:
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 240ms ease,
    background 240ms ease,
    border-color 240ms ease;
}
:root[data-polish="on"] .sub-banner:hover,
:root[data-polish="on"] .signer-status:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(1, 20, 52, 0.08),
    0 12px 24px -12px rgba(1, 20, 52, 0.18);
}
:root[data-polish="on"] .compare tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* ---- Page-load hero entrance. Plays ONCE on initial paint, not on
        scroll. Targets the hero block on every page so the first-paint
        snap-in is replaced with a soft fade-up. Independent of the
        Intersection Observer's data-reveal mechanism (which only fires
        below-the-fold). ---- */
:root[data-polish="on"] .hero,
:root[data-polish="on"] .dropzone-wrap,
:root[data-polish="on"] .dashboard__head {
  animation: page-hero-in 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes page-hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Unify kicker color across all surfaces. Some kickers got the
        muted variant by accident; restore brand-cyan as the default. ---- */
.kicker { color: var(--accent-text); }
.kicker--muted { color: var(--text-3); }

/* ---- Ensure every container shares the same max-width across pages.
        Was inconsistent: marketing pages used 1200px, dashboard used
        1100px, legal used 800px. Standardize on 1200px and let inner
        content set its own column width via inline max-width when
        narrower is required. ---- */
.container { max-width: 1200px; }
.container--prose { max-width: 720px; }

/* ---- Reduced-motion override for the page-load hero entrance ---- */
@media (prefers-reduced-motion: reduce) {
  :root[data-polish="on"] .hero,
  :root[data-polish="on"] .dropzone-wrap,
  :root[data-polish="on"] .dashboard__head,
  :root[data-polish="on"] .sub-banner,
  :root[data-polish="on"] .signer-status,
  :root[data-polish="on"] .compare tbody tr {
    animation: none !important;
    transition: none !important;
  }
  :root[data-polish="on"] .sub-banner:hover,
  :root[data-polish="on"] .signer-status:hover { transform: none !important; }
}

/* ============================================================================
   SLICE 38: free-tier signup gate + dataset counter
   ============================================================================ */

.free-gate {
  margin-top: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  display: grid;
  gap: var(--s-3);
}
.free-gate__kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin: 0;
}
.free-gate__title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.free-gate__lede {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.free-gate__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 520px) {
  .free-gate__row { grid-template-columns: 1fr; }
}
.free-gate__small {
  margin: 0;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--text-3);
}

.consent-row--locked {
  opacity: 0.95;
}
.consent-row--locked input[disabled] { cursor: not-allowed; }

.free-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  display: grid;
  gap: var(--s-2);
}
.free-status__line {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.free-status__line span {
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--t-sm);
}
.free-status__cap {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--danger);
}
.free-status__cap a { color: var(--accent-text); }

/* Free-gated state (no signup yet): the upload buttons and hints HIDE
   completely. The free-gate becomes the only path forward — the
   conversion paywall. Once signup succeeds the data-free-gated flips
   to "false" and the upload buttons reveal. Three uploads counted by
   email (server-side) so cookie clears can't reset the count. */
body[data-free-gated="true"] .dropzone-card__actions,
body[data-free-gated="true"] .dropzone-card__hints {
  display: none;
}
body[data-free-gated="true"] .free-gate {
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
}

/* ──────────────────────────────────────────────────────────
   Signers panel (slice 97 redesign)
   The original layout stacked a tiny ordinal chip, name input,
   email input, field-count number, and "Signing as" select in
   loose vertical order. Hard to parse at a glance. The new card:
     - Each signer = a single card with avatar (large), inputs,
       fields-owned badge, and remove button in one row.
     - "Signing as" lives at the bottom under a clear divider
       so it reads as a perspective control, not a fifth signer.
     - "+ Add" sits to the right of "Signers." in the header,
       not floating in the panel body.
   ────────────────────────────────────────────────────────── */
.signers-panel {
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.signers-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.signers-panel__title {
  margin: 0;
  font-family: var(--display, var(--sans));
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.signers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signer-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signer-color, var(--accent));
  border-radius: 10px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.signer-row:hover {
  border-color: var(--line-2);
}
.signer-row__swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--signer-color, var(--accent));
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.signer-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.signer-row__name,
.signer-row__email {
  width: 100%;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.signer-row__name {
  font-weight: 600;
}
.signer-row__email {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.signer-row__name:focus,
.signer-row__email:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-line);
}
.signer-row__name::placeholder,
.signer-row__email::placeholder {
  color: var(--text-3);
}
.signer-row__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.signer-row__count::after {
  content: " fields";
  font-weight: 400;
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 360px) {
  .signer-row { grid-template-columns: 32px 1fr; }
  .signer-row__count { grid-column: 1 / -1; justify-self: start; }
}
.signer-row__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.signer-row:hover .signer-row__remove,
.signer-row:focus-within .signer-row__remove {
  opacity: 1;
}
.signer-row__remove:hover {
  border-color: var(--warn);
  color: var(--warn);
}

/* Add-signer button gets a clean shape next to the section title. */
.signers-panel #add-signer {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.signers-panel #add-signer:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* "Signing as" perspective control. Visually separate from the signer
   cards above so the user reads it as a viewing-mode control, not a
   fifth signer. */
.signers-panel__as {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.signers-panel__as-label {
  white-space: nowrap;
}
.signers-panel__as-select {
  flex: 1 1 auto;
  padding: 5px 28px 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23ACB2C8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.signers-panel__as-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-line);
}

/* Generic input invalid state. Used by signer-row__email and any
   future field that flags client-side validation errors before send.
   Subtle border + light warn-tinted background; not loud, just clear. */
input.is-invalid,
.signer-row__email.is-invalid {
  border-color: var(--warn) !important;
  background: color-mix(in srgb, var(--warn) 6%, var(--bg-2)) !important;
}
input.is-invalid:focus,
.signer-row__email.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent) !important;
}

/* ── Persistent free-tier remaining pill ─────────────────
   Lives in the masthead so users always know where they
   stand. Hidden for owners and users who haven't signed up
   yet (the dropzone gate fills that role for those). */
.free-pill {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  white-space: nowrap;
}
body[data-free-gated="false"] .free-pill {
  display: inline-flex;
}
body[data-owner-active="true"] .free-pill {
  display: none;
}
.free-pill strong {
  color: var(--accent-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.free-pill--depleted {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--warn);
}
.free-pill--depleted strong { color: var(--warn); }
@media (max-width: 640px) {
  .free-pill { display: none !important; }
}

/* ============================================================================
   SLICE 43: /control/ owner workbench
   Hidden URL, robots-blocked, password-gated. UI uses the existing design
   tokens so it feels like the rest of the site, no special owner-only theme.
   ============================================================================ */

.control {
  padding-block: var(--s-7) var(--s-8);
}

/* ----- Login state ----- */
.control-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.control-login__card {
  width: 100%;
  max-width: 460px;
  padding: var(--s-6);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(1,20,52,0.06), 0 20px 40px -20px rgba(1,20,52,0.14);
}
.control-login__title { margin: var(--s-2) 0 var(--s-3); }
.control-login__lede { color: var(--text-2); margin: 0 0 var(--s-5); line-height: 1.55; font-size: var(--t-sm); }
.control-login__form { display: grid; gap: var(--s-3); }
.control-login__error {
  margin: var(--s-2) 0 0;
  padding: var(--s-3);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  border-radius: var(--r);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* ----- Authenticated panel ----- */
.control-panel { display: grid; gap: var(--s-6); }
.control-panel__head { margin-bottom: var(--s-3); }

.control-tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.control-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.control-tile__controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.control-tile__window {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.control-tile__window select {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 10px;
}
.control-tile__lede {
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0 0 var(--s-4);
}
.control-tile__hint {
  color: var(--text-3);
  font-size: var(--t-xs);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin: var(--s-3) 0 0;
}
.control-tile__empty {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: var(--t-sm);
  margin: 0;
}
.control-tile__notice {
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--r);
  color: var(--warn);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* ----- Tile-grid layout for demo + tools tiles ----- */
.control-tile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}
.control-tile__grid--tools {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.control-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease-spring);
}
.control-link:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
  border-color: var(--accent-text);
  transform: translateY(-2px);
}
.control-link__kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  margin: 0;
}
.control-link__title {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text);
  margin: 2px 0 0;
}
.control-link__detail {
  color: var(--text-3);
  font-size: var(--t-xs);
  line-height: 1.4;
  margin: 4px 0 0;
}

/* ----- Analytics tile rendering ----- */
.control-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.control-stat {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.control-stat__num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.control-stat__sub {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}
.control-integrations {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.control-integrations > .kicker { margin: 0 0 var(--s-2); }
.control-integrations ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
}
.control-integ {
  display: grid;
  grid-template-columns: 8px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.control-integ__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
}
.control-integ.is-on .control-integ__dot { background: var(--ok); }
.control-integ.is-off .control-integ__dot { background: var(--warn); }
.control-integ__state {
  justify-self: end;
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.control-integ.is-on .control-integ__state { color: var(--ok); }

.control-stat__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.control-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.control-list {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
}
.control-list ul {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.control-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.control-list li > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.control-list__empty {
  color: var(--text-3);
  font-size: var(--t-xs);
  margin: var(--s-2) 0 0;
}
.control-errors {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: var(--r);
}
.control-errors ul {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: var(--t-xs);
  color: var(--danger);
}
.control-errors code {
  font-family: var(--mono);
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 2px;
}
.control-errors li,
.control-errors code {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* ----- Free-PDF demo zone block ----- */
.control-demo {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ----- Use-case page step list (build-use-cases.mjs emits <ol class="step-list">) ----- */
.step-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step-list li {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}