/* ============================================================
   Bill of Sale Check — three-aesthetic system
   institutional | warm | editorial
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
html, body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  padding: 0;
}
@supports not (overflow: clip) {
  html, body {
    overflow-x: hidden;
  }
}
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Inter Tight: enable contextual alts + tighter punctuation; default to
     proportional figures (we override to tabular per-block where needed). */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

.seo-fallback {
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 24px;
}
.seo-fallback p,
.seo-fallback li {
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1.55;
}
.seo-fallback header p:first-child {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.seo-fallback h1 {
  max-width: 10ch;
  margin: 18px 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 108px);
  line-height: 0.95;
}
.seo-fallback h2 {
  margin: 38px 0 14px;
  font-family: var(--font-display);
  font-size: 34px;
}
.seo-fallback nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}
.seo-fallback a {
  border: 1px solid var(--ink);
  padding: 10px 14px;
}

/* --- Theme: institutional (default) ----------------------- */
:root, [data-aesthetic="institutional"] {
  --paper: #f7f5f0;
  --paper-2: #efebe2;
  --ink: #14110d;
  --ink-2: #44403a;
  --ink-3: #76716a;
  --rule: #d9d4c8;
  --rule-strong: #1a1714;
  --accent: #1a1714;
  --accent-on: #f7f5f0;
  --critical: #8b1a1a;
  --critical-bg: #f4d8d3;
  --caution: #8a6a17;
  --caution-bg: #f3e6c0;
  --good: #2c5a35;
  --good-bg: #d6e4d4;
  --highlight: #fcd34d;

  --font-sans: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-serif: "Source Serif 4", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: var(--font-serif);
  --display-tracking: -0.025em;
  --display-weight: 600;

  --radius: 4px;
  --radius-lg: 6px;
}

[data-aesthetic="warm"] {
  --paper: #f5ede1;
  --paper-2: #ebe1d0;
  --ink: #2a1d12;
  --ink-2: #5a4a3a;
  --ink-3: #8a7c6a;
  --rule: #d8c9b0;
  --rule-strong: #2a1d12;
  --accent: #b04a2a;
  --accent-on: #fff8ec;
  --critical: #9a2a1a;
  --critical-bg: #f4d4ce;
  --caution: #8a5a17;
  --caution-bg: #f3deb8;
  --good: #356238;
  --good-bg: #d5e2c8;
  --highlight: #f4c84a;

  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-serif: "Source Serif 4", serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-display: var(--font-serif);
  --display-tracking: -0.02em;
  --display-weight: 500;

  --radius: 10px;
  --radius-lg: 16px;
}

[data-aesthetic="editorial"] {
  --paper: #fafaf8;
  --paper-2: #f0efeb;
  --ink: #0a0a0a;
  --ink-2: #2a2a28;
  --ink-3: #6a6a66;
  --rule: #cfcfc8;
  --rule-strong: #0a0a0a;
  --accent: #d63a1d;
  --accent-on: #fafaf8;
  --critical: #d63a1d;
  --critical-bg: #f7d6cd;
  --caution: #b78519;
  --caution-bg: #f5e7b8;
  --good: #2a6a3a;
  --good-bg: #d2e4cf;
  --highlight: #ffe24a;

  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-serif: "Source Serif 4", serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-display: var(--font-serif);
  --display-tracking: -0.04em;
  --display-weight: 700;

  --radius: 0px;
  --radius-lg: 0px;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: clip;
}

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 40;
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: var(--display-tracking);
}
.brand-mark {
  width: 42px; height: 42px;
  border: 0;
  border-radius: 11px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.36), transparent 32%),
    linear-gradient(135deg, #8b5cf6 0%, #5b3fd1 52%, #2f216f 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.36) inset,
    0 10px 22px rgba(73, 47, 160, 0.2);
  overflow: hidden;
  padding: 4px;
}
.brand-mark img {
  display: block;
  height: 130%;
  object-fit: contain;
  transform: translateY(1px);
  width: 100%;
}
.brand-name {
  white-space: nowrap;
}
.brand-name-accent {
  color: var(--accent);
}

.topnav {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--ink-2);
  margin-left: 8px;
}
.topnav a,
.topbar-link,
.topbar-cta {
  white-space: nowrap;
}
.topnav a:hover { color: var(--ink); }

.topbar-spacer { flex: 1; }

.topbar-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
.topbar-link {
  font-size: 14px;
  color: var(--ink-2);
}
.topbar-link-button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.topbar-link-button span {
  color: var(--ink-3);
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.topbar-link-button:hover { color: var(--ink); }
.topbar-link-button:disabled {
  cursor: wait;
  opacity: 0.62;
}
.topbar-link-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.auth-success-toast {
  position: fixed;
  top: 92px;
  right: clamp(18px, 4vw, 46px);
  z-index: 80;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  width: min(410px, calc(100vw - 36px));
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(22, 22, 20, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(134, 63, 255, 0.12), rgba(255, 255, 255, 0) 42%),
    var(--paper);
  box-shadow: 0 28px 70px rgba(15, 12, 8, 0.18), 0 0 0 1px rgba(255,255,255,0.72) inset;
  animation: auth-toast-in 680ms var(--ease-out-expo) both;
  overflow: hidden;
}

.auth-success-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.82) 42%, transparent 64%);
  transform: translateX(-120%);
  animation: auth-toast-sheen 1100ms 120ms var(--ease-out-expo) both;
  pointer-events: none;
}

.auth-success-toast.is-warning {
  background:
    linear-gradient(90deg, rgba(241, 188, 78, 0.18), rgba(255, 255, 255, 0) 46%),
    var(--paper);
}

.auth-success-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #dff7e4 48%, #9fdfad);
  border: 1px solid rgba(41, 108, 58, 0.24);
  box-shadow: 0 12px 26px rgba(50, 141, 73, 0.22);
}

.auth-success-mark span {
  width: 18px;
  height: 10px;
  border-left: 3px solid #246b36;
  border-bottom: 3px solid #246b36;
  transform: translateY(-1px) rotate(-45deg) scale(0.72);
  animation: auth-check-pop 620ms 260ms var(--ease-out-expo) both;
}

.auth-success-copy {
  min-width: 0;
  position: relative;
}

.auth-success-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.05;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--ink);
  margin-bottom: 4px;
}

.auth-success-copy p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-success-toast button {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  color: var(--ink-3);
  cursor: pointer;
  font: 500 13px/1 var(--font-mono);
}

.auth-success-toast button:hover {
  color: var(--ink);
  border-color: var(--ink);
}

@keyframes auth-toast-in {
  0% { opacity: 0; transform: translateY(-14px) scale(0.96); filter: blur(6px); }
  68% { opacity: 1; transform: translateY(2px) scale(1.012); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes auth-toast-sheen {
  to { transform: translateX(120%); }
}

@keyframes auth-check-pop {
  0% { opacity: 0; transform: translateY(4px) rotate(-45deg) scale(0.28); }
  70% { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1.12); }
  100% { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
}

.topbar-menu {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.topbar-menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms var(--ease-out-expo), opacity 180ms var(--ease-out-expo);
}

.topbar-menu.is-open span:first-child,
.topbar.is-menu-open .topbar-menu span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.topbar-menu.is-open span:nth-child(2):not(:last-child),
.topbar.is-menu-open .topbar-menu span:nth-child(2):not(:last-child) {
  opacity: 0;
}

.topbar-menu.is-open span:last-child,
.topbar.is-menu-open .topbar-menu span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.mobile-topnav {
  display: none;
  position: absolute;
  left: 20px;
  right: 20px;
  top: calc(100% + 10px);
  z-index: 50;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 96%, white 4%);
  box-shadow: 0 24px 64px rgba(20, 17, 13, 0.16);
  padding: 10px;
}

.mobile-topnav.is-open,
.topbar.is-menu-open .mobile-topnav {
  display: grid;
}

.mobile-topnav a,
.mobile-topnav button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
}

.mobile-topnav a:last-of-type {
  border-bottom: 0;
}

.mobile-topnav span {
  margin-left: 8px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.mobile-topnav button {
  justify-content: center;
  margin-top: 10px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  cursor: pointer;
}
.mobile-topnav .mobile-auth-link {
  justify-content: flex-start;
  margin-top: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-weight: 400;
}

.mobile-topnav .topbar-cta {
  justify-content: center;
  margin-top: 10px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.08s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); }
[data-aesthetic="warm"] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
[data-aesthetic="warm"] .btn-primary:hover { background: #963d22; }
[data-aesthetic="editorial"] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-quiet {
  color: var(--ink-2);
  background: transparent;
  padding: 14px 6px;
}
.btn-quiet:hover { color: var(--ink); }

.btn-lg { padding: 16px 22px; font-size: 16px; }
.btn-block { width: 100%; }

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

.lp {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 32px 96px;
}

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
}
.lp-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--critical);
}
.hero-state-copy {
  display: block;
  max-width: 620px;
}
.hero-state-eyebrow-text {
  display: inline-block;
  min-width: 0;
}
.hero-state-token {
  color: inherit;
  display: inline-block;
  transform-origin: center bottom;
  text-decoration: none;
  will-change: opacity, transform;
}
.hero-state-token:hover {
  color: var(--accent);
}
.hero-state-token:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.hero-state-token.is-settled {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.hero-state-token.is-leaving {
  animation: cc-state-word-out 180ms var(--ease-in-smooth, cubic-bezier(.4, 0, 1, 1)) both;
}
.hero-state-token.is-entering {
  animation: cc-state-word-in 360ms var(--ease-out-expo) both;
}
.hero-state-token-title {
  white-space: nowrap;
}
.hero-state-token-title.is-long-state {
  font-size: 0.84em;
}
.hero-title-line {
  display: block;
}
.hero-title-line-two {
  white-space: nowrap;
}

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--rule);
  overflow: visible;
  position: relative;
}
/* State pages have a breadcrumb above the hero, so the 56px top
   padding creates an awkward gap. Tighten on state pages only —
   home keeps the original spacing since there's no breadcrumb there. */
.static-page .lp-hero {
  padding-top: 18px;
}
@media (max-width: 760px) {
  .static-page .lp-hero { padding-top: 12px; }
}
.lp-hero > div:first-child {
  position: relative;
  z-index: 2;
}
.lp-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  /* Eyebrow chip above gets more breathing room; byline below pulled
     tighter via .editorial-byline override on state pages. */
  margin: 44px 0 0;
  text-wrap: pretty;
  /* Source Serif 4 opsz axis — tunes glyph proportions for actual
     display size. Without this, large type renders with body-text
     (12px) glyph metrics and looks slightly off-balance. */
  font-variation-settings: "opsz" 60;
}
[data-aesthetic="editorial"] .lp-hero h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.94;
  font-variation-settings: "opsz" 60;
}
.lp-hero-tagline .accent { color: var(--accent); font-style: italic; }
[data-aesthetic="institutional"] .lp-hero-tagline .accent { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; font-style: normal; }

.lp-hero-tagline {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
[data-aesthetic="editorial"] .lp-hero-tagline {
  font-style: italic;
  color: var(--ink-2);
}
[data-aesthetic="warm"] .lp-hero-tagline {
  color: var(--ink);
}

.lp-hero-sub {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 60ch;
}
/* Editorial italic tagline still gets a touch more breathing room
   underneath, but not so much that the body reads as disconnected. */
[data-aesthetic="editorial"] .lp-hero-sub {
  margin-top: 22px;
}
.claim-link {
  color: inherit;
  position: relative;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.claim-link::after {
  background: var(--ink);
  border-radius: var(--radius);
  bottom: calc(100% + 10px);
  box-shadow: 0 12px 28px rgba(20, 17, 13, 0.16);
  color: var(--paper);
  content: attr(data-source);
  font-family: var(--font-mono);
  font-size: 11px;
  left: 50%;
  letter-spacing: 0.04em;
  line-height: 1.35;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 4px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
  z-index: 10;
}
.claim-link:hover::after,
.claim-link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lp-hero-cta {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  overflow: visible;
  margin-left: -18px;
  padding: 8px 24px 22px 18px;
}
.lp-hero-cta-row {
  display: flex; gap: 12px; flex-wrap: nowrap; align-items: stretch;
  overflow: visible;
}
.private-beta-banner {
  align-items: center;
  background: rgba(255, 245, 214, 0.72);
  border: 1px solid rgba(199, 143, 24, 0.32);
  border-radius: 8px;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  line-height: 1.35;
  max-width: 380px;
  padding: 10px 12px;
}
.private-beta-banner span {
  background: #ffeab0;
  border-radius: 999px;
  color: #8b6200;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  text-transform: uppercase;
}
.private-beta-banner strong {
  font-size: 13px;
  font-weight: 500;
}
.upload-cta {
  --cta-red-1: #fa3a22;
  --cta-red-2: #cf2c15;
  --cta-red-3: #a92513;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 38%),
    linear-gradient(135deg, var(--cta-red-1), var(--cta-red-2) 58%, var(--cta-red-3));
  border: 1px solid rgba(120, 20, 10, 0.45);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -3px 0 rgba(92, 13, 5, 0.18),
    0 14px 28px rgba(149, 38, 20, 0.22);
  color: #ffffff;
  display: grid;
  flex: 0 1 430px;
  grid-template-columns: 74px minmax(0, 1fr) 76px;
  min-height: 66px;
  max-width: 430px;
  width: auto;
  overflow: visible;
  position: relative;
  text-align: left;
  transform: translateY(0) scale(1);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.upload-cta::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-100%);
}
.upload-cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 0 -3px 0 rgba(92, 13, 5, 0.2),
    0 18px 34px rgba(149, 38, 20, 0.3);
  filter: saturate(1.08);
  transform: translateY(-1px) scale(1.006);
}
.upload-cta:active {
  background:
    linear-gradient(180deg, rgba(20, 5, 0, 0.1), rgba(20, 5, 0, 0.18)),
    linear-gradient(135deg, #dc2b16, #aa240f 58%, #7c1b0d);
  box-shadow:
    inset 0 4px 12px rgba(50, 8, 2, 0.34),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 8px 18px rgba(149, 38, 20, 0.18);
  filter: saturate(1.15) brightness(0.86);
  transform: translateY(5px) scale(0.962);
}
.upload-cta.is-pressing {
  animation: upload-cta-satisfy 360ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.upload-cta.is-pressing::after {
  animation: upload-cta-glint 360ms ease-out both;
}
.upload-cta.is-pressing .upload-cta-icon,
.upload-cta.is-pressing .upload-cta-label,
.upload-cta.is-pressing .upload-cta-price {
  animation: upload-cta-content-pop 360ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.upload-cta:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.upload-cta-icon {
  align-items: center;
  align-self: stretch;
  border-right: 1px solid rgba(255,255,255,0.18);
  display: flex;
  justify-content: center;
  position: relative;
}
.upload-cta-icon svg {
  color: rgba(255, 244, 235, 0.82);
  height: 30px;
  overflow: visible;
  width: 30px;
}
.upload-cta-icon text {
  fill: var(--cta-red-2);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.scan-corner {
  border-radius: 2px;
  color: rgba(255, 214, 194, 0.24);
  height: 18px;
  position: absolute;
  width: 18px;
}
.scan-corner.tl { border-left: 2px solid currentColor; border-top: 2px solid currentColor; left: 10px; top: 10px; }
.scan-corner.tr { border-right: 2px solid currentColor; border-top: 2px solid currentColor; right: 10px; top: 10px; }
.scan-corner.bl { border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; bottom: 10px; left: 10px; }
.scan-corner.br { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; bottom: 10px; right: 10px; }
.upload-cta-label {
  font-size: clamp(16px, 1.72vw, 20px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-cta-price {
  align-items: center;
  align-self: stretch;
  border-left: 1px solid rgba(255,255,255,0.22);
  display: flex;
  font-size: clamp(18px, 1.75vw, 22px);
  font-weight: 600;
  justify-content: center;
  line-height: 1;
  padding-right: 8px;
  white-space: nowrap;
}

@keyframes upload-cta-satisfy {
  0% {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.18), transparent 38%),
      linear-gradient(135deg, var(--cta-red-1), var(--cta-red-2) 58%, var(--cta-red-3));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      inset 0 -3px 0 rgba(92, 13, 5, 0.18),
      0 14px 28px rgba(149, 38, 20, 0.22);
    filter: saturate(1);
    transform: translateY(0) scale(1);
  }
  34% {
    background:
      linear-gradient(180deg, rgba(20, 5, 0, 0.12), rgba(20, 5, 0, 0.22)),
      linear-gradient(135deg, #d72813, #9b210e 58%, #72180b);
    box-shadow:
      inset 0 8px 18px rgba(35, 6, 2, 0.52),
      inset 0 -1px 0 rgba(255,255,255,0.1),
      0 4px 8px rgba(149, 38, 20, 0.12);
    filter: saturate(1.08) brightness(0.76);
    transform: translateY(6px) scale(0.952);
  }
  68% {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.22), transparent 40%),
      linear-gradient(135deg, #ff4026, #d62d16 58%, #a92513);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -3px 0 rgba(92, 13, 5, 0.18),
      0 17px 30px rgba(149, 38, 20, 0.28);
    filter: saturate(1.08) brightness(1);
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.18), transparent 38%),
      linear-gradient(135deg, var(--cta-red-1), var(--cta-red-2) 58%, var(--cta-red-3));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      inset 0 -3px 0 rgba(92, 13, 5, 0.18),
      0 14px 28px rgba(149, 38, 20, 0.22);
    filter: saturate(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes upload-cta-content-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(2px) scale(0.965); }
  68% { transform: translateY(-1px) scale(1.012); }
}

@keyframes upload-cta-glint {
  0%, 45% { opacity: 0; transform: translateX(-100%); }
  70% { opacity: 0.18; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100%); }
}

@keyframes save-chip-float {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  64% {
    opacity: 1;
    transform: translateY(-3px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes save-chip-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(214, 58, 29, 0.38);
    transform: scale(0.8);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(214, 58, 29, 0.08);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(214, 58, 29, 0);
    transform: scale(1);
  }
}

@keyframes bos-field-hydrate {
  0% {
    background: rgba(255, 213, 96, 0);
    box-shadow: 0 0 0 0 rgba(214, 58, 29, 0), 0 0 0 0 rgba(255, 213, 96, 0);
    transform: translateY(0) scale(1);
  }
  16% {
    background: rgba(255, 213, 96, 0.36);
    box-shadow: 0 0 0 2px rgba(214, 58, 29, 0.16), 0 10px 22px -14px rgba(214, 58, 29, 0.55);
    transform: translateY(-1px) scale(1.015);
  }
  42% {
    background: rgba(255, 236, 166, 0.28);
    box-shadow: 0 0 0 6px rgba(255, 213, 96, 0.1), 0 7px 18px -16px rgba(214, 58, 29, 0.4);
    transform: translateY(0) scale(1);
  }
  100% {
    background: rgba(255, 213, 96, 0);
    box-shadow: 0 0 0 10px rgba(255, 213, 96, 0), 0 0 0 0 rgba(214, 58, 29, 0);
    transform: translateY(0) scale(1);
  }
}

@keyframes save-burst-to-progress {
  0% {
    opacity: 0;
    transform: translate(-50%, 42px) scale(0.94);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, 14px) scale(1);
  }
  68% {
    opacity: 1;
    transform: translate(-50%, -58px) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -74px) scale(0.54);
  }
}

@keyframes save-burst-spark {
  0%, 48% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }
  72% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(214, 58, 29, 0.36);
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 10px rgba(214, 58, 29, 0);
    transform: translateX(-50%) scale(1.1);
  }
}
.lp-hero-cta-meta {
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.lp-hero-cta-meta a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 140ms ease;
}
.lp-hero-cta-meta a:hover { color: var(--ink); }
.upload-cta-generate { text-decoration: none; }
.upload-cta-generate .upload-cta-price { color: #2c8a4d; }

.lp-hero-aside {
  min-width: 0;
  position: relative;
  justify-self: stretch;
  width: auto;
  z-index: 1;
}

body:not(.static-page) .lp-hero > .lp-hero-aside {
  margin-top: clamp(56px, 5vw, 88px);
}

body:not(.static-page) .lp-hero > .lp-hero-aside .hero-pdf-stage.image-mode {
  margin-top: 18px;
}
.hero-visual-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 3px;
  position: relative;
  z-index: 30;
}
.hero-visual-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 7px 10px;
}
.hero-visual-tabs button.active {
  background: var(--ink);
  color: var(--paper);
}
.pdf-variant-tabs {
  display: inline-flex;
  gap: 4px;
  margin: -4px 0 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 3px;
  position: relative;
  z-index: 30;
}
.pdf-variant-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 9px;
}
.pdf-variant-tabs button.active {
  background: var(--accent);
  color: var(--accent-on);
}

.hero-pdf-stage {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.hero-pdf-stage.image-mode {
  background: transparent;
  margin: -30px -38px -34px -16px;
  overflow: visible;
  transform: translateX(clamp(-72px, -3vw, -28px)) scale(0.96);
  transform-origin: center right;
  width: 760px;
}
.hero-pdf-stage.option-a,
.hero-pdf-stage.option-b {
  perspective: 980px;
  overflow: visible;
}
.hero-pdf-stage.option-b {
  isolation: isolate;
}
.hero-pdf-image {
  display: block;
  filter: drop-shadow(0 22px 38px rgba(20, 17, 13, 0.1));
  height: calc(100% + 58px);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 14%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 14%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
  mask-composite: intersect;
  object-fit: cover;
  object-position: center;
  position: relative;
  transform: translateX(10px);
  width: 100%;
  z-index: 1;
}
.hero-pdf-bg {
  display: block;
  height: calc(100% + 96px);
  left: 8%;
  object-fit: cover;
  object-position: 58% center;
  opacity: 0.88;
  position: absolute;
  top: -24px;
  transform: translateX(32px) scale(1.05);
  width: 112%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.88) 18%, #000 58%, rgba(0,0,0,0.5) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.88) 18%, #000 58%, rgba(0,0,0,0.5) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.hero-pdf-bg-option-b {
  --hero-background-scale: 1;
  --hero-background-x: 0px;
  --hero-background-y: 0px;
  height: calc(100% + 112px);
  left: -2%;
  opacity: 0.94;
  object-position: center right;
  top: -46px;
  transform: translate(var(--hero-background-x, 0px), var(--hero-background-y, 0px)) scale(var(--hero-background-scale, 1));
  width: 118%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
}
.hero-pdf-gradient-layer {
  --hero-background-scale: 1;
  --hero-background-x: 0px;
  --hero-background-y: 0px;
  background:
    radial-gradient(ellipse at 82% 82%, rgba(255, 203, 93, 0.42) 0, rgba(255, 210, 114, 0.22) 26%, transparent 58%),
    radial-gradient(ellipse at 72% 52%, rgba(255, 244, 222, 0.5) 0, rgba(255, 244, 222, 0.18) 28%, transparent 58%),
    linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.88) 10%, rgba(239, 235, 226, 0.46) 26%, rgba(32, 31, 29, 0.16) 52%, transparent 100%);
  height: calc(100% + 112px);
  left: -2%;
  mix-blend-mode: soft-light;
  opacity: 0.82;
  pointer-events: none;
  position: absolute;
  top: -46px;
  transform: translate(var(--hero-background-x, 0px), var(--hero-background-y, 0px)) scale(var(--hero-background-scale, 1));
  width: 118%;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.hero-pdf-orange-gradient-layer {
  background:
    radial-gradient(ellipse at 86% 82%, rgba(255, 118, 42, 0.56) 0, rgba(255, 151, 69, 0.26) 26%, transparent 60%),
    radial-gradient(ellipse at 64% 18%, rgba(255, 198, 116, 0.42) 0, rgba(255, 160, 74, 0.16) 34%, transparent 68%),
    conic-gradient(from 218deg at 78% 70%, transparent 0deg, rgba(255, 113, 39, 0.26) 64deg, rgba(255, 210, 135, 0.2) 116deg, transparent 172deg),
    linear-gradient(100deg, transparent 0, rgba(255, 245, 231, 0.64) 12%, rgba(226, 84, 28, 0.22) 45%, rgba(50, 28, 19, 0.12) 78%, transparent 100%);
  height: calc(100% + 112px);
  left: -2%;
  mix-blend-mode: soft-light;
  opacity: 0.78;
  pointer-events: none;
  position: absolute;
  top: -46px;
  transform: translate(var(--hero-background-x, 0px), var(--hero-background-y, 0px)) scale(var(--hero-background-scale, 1));
  width: 118%;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.hero-pdf-orange-image-layer {
  display: block;
  filter: saturate(1.02) contrast(0.98);
  height: calc(100% + 112px);
  left: -2%;
  mix-blend-mode: soft-light;
  object-fit: cover;
  object-position: center;
  opacity: 0.76;
  pointer-events: none;
  position: absolute;
  top: -46px;
  transform: translate(var(--hero-background-x, 0px), var(--hero-background-y, 0px)) scale(var(--hero-background-scale, 1));
  width: 118%;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.72) 14%, #000 36%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.86) 7%, #000 16%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.hero-pdf-orange-soft-layer {
  filter: saturate(1.08) contrast(0.94);
  mix-blend-mode: multiply;
  opacity: 0.42;
}
.hero-pdf-paper {
  --hero-paper-scale: 1;
  --hero-paper-x: 0px;
  --hero-paper-y: 0px;
  --hero-stack-rotate-rest: 0.28deg;
  --hero-stack-rotate-float: -0.12deg;
  --hero-top-rotate-rest: 0.48deg;
  --hero-top-rotate-float: -0.26deg;
  animation:
    hero-paper-focus-in 760ms cubic-bezier(0.2, 0.72, 0.18, 1) both,
    hero-paper-cutout-bob 5.8s ease-in-out 760ms infinite;
  display: block;
  filter: drop-shadow(0 32px 38px rgba(20, 17, 13, 0.2)) drop-shadow(0 0 22px rgba(255, 218, 140, 0.22));
  height: calc(100% + 112px);
  left: -2%;
  mix-blend-mode: normal;
  object-fit: contain;
  object-position: center right;
  position: absolute;
  top: -46px;
  width: 118%;
  z-index: 3;
  pointer-events: none;
}
.hero-pdf-effect-layer {
  animation: hero-effect-focus-in 920ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
  display: block;
  height: calc(100% + 112px);
  left: -2%;
  mix-blend-mode: screen;
  object-fit: contain;
  object-position: center right;
  opacity: var(--hero-effect-opacity, 0.9);
  pointer-events: none;
  position: absolute;
  top: -46px;
  transform: translate(var(--hero-paper-x, 0px), var(--hero-paper-y, 0px)) scale(var(--hero-paper-scale, 1));
  width: 118%;
  z-index: 2;
}
.hero-pdf-effect-layer:not(.unmasked) {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 16%, rgba(0,0,0,0.5) 32%, #000 56%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.72) 8%, #000 18%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 16%, rgba(0,0,0,0.5) 32%, #000 56%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.72) 8%, #000 18%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.hero-magic-aura,
.hero-scan-rings,
.hero-gleam-layer,
.hero-particles {
  --hero-magic-opacity: 0.82;
  --hero-gleam-opacity: 0.74;
  --hero-ring-x: 444px;
  --hero-ring-y: 474px;
  --hero-ring-scale: 1;
  --hero-left-ring-x: 123px;
  --hero-left-ring-y: 501px;
  --hero-left-ring-scale: 0.99;
  pointer-events: none;
  position: absolute;
}
.hero-magic-aura {
  animation: hero-aura-breathe 6.6s ease-in-out infinite;
  background:
    radial-gradient(ellipse at 72% 72%, rgba(255, 196, 68, 0.36) 0, rgba(255, 166, 42, 0.18) 22%, transparent 58%),
    conic-gradient(from 212deg at 68% 72%, transparent 0deg, rgba(255, 226, 142, 0.18) 42deg, rgba(255, 116, 47, 0.1) 78deg, transparent 138deg);
  filter: blur(2px) saturate(1.12);
  height: calc(100% + 112px);
  left: -2%;
  mix-blend-mode: screen;
  opacity: calc(var(--hero-magic-opacity) * 0.62);
  top: -46px;
  width: 118%;
  z-index: 4;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.5) 18%, #000 46%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,0.5) 18%, #000 46%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.hero-scan-rings {
  height: 210px;
  left: var(--hero-ring-x);
  opacity: var(--hero-magic-opacity);
  top: var(--hero-ring-y);
  transform: translate(-50%, -50%) scale(var(--hero-ring-scale));
  transform-origin: center;
  width: 420px;
  z-index: 2;
}
.hero-scan-rings span {
  animation: hero-ring-pulse 3.8s ease-out infinite;
  border: 1px solid rgba(255, 236, 183, 0.58);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255, 183, 53, 0.28),
    inset 0 0 14px rgba(255, 223, 149, 0.24);
  inset: 28% 14%;
  mix-blend-mode: screen;
  position: absolute;
  transform: rotate(-4deg) scale(0.58);
}
.hero-scan-rings span:nth-child(2) {
  animation-delay: 1.25s;
  border-color: rgba(255, 179, 68, 0.48);
}
.hero-scan-rings span:nth-child(3) {
  animation-delay: 2.5s;
  border-color: rgba(255, 255, 255, 0.42);
}
.hero-scan-rings-left {
  height: 260px;
  left: var(--hero-left-ring-x);
  opacity: calc(var(--hero-magic-opacity) * 0.64);
  top: var(--hero-left-ring-y);
  transform: translate(-50%, -50%) scale(var(--hero-left-ring-scale));
  width: 520px;
  z-index: 3;
}
.hero-scan-rings-left span {
  animation-duration: 5.2s;
  border-color: rgba(255, 202, 112, 0.42);
  box-shadow:
    0 0 34px rgba(255, 183, 53, 0.24),
    inset 0 0 22px rgba(255, 223, 149, 0.18);
  inset: 30% 18%;
  transform: rotate(6deg) scale(0.54);
}
.hero-scan-rings-left span:nth-child(2) {
  animation-delay: 1.7s;
}
.hero-scan-rings-left span:nth-child(3) {
  animation-delay: 3.4s;
}
.hero-gleam-layer {
  animation: hero-paper-cutout-bob 5.8s ease-in-out 760ms infinite;
  height: calc(100% + 112px);
  left: -2%;
  opacity: var(--hero-gleam-opacity);
  overflow: hidden;
  top: -46px;
  width: 118%;
  z-index: 4;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 42%, rgba(0,0,0,0.82) 57%, #000 80%, transparent 98%),
    linear-gradient(180deg, transparent 0, transparent 10%, #000 22%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 42%, rgba(0,0,0,0.82) 57%, #000 80%, transparent 98%),
    linear-gradient(180deg, transparent 0, transparent 10%, #000 22%, #000 86%, transparent 100%);
  mask-composite: intersect;
  transform:
    translate(var(--hero-paper-x, 0px), var(--hero-paper-y, 0px))
    rotate(0.4deg)
    scale(var(--hero-paper-scale, 1));
  transform-origin: center right;
}
.hero-gleam-layer span {
  animation: hero-gleam-sweep 9.8s cubic-bezier(0.2, 0.72, 0.18, 1) infinite;
  background: linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,0.04) 45%, rgba(255, 250, 223, 0.72) 50%, rgba(255, 187, 76, 0.18) 55%, transparent 62% 100%);
  filter: blur(0.8px);
  height: 126%;
  left: 46%;
  mix-blend-mode: screen;
  position: absolute;
  top: -14%;
  transform: translateX(-44%) rotate(4deg);
  width: 22%;
}
.hero-gleam-layer span:nth-child(2) {
  animation-delay: 4.9s;
  left: 62%;
  opacity: 0.58;
  width: 17%;
}
.hero-gleam-layer i {
  --shine-x: 68%;
  --shine-y: 38%;
  --shine-delay: 0s;
  animation: hero-star-glint 7.6s ease-in-out infinite;
  animation-delay: var(--shine-delay);
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(255,255,255,0.94) 50%, transparent 62% 100%),
    linear-gradient(0deg, transparent 0 38%, rgba(255,255,255,0.88) 50%, transparent 62% 100%);
  filter: drop-shadow(0 0 9px rgba(255, 203, 73, 0.72));
  height: 24px;
  left: var(--shine-x);
  mix-blend-mode: screen;
  position: absolute;
  top: var(--shine-y);
  transform: scale(0.22) rotate(18deg);
  width: 24px;
}
.hero-gleam-layer i:nth-of-type(1) { --shine-x: 67%; --shine-y: 34%; --shine-delay: -0.4s; }
.hero-gleam-layer i:nth-of-type(2) { --shine-x: 79%; --shine-y: 58%; --shine-delay: -4.1s; }
.hero-particles {
  inset: 0;
  filter: saturate(1.18) brightness(1.12);
  opacity: calc(var(--hero-magic-opacity) * 1.28);
  z-index: 5;
}
.hero-particles i {
  --spark-x: 68%;
  --spark-y: 42%;
  --spark-size: 4px;
  --spark-delay: 0s;
  --spark-drift: -22px;
  animation: hero-particle-float 5.8s ease-in-out infinite;
  animation-delay: var(--spark-delay);
  background: radial-gradient(circle, rgba(255,255,255,1) 0 16%, rgba(255, 224, 130, 0.98) 22% 48%, rgba(255, 153, 48, 0.42) 58%, transparent 76%);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 22px rgba(255, 183, 54, 0.72),
    0 0 44px rgba(255, 113, 37, 0.22);
  display: block;
  height: calc(var(--spark-size) * 1.22);
  left: var(--spark-x);
  mix-blend-mode: screen;
  position: absolute;
  top: var(--spark-y);
  width: calc(var(--spark-size) * 1.22);
}
.hero-particles i:nth-child(1) { --spark-x: 57%; --spark-y: 31%; --spark-size: 3px; --spark-delay: -0.3s; --spark-drift: -18px; }
.hero-particles i:nth-child(2) { --spark-x: 67%; --spark-y: 20%; --spark-size: 4px; --spark-delay: -1.8s; --spark-drift: -28px; }
.hero-particles i:nth-child(3) { --spark-x: 78%; --spark-y: 29%; --spark-size: 2px; --spark-delay: -2.7s; --spark-drift: -16px; }
.hero-particles i:nth-child(4) { --spark-x: 84%; --spark-y: 44%; --spark-size: 3.5px; --spark-delay: -0.9s; --spark-drift: -30px; }
.hero-particles i:nth-child(5) { --spark-x: 65%; --spark-y: 54%; --spark-size: 3px; --spark-delay: -3.4s; --spark-drift: -24px; }
.hero-particles i:nth-child(6) { --spark-x: 76%; --spark-y: 60%; --spark-size: 4px; --spark-delay: -1.2s; --spark-drift: -20px; }
.hero-particles i:nth-child(7) { --spark-x: 90%; --spark-y: 62%; --spark-size: 3px; --spark-delay: -4.1s; --spark-drift: -34px; }
.hero-particles i:nth-child(8) { --spark-x: 59%; --spark-y: 71%; --spark-size: 2px; --spark-delay: -2.1s; --spark-drift: -18px; }
.hero-particles i:nth-child(9) { --spark-x: 72%; --spark-y: 76%; --spark-size: 3.5px; --spark-delay: -5.2s; --spark-drift: -26px; }
.hero-particles i:nth-child(10) { --spark-x: 81%; --spark-y: 78%; --spark-size: 3px; --spark-delay: -3.8s; --spark-drift: -22px; }
.hero-particles i:nth-child(11) { --spark-x: 94%; --spark-y: 35%; --spark-size: 2px; --spark-delay: -1.6s; --spark-drift: -24px; }
.hero-particles i:nth-child(12) { --spark-x: 51%; --spark-y: 51%; --spark-size: 4px; --spark-delay: -4.8s; --spark-drift: -32px; }
.hero-particles i:nth-child(13) { --spark-x: 70%; --spark-y: 38%; --spark-size: 2px; --spark-delay: -0.6s; --spark-drift: -20px; }
.hero-particles i:nth-child(14) { --spark-x: 87%; --spark-y: 24%; --spark-size: 3px; --spark-delay: -3.1s; --spark-drift: -18px; }
.hero-particles i:nth-child(15) { --spark-x: 63%; --spark-y: 84%; --spark-size: 4px; --spark-delay: -2.4s; --spark-drift: -28px; }
.hero-particles i:nth-child(16) { --spark-x: 79%; --spark-y: 49%; --spark-size: 2px; --spark-delay: -5.5s; --spark-drift: -20px; }
.hero-particles i:nth-child(17) { --spark-x: 55%; --spark-y: 62%; --spark-size: 3px; --spark-delay: -1.1s; --spark-drift: -26px; }
.hero-particles i:nth-child(18) { --spark-x: 91%; --spark-y: 74%; --spark-size: 4px; --spark-delay: -4.4s; --spark-drift: -30px; }
.hero-particles i:nth-child(19) { --spark-x: 62%; --spark-y: 26%; --spark-size: 2px; --spark-delay: -2.8s; --spark-drift: -18px; }
.hero-particles i:nth-child(20) { --spark-x: 74%; --spark-y: 18%; --spark-size: 3px; --spark-delay: -6.2s; --spark-drift: -24px; }
.hero-particles i:nth-child(21) { --spark-x: 88%; --spark-y: 31%; --spark-size: 2px; --spark-delay: -3.7s; --spark-drift: -22px; }
.hero-particles i:nth-child(22) { --spark-x: 96%; --spark-y: 50%; --spark-size: 3px; --spark-delay: -0.7s; --spark-drift: -34px; }
.hero-particles i:nth-child(23) { --spark-x: 69%; --spark-y: 67%; --spark-size: 2px; --spark-delay: -1.9s; --spark-drift: -20px; }
.hero-particles i:nth-child(24) { --spark-x: 83%; --spark-y: 69%; --spark-size: 3.5px; --spark-delay: -4.9s; --spark-drift: -28px; }
.hero-particles i:nth-child(25) { --spark-x: 53%; --spark-y: 78%; --spark-size: 3px; --spark-delay: -3.3s; --spark-drift: -16px; }
.hero-particles i:nth-child(26) { --spark-x: 61%; --spark-y: 43%; --spark-size: 2px; --spark-delay: -5.7s; --spark-drift: -25px; }
.hero-particles i:nth-child(27) { --spark-x: 73%; --spark-y: 45%; --spark-size: 4px; --spark-delay: -2.2s; --spark-drift: -30px; }
.hero-particles i:nth-child(28) { --spark-x: 86%; --spark-y: 53%; --spark-size: 2px; --spark-delay: -6.8s; --spark-drift: -24px; }
.hero-particles i:nth-child(29) { --spark-x: 49%; --spark-y: 36%; --spark-size: 3px; --spark-delay: -4.6s; --spark-drift: -20px; }
.hero-particles i:nth-child(30) { --spark-x: 58%; --spark-y: 88%; --spark-size: 2px; --spark-delay: -1.4s; --spark-drift: -22px; }
.hero-particles i:nth-child(31) { --spark-x: 76%; --spark-y: 86%; --spark-size: 4px; --spark-delay: -3.9s; --spark-drift: -26px; }
.hero-particles i:nth-child(32) { --spark-x: 97%; --spark-y: 72%; --spark-size: 2px; --spark-delay: -5.1s; --spark-drift: -18px; }
.hero-particles i:nth-child(33) { --spark-x: 66%; --spark-y: 33%; --spark-size: 3.5px; --spark-delay: -7.2s; --spark-drift: -32px; }
.hero-particles i:nth-child(34) { --spark-x: 81%; --spark-y: 39%; --spark-size: 3px; --spark-delay: -2.9s; --spark-drift: -18px; }
.hero-particles i:nth-child(35) { --spark-x: 93%; --spark-y: 21%; --spark-size: 2px; --spark-delay: -0.4s; --spark-drift: -22px; }
.hero-particles i:nth-child(36) { --spark-x: 56%; --spark-y: 47%; --spark-size: 2px; --spark-delay: -6.5s; --spark-drift: -28px; }
.hero-particles i:nth-child(37) { --spark-x: 71%; --spark-y: 58%; --spark-size: 3px; --spark-delay: -4.2s; --spark-drift: -24px; }
.hero-particles i:nth-child(38) { --spark-x: 89%; --spark-y: 84%; --spark-size: 3px; --spark-delay: -1.7s; --spark-drift: -28px; }
.hero-particles i:nth-child(39) { --spark-x: 52%; --spark-y: 68%; --spark-size: 4px; --spark-delay: -5.9s; --spark-drift: -30px; }
.hero-particles i:nth-child(40) { --spark-x: 64%; --spark-y: 73%; --spark-size: 2px; --spark-delay: -2.5s; --spark-drift: -18px; }
.hero-particles i:nth-child(41) { --spark-x: 79%; --spark-y: 24%; --spark-size: 2px; --spark-delay: -3.6s; --spark-drift: -24px; }
.hero-particles i:nth-child(42) { --spark-x: 92%; --spark-y: 59%; --spark-size: 4px; --spark-delay: -6.9s; --spark-drift: -34px; }
.hero-noise-texture {
  inset: 0;
  mix-blend-mode: overlay;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 5;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 42%, rgba(0,0,0,0.72) 54%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 42%, rgba(0,0,0,0.72) 54%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.hero-noise-texture canvas {
  display: block;
  height: 100%;
  mix-blend-mode: overlay;
  width: 100%;
}
.hero-pdf-paper-green {
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 32px 38px rgba(20, 17, 13, 0.16))
    drop-shadow(0 0 26px rgba(61, 140, 67, 0.18));
  mix-blend-mode: normal;
  opacity: 1;
  object-position: right center;
}
.hero-pdf-paper-stack {
  animation:
    hero-paper-stack-soft-focus-in 820ms cubic-bezier(0.2, 0.72, 0.18, 1) 760ms both,
    hero-paper-stack-simple-bob 5.8s ease-in-out 1580ms infinite;
  filter:
    saturate(1.04)
    contrast(1.02)
    drop-shadow(0 34px 42px rgba(20, 17, 13, 0.18))
    drop-shadow(0 0 22px rgba(255, 218, 140, 0.18));
  object-position: right center;
  z-index: 3;
}
.hero-pdf-paper-top {
  animation:
    hero-paper-top-soft-focus-in 820ms cubic-bezier(0.2, 0.72, 0.18, 1) both,
    hero-paper-top-simple-bob 5.8s ease-in-out 820ms infinite;
  filter:
    saturate(1.06)
    contrast(1.03)
    drop-shadow(0 28px 34px rgba(20, 17, 13, 0.13))
    drop-shadow(0 0 18px rgba(255, 230, 173, 0.2));
  object-position: right center;
  z-index: 4;
}
.stack-deep-focus .hero-pdf-paper-stack {
  animation:
    hero-paper-stack-focus-in 900ms cubic-bezier(0.2, 0.72, 0.18, 1) 820ms both,
    hero-paper-stack-simple-bob 5.8s ease-in-out 1720ms infinite;
}
.stack-deep-focus .hero-pdf-paper-top {
  animation:
    hero-paper-top-focus-in 920ms cubic-bezier(0.2, 0.72, 0.18, 1) both,
    hero-paper-top-simple-bob 5.8s ease-in-out 920ms infinite;
}
.stack-parallax .hero-pdf-paper-stack {
  animation-name: hero-paper-stack-soft-focus-in, hero-paper-stack-bob;
}
.stack-parallax .hero-pdf-paper-top {
  animation-name: hero-paper-top-soft-focus-in, hero-paper-top-bob;
}
.stack-parallax.stack-deep-focus .hero-pdf-paper-stack {
  animation-name: hero-paper-stack-focus-in, hero-paper-stack-bob;
}
.stack-parallax.stack-deep-focus .hero-pdf-paper-top {
  animation-name: hero-paper-top-focus-in, hero-paper-top-bob;
}
.hero-paper-amber-underlight,
.hero-paper-edge-shimmer,
.hero-paper-portal-flare,
.hero-paper-separation-shadow {
  height: calc(100% + 112px);
  left: -2%;
  object-position: right center;
  pointer-events: none;
  position: absolute;
  top: -46px;
  transform:
    translate(var(--hero-paper-x, 0px), var(--hero-paper-y, 0px))
    rotate(0.4deg)
    scale(var(--hero-paper-scale, 1));
  transform-origin: center right;
  width: 118%;
}
.hero-paper-amber-underlight {
  animation: hero-paper-stack-simple-bob 5.8s ease-in-out 760ms infinite;
  background:
    radial-gradient(ellipse at 78% 84%, rgba(255, 150, 45, 0.34) 0, rgba(255, 185, 75, 0.18) 24%, transparent 54%),
    linear-gradient(180deg, transparent 0 66%, rgba(255, 172, 68, 0.2) 82%, transparent 100%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0.78;
  z-index: 2;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 48%, rgba(0,0,0,0.7) 62%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, transparent 48%, #000 72%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 48%, rgba(0,0,0,0.7) 62%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, transparent 48%, #000 72%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.hero-paper-edge-shimmer {
  animation:
    hero-paper-stack-bob 5.8s ease-in-out 760ms infinite,
    hero-paper-edge-shimmer 7.4s ease-in-out 1.2s infinite;
  background:
    linear-gradient(100deg, transparent 0 72%, rgba(255,255,255,0.08) 75%, rgba(255, 238, 184, 0.74) 78%, rgba(255, 171, 58, 0.26) 80%, transparent 85% 100%);
  filter: blur(0.7px);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 3;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 68%, #000 74%, #000 88%, transparent 96%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 68%, #000 74%, #000 88%, transparent 96%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.hero-paper-separation-shadow {
  animation: hero-paper-top-bob 5.8s ease-in-out 1040ms infinite;
  background:
    linear-gradient(100deg, transparent 0 50%, rgba(41, 29, 16, 0.16) 58%, rgba(41, 29, 16, 0.08) 69%, transparent 78% 100%);
  filter: blur(2px);
  mix-blend-mode: multiply;
  opacity: 0.72;
  z-index: 3;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 52%, #000 62%, #000 80%, transparent 91%),
    linear-gradient(180deg, transparent 0, transparent 15%, #000 28%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 52%, #000 62%, #000 80%, transparent 91%),
    linear-gradient(180deg, transparent 0, transparent 15%, #000 28%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.hero-paper-portal-flare {
  animation: hero-paper-portal-flare 1180ms cubic-bezier(0.16, 0.92, 0.2, 1) 120ms both;
  background:
    radial-gradient(ellipse at 72% 84%, rgba(255, 255, 255, 0.84) 0, rgba(255, 220, 122, 0.48) 13%, rgba(255, 139, 35, 0.24) 32%, transparent 58%),
    conic-gradient(from 226deg at 72% 84%, transparent 0deg, rgba(255, 237, 169, 0.42) 38deg, rgba(255, 123, 43, 0.26) 68deg, transparent 128deg);
  filter: blur(7px) saturate(1.25);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 4;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 46%, rgba(0,0,0,0.78) 60%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, transparent 52%, #000 70%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 46%, rgba(0,0,0,0.78) 60%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, transparent 52%, #000 70%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.hero-pdf-stage:not(.stack-parallax) .hero-paper-edge-shimmer,
.hero-pdf-stage:not(.stack-parallax) .hero-paper-amber-underlight {
  animation-name: hero-paper-stack-simple-bob;
}
.hero-pdf-stage:not(.stack-parallax) .hero-paper-edge-shimmer {
  animation-name: hero-paper-stack-simple-bob, hero-paper-edge-shimmer;
}
.hero-pdf-stage:not(.stack-micro-tilt) .hero-pdf-paper-stack,
.hero-pdf-stage:not(.stack-micro-tilt) .hero-pdf-paper-top,
.hero-pdf-stage:not(.stack-micro-tilt) .hero-paper-edge-shimmer,
.hero-pdf-stage:not(.stack-micro-tilt) .hero-paper-separation-shadow,
.hero-pdf-stage:not(.stack-micro-tilt) .hero-paper-portal-flare,
.hero-pdf-stage:not(.stack-micro-tilt) .hero-paper-amber-underlight {
  --hero-stack-rotate-rest: 0deg;
  --hero-stack-rotate-float: 0deg;
  --hero-top-rotate-rest: 0deg;
  --hero-top-rotate-float: 0deg;
}
.hero-paper-ground-shadow {
  animation:
    hero-shadow-focus-in 760ms cubic-bezier(0.2, 0.72, 0.18, 1) both,
    hero-paper-shadow-bob 5.8s ease-in-out 760ms infinite;
  background:
    radial-gradient(ellipse at center,
      rgba(58, 36, 14, 0.34) 0%,
      rgba(74, 45, 15, 0.18) 30%,
      rgba(111, 63, 19, 0.08) 55%,
      transparent 76%);
  bottom: 24px;
  filter: blur(14px);
  height: 112px;
  left: 58%;
  mix-blend-mode: multiply;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  transform:
    translate(var(--hero-paper-x, 0px), var(--hero-paper-y, 0px))
    rotate(-3deg)
      scaleX(calc(var(--hero-paper-scale, 1) * 0.82))
      scaleY(0.7);
  transform-origin: center;
  width: 440px;
  z-index: 2;
}
.hero-paper-highlight {
  --hero-highlight-fill: rgba(255, 205, 49, 0.24);
  --hero-highlight-stroke: rgba(218, 168, 15, 0.9);
  --hero-highlight-glow: rgba(255, 197, 39, 0.16);
  --hero-highlight-sheen: rgba(255, 255, 255, 0.72);
  --hero-highlight-delay: 1.35s;
  animation:
    hero-highlight-reveal 1080ms cubic-bezier(0.16, 0.92, 0.2, 1.18) var(--hero-highlight-delay) both,
    hero-highlight-bob 5.8s ease-in-out 760ms infinite;
  background: color-mix(in srgb, var(--hero-highlight-fill) 42%, transparent);
  border: 1.4px solid var(--hero-highlight-stroke);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32) inset,
    0 0 10px var(--hero-highlight-glow);
  clip-path: polygon(
    0 calc(0% + var(--hero-highlight-top-left-y, 0px)),
    100% calc(0% + var(--hero-highlight-top-right-y, -7px)),
    100% calc(100% + var(--hero-highlight-bottom-right-y, 0px)),
    0 calc(100% + var(--hero-highlight-bottom-left-y, 7px))
  );
  height: var(--hero-highlight-h, 34px);
  left: var(--hero-highlight-x, 430px);
  mix-blend-mode: multiply;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: var(--hero-highlight-y, 190px);
  transform:
    translate(calc(var(--hero-paper-x, 0px) - 4px), calc(var(--hero-paper-y, 0px) - 3px))
    rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + var(--hero-highlight-rotate, 2.4deg)))
    skewX(var(--hero-highlight-skew-x, -10deg))
    skewY(var(--hero-highlight-skew-y, -1.8deg))
    scale(calc(var(--hero-paper-scale, 1) * 1.006));
  transform-origin: top left;
  width: var(--hero-highlight-w, 190px);
  z-index: 6;
}
.hero-paper-highlight::before,
.hero-paper-highlight::after {
  content: '';
  pointer-events: none;
  position: absolute;
}
.hero-paper-highlight::before {
  animation: hero-highlight-marker-draw 920ms cubic-bezier(0.18, 0.88, 0.16, 1) calc(var(--hero-highlight-delay) + 70ms) both;
  background:
    linear-gradient(90deg, transparent 0 2%, var(--hero-highlight-sheen) 9%, transparent 20%),
    linear-gradient(90deg, var(--hero-highlight-fill), color-mix(in srgb, var(--hero-highlight-fill) 74%, white 26%) 48%, var(--hero-highlight-fill));
  inset: -2px;
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-paper-highlight::after {
  animation: hero-highlight-marker-tip 920ms cubic-bezier(0.18, 0.88, 0.16, 1) calc(var(--hero-highlight-delay) + 70ms) both;
  background:
    linear-gradient(90deg, transparent, var(--hero-highlight-sheen) 34%, color-mix(in srgb, var(--hero-highlight-stroke) 72%, white 28%) 62%, transparent);
  bottom: -8px;
  filter: blur(2px);
  left: -18px;
  opacity: 0;
  top: -8px;
  transform: translateX(0) skewX(-14deg);
  width: 34px;
}
.hero-paper-highlight.red {
  --hero-highlight-fill: rgba(224, 49, 36, 0.2);
  --hero-highlight-stroke: rgba(218, 49, 26, 0.92);
  --hero-highlight-glow: rgba(224, 49, 36, 0.14);
  --hero-highlight-sheen: rgba(255, 226, 220, 0.82);
}
.hero-paper-highlight.green {
  --hero-highlight-fill: rgba(51, 148, 65, 0.2);
  --hero-highlight-stroke: rgba(47, 132, 57, 0.88);
  --hero-highlight-glow: rgba(51, 148, 65, 0.14);
  --hero-highlight-sheen: rgba(225, 255, 230, 0.82);
}
.hero-paper-highlight.yellow {
  --hero-highlight-fill: rgba(255, 205, 49, 0.24);
  --hero-highlight-stroke: rgba(218, 168, 15, 0.9);
  --hero-highlight-glow: rgba(255, 197, 39, 0.16);
  --hero-highlight-sheen: rgba(255, 250, 204, 0.86);
}
.hero-pdf-stage.image-mode::before,
.hero-pdf-stage.image-mode::after {
  display: none;
}
.hero-pdf-stage::before {
  background:
    radial-gradient(ellipse at 58% 102%, rgba(255, 213, 132, 0.42) 0, rgba(255, 238, 194, 0.22) 28%, transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255,255,255,0.12)),
    repeating-linear-gradient(0deg, rgba(20,17,13,0.035) 0 1px, transparent 1px 13px);
  content: '';
  inset: 0;
  opacity: 0.9;
  position: absolute;
  z-index: 0;
}
.hero-pdf-stage::after {
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,0.48) 48%, transparent 58%),
    linear-gradient(180deg, transparent 0, rgba(255, 222, 161, 0.26) 100%);
  content: '';
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.72;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.hero-pdf-aura {
  background:
    radial-gradient(ellipse at 54% 86%, rgba(255, 202, 92, 0.5), rgba(255, 202, 92, 0.18) 30%, transparent 62%),
    radial-gradient(ellipse at 70% 72%, rgba(214, 58, 29, 0.18), transparent 48%);
  bottom: -56px;
  filter: blur(20px);
  height: 178px;
  left: 20%;
  opacity: 0.9;
  position: absolute;
  right: -16%;
  z-index: 0;
}
.hero-stardust {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}
.hero-stardust span {
  animation: hero-dust-rise 4.8s ease-in-out infinite;
  background:
    linear-gradient(90deg, transparent 0 36%, rgba(255, 255, 255, 0.92) 36% 64%, transparent 64%),
    linear-gradient(0deg, transparent 0 36%, rgba(255, 255, 255, 0.92) 36% 64%, transparent 64%);
  filter: drop-shadow(0 0 7px rgba(255, 204, 105, 0.76));
  height: 10px;
  opacity: 0;
  position: absolute;
  width: 10px;
}
.hero-stardust span:nth-child(1) { left: 22%; top: 18%; animation-delay: 0.1s; }
.hero-stardust span:nth-child(2) { left: 16%; top: 42%; animation-delay: 1.4s; transform: scale(0.72); }
.hero-stardust span:nth-child(3) { left: 37%; top: 24%; animation-delay: 2.2s; transform: scale(0.55); }
.hero-stardust span:nth-child(4) { left: 74%; top: 16%; animation-delay: 0.8s; transform: scale(0.68); }
.hero-stardust span:nth-child(5) { left: 86%; top: 37%; animation-delay: 1.7s; transform: scale(0.82); }
.hero-stardust span:nth-child(6) { left: 62%; top: 78%; animation-delay: 2.8s; transform: scale(0.62); }
.hero-stardust span:nth-child(7) { left: 28%; top: 70%; animation-delay: 3.4s; transform: scale(0.78); }
.hero-stardust span:nth-child(8) { left: 52%; top: 10%; animation-delay: 4.1s; transform: scale(0.5); }
.hero-stardust span:nth-child(9) { left: 92%; top: 66%; animation-delay: 2.1s; transform: scale(0.58); }
.hero-stardust span:nth-child(10) { left: 44%; top: 88%; animation-delay: 0.5s; transform: scale(0.7); }
.hero-stardust span:nth-child(11) { left: 12%; top: 78%; animation-delay: 2.7s; transform: scale(0.48); }
.hero-stardust span:nth-child(12) { left: 66%; top: 49%; animation-delay: 3.2s; transform: scale(0.44); }
.hero-stardust span:nth-child(13) { left: 5%; top: 26%; animation-delay: 3.8s; transform: scale(0.5); }
.hero-stardust span:nth-child(14) { left: 81%; top: 82%; animation-delay: 1.0s; transform: scale(0.64); }
.hero-stardust span:nth-child(15) { left: 47%; top: 39%; animation-delay: 1.9s; transform: scale(0.38); }
.hero-stardust span:nth-child(16) { left: 33%; top: 52%; animation-delay: 4.5s; transform: scale(0.46); }
.hero-stardust span:nth-child(17) { left: 57%; top: 64%; animation-delay: 0.2s; transform: scale(0.42); }
.hero-stardust span:nth-child(18) { left: 96%; top: 20%; animation-delay: 3.0s; transform: scale(0.52); }
}
.hero-pdf-sheet {
  animation: hero-paper-bob 5.8s ease-in-out infinite;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.8), transparent 42%),
    linear-gradient(180deg, #fffdf8, #f7efe2);
  border: 1px solid rgba(20, 17, 13, 0.24);
  box-shadow:
    -10px 0 0 rgba(255, 255, 255, 0.58) inset,
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    0 42px 84px rgba(20, 17, 13, 0.28),
    22px 24px 0 rgba(20, 17, 13, 0.055);
  color: var(--ink);
  left: 34%;
  padding: 20px 24px 24px;
  position: absolute;
  top: 2px;
  transform: rotate(7deg) skewY(-1deg) translateY(0) scale(0.82);
  transform-origin: top center;
  width: 500px;
  z-index: 1;
}
.hero-pdf-sheet::before {
  background: linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0));
  content: '';
  inset: 0 auto 0 0;
  pointer-events: none;
  position: absolute;
  width: 14px;
}
.hero-pdf-sheet::after {
  background: linear-gradient(180deg, rgba(20,17,13,0.18), rgba(20,17,13,0));
  content: '';
  height: 100%;
  position: absolute;
  right: -9px;
  top: 8px;
  transform: skewY(42deg);
  transform-origin: top left;
  width: 10px;
}
.hero-pdf-title {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.hero-pdf-sub {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  margin: 5px 0 12px;
  text-align: center;
}
.hero-pdf-section {
  border-top: 7px solid var(--ink);
  margin-top: 8px;
  padding: 8px 0 1px;
}
.hero-pdf-section b {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  margin: -18px 0 10px;
  padding-left: 8px;
  color: var(--paper);
}
.hero-pdf-section p {
  font-size: 11px;
  line-height: 1.3;
  margin: 0;
}
.hero-pdf-grid {
  display: grid;
  grid-template-columns: 70px 1fr 76px 1.3fr;
  gap: 5px 8px;
  font-size: 10.5px;
}
.hero-pdf-grid span {
  color: var(--ink-3);
}
.hero-pdf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mark {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 5px;
}
.mark.good { box-shadow: 0 0 0 2px rgba(60,130,70,0.54) inset; }
.mark.bad { box-shadow: 0 0 0 2px rgba(214,58,29,0.62) inset; color: #b12615; }
.mark.warn { box-shadow: 0 0 0 2px rgba(212,165,25,0.68) inset; }
.mark.empty {
  display: inline-block;
  min-width: 126px;
}
.signature-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-size: 10.5px;
}
.signature-lines span {
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 10px;
}
.scan-panel {
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(247,245,240,0.42);
  box-shadow: inset 0 0 0 1px rgba(20,17,13,0.04);
  color: rgba(20,17,13,0.7);
  left: 18px;
  padding: 13px;
  position: absolute;
  top: 230px;
  width: 190px;
  z-index: 1;
}
.scan-panel strong,
.scan-panel span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.scan-panel span {
  color: var(--ink-3);
  margin-top: 14px;
}
.scan-panel i {
  background: repeating-linear-gradient(90deg, rgba(20,17,13,0.36) 0 3px, transparent 3px 6px);
  display: block;
  height: 8px;
  margin-top: 5px;
  opacity: 0.45;
}
.hero-callout {
  --callout-x: 176px;
  --callout-y: 78px;
  --callout-w: 184px;
  --callout-rotate: -4deg;
  --callout-yaw: -4deg;
  --callout-pitch: 0deg;
  --callout-perspective: 700px;
  --callout-delay: 2.08s;
  animation:
    hero-callout-enter 720ms cubic-bezier(0.16, 0.92, 0.2, 1.18) var(--callout-delay) both,
    hero-callout-drift 5.2s ease-in-out calc(var(--callout-delay) + 720ms) infinite;
  align-items: center;
  backdrop-filter: blur(8px) saturate(1.04);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,248,232,0.68)),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.78), transparent 44%);
  border: 1.2px solid color-mix(in srgb, currentColor 70%, rgba(255,255,255,0.45));
  border-radius: 6px;
  box-shadow:
    0 1.5px 0 color-mix(in srgb, currentColor 38%, transparent),
    0 12px 24px rgba(20,17,13,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  color: var(--ink);
  display: flex;
  gap: 10px;
  min-height: 50px;
  padding: 9px 12px;
  position: absolute;
  opacity: 0;
  left: var(--callout-x);
  top: var(--callout-y);
  transform:
    translate(calc(var(--hero-paper-x, 0px) - 4px), calc(var(--hero-paper-y, 0px) - 3px))
    perspective(var(--callout-perspective))
    rotateX(var(--callout-pitch))
    rotateY(var(--callout-yaw))
    rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + var(--callout-rotate)));
  transform-style: preserve-3d;
  width: var(--callout-w);
  z-index: 8;
}
.hero-callout::after {
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
  content: '';
  height: 1.4px;
  opacity: 0.58;
  position: absolute;
  transform-origin: center;
}
.hero-callout span {
  align-items: center;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20,17,13,0.16), inset 0 1px 0 rgba(255,255,255,0.28);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.hero-callout strong {
  font-size: 14px;
  line-height: 1.12;
}
.hero-callout.good { color: var(--good); }
.hero-callout.bad { color: var(--critical); }
.hero-callout.warn { color: var(--caution); }
.hero-callout.good span { background: var(--good); }
.hero-callout.bad span { background: var(--critical); }
.hero-callout.warn span { background: var(--caution); }
.hero-callout.vin {
  --callout-delay: 2.32s;
}
.hero-callout.vin::after {
  left: 100%;
  top: 44%;
  transform: rotate(-6deg);
  width: 106px;
}
.hero-callout.odo {
  --callout-delay: 2.08s;
}
.hero-callout.odo::after {
  left: 100%;
  top: 42%;
  transform: rotate(-29deg);
  width: 82px;
}
.hero-callout.title {
  --callout-delay: 2.78s;
}
.hero-callout.title::after {
  left: 100%;
  top: 45%;
  transform: rotate(4deg);
  width: 132px;
}
.hero-callout.pay {
  --callout-delay: 2.54s;
}
.hero-callout.pay::after {
  left: 100%;
  top: 38%;
  transform: rotate(-23deg);
  width: 72px;
}
.hero-callout.sig {
  --tilt: 5deg;
  --yaw: -7deg;
  --roll: -1deg;
  animation-delay: -0.9s;
  right: 18px;
  bottom: 86px;
}
.hero-callout.sig::after {
  right: 100%;
  top: 50%;
  transform: rotate(12deg);
  width: 98px;
}

@keyframes hero-paper-bob {
  0%, 100% {
    transform: rotate(7deg) skewY(-1deg) translateY(0) scale(0.82);
  }
  50% {
    transform: rotate(6.4deg) skewY(-1deg) translateY(-10px) scale(0.82);
  }
}

@keyframes hero-paper-cutout-bob {
  0%, 100% {
    transform: translate(var(--hero-paper-x), var(--hero-paper-y)) rotate(0.4deg) scale(var(--hero-paper-scale));
  }
  50% {
    transform: translate(var(--hero-paper-x), calc(var(--hero-paper-y) - 12px)) rotate(-0.2deg) scale(var(--hero-paper-scale));
  }
}

@keyframes hero-paper-stack-bob {
  0%, 100% {
    transform:
      translate(calc(var(--hero-paper-x) + 8px), calc(var(--hero-paper-y) + 5px))
      rotate(var(--hero-stack-rotate-rest, 0.28deg))
      scale(calc(var(--hero-paper-scale) * 0.998));
  }
  50% {
    transform:
      translate(calc(var(--hero-paper-x) + 4px), calc(var(--hero-paper-y) - 8px))
      rotate(var(--hero-stack-rotate-float, -0.12deg))
      scale(calc(var(--hero-paper-scale) * 0.998));
  }
}

@keyframes hero-paper-top-bob {
  0%, 100% {
    transform:
      translate(calc(var(--hero-paper-x) - 4px), calc(var(--hero-paper-y) - 3px))
      rotate(var(--hero-top-rotate-rest, 0.48deg))
      scale(calc(var(--hero-paper-scale) * 1.006));
  }
  50% {
    transform:
      translate(calc(var(--hero-paper-x) - 9px), calc(var(--hero-paper-y) - 16px))
      rotate(var(--hero-top-rotate-float, -0.26deg))
      scale(calc(var(--hero-paper-scale) * 1.006));
  }
}

@keyframes hero-paper-stack-simple-bob {
  0%, 100% {
    transform:
      translate(var(--hero-paper-x), var(--hero-paper-y))
      rotate(var(--hero-stack-rotate-rest, 0.28deg))
      scale(var(--hero-paper-scale));
  }
  50% {
    transform:
      translate(var(--hero-paper-x), calc(var(--hero-paper-y) - 12px))
      rotate(var(--hero-stack-rotate-float, -0.12deg))
      scale(var(--hero-paper-scale));
  }
}

@keyframes hero-paper-top-simple-bob {
  0%, 100% {
    transform:
      translate(var(--hero-paper-x), var(--hero-paper-y))
      rotate(var(--hero-top-rotate-rest, 0.48deg))
      scale(var(--hero-paper-scale));
  }
  50% {
    transform:
      translate(var(--hero-paper-x), calc(var(--hero-paper-y) - 12px))
      rotate(var(--hero-top-rotate-float, -0.26deg))
      scale(var(--hero-paper-scale));
  }
}

@keyframes hero-paper-stack-focus-in {
  0% {
    filter: blur(18px) saturate(0.88) brightness(1.06) drop-shadow(0 16px 18px rgba(20, 17, 13, 0.06));
    opacity: 0;
    transform:
      translate(calc(var(--hero-paper-x) + 16px), calc(var(--hero-paper-y) + 24px))
      rotate(calc(var(--hero-stack-rotate-rest, 0.28deg) - 0.63deg))
      scale(calc(var(--hero-paper-scale) * 0.968));
  }
  70% {
    filter: blur(2.5px) saturate(1.02) brightness(1.02) drop-shadow(0 34px 42px rgba(20, 17, 13, 0.16));
    opacity: 1;
  }
  100% {
    filter:
      saturate(1.04)
      contrast(1.02)
      drop-shadow(0 34px 42px rgba(20, 17, 13, 0.18))
      drop-shadow(0 0 22px rgba(255, 218, 140, 0.18));
    opacity: 1;
    transform:
      translate(calc(var(--hero-paper-x) + 8px), calc(var(--hero-paper-y) + 5px))
      rotate(var(--hero-stack-rotate-rest, 0.28deg))
      scale(calc(var(--hero-paper-scale) * 0.998));
  }
}

@keyframes hero-paper-top-focus-in {
  0% {
    filter:
      blur(24px)
      saturate(0.82)
      brightness(1.38)
      drop-shadow(0 0 28px rgba(255, 209, 106, 0.42))
      drop-shadow(0 10px 10px rgba(20, 17, 13, 0.04));
    opacity: 0;
    transform:
      translate(calc(var(--hero-paper-x) + 18px), calc(var(--hero-paper-y) + 86px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + 2.4deg))
      scale(calc(var(--hero-paper-scale) * 0.74));
  }
  46% {
    filter:
      blur(7px)
      saturate(1.12)
      brightness(1.16)
      drop-shadow(0 0 34px rgba(255, 213, 104, 0.34))
      drop-shadow(0 22px 24px rgba(20, 17, 13, 0.08));
    opacity: 0.96;
    transform:
      translate(calc(var(--hero-paper-x) - 10px), calc(var(--hero-paper-y) - 13px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) - 0.86deg))
      scale(calc(var(--hero-paper-scale) * 1.028));
  }
  72% {
    filter:
      blur(1.5px)
      saturate(1.08)
      brightness(1.05)
      drop-shadow(0 28px 34px rgba(20, 17, 13, 0.12))
      drop-shadow(0 0 22px rgba(255, 230, 173, 0.22));
    opacity: 1;
    transform:
      translate(calc(var(--hero-paper-x) - 1px), calc(var(--hero-paper-y) - 6px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + 0.18deg))
      scale(calc(var(--hero-paper-scale) * 1.012));
  }
  100% {
    filter:
      saturate(1.06)
      contrast(1.03)
      drop-shadow(0 28px 34px rgba(20, 17, 13, 0.13))
      drop-shadow(0 0 18px rgba(255, 230, 173, 0.2));
    opacity: 1;
    transform:
      translate(calc(var(--hero-paper-x) - 4px), calc(var(--hero-paper-y) - 3px))
      rotate(var(--hero-top-rotate-rest, 0.48deg))
      scale(calc(var(--hero-paper-scale) * 1.006));
  }
}

@keyframes hero-paper-stack-soft-focus-in {
  0% {
    filter: blur(8px) saturate(0.94) brightness(1.04) drop-shadow(0 16px 18px rgba(20, 17, 13, 0.06));
    opacity: 0;
    transform:
      translate(calc(var(--hero-paper-x) + 10px), calc(var(--hero-paper-y) + 14px))
      rotate(var(--hero-stack-rotate-rest, 0.28deg))
      scale(calc(var(--hero-paper-scale) * 0.986));
  }
  100% {
    filter:
      saturate(1.04)
      contrast(1.02)
      drop-shadow(0 34px 42px rgba(20, 17, 13, 0.18))
      drop-shadow(0 0 22px rgba(255, 218, 140, 0.18));
    opacity: 1;
    transform:
      translate(calc(var(--hero-paper-x) + 8px), calc(var(--hero-paper-y) + 5px))
      rotate(var(--hero-stack-rotate-rest, 0.28deg))
      scale(calc(var(--hero-paper-scale) * 0.998));
  }
}

@keyframes hero-paper-top-soft-focus-in {
  0% {
    filter:
      blur(18px)
      saturate(0.9)
      brightness(1.32)
      drop-shadow(0 0 24px rgba(255, 209, 106, 0.38))
      drop-shadow(0 12px 14px rgba(20, 17, 13, 0.05));
    opacity: 0;
    transform:
      translate(calc(var(--hero-paper-x) + 16px), calc(var(--hero-paper-y) + 78px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + 2deg))
      scale(calc(var(--hero-paper-scale) * 0.78));
  }
  48% {
    filter:
      blur(5px)
      saturate(1.1)
      brightness(1.14)
      drop-shadow(0 0 30px rgba(255, 213, 104, 0.28))
      drop-shadow(0 22px 24px rgba(20, 17, 13, 0.08));
    opacity: 0.98;
    transform:
      translate(calc(var(--hero-paper-x) - 8px), calc(var(--hero-paper-y) - 12px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) - 0.72deg))
      scale(calc(var(--hero-paper-scale) * 1.024));
  }
  72% {
    filter:
      blur(1.2px)
      saturate(1.07)
      brightness(1.04)
      drop-shadow(0 28px 34px rgba(20, 17, 13, 0.12))
      drop-shadow(0 0 20px rgba(255, 230, 173, 0.2));
    opacity: 1;
    transform:
      translate(calc(var(--hero-paper-x) - 1px), calc(var(--hero-paper-y) - 6px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + 0.14deg))
      scale(calc(var(--hero-paper-scale) * 1.012));
  }
  100% {
    filter:
      saturate(1.06)
      contrast(1.03)
      drop-shadow(0 28px 34px rgba(20, 17, 13, 0.13))
      drop-shadow(0 0 18px rgba(255, 230, 173, 0.2));
    opacity: 1;
    transform:
      translate(calc(var(--hero-paper-x) - 4px), calc(var(--hero-paper-y) - 3px))
      rotate(var(--hero-top-rotate-rest, 0.48deg))
      scale(calc(var(--hero-paper-scale) * 1.006));
  }
}

@keyframes hero-paper-portal-flare {
  0% {
    opacity: 0;
    transform:
      translate(var(--hero-paper-x, 0px), calc(var(--hero-paper-y, 0px) + 64px))
      rotate(0.4deg)
      scale(calc(var(--hero-paper-scale, 1) * 0.72));
  }
  34% {
    opacity: 0.96;
    transform:
      translate(var(--hero-paper-x, 0px), calc(var(--hero-paper-y, 0px) + 18px))
      rotate(0.4deg)
      scale(calc(var(--hero-paper-scale, 1) * 1.06));
  }
  72% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--hero-paper-x, 0px), var(--hero-paper-y, 0px))
      rotate(0.4deg)
      scale(calc(var(--hero-paper-scale, 1) * 1.18));
  }
}

@keyframes hero-paper-shadow-bob {
  0%, 100% {
    filter: blur(11px);
    opacity: 0.52;
    transform:
      translate(var(--hero-paper-x, 0px), calc(var(--hero-paper-y, 0px) + 1px))
      rotate(-3deg)
      scaleX(calc(var(--hero-paper-scale, 1) * 0.7))
      scaleY(0.78);
  }
  50% {
    filter: blur(18px);
    opacity: 0.24;
    transform:
      translate(var(--hero-paper-x, 0px), calc(var(--hero-paper-y, 0px) + 22px))
      rotate(-3deg)
      scaleX(calc(var(--hero-paper-scale, 1) * 1.02))
      scaleY(0.44);
  }
}

@keyframes hero-highlight-bob {
  0%, 100% {
    transform:
      translate(calc(var(--hero-paper-x, 0px) - 4px), calc(var(--hero-paper-y, 0px) - 3px))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + var(--hero-highlight-rotate, 2.4deg)))
      skewX(var(--hero-highlight-skew-x, -10deg))
      skewY(var(--hero-highlight-skew-y, -1.8deg))
      scale(calc(var(--hero-paper-scale, 1) * 1.006));
  }
  50% {
    transform:
      translate(calc(var(--hero-paper-x, 0px) - 9px), calc(var(--hero-paper-y, 0px) - 16px))
      rotate(calc(var(--hero-top-rotate-float, -0.26deg) + var(--hero-highlight-rotate, 2.4deg)))
      skewX(var(--hero-highlight-skew-x, -10deg))
      skewY(var(--hero-highlight-skew-y, -1.8deg))
      scale(calc(var(--hero-paper-scale, 1) * 1.006));
  }
}

@keyframes hero-highlight-reveal {
  0% {
    border-color: color-mix(in srgb, var(--hero-highlight-stroke) 24%, transparent);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 0 0 var(--hero-highlight-glow);
    filter: blur(4px) saturate(1.5) brightness(1.38);
    opacity: 0;
    scale: 0.98 0.72;
  }
  18% {
    opacity: 0.96;
  }
  46% {
    border-color: color-mix(in srgb, var(--hero-highlight-stroke) 86%, white 14%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.34) inset,
      0 0 18px var(--hero-highlight-glow);
    filter: blur(0.9px) saturate(1.35) brightness(1.22);
    opacity: 1;
    scale: 1.012 1.42;
  }
  72% {
    filter: blur(0.2px) saturate(1.12) brightness(1.08);
    scale: 1 0.94;
  }
  100% {
    filter: blur(0) saturate(1) brightness(1);
    opacity: 1;
    scale: 1;
  }
}

@keyframes hero-highlight-marker-draw {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  16% {
    opacity: 1;
  }
  72% {
    transform: scaleX(1.035);
  }
  100% {
    opacity: 0.88;
    transform: scaleX(1);
  }
}

@keyframes hero-highlight-marker-tip {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-14deg);
  }
  12% {
    opacity: 0.85;
  }
  76% {
    opacity: 0.72;
    transform: translateX(calc(var(--hero-highlight-w, 190px) + 16px)) skewX(-14deg);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(var(--hero-highlight-w, 190px) + 24px)) skewX(-14deg);
  }
}

@keyframes hero-callout-enter {
  0% {
    filter: blur(8px) saturate(1.28);
    opacity: 0;
    scale: 0.74;
    translate: 0 22px;
  }
  54% {
    filter: blur(0.8px) saturate(1.12);
    opacity: 1;
    scale: 1.08;
    translate: 0 -6px;
  }
  74% {
    filter: blur(0) saturate(1.04);
    opacity: 1;
    scale: 0.98;
    translate: 0 2px;
  }
  100% {
    filter: blur(0) saturate(1);
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

@keyframes hero-paper-focus-in {
  0% {
    filter: blur(18px) saturate(0.86) brightness(1.08) drop-shadow(0 18px 20px rgba(20, 17, 13, 0.08));
    opacity: 0;
    transform: translate(var(--hero-paper-x), calc(var(--hero-paper-y) + 18px)) rotate(-0.8deg) scale(calc(var(--hero-paper-scale) * 0.965));
  }
  62% {
    filter: blur(2.5px) saturate(1.04) brightness(1.02) drop-shadow(0 32px 38px rgba(20, 17, 13, 0.16));
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(var(--hero-paper-x), var(--hero-paper-y)) rotate(0.4deg) scale(var(--hero-paper-scale));
  }
}

@keyframes hero-shadow-focus-in {
  0% {
    filter: blur(18px);
    opacity: 0;
    transform:
      translate(var(--hero-paper-x, 0px), calc(var(--hero-paper-y, 0px) + 22px))
      rotate(-3deg)
      scaleX(calc(var(--hero-paper-scale, 1) * 0.58))
      scaleY(0.4);
  }
  100% {
    filter: blur(14px);
    opacity: 0.42;
  }
}

@keyframes hero-effect-focus-in {
  0% {
    filter: blur(22px) saturate(0.9);
    opacity: 0;
  }
  48% {
    opacity: calc(var(--hero-effect-opacity, 0.9) * 0.72);
  }
  100% {
    filter: blur(0) saturate(1);
    opacity: var(--hero-effect-opacity, 0.9);
  }
}

@keyframes hero-aura-breathe {
  0%, 100% {
    opacity: calc(var(--hero-magic-opacity, 0.82) * 0.56);
    transform: scale(0.985);
  }
  50% {
    opacity: calc(var(--hero-magic-opacity, 0.82) * 0.86);
    transform: scale(1.018);
  }
}

@keyframes hero-ring-pulse {
  0% {
    opacity: 0;
    transform: rotate(-4deg) scale(0.45);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: rotate(-4deg) scale(1.18);
  }
}

@keyframes hero-gleam-sweep {
  0% {
    opacity: 0;
    transform: translateX(-78%) rotate(4deg);
  }
  18% {
    opacity: 0.8;
  }
  46% {
    opacity: 0;
    transform: translateX(156%) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: translateX(156%) rotate(4deg);
  }
}

@keyframes hero-star-glint {
  0%, 100% {
    opacity: 0;
    transform: scale(0.18) rotate(18deg);
  }
  35% {
    opacity: 0;
  }
  48% {
    opacity: 1;
    transform: scale(0.9) rotate(18deg);
  }
  62% {
    opacity: 0;
    transform: scale(0.24) rotate(18deg);
  }
}

@keyframes hero-particle-float {
  0%, 100% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(0.86);
  }
  18% {
    opacity: 1;
  }
  54% {
    opacity: 0.86;
    transform: translate3d(9px, var(--spark-drift), 0) scale(1.12);
  }
  82% {
    opacity: 0.5;
    transform: translate3d(-5px, calc(var(--spark-drift) * 0.62), 0) scale(0.82);
  }
}

@keyframes hero-callout-drift {
  0%, 100% {
    transform:
      translate(calc(var(--hero-paper-x, 0px) - 4px), calc(var(--hero-paper-y, 0px) - 3px))
      perspective(var(--callout-perspective))
      rotateX(var(--callout-pitch))
      rotateY(var(--callout-yaw))
      rotate(calc(var(--hero-top-rotate-rest, 0.48deg) + var(--callout-rotate)));
  }
  50% {
    transform:
      translate(calc(var(--hero-paper-x, 0px) - 9px), calc(var(--hero-paper-y, 0px) - 16px))
      perspective(var(--callout-perspective))
      rotateX(var(--callout-pitch))
      rotateY(var(--callout-yaw))
      rotate(calc(var(--hero-top-rotate-float, -0.26deg) + var(--callout-rotate)));
  }
}

@keyframes hero-dust-rise {
  0% {
    opacity: 0;
    translate: 0 18px;
  }
  28% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
    translate: 0 -28px;
  }
}

/* video card */
.video-card {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex; flex-direction: column;
  position: relative;
}
.video-card-screen {
  flex: 1;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 50%),
    linear-gradient(180deg, #1f1c17, #0a0907);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.video-card-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 4px);
  pointer-events: none;
}
.play-btn {
  width: 76px; height: 76px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  border: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { margin-left: 4px; }
.video-card-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  position: absolute;
  bottom: 14px; left: 16px;
  display: flex; gap: 12px; align-items: center;
}
.video-card-caption .rec {
  width: 7px; height: 7px; border-radius: 999px;
  background: #d63a1d;
}
.video-card-bar {
  display: flex; gap: 0; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  justify-content: space-between;
}
.video-card-bar-track {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.15);
  margin: 0 16px;
  position: relative;
}
.video-card-bar-track::before {
  content: ''; position: absolute; inset: 0 78% 0 0;
  background: var(--paper);
}

/* video chapter strip */
.chapter-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.chapter {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--paper);
}
.chapter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.chapter-title {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 500;
  text-wrap: balance;
}

/* trap strip */
.trap-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 56px;
}
.trap {
  padding: 28px 22px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.trap:last-child { border-right: 0; }
.trap-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.trap-title {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
}
.trap-body {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* section header pattern */
.section-head {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  padding: 64px 0 28px;
  align-items: end;
}
.section-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  margin: 8px 0 0;
  text-wrap: balance;
}
.section-lede {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 60ch;
  text-wrap: pretty;
}

/* "how it works" */
.how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
}
.how-step {
  padding: 32px 28px 36px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 280px;
}
.how-step:last-child { border-right: 0; }
.how-step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.how-step h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  margin: 14px 0 10px;
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
}
.how-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1;
}
.how-step-foot {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}

/* state grid */
.state-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.state-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.state-cell.is-live {
  cursor: pointer;
  transition: background 160ms var(--ease-out-smooth), color 160ms var(--ease-out-smooth);
}
.state-cell.is-live:hover {
  background: var(--paper-2);
}
.state-cell .ab {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.state-cell.active {
  background: var(--ink);
  color: var(--paper);
}
.state-cell.active .ab { color: var(--paper); opacity: 0.7; }

/* pricing */
.price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 32px;
}
.price-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
[data-aesthetic="warm"] .price-card.featured { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.price-card h4 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 4px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.price-card .price-amt {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: -0.03em;
  font-weight: var(--display-weight);
  margin: 18px 0 6px;
  line-height: 1;
}
.price-card .price-amt sup {
  font-size: 22px;
  vertical-align: top;
  margin-right: 2px;
  opacity: 0.7;
}
.price-card .price-amt small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 6px;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.price-card li {
  display: flex; gap: 10px; align-items: flex-start;
  line-height: 1.4;
}
.price-card li::before {
  content: '';
  width: 16px; height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  opacity: 0.85;
}
.price-card .btn { margin-top: auto; }
.price-card.featured .btn {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
[data-aesthetic="warm"] .price-card.featured .btn { background: var(--accent-on); color: var(--accent); border-color: var(--accent-on); }

/* footer */
.lp-footer {
  margin-top: 96px;
  padding: 36px 32px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ============================================================
   Intake
   ============================================================ */

.intake {
  max-width: 920px;
  margin: 0 auto;
  overflow-x: clip;
  padding: 48px 32px 96px;
}
.intake-progress-wrap {
  margin-bottom: 32px;
  max-width: 100%;
  min-width: 0;
  position: relative;
}
.save-burst {
  align-items: center;
  animation: save-burst-to-progress 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 18px 34px rgba(20, 17, 13, 0.18);
  color: var(--paper);
  display: inline-flex;
  font-family: var(--font-mono);
  gap: 7px;
  left: 50%;
  max-width: min(380px, 90vw);
  min-width: 0;
  overflow: hidden;
  padding: 7px 10px;
  pointer-events: none;
  position: absolute;
  top: 92px;
  transform: translateX(-50%);
  z-index: 5;
}
.save-burst::after {
  animation: save-burst-spark 820ms ease-out both;
  background: var(--accent);
  border-radius: 999px;
  bottom: -18px;
  content: '';
  height: 6px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 6px;
}
.save-burst span {
  color: rgba(255,255,255,0.66);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.save-burst strong {
  flex: 1 1 auto;
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  max-width: 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-burst-document strong {
  max-width: 140px;
}
.save-stream {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 10px;
}
.save-chip {
  align-items: center;
  animation: save-chip-float 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(20, 17, 13, 0.06);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 1 min(100%, 260px);
  font-family: var(--font-mono);
  gap: 8px;
  max-width: min(100%, 260px);
  min-height: 30px;
  min-width: 0;
  padding: 6px 9px;
  position: relative;
  text-align: left;
}
.save-chip:hover {
  border-color: var(--ink);
  box-shadow: 0 10px 24px rgba(20, 17, 13, 0.1);
}
.save-chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.save-chip::before {
  animation: save-chip-pulse 900ms ease-out both;
  background: var(--accent);
  border-radius: 999px;
  content: '';
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}
.save-chip span {
  color: var(--ink-3);
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.save-chip strong {
  color: var(--ink);
  display: inline-block;
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 500;
  max-width: 150px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-chip-document {
  flex-basis: min(100%, 220px);
  max-width: min(100%, 220px);
}
.save-chip-document strong {
  max-width: 90px;
}
.save-chip-price {
  flex-basis: min(100%, 160px);
  max-width: min(100%, 160px);
}
.save-chip-price strong {
  max-width: 56px;
}
.save-chip i {
  color: var(--good);
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
}
.save-chip.empty {
  opacity: 0.58;
}
.save-chip.empty::before {
  animation: none;
  background: var(--ink-3);
}
.save-chip.empty i {
  color: var(--ink-3);
}
.intake-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.progress-pip {
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
}
.progress-pip.done { background: var(--ink); }
.progress-pip.active { background: var(--accent); }
[data-aesthetic="institutional"] .progress-pip.active { background: var(--ink); }

.intake-stepnum {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.intake-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  margin: 0 0 14px;
  text-wrap: balance;
}
.intake-sub {
  font-size: 16.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 32px;
  max-width: 56ch;
}

.dropzone {
  border: 1.5px dashed var(--ink-3);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  padding: 56px 32px;
  text-align: center;
  transform-origin: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease,
    transform 0.24s cubic-bezier(0.18, 0.74, 0.22, 1);
  cursor: pointer;
}
.dropzone:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.dropzone.over { border-color: var(--ink); background: var(--paper); }
.dropzone.has-file {
  background: rgba(255,255,255,0.38);
  border-style: solid;
  padding: 18px 22px;
  text-align: left;
}
.dropzone.file-accepted {
  animation: upload-file-accepted 760ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.dropzone.is-checking {
  border-color: rgba(20,17,13,0.58);
  box-shadow: 0 18px 54px rgba(20,17,13,0.08);
  opacity: 0.72;
  transform: scale(0.985);
}
.file-input {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.dropzone-glyph {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--ink);
  display: grid; place-items: center;
}
.dropzone.has-file .dropzone-glyph {
  display: none;
}
.dropzone h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 8px;
  font-weight: var(--display-weight);
}
.dropzone p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}
.dropzone-file {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.dropzone-file .btn {
  font-size: 13px;
  padding: 8px 12px;
}

.or-rule {
  display: flex; align-items: center; gap: 16px;
  margin: 28px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.or-rule::before, .or-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}

.field {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.field-input, .field input[type="text"], .field input[type="email"], .field input[type="number"] {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--font-mono);
  color: var(--ink);
}
.field-input::placeholder,
.field input::placeholder {
  color: rgba(30, 28, 25, 0.34);
  opacity: 1;
}
.field.is-empty .field-input {
  color: var(--ink-2);
  border-color: rgba(30, 28, 25, 0.22);
  background: rgba(255, 255, 255, 0.44);
}
.field.is-filled label {
  color: var(--ink);
}
.field.is-filled .field-input {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
  font-weight: 500;
  background: #fffef9;
}
.field-input:focus, .field input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.field-help {
  font-size: 12.5px;
  color: var(--ink-3);
}
.smart-fill-note {
  font-weight: 600;
}
.smart-fill-loading,
.smart-fill-review {
  color: #735c16;
}
.smart-fill-decoded {
  color: #285c36;
}
.smart-fill-error {
  color: #8f1f1f;
}

.payment-method-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

.payment-method-option {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  min-height: 54px;
  padding: 10px 12px;
  font: 600 13px/1.15 var(--font-mono);
  text-align: center;
  cursor: pointer;
}

.payment-method-option:last-child {
  border-right: 0;
}

.payment-method-option:hover {
  background: rgba(0, 0, 0, 0.035);
  color: var(--ink);
}

.payment-method-option:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.payment-method-option.is-selected {
  background: var(--ink);
  color: var(--paper);
}

.address-autocomplete-wrap {
  position: relative;
}

.address-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fffef9;
  border: 1px solid var(--ink);
  box-shadow: 0 18px 42px rgba(20, 18, 15, 0.16);
}

.address-suggestion,
.address-suggestion-status {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(30, 28, 25, 0.12);
  background: transparent;
  color: var(--ink);
  display: block;
  padding: 12px 14px;
  text-align: left;
}

.address-suggestion {
  cursor: pointer;
}

.address-suggestion:last-child,
.address-suggestion-status:last-child {
  border-bottom: 0;
}

.address-suggestion:hover,
.address-suggestion:focus-visible {
  background: rgba(224, 55, 34, 0.08);
  outline: none;
}

.address-suggestion strong {
  display: block;
  font: 700 15px/1.2 var(--font-sans);
}

.address-suggestion span,
.address-suggestion-status {
  color: var(--ink-3);
  font: 500 12px/1.35 var(--font-sans);
}

.address-suggestion-status.is-error {
  color: #8f1f1f;
}

.address-suggestion-attribution {
  color: var(--ink-3);
  font: 600 11px/1 var(--font-sans);
  padding: 9px 14px 11px;
  text-align: right;
}

.uploaded-file {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  margin-top: 14px;
}
.uploaded-file-icon {
  width: 36px; height: 44px;
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  flex-shrink: 0;
}
.dropzone.file-accepted .uploaded-file-icon {
  animation: upload-file-icon-pop 640ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.dropzone.file-accepted .uploaded-file-meta {
  animation: upload-file-meta-slide 560ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.uploaded-file-meta {
  flex: 1;
}
.uploaded-file-meta strong { display: block; font-size: 14px; }
.uploaded-file-meta span { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.document-detection {
  border: 1px solid var(--rule-strong);
  background: rgba(60, 130, 70, 0.08);
  margin-top: 14px;
  max-width: 640px;
  overflow: hidden;
  padding: 14px 16px;
  position: relative;
}
.document-detection.pending {
  background: rgba(212, 165, 25, 0.1);
}
.inspection-modal {
  align-items: center;
  animation: inspection-backdrop-in 380ms cubic-bezier(0.16, 0.74, 0.24, 1) both;
  -webkit-backdrop-filter: blur(9px) saturate(70%) brightness(0.62);
  backdrop-filter: blur(9px) saturate(70%) brightness(0.62);
  background:
    radial-gradient(circle at 50% 42%, rgba(66, 38, 20, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(28, 15, 8, 0.66), rgba(13, 7, 4, 0.72)),
    rgba(13, 7, 4, 0.58);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  min-height: 100dvh;
  padding: 18px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}
.inspection-card.document-detection {
  animation: inspection-card-enter 460ms cubic-bezier(0.16, 0.84, 0.22, 1) 70ms both;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(247,245,240,0.94)),
    rgba(212, 165, 25, 0.16);
  border: 0.5px solid rgba(255,255,255,0.82);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.58) inset,
    0 24px 72px rgba(20,17,13,0.34);
  margin: 0;
  max-width: min(620px, calc(100vw - 36px));
  padding: 18px 20px;
  pointer-events: auto;
  transform-origin: 50% 58%;
  width: 100%;
  will-change: opacity, transform;
}
.inspection-card.document-detection.is-complete {
  animation: inspection-card-complete 520ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.inspection-card.document-detection::after {
  background: linear-gradient(90deg, transparent, rgba(214,58,29,0.14), transparent);
  content: '';
  height: 1px;
  left: 16px;
  position: absolute;
  right: 16px;
  top: 0;
}
.document-detection.pending::before {
  border: 1px solid rgba(212, 165, 25, 0.34);
  content: '';
  inset: 5px;
  pointer-events: none;
  position: absolute;
}
.inspection-sweep {
  animation: inspection-sweep 1.65s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 25, 0.24), rgba(255,255,255,0.2), transparent);
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 42%;
}
.inspection-head {
  animation: inspection-content-enter 420ms cubic-bezier(0.18, 0.74, 0.22, 1) 170ms both;
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.document-detection span {
  color: var(--ink-3);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.document-detection strong {
  animation: inspection-content-enter 420ms cubic-bezier(0.18, 0.74, 0.22, 1) 220ms both;
  display: block;
  font-size: 15px;
  position: relative;
  z-index: 1;
}
.document-detection p {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
}
.inspection-track {
  animation: inspection-content-enter 420ms cubic-bezier(0.18, 0.74, 0.22, 1) 270ms both;
  background: rgba(20,17,13,0.09);
  height: 5px;
  margin: 20px 0 14px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.inspection-progress {
  animation: inspection-progress 2.4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
  background: var(--accent);
  height: 100%;
  transform-origin: left center;
  width: 100%;
}
.inspection-checks {
  animation: inspection-content-enter 420ms cubic-bezier(0.18, 0.74, 0.22, 1) 330ms both;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  position: relative;
  z-index: 1;
}
.inspection-checks span {
  animation: inspection-chip 2.5s ease-in-out infinite;
  border: 1px solid rgba(184, 140, 20, 0.36);
  border-radius: 999px;
  background: rgba(255,255,255,0.46);
  color: var(--ink-2);
  display: inline-flex;
  font-size: 10px;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 5px 8px;
  text-transform: uppercase;
}
.inspection-checks span:nth-child(2) { animation-delay: 0.16s; }
.inspection-checks span:nth-child(3) { animation-delay: 0.32s; }
.inspection-checks span:nth-child(4) { animation-delay: 0.48s; }
.inspection-checks span:nth-child(5) { animation-delay: 0.64s; }
.inspection-card.is-complete .inspection-sweep {
  animation: none;
  opacity: 0;
}
.inspection-card.is-complete .inspection-progress {
  animation: inspection-progress-complete 420ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
@keyframes upload-file-accepted {
  0% {
    border-color: var(--ink-3);
    box-shadow: 0 0 0 rgba(212, 165, 25, 0);
    transform: scale(1);
  }
  36% {
    border-color: rgba(212, 165, 25, 0.88);
    box-shadow: 0 14px 42px rgba(212, 165, 25, 0.18), 0 0 0 4px rgba(212, 165, 25, 0.14);
    transform: scale(1.012);
  }
  100% {
    border-color: var(--rule-strong);
    box-shadow: 0 0 0 rgba(212, 165, 25, 0);
    transform: scale(1);
  }
}
@keyframes upload-file-icon-pop {
  0% { opacity: 0; transform: translateY(6px) rotate(-4deg) scale(0.82); }
  52% { opacity: 1; transform: translateY(-2px) rotate(2deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes upload-file-meta-slide {
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes inspection-backdrop-in {
  0% {
    background:
      radial-gradient(circle at 50% 42%, rgba(66, 38, 20, 0), transparent 36%),
      linear-gradient(180deg, rgba(28, 15, 8, 0), rgba(13, 7, 4, 0)),
      rgba(13, 7, 4, 0);
    opacity: 0;
    -webkit-backdrop-filter: blur(0px) saturate(100%) brightness(1);
    backdrop-filter: blur(0px) saturate(100%) brightness(1);
  }
  100% {
    opacity: 1;
  }
}
@keyframes inspection-card-enter {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }
  42% {
    opacity: 1;
    transform: translateY(-3px) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes inspection-card-complete {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-2px) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes inspection-content-enter {
  0% { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes inspection-sweep {
  0% { transform: translateX(-115%); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translateX(255%); opacity: 0; }
}
@keyframes inspection-progress {
  0% { transform: translateX(-96%) scaleX(0.22); }
  45% { transform: translateX(-18%) scaleX(0.72); }
  100% { transform: translateX(112%) scaleX(0.34); }
}
@keyframes inspection-chip {
  0%, 100% {
    border-color: rgba(184, 140, 20, 0.28);
    color: var(--ink-3);
  }
  38% {
    border-color: rgba(184, 140, 20, 0.62);
    color: var(--ink);
  }
}
@keyframes inspection-progress-complete {
  0% { transform: translateX(-10%) scaleX(0.86); }
  100% { transform: translateX(0) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .document-detection.pending::before,
  .dropzone.file-accepted,
  .dropzone.file-accepted .uploaded-file-icon,
  .dropzone.file-accepted .uploaded-file-meta,
  .inspection-modal,
  .inspection-card.document-detection,
  .inspection-head,
  .inspection-card.document-detection strong,
  .inspection-track,
  .inspection-sweep,
  .inspection-progress,
  .inspection-checks,
  .inspection-checks span {
    animation: none;
  }
  .inspection-progress {
    transform: translateX(0) scaleX(0.72);
  }
}

.review-summary-card {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--paper);
  margin-bottom: 24px;
}
.review-summary-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 12px;
  font-weight: var(--display-weight);
}
.review-summary-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.review-summary-card dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.review-summary-card dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.intake-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px;
  gap: 12px;
}

.pay-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.pay-line {
  align-items: flex-start;
  display: flex;
  font-size: 14px;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.pay-line:last-child { border-bottom: 0; }
.pay-line-addon {
  color: var(--good);
}
.pay-line-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pay-line-copy > span {
  font-weight: 500;
}
.pay-line-copy small {
  border-top: 1px dashed var(--rule);
  color: var(--ink-3);
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  padding-top: 6px;
}
.pay-line > span:last-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pay-line-addon .pay-line-copy small {
  border-top-color: rgba(44,90,53,0.28);
  color: color-mix(in srgb, var(--good) 72%, var(--ink-3));
}
.pay-total {
  display: flex; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--display-weight);
  padding: 16px 0 0;
  border-top: 2px solid var(--ink);
  margin-top: 8px;
}
.checkout-addon {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 18px minmax(0, 1fr);
  margin-bottom: 14px;
  padding: 14px;
  position: relative;
}
.checkout-addon.selected {
  border-color: rgba(60, 130, 70, 0.5);
  background: rgba(60, 130, 70, 0.07);
}
.checkout-addon.disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.checkout-addon input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.checkout-addon-box {
  border: 1.5px solid var(--rule-strong);
  border-radius: 3px;
  height: 18px;
  margin-top: 3px;
  width: 18px;
}
.checkout-addon.selected .checkout-addon-box {
  background: var(--good);
  border-color: var(--good);
  box-shadow: inset 0 0 0 4px var(--paper);
}
.checkout-addon-copy {
  display: grid;
  gap: 5px;
}
.checkout-addon-kicker {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.checkout-addon-copy strong {
  font-size: 15px;
}
.checkout-addon-copy span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.checkout-addon-copy em {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.checkout-note {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 14px;
}
.checkout-disclaimer {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 10px;
}
.checkout-error {
  border: 1px solid rgba(174, 48, 48, 0.35);
  border-radius: var(--radius);
  background: rgba(174, 48, 48, 0.07);
  color: #9f2929;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 12px;
  padding: 12px 14px;
}
.file-error {
  border: 1px solid rgba(174, 48, 48, 0.35);
  border-radius: var(--radius);
  background: rgba(174, 48, 48, 0.07);
  color: #9f2929;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 12px;
  padding: 12px 14px;
}

/* ============================================================
   Confirmation
   ============================================================ */

.confirmation {
  margin: 0 auto;
  max-width: 1120px;
  padding: 56px 32px 96px;
}
.confirmation-hero {
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0)),
    var(--paper);
  display: grid;
  gap: 32px;
  grid-template-columns: 116px 1fr minmax(280px, 360px);
  overflow: hidden;
  padding: 34px;
  position: relative;
}
.confirmation-hero::after {
  background: repeating-linear-gradient(
    90deg,
    rgba(20, 17, 13, 0.055) 0,
    rgba(20, 17, 13, 0.055) 1px,
    transparent 1px,
    transparent 18px
  );
  content: '';
  inset: auto 0 0;
  height: 7px;
  opacity: 0.8;
  position: absolute;
}
.confirmation-mark {
  align-items: center;
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  display: grid;
  justify-items: center;
  position: relative;
}
.confirmation-video-mark {
  background: transparent;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
}
.confirmation-video-mark video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.confirmation-mark svg {
  animation: confirmation-check 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
  height: 56px;
  width: 56px;
}
.confirmation-ring {
  animation: confirmation-ring 900ms ease-out 80ms both;
  border: 1px solid var(--accent);
  border-radius: 999px;
  inset: -10px;
  position: absolute;
}
.confirmation-kicker {
  color: var(--good);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.confirmation-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
.confirmation-copy p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 58ch;
}
.confirmation-receipt {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: grid;
}
.confirmation-receipt div {
  display: grid;
  gap: 7px;
  grid-template-columns: 86px minmax(0, 1fr);
  padding: 14px 16px;
}
.confirmation-receipt div + div {
  border-top: 1px solid var(--rule);
}
.confirmation-receipt span {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.confirmation-receipt strong {
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.confirmation-panel {
  align-items: end;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr auto;
  margin-top: 28px;
}
.confirmation-steps {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.confirmation-step {
  display: grid;
  gap: 14px;
  grid-template-columns: 22px 1fr;
  padding: 22px;
  position: relative;
}
.confirmation-step + .confirmation-step {
  border-left: 1px solid var(--rule);
}
.confirmation-step > span {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  height: 22px;
  margin-top: 2px;
  width: 22px;
}
.confirmation-step.done > span {
  background: var(--good);
  border-color: var(--good);
  box-shadow: inset 0 0 0 5px var(--paper);
}
.confirmation-step.active > span {
  animation: confirmation-pulse 1100ms ease-in-out infinite;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(214, 58, 29, 0.12);
}
.confirmation-step strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.confirmation-step p {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.45;
  margin: 6px 0 0;
}
.confirmation-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 230px;
}
.confirmation-primary {
  min-height: 58px;
}

@keyframes confirmation-check {
  0% { opacity: 0.22; transform: scale(0.72) rotate(-8deg); }
  62% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes confirmation-ring {
  0% { opacity: 0; transform: scale(0.72); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes confirmation-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(214, 58, 29, 0.1); transform: scale(0.96); }
  50% { box-shadow: 0 0 0 10px rgba(214, 58, 29, 0.03); transform: scale(1); }
}

/* ============================================================
   Results — common
   ============================================================ */

.results {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 96px;
}

.results-takebar {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 4px;
  background: var(--paper-2);
  width: fit-content;
}
.take-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--ink-2);
}
.take-tab.active {
  background: var(--ink);
  color: var(--paper);
}
.results-status {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  padding: 10px 12px;
  text-transform: uppercase;
}
.results-status.error {
  border-color: rgba(174, 48, 48, 0.35);
  color: #9f2929;
  text-transform: none;
}
.report-actions {
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 0 18px;
  padding: 14px 16px;
}
.report-actions-label {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.report-actions p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.4;
  margin: 0;
}
.report-email-btn {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 9px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.report-email-btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.report-email-btn:disabled {
  cursor: wait;
  opacity: 0.55;
}
.report-email-status {
  border-top: 1px dashed var(--rule);
  color: var(--good);
  font-family: var(--font-mono);
  font-size: 11px;
  grid-column: 1 / -1;
  letter-spacing: 0.04em;
  padding-top: 10px;
}
.report-email-status.error {
  color: #9f2929;
}

.verdict-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  margin: 24px 0 32px;
  padding: 24px 28px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.verdict-num {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.9;
  font-weight: var(--display-weight);
  letter-spacing: -0.04em;
  color: var(--critical);
}
[data-aesthetic="institutional"] .verdict-num { color: var(--ink); }
.verdict-num small {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: block;
  margin-top: 6px;
  text-transform: uppercase;
}
.verdict-text h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  margin: 0 0 8px;
  text-wrap: balance;
}
.verdict-text p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
  max-width: 60ch;
}
.verdict-callout {
  align-items: start;
  border-top: 1px dashed var(--rule);
  color: var(--ink-2);
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 14px;
  padding-top: 12px;
}
.verdict-callout .sev {
  justify-self: start;
}
.verdict-stats {
  display: flex; gap: 18px;
  align-items: stretch;
}
.verdict-stat {
  border-left: 1px solid var(--rule);
  padding-left: 18px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.verdict-stat .n {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  line-height: 1;
}
.verdict-stat .l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 6px;
  text-transform: uppercase;
}
.verdict-stat.crit .n { color: var(--critical); }
.verdict-stat.caut .n { color: var(--caution); }
.verdict-stat.good .n { color: var(--good); }

.deal-assessment {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  margin: -12px 0 18px;
  overflow: hidden;
}
.deal-assessment-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 22px;
  text-align: left;
  width: 100%;
}
.deal-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.deal-assessment h3,
.market-scan h4,
.history-check h4,
.assessment-bucket h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  margin: 0;
}
.deal-assessment h3 {
  font-size: 23px;
  margin-bottom: 6px;
}
.deal-assessment p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  max-width: 70ch;
}
.deal-head-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.deal-toggle {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 7px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}
.deal-assessment.is-collapsed .deal-toggle {
  animation: deal-toggle-pulse 1.9s ease-in-out infinite;
}
.deal-assessment-head:hover .deal-toggle {
  animation-play-state: paused;
  border-color: var(--ink);
  color: var(--ink);
}
@keyframes deal-toggle-pulse {
  0%, 100% {
    border-color: var(--rule);
    box-shadow: 0 0 0 0 rgba(214, 58, 29, 0);
    transform: translateY(0);
  }
  42% {
    border-color: rgba(214, 58, 29, 0.44);
    box-shadow: 0 0 0 5px rgba(214, 58, 29, 0.09);
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .deal-assessment.is-collapsed .deal-toggle {
    animation: none;
  }
}
.deal-assessment-body {
  border-top: 1px solid var(--rule);
  max-height: 128px;
  opacity: 1;
  overflow: hidden;
  position: relative;
  transform: translateY(0);
  transition: max-height 0.35s var(--ease-out-smooth), opacity 0.2s ease, transform 0.25s ease;
}
.deal-assessment-body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.86) 45%, var(--paper) 86%),
    linear-gradient(180deg, rgba(20,17,13,0), rgba(20,17,13,0.08));
  bottom: 0;
  content: '';
  height: 104px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}
.deal-assessment.is-expanded .deal-assessment-body {
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
}
.deal-assessment.is-expanded .deal-assessment-body::after {
  opacity: 0;
}
.deal-assessment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.assessment-bucket {
  padding: 18px 18px 18px 22px;
}
.assessment-bucket + .assessment-bucket {
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
.assessment-bucket h4 {
  font-size: 16px;
  margin-bottom: 12px;
}
.assessment-bucket ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.assessment-bucket li {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
  padding-left: 16px;
  position: relative;
}
.assessment-bucket li::before {
  content: '→';
  color: var(--accent);
  font-family: var(--font-mono);
  left: 0;
  position: absolute;
  top: 0;
}
[data-aesthetic="institutional"] .assessment-bucket li::before { color: var(--ink); }
.market-scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  padding: 18px 22px 22px;
}
.market-scan + .market-scan {
  border-top: 1px solid var(--rule);
}
.history-check {
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 18px;
  padding: 18px 22px 22px;
}
.history-check h4 {
  font-size: 20px;
  margin: 0 0 8px;
}
.history-check-columns {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.history-list {
  padding: 14px;
}
.history-list + .history-list {
  border-left: 1px solid var(--rule);
}
.history-list h5 {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.history-list ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.history-list li {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
  padding-left: 15px;
  position: relative;
}
.history-list li::before {
  content: '•';
  color: var(--accent);
  font-family: var(--font-mono);
  left: 0;
  position: absolute;
  top: 0;
}
[data-aesthetic="institutional"] .history-list li::before { color: var(--ink); }
.history-disclaimer,
.history-check-footer {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 12px;
  text-transform: uppercase;
}
.history-check-footer {
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 0;
  padding-top: 12px;
}
.market-scan h4 {
  font-size: 20px;
  margin-bottom: 8px;
}
.market-scan-facts {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  min-width: 360px;
}
.market-scan-facts div {
  padding: 12px;
}
.market-scan-facts div:nth-child(odd) {
  border-right: 1px solid var(--rule);
}
.market-scan-facts div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--rule);
}
.market-scan-facts span {
  color: var(--ink-3);
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.market-scan-facts strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.25;
}
.market-sources {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.market-sources a {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  max-width: 32%;
  overflow: hidden;
  padding: 7px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-sources span,
.market-note {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 7px 9px;
}
.market-note {
  grid-column: 1 / -1;
  background: var(--paper-2);
}
.vehicle-recalls span {
  max-width: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-sources a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* severity chips */
.sev {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sev::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.sev-critical { color: var(--critical); background: var(--critical-bg); }
.sev-caution { color: var(--caution); background: var(--caution-bg); }
.sev-good { color: var(--good); background: var(--good-bg); }

/* ============================================================
   Results take A — Code Review
   ============================================================ */

.review-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.review-doc {
  position: relative;
}

.doc-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.doc-toolbar .sep { flex: 1; }
.doc-toolbar .pill {
  border: 1px solid var(--rule);
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
}

.findings-rail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.findings-rail::-webkit-scrollbar { width: 6px; }
.findings-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.finding-group {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.finding-group-critical { border-color: rgba(214, 58, 29, 0.32); }
.finding-group-caution { border-color: rgba(184, 140, 20, 0.34); }
.finding-group-good { border-color: rgba(44, 90, 53, 0.24); }
.finding-group-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.finding-group-head h3 {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
}
.finding-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finding-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: var(--paper);
  text-align: left;
  display: block;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.finding-card-compact {
  border-radius: var(--radius);
  padding: 13px 14px;
}
.finding-card:hover { border-color: var(--ink); }
.finding-card.active {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-aesthetic="editorial"] .finding-card.active { box-shadow: 4px 4px 0 0 var(--ink); }
.finding-head {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.finding-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.finding-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  font-weight: var(--display-weight);
  margin: 0 0 6px;
  letter-spacing: var(--display-tracking);
}
.finding-card-compact .finding-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.finding-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.finding-meta {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.finding-meta .anchor {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* upsells panel */
.upsell-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  padding: 18px;
  margin-top: 20px;
}
.upsell-panel h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.upsell {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
}
.upsell.selected {
  background: rgba(60, 130, 70, 0.06);
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
}
.upsell:last-child { border-bottom: 0; }
.upsell-glyph {
  width: 36px; height: 36px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.upsell-body { flex: 1; }
.upsell-body strong { display: block; font-size: 13.5px; }
.upsell-body span { font-size: 12px; color: var(--ink-3); }
.upsell-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink);
  padding: 6px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.upsell-cta.status {
  color: var(--ink-2);
  cursor: default;
}
.upsell-cta.status.included,
.upsell-cta.status.recommended {
  background: var(--paper);
}
.upsell-cta.status.disabled {
  border-color: var(--rule);
  color: var(--ink-3);
}
.upsell-cta:hover { background: var(--ink); color: var(--paper); }
.upsell-cta.status:hover {
  background: var(--paper);
  color: var(--ink-2);
}
.upsell-cta.status.disabled:hover {
  color: var(--ink-3);
}

/* ============================================================
   Results take B — Conversational walkthrough
   ============================================================ */

.walk {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
  min-height: 720px;
}
.walk-doc-stage {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  padding: 24px;
  min-height: 720px;
  overflow: hidden;
}
.walk-doc-stage .doc-page {
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin: 0 auto;
}
.walk-spotlight {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(ellipse at var(--sx, 50%) var(--sy, 30%), transparent 0px, transparent 220px, rgba(20,17,13,0.22) 280px, rgba(20,17,13,0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.walk-spotlight.active { opacity: 1; }

.walk-side {
  display: flex; flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.walk-progress {
  display: flex; gap: 4px;
}
.walk-progress .pip {
  flex: 1;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
}
.walk-progress .pip.done { background: var(--ink); }
.walk-progress .pip.active { background: var(--accent); }
[data-aesthetic="institutional"] .walk-progress .pip.active { background: var(--ink); }

.walk-bubble {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 22px 24px;
  overflow: visible;
  padding-right: 28px;
}
.walk-bubble-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.walk-bubble-head .who {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
}
.walk-bubble-head .who .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--good);
}
.walk-bubble h3 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 12px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  text-wrap: balance;
}
.walk-bubble p {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
.walk-bubble blockquote {
  margin: 14px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
[data-aesthetic="institutional"] .walk-bubble blockquote { border-left-color: var(--ink); }
.walk-action-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 8px;
}
.walk-action-list li {
  display: flex; gap: 10px;
  font-size: 14px;
  align-items: flex-start;
}
.walk-action-list li::before {
  content: '→';
  font-family: var(--font-mono);
  color: var(--accent);
  flex-shrink: 0;
}
[data-aesthetic="institutional"] .walk-action-list li::before { color: var(--ink); }

.walk-controls {
  display: flex; gap: 8px;
  margin-top: 18px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  align-items: center;
}
.walk-controls .step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-right: auto;
}
.walk-controls button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--rule);
  padding: 8px 12px;
  border-radius: var(--radius);
}
.walk-controls button:hover { border-color: var(--ink); }
.walk-controls button.next {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
[data-aesthetic="warm"] .walk-controls button.next { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

/* ============================================================
   Results take C — Spatial zoom
   ============================================================ */

.spatial {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(20,17,13,0.04) 19px, rgba(20,17,13,0.04) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(20,17,13,0.04) 19px, rgba(20,17,13,0.04) 20px),
    var(--paper-2);
  position: relative;
  height: 820px;
  overflow: hidden;
}
.spatial-toolbar {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 8px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.spatial-toolbar .pill {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 6px 10px;
  border-radius: var(--radius);
}
.spatial-canvas {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.spatial-doc {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: center;
}
.spatial-pin {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 2px solid var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.spatial-pin:hover { transform: scale(1.15); }
.spatial-pin.crit { background: var(--critical); color: var(--paper); }
.spatial-pin.caut { background: var(--caution); color: var(--paper); }
.spatial-pin.good { background: var(--good); color: var(--paper); }
.spatial-pin.active { transform: scale(1.25); outline: 3px solid var(--paper); outline-offset: 2px; }

.spatial-card {
  position: absolute;
  bottom: 24px; left: 24px;
  width: 420px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 22px 24px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
  z-index: 6;
}
.spatial-addons {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100% - 48px));
  z-index: 6;
}
.spatial-addons .upsell-panel {
  margin-top: 0;
  background: rgba(254, 252, 246, 0.96);
  box-shadow: 0 18px 48px rgba(0,0,0,0.14);
}
.spatial-card .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.spatial-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.spatial-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.spatial-card .law {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding: 10px;
  background: var(--paper-2);
  border-radius: var(--radius);
  line-height: 1.5;
}
.spatial-nav {
  display: flex; gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.spatial-nav button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.spatial-nav .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: auto;
  display: flex; align-items: center;
}
.spatial-legend {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; gap: 6px;
  z-index: 5;
}
.spatial-legend .pin-mini {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper);
  font-weight: 600;
  cursor: pointer;
}
.spatial-legend .pin-mini.crit { background: var(--critical); }
.spatial-legend .pin-mini.caut { background: var(--caution); }
.spatial-legend .pin-mini.good { background: var(--good); }
.spatial-legend .pin-mini.active { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================================================
   The bill of sale document (rendered identically across takes)
   ============================================================ */

.doc-page {
  background: #fefcf6;
  border: 1px solid var(--rule);
  border-radius: 0;
  width: 612px;
  padding: 56px 56px 64px;
  font-family: "Times New Roman", serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #14110d;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
  position: relative;
}
.doc-page.full { width: 100%; max-width: 720px; }

.doc-letterhead {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #14110d;
}
.doc-letterhead h2 {
  font-family: "Times New Roman", serif;
  font-size: 22px;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.doc-letterhead .sub {
  font-size: 11.5px;
  color: #6a635a;
  font-style: italic;
}

.doc-section {
  margin-bottom: 18px;
}
.doc-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  border-bottom: 1px solid #14110d;
  padding-bottom: 3px;
  font-weight: 700;
}
.doc-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 12px;
  padding: 3px 0;
}
.doc-row .lbl { font-size: 11.5px; color: #4a4239; }
.doc-row .val { font-family: "Courier New", monospace; font-size: 13px; }
.doc-row-stack .val {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.doc-inline-note {
  border: 1px solid rgba(184,140,20,0.5);
  border-radius: 3px;
  background: rgba(212, 165, 25, 0.14);
  color: #7a5600;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 4px 5px;
  text-transform: uppercase;
}
.doc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.doc-para {
  font-size: 12.5px;
  line-height: 1.65;
  margin: 8px 0;
  text-align: justify;
}
.doc-sig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 28px;
}
.doc-sig .line {
  border-bottom: 1px solid #14110d;
  height: 32px;
  font-family: "Brush Script MT", "Lucida Handwriting", cursive;
  font-size: 22px;
  padding-left: 6px;
  display: flex; align-items: flex-end;
  padding-bottom: 4px;
}
.doc-sig .lbl {
  font-size: 10.5px;
  color: #4a4239;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.doc-foot {
  margin-top: 24px;
  font-size: 10.5px;
  color: #6a635a;
  text-align: center;
  font-style: italic;
}

/* annotations on the doc */
.anno {
  position: relative;
  border-radius: 2px;
  padding: 1px 2px;
  margin: 0 -2px;
  cursor: pointer;
}
.anno-crit { background: rgba(214, 58, 29, 0.22); box-shadow: 0 0 0 1px rgba(214,58,29,0.6) inset; }
.anno-caut { background: rgba(212, 165, 25, 0.28); box-shadow: 0 0 0 1px rgba(184,140,20,0.5) inset; }
.anno-good { background: rgba(60, 130, 70, 0.18); box-shadow: 0 0 0 1px rgba(60,130,70,0.4) inset; }
.anno-missing {
  display: inline-block;
  min-width: 80px;
  height: 16px;
  background: repeating-linear-gradient(45deg, rgba(214,58,29,0.18) 0 6px, rgba(214,58,29,0.32) 6px 12px);
  border: 1px dashed rgba(214,58,29,0.7);
  vertical-align: middle;
  margin: 0 2px;
  border-radius: 2px;
  cursor: pointer;
}
.anno-pin {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--critical);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  vertical-align: text-top;
  margin: 0 4px 0 2px;
  cursor: pointer;
  user-select: none;
}
.anno-pin-stack {
  display: inline-flex;
  gap: 3px;
  vertical-align: text-top;
}
.anno-pin-stack .anno-pin {
  margin-left: 0;
  margin-right: 0;
}
.anno-pin.caut { background: var(--caution); }
.anno-pin.good { background: var(--good); }
.anno-pin.active {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(20, 17, 13, 0.12);
}

.anno.active {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow:
    0 0 0 7px rgba(20, 17, 13, 0.1),
    0 8px 18px rgba(20, 17, 13, 0.18);
}

/* ============================================================
   Mobile preview (right side mini frame on landing)
   ============================================================ */

.mobile-preview {
  position: relative;
  width: 240px;
  border: 8px solid var(--ink);
  border-radius: 32px;
  background: var(--ink);
  padding: 12px 0;
  margin: 24px auto 0;
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
}
.mobile-preview .screen {
  background: var(--paper);
  border-radius: 22px;
  padding: 16px;
  min-height: 380px;
}

/* ============================================================
   Stripped-down mobile flag (toggle)
   ============================================================ */

[data-device="mobile"] .topnav { display: none; }
[data-device="mobile"] .topbar-cta span.full { display: none; }

/* ============================================================
   Misc utility
   ============================================================ */

.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }
.flex-row { display: flex; gap: 12px; align-items: center; }
.spacer-md { height: 32px; }
.spacer-lg { height: 64px; }

/* responsive tiny */
@media (max-width: 1100px) {
  .lp-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lp-hero-tagline {
    font-size: clamp(40px, 6.4vw, 82px);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: 1;
    max-width: 840px;
  }
  [data-aesthetic="editorial"] .lp-hero-tagline {
    color: var(--ink);
    font-style: normal;
  }
  .lp-hero-aside {
    display: none;
  }
  .video-card {
    aspect-ratio: 16/9;
  }
  .hero-pdf-stage {
    aspect-ratio: 16/9;
  }
  .hero-pdf-sheet {
    left: 40%;
  }
  .hero-pdf-stage.image-mode {
    margin-inline: 0;
    overflow: hidden;
  }
  .hero-pdf-stage.image-mode.option-a {
    margin: -18px -22px -22px -8px;
    overflow: visible;
  }
  .hero-pdf-bg {
    height: calc(100% + 84px);
    left: 9%;
    top: -20px;
    transform: translateX(24px) scale(1.04);
    width: 110%;
  }
  .hero-pdf-paper {
    height: calc(100% + 92px);
    left: -1%;
    top: -38px;
    width: 116%;
  }
  .review-grid, .walk { grid-template-columns: 1fr; }
  .deal-assessment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .assessment-bucket:nth-child(3) {
    border-left: 0;
  }
  .assessment-bucket:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
  .market-scan {
    grid-template-columns: 1fr;
  }
  .history-check-columns {
    grid-template-columns: 1fr;
  }
  .history-list + .history-list {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .market-scan-facts {
    min-width: 0;
  }
  .walk-side {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    position: static;
  }
  .walk-bubble {
    max-height: none;
    overflow: visible;
    padding-right: 24px;
  }
  .spatial {
    min-height: 1040px;
  }
  .spatial-card {
    bottom: 320px;
  }
  .spatial-addons {
    left: 24px;
    right: auto;
    bottom: 24px;
    width: min(420px, calc(100% - 48px));
  }
  .price { grid-template-columns: 1fr; }
  .trap-strip { grid-template-columns: repeat(2, 1fr); }
  .trap { border-bottom: 1px solid var(--rule); }
  .how { grid-template-columns: 1fr; }
  .how-step { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 1120px) {
  .topbar-inner {
    padding: 14px 20px;
    gap: 16px;
  }
  .topnav {
    display: none;
  }
  .topbar-menu {
    display: inline-flex;
  }
}

@media (max-width: 620px) {
  .topbar-inner {
    padding: 12px 16px;
  }
  .brand {
    font-size: 19px;
  }
  .topbar-link {
    display: none;
  }
  .topbar-cta {
    display: none;
  }
  .mobile-topnav {
    left: 16px;
    right: 16px;
  }
  .lp-hero-cta-row {
    flex-wrap: wrap;
  }
  .upload-cta {
    border-radius: 16px;
    grid-template-columns: 72px minmax(0, 1fr) 68px;
    min-height: 66px;
    max-width: none;
    min-width: 100%;
  }
  .upload-cta-icon svg {
    height: 34px;
    width: 34px;
  }
  .scan-corner.tl { left: 15px; top: 16px; }
  .scan-corner.tr { right: 15px; top: 16px; }
  .scan-corner.bl { bottom: 16px; left: 15px; }
  .scan-corner.br { bottom: 16px; right: 15px; }
  .upload-cta-label {
    font-size: clamp(17px, 4.8vw, 23px);
    padding: 0 12px;
    white-space: nowrap;
  }
  .upload-cta-price {
    font-size: 21px;
  }
  .hero-pdf-stage {
    aspect-ratio: 4 / 3;
  }
  .hero-pdf-stage.image-mode {
    margin: 0;
    overflow: hidden;
  }
  .hero-pdf-stage.image-mode.option-a {
    margin: 0;
    overflow: hidden;
  }
  .hero-pdf-image {
    height: 100%;
    transform: none;
  }
  .hero-pdf-bg {
    height: calc(100% + 34px);
    left: 4%;
    top: -8px;
    transform: translateX(10px) scale(1.02);
    width: 112%;
  }
  .hero-pdf-paper {
    height: calc(100% + 44px);
    left: -6%;
    top: -16px;
    width: 124%;
  }
  .hero-pdf-sheet {
    left: 25%;
    top: 38px;
    transform: rotate(5deg) scale(0.64);
    transform-origin: top left;
  }
  .scan-panel {
    display: none;
  }
  .hero-callout {
    min-height: 54px;
    padding: 10px 12px;
    width: var(--callout-w);
  }
  .hero-callout strong {
    font-size: 14px;
  }
  .hero-callout span {
    font-size: 15px;
    height: 30px;
    width: 30px;
  }
  .hero-callout.sig { right: 0; bottom: 24px; }
  .hero-callout::after {
    display: none;
  }
  .intake {
    padding: 32px 18px 72px;
  }
  .confirmation {
    padding: 32px 18px 72px;
  }
  .confirmation-hero {
    gap: 22px;
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .confirmation-mark {
    height: 86px;
    width: 86px;
  }
  .confirmation-copy h1 {
    font-size: clamp(38px, 11vw, 56px);
  }
  .confirmation-panel,
  .confirmation-steps {
    grid-template-columns: 1fr;
  }
  .results {
    padding: 24px 18px 72px;
  }
  .verdict-row,
  .deal-assessment-head,
  .report-actions {
    align-items: flex-start;
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .deal-head-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .verdict-row {
    display: flex;
    gap: 18px;
  }
  .verdict-stats {
    width: 100%;
  }
  .deal-assessment-grid,
  .market-scan-facts {
    grid-template-columns: 1fr;
  }
  .assessment-bucket,
  .assessment-bucket + .assessment-bucket {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 16px 22px;
  }
  .assessment-bucket:first-child {
    border-top: 0;
  }
  .market-scan-facts div,
  .market-scan-facts div:nth-child(odd),
  .market-scan-facts div:nth-child(-n + 2) {
    border: 0;
    border-bottom: 1px solid var(--rule);
  }
  .market-scan-facts div:last-child {
    border-bottom: 0;
  }
  .market-sources a {
    max-width: 100%;
    width: 100%;
  }
  .vehicle-recalls span {
    max-width: 100%;
    width: 100%;
  }
  .confirmation-step + .confirmation-step {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .confirmation-actions {
    min-width: 0;
  }
  .dropzone {
    padding: 36px 18px;
  }
  .dropzone.has-file {
    padding: 14px;
  }
  .dropzone-file {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .dropzone-file .btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .uploaded-file {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .uploaded-file-meta {
    min-width: 0;
  }
  .uploaded-file-meta strong {
    overflow-wrap: anywhere;
  }
  .intake-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .intake-actions .flex-row {
    justify-content: space-between;
  }
  .pay-card,
  .review-summary-card dl {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Motion — Tier 1
   tokens, entrances, and earned micro-interactions.
   institutional stays restrained; warm/editorial breathe a bit more.
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-smooth: cubic-bezier(0.32, 0, 0.67, 0);
  --dur-fast: 150ms;
  --dur-norm: 350ms;
  --dur-slow: 500ms;
}

@keyframes cc-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cc-fade-up-sm {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cc-pin-in {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes cc-anno-in {
  from { background-color: transparent; box-shadow: 0 0 0 1px transparent inset; }
  /* settles into the static rule defined elsewhere */
}

@keyframes cc-underline-draw {
  from { background-size: 0% 3px; }
  to   { background-size: 100% 3px; }
}

@keyframes cc-step-in {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cc-state-word-out {
  0%   { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, -0.28em, 0); }
}

@keyframes cc-state-word-in {
  0%   { opacity: 0; transform: translate3d(0, 0.34em, 0); }
  64%  { opacity: 1; transform: translate3d(0, -0.06em, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- Hero entrance staircase --- */
.lp-hero > div > .hero-state-copy,
.lp-hero > div > .lp-hero-tagline,
.lp-hero > div > .lp-hero-sub,
.lp-hero > div > .lp-hero-cta,
.lp-hero > .lp-hero-aside {
  animation: cc-fade-up var(--dur-slow) var(--ease-out-expo) both;
}
.lp-hero > div > .hero-state-copy { animation-delay: 40ms; }
.lp-hero > div > .lp-hero-tagline { animation-delay: 180ms; }
.lp-hero > div > .lp-hero-sub     { animation-delay: 260ms; }
.lp-hero > div > .lp-hero-cta     { animation-delay: 340ms; }
.lp-hero > .lp-hero-aside         { animation-delay: 400ms; }

/* Editorial: institutional underline draws in on the .accent */
[data-aesthetic="institutional"] .lp-hero-tagline .accent {
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  padding-bottom: 6px;
  animation: cc-underline-draw 700ms var(--ease-out-expo) 700ms forwards;
}

/* Editorial: warm-italic accent gets a subtle slide */
[data-aesthetic="editorial"] .lp-hero-tagline .accent,
[data-aesthetic="warm"] .lp-hero-tagline .accent {
  display: inline-block;
  animation: cc-fade-up-sm 600ms var(--ease-out-expo) 600ms both;
}

/* --- Trap strip: scroll-reveal --- */
.trap {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--dur-norm) var(--ease-out-expo),
              transform var(--dur-norm) var(--ease-out-expo);
}
.trap.is-in { opacity: 1; transform: none; }
.trap.is-in:nth-child(1) { transition-delay: 0ms; }
.trap.is-in:nth-child(2) { transition-delay: 80ms; }
.trap.is-in:nth-child(3) { transition-delay: 160ms; }
.trap.is-in:nth-child(4) { transition-delay: 240ms; }
.trap.is-in:nth-child(5) { transition-delay: 320ms; }

/* --- Document entrance + pin ink-in --- */
.doc-page {
  animation: cc-fade-up var(--dur-slow) var(--ease-out-expo) both;
}
.bos-doc .anno-pin,
.review-doc .anno-pin,
.spatial-stage .anno-pin,
.walk-stage .anno-pin {
  animation: cc-pin-in 420ms var(--ease-out-expo) backwards;
  animation-delay: calc(380ms + (var(--i, 1) - 1) * 110ms);
  transform-origin: center;
}
.anno-crit, .anno-caut, .anno-good, .anno-missing {
  animation: cc-fade-up-sm 320ms var(--ease-out-smooth) both;
  animation-delay: calc(420ms + (var(--i, 1) - 1) * 110ms);
}

/* --- Intake: step transitions --- */
.intake-step {
  animation: cc-step-in 280ms var(--ease-out-expo) both;
}

/* --- Pricing card hover lift --- */
.price-card {
  transition: transform 220ms var(--ease-out-expo),
              box-shadow 220ms var(--ease-out-expo),
              border-color 220ms var(--ease-out-expo);
  will-change: transform;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.28);
}
[data-aesthetic="editorial"] .price-card.featured:hover {
  box-shadow: 6px 6px 0 0 var(--ink), 0 18px 36px -18px rgba(0,0,0,0.28);
}

/* --- State grid: gentle hover ping for "soon" cells (low key) --- */
.state-cell {
  transition: background var(--dur-fast) var(--ease-out-smooth),
              opacity var(--dur-fast) var(--ease-out-smooth);
}
.state-cell:hover { background: var(--paper-2); }

/* --- Reduced motion: respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .lp-hero-tagline .accent { background-size: 100% 3px; }
}

/* ============================================================
   Static-HTML pages (state SEO pages, /states/*.html)
   These styles let plain HTML pages reuse the home page design
   system without depending on React. All rules are scoped under
   .static-page so they cannot affect the React app.
   ============================================================ */

.static-page {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.static-page * { box-sizing: border-box; }
.static-page button:not(.upload-cta) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.static-page a:not(.topbar-cta) { color: inherit; }
.static-page p { margin: 0; }
.static-page h1, .static-page h2, .static-page h3, .static-page h4 { margin: 0; }
.static-page ul { margin: 0; padding: 0; list-style: none; }
.static-page table { border-collapse: collapse; width: 100%; }

/* Static topbar mirrors the React .topbar/.brand layout. The HTML uses
   the same class names so the home-page rules apply; we only add an
   anchor variant for the brand button (since static pages link <a>). */
.static-page .brand {
  text-decoration: none;
  color: inherit;
}
.static-page .topbar-cta,
.static-page .topbar-link,
.static-page .topnav a {
  text-decoration: none;
}

/* Static hero card — a quieter, no-animation analog of the React
   home-page paper stack. Lives inside .lp-hero > .lp-hero-aside. */
.static-hero-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 40px -22px rgba(20, 17, 13, 0.22);
  padding: 28px 28px 32px;
  position: relative;
  overflow: hidden;
}
.static-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(214, 58, 29, 0.07), transparent 55%),
    radial-gradient(120% 100% at 0% 100%, rgba(139, 92, 246, 0.05), transparent 60%);
  pointer-events: none;
}
.static-hero-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.static-hero-card-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  margin-bottom: 6px;
}
.static-hero-card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.static-hero-card-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
}
.static-hero-card-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.static-hero-card-row:last-child { border-bottom: 0; padding-bottom: 0; }
.static-hero-card-row .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.static-hero-card-row .val {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: var(--display-tracking);
}
.static-hero-card-row .val.highlighted {
  background: var(--critical-bg);
  box-shadow: 0 0 0 1px var(--critical) inset;
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: -6px;
}
.static-hero-card-row .val.warned {
  background: var(--caution-bg);
  box-shadow: 0 0 0 1px var(--caution) inset;
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: -6px;
}
.static-hero-card-row .pin {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--paper);
}
.static-hero-card-row .pin.crit { background: var(--critical); }
.static-hero-card-row .pin.caut { background: var(--caution); }
.static-hero-card-row .pin.good { background: var(--good); }
.static-hero-card-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Stat strip used below the hero on state pages */
.static-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 32px 0 0;
}
.static-stat-strip > div {
  padding: 22px 22px;
  border-right: 1px solid var(--rule);
}
.static-stat-strip > div:last-child { border-right: 0; }
.static-stat-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 32px;
  letter-spacing: var(--display-tracking);
  line-height: 1;
}
.static-stat-label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Checklist table styled to match the design system */
.static-checklist {
  margin-top: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
.static-checklist th,
.static-checklist td {
  padding: 18px 22px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.static-checklist tr:last-child td { border-bottom: 0; }
.static-checklist th {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.static-checklist td:last-child,
.static-checklist th:last-child { border-right: 0; }
.static-checklist td:first-child {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  letter-spacing: var(--display-tracking);
  width: 22%;
}
.static-checklist td:nth-child(2) {
  font-size: 14.5px;
  color: var(--ink);
  width: 38%;
  line-height: 1.5;
}
.static-checklist td:nth-child(3) {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* "Buyer notes" prose blocks under section heads */
.static-prose {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  padding: 32px 0 28px;
}
.static-prose h2 { display: none; } /* heading lives in the section-head; this is body-only */
.static-prose p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.static-prose p:last-child { margin-bottom: 0; }
.static-prose .static-prose-aside {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  border-left: 2px solid var(--ink);
  padding-left: 16px;
}

/* FAQ block — <details>/<summary> */
.static-faq {
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.static-faq details {
  border-bottom: 1px solid var(--rule);
  padding: 22px 4px;
}
.static-faq summary {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: var(--display-tracking);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  line-height: 1.2;
}
.static-faq summary::-webkit-details-marker { display: none; }
.static-faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-3);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 220ms var(--ease-out-expo);
}
.static-faq details[open] summary::after { content: "−"; color: var(--ink); }
.static-faq details > p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 70ch;
}

/* Static breadcrumb just under the topbar */
.static-breadcrumb {
  /* No negative bottom margin — that was pulling the .lp-hero up over
     the breadcrumb's click area, which is why the links were visible
     but un-clickable. The hero has its own top spacing now. */
  margin: 24px 0 12px;
  position: relative;
  z-index: 5;             /* lift above any sibling stack contexts */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
/* Make the click target slightly larger than the bare text so the 11px
   underline + offset isn't a postage-stamp hit zone. */
.static-breadcrumb a {
  display: inline-block;
  padding: 4px 2px;
}
.static-breadcrumb a {
  color: var(--ink-2);
  /* Visibly clickable AT REST — not just on hover. Standard breadcrumb
     convention is underline-by-default so users can tell links from
     the static current-page label. */
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.static-breadcrumb a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}
.static-breadcrumb a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.static-breadcrumb span[aria-current] {
  color: var(--ink);
  text-decoration: none;
}

/* Pricing/CTA card used at the bottom of state pages */
.static-cta-card {
  margin-top: 64px;
  padding: 36px 36px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
[data-aesthetic="warm"] .static-cta-card { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
[data-aesthetic="editorial"] .static-cta-card { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.static-cta-card h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
}
.static-cta-card p {
  margin-top: 10px;
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.55;
}
.static-cta-card .static-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
/* Bumped specificity (a.btn instead of .btn) to beat the global
   `.static-page a:not(.topbar-cta) { color: inherit }` reset, which
   was making the button anchor inherit the card's white text color
   → invisible white-on-white. */
.static-cta-card a.btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.static-cta-card a.btn:hover { background: rgba(255, 255, 255, 0.92); }
.static-cta-card a.btn.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.static-cta-card a.btn.btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* ============================================================
   Typography refinements (state SEO pages)
   - Source Serif 4 optical sizing axis (8..60 opsz)
   - Tabular + lining figures on numeric blocks
   - Hardened text-wrap (balance for headings, pretty for body)
   - OpenType ligatures / contextual alternates
   ============================================================ */

.static-page h1,
.static-page h2,
.static-page .lp-hero h1,
.static-page .section-title,
.static-page .static-tldr p {
  /* Source Serif 4: optical sizing for display contexts */
  font-variation-settings: "opsz" 60;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1, "ss01" 1, "ss02" 1;
  text-rendering: geometricPrecision;
  text-wrap: balance;
}

.static-page h3,
.static-page .static-faq summary,
.static-page .trap-title,
.static-page .static-cta-card h3 {
  font-variation-settings: "opsz" 32;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-wrap: balance;
}

.static-page .lp-hero-tagline {
  /* Italic editorial — bring optical sizing back to a smaller axis */
  font-variation-settings: "opsz" 24;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1, "ss02" 1;
  text-wrap: pretty;
}

.static-page .lp-hero-sub,
.static-page .section-lede,
.static-page .static-prose p,
.static-page .trap-body,
.static-page .static-checklist td,
.static-page .static-faq details > p {
  font-variation-settings: "opsz" 14;
  text-wrap: pretty;
}

/* Tabular figures + lining figures for any numeric-heavy element */
.static-page .static-stat-num,
.static-page .upload-cta-price,
.static-page .static-byline time,
.static-page time {
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Mono small-caps labels: vary letter-spacing by size for optical balance */
.static-page .lp-eyebrow,
.static-page .static-byline,
.static-page .static-stat-label,
.static-page .static-cross-links h3,
.static-page .static-sources h3,
.static-page .section-kicker,
.static-page .static-tldr-label,
.static-page .static-breadcrumb,
.static-page .static-hero-card-eyebrow {
  font-feature-settings: "kern" 1, "tnum" 1, "ss03" 1;
  font-variant-numeric: tabular-nums;
}

/* H1 on state pages: enable a touch of optical contrast tuning */
.static-page .lp-hero h1 {
  letter-spacing: -0.028em;
  word-spacing: -0.02em;
}

/* Tagline italic: subtle weight + optical color tuning */
.static-page .lp-hero-tagline {
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.28;
  margin-top: 0;
}
.static-page .lp-hero-tagline .accent {
  font-style: italic;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss02" 1;
}

/* Section heads: balanced wrap so titles don't end on orphaned single words */
.static-page .section-title {
  text-wrap: balance;
  letter-spacing: -0.026em;
}

/* Body sub: avoid widows */
.static-page .lp-hero-sub {
  hyphens: manual;
  text-wrap: pretty;
}

/* Quick Facts table: tabular nums + optical sizing for the values */
.static-page .static-quickfacts td {
  font-variation-settings: "opsz" 18;
  font-feature-settings: "kern" 1, "tnum" 1, "lnum" 1, "liga" 1;
}

/* Sources list: monospace footnotes with proper kerning */
.static-page .static-sources li {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-wrap: pretty;
}

/* TL;DR direct answer: editorial feel — slightly larger optical sizing */
.static-page .static-tldr p {
  font-variation-settings: "opsz" 28;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1, "ss01" 1;
}

/* ============================================================
   SEO/E-E-A-T blocks for state pages
   ============================================================ */

.static-byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: clamp(24px, 2.6vw, 34px) 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.static-byline-name { color: var(--ink); }
.static-byline-sep { color: var(--rule); }
.static-byline time { color: var(--ink-2); font-style: normal; }

/* Editorial byline — full-width, ruled top + bottom, NYT-style.
   Used on state SEO pages. Signals "actively maintained" via the
   "Reviewed quarterly" cadence note (E-E-A-T topicality signal). */
.editorial-byline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 28px;
  /* Pulled tighter to the H1 above (paired with the H1 margin-top of
     44px so the eyebrow→H1 gap reads bigger than H1→byline gap). */
  margin: 18px 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.editorial-byline > span { white-space: nowrap; }
.editorial-byline-label { color: var(--ink-3); }
.editorial-byline-name { color: var(--ink); font-weight: 500; }
.editorial-byline time { color: var(--ink); font-style: normal; font-weight: 500; }
/* Below ~720px the three chips can't fit one-line — let them wrap so
   they don't overflow off-screen. */
@media (max-width: 720px) {
  .editorial-byline { flex-wrap: wrap; gap: 6px 18px; padding: 14px 0; font-size: 11px; }
}

.static-tldr {
  margin-top: 28px;
  padding: 22px 26px;
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.state-info-anchor {
  scroll-margin-top: 96px;
}
.static-tldr p {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: pretty;
  margin: 0;
}
.static-tldr-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.static-quickfacts {
  margin-top: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.static-quickfacts caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 0 0 12px;
}
.static-quickfacts th,
.static-quickfacts td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.static-quickfacts tr:last-child th,
.static-quickfacts tr:last-child td { border-bottom: 0; }
.static-quickfacts th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  width: 38%;
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
}
.static-quickfacts td {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: var(--display-tracking);
}
.static-quickfacts td .qf-detail {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
}

.static-sources {
  margin-top: 56px;
  padding: 28px 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.static-sources h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.static-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.static-sources li {
  font-size: 14.5px;
  line-height: 1.5;
}
.static-sources li::before {
  content: "↗ ";
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-right: 4px;
}
.static-sources a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s var(--ease-out-smooth);
}
.static-sources a:hover { text-decoration-color: var(--accent); }
.static-sources-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

.static-cross-links {
  margin-top: 28px;
  padding: 22px 28px 26px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.static-cross-links h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.static-cross-links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.static-cross-links-grid a {
  display: block;
  padding: 14px 16px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  transition: background 0.15s var(--ease-out-smooth);
}
.static-cross-links-grid a:hover { background: var(--ink); color: var(--paper); }
.static-cross-links-grid a .ab {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.static-cross-links-grid a:hover .ab { color: var(--paper); opacity: 0.7; }
.static-cross-links-foot {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.static-cross-links-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Methodology page — tightened to the editorial reference
   ============================================================ */

.method {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 32px 64px;
}

.method .static-breadcrumb {
  margin: 28px 0 18px;
}

.method-head {
  padding: 28px 0 16px;
}

.method-h1 {
  max-width: 12.8ch;
  margin: 16px 0 26px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(54px, 6.3vw, 88px);
  letter-spacing: var(--display-tracking);
  line-height: 1.16;
  text-wrap: balance;
}

.method-dek {
  max-width: 62ch;
  margin: 0 0 18px;
  padding-top: 10px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

.method-byline {
  margin: 18px 0 22px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.method-byline time {
  color: var(--ink-2);
  font-style: normal;
}

.method-tldr {
  margin: 32px 0 0;
  padding: 22px 28px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
}

.method-beta {
  margin-top: 14px;
  border-left-color: var(--caution);
  background: var(--paper);
}

.method-tldr-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-beta .method-tldr-tag { color: var(--caution); }

.method-tldr p {
  max-width: 70ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.6;
}

.method .section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  padding: 60px 0 22px;
}

.method .section-kicker {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.method .section-title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
}

.method .section-lede {
  max-width: 52ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.method-table {
  width: 100%;
  margin-top: 0;
  border: 1px solid var(--rule);
  border-collapse: collapse;
  background: var(--paper-2);
}

.method-table caption {
  caption-side: top;
  padding: 0 0 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.method-table th,
.method-table td {
  padding: 14px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.method-table th:last-child,
.method-table td:last-child { border-right: 0; }

.method-table tbody tr:last-child td,
.method-table tbody tr:last-child th { border-bottom: 0; }

.method-table thead th {
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-table td:first-child,
.method-table th[scope="row"] {
  width: 22%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}

.method-table-2 td:first-child,
.method-table-2 th[scope="row"] {
  width: 36%;
  background: var(--paper);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-table-2 td {
  font-family: var(--font-sans);
}

.method-table .qf-detail {
  display: block;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.method-table-conf td:first-child { width: 14%; }
.method-table-conf td:nth-child(2) { width: 26%; }

.method-chip,
.conf-pill {
  display: inline-block;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.method-chip {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  vertical-align: middle;
}

.conf-pill {
  padding: 3px 9px;
}

.conf-high {
  background: var(--good-bg);
  color: var(--good);
}

.conf-med {
  background: var(--caution-bg);
  color: var(--caution);
}

.conf-low {
  background: var(--critical-bg);
  color: var(--critical);
}

.method .static-prose {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 22px 0 8px;
}

.method .static-prose .static-prose-aside {
  border-left: 2px solid var(--ink);
  padding-left: 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.method .static-prose p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.62;
}

.method .static-sources {
  margin: 56px 0 24px;
  padding: 22px 28px;
  border-radius: 0;
  background: var(--paper);
}

.method .static-sources h3,
.method .static-cross-links h3 {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.method .static-sources ul {
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: 14px;
}

.method .static-sources li {
  margin: 0;
  font-size: 13.5px;
}

.method .static-sources-note {
  margin-top: 18px;
  padding-top: 14px;
}

.method .static-cross-links {
  margin: 24px 0 56px;
  border-radius: 0;
  background: var(--paper-2);
}

.method .static-cross-links-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
}

.method .static-cross-links-grid a {
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: var(--paper);
}

.method .static-cross-links-grid a:last-child { border-right: 0; }

@media (max-width: 920px) {
  .method {
    padding: 18px 18px 48px;
  }

  .method-h1 {
    max-width: 12.8ch;
    font-size: clamp(50px, 15vw, 76px);
  }

  .method .section-head,
  .method .static-prose {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .method .section-head {
    padding-top: 46px;
  }

  .method-table th,
  .method-table td {
    display: block;
    width: auto;
    border-right: 0;
  }

  .method-table td:first-child,
  .method-table th[scope="row"],
  .method-table-2 th[scope="row"] {
    width: auto;
  }

  .method .static-sources ul,
  .method .static-cross-links-grid {
    grid-template-columns: 1fr;
  }

  .method .static-cross-links-grid a {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .method .static-cross-links-grid a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 980px) {
  .static-quickfacts th,
  .static-quickfacts td { display: block; width: auto; border-right: 0; }
  .static-cross-links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   States hub (/states) — matches handoff StatesHub reference:
   single editorial hero + 5-col 50-state grid with mono AB code,
   display state name, and a per-form caption on live cells.
   ============================================================ */

.states-hub-hero {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.states-hub-h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: var(--display-tracking);
  line-height: 1.0;
  margin: 24px 0 16px;
  text-wrap: balance;
}
[data-aesthetic="editorial"] .states-hub-h1 {
  font-size: clamp(56px, 7vw, 104px);
  letter-spacing: -0.04em;
  line-height: 0.94;
}
.states-hub-sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
}

.states-hub-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: 32px;
}
.states-hub-grid .state-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 16px;
  background: transparent;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  opacity: 0.4;
  cursor: default;
}
.states-hub-grid .state-cell .ab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.states-hub-grid .state-cell .ab em {
  color: var(--good);
  font-style: normal;
}
.states-hub-grid .state-cell .nm {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
  color: var(--ink);
}
.states-hub-grid .state-cell .form {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: auto;
  letter-spacing: 0;
}
.states-hub-grid .state-cell.is-live {
  background: var(--paper);
  cursor: pointer;
  opacity: 1;
  position: relative;
  transition: background 150ms var(--ease-out-smooth);
}
.states-hub-grid .state-cell.is-live::after {
  content: "Open guide ->";
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.states-hub-grid .state-cell.is-live:hover {
  background: var(--paper-2);
  border-color: rgba(217, 57, 36, 0.34);
}

@media (max-width: 980px) {
  .states-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .states-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .states-hub-grid .state-cell .nm { font-size: 18px; }
}

/* Live state cards (3-col grid, big editorial tiles) */
.states-live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  margin-top: 28px;
}
.state-card {
  padding: 28px 28px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out-smooth);
  min-height: 200px;
}
.state-card:hover { background: var(--paper-2); }
.state-card:nth-child(3n) { border-right: 0; }
.state-card:nth-last-child(-n+3) { border-bottom: 0; }
.state-card-ab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.state-card-live { color: var(--good); }
.state-card-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 30px;
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  margin-top: 4px;
}
.state-card-form {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 6px;
}
.state-card-go {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* Full 50-state grid (small mono pills) */
.states-grid-50 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: 28px;
}
.state-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 64px;
  background: var(--paper);
  opacity: 0.45;
}
.state-pill .ab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.state-pill .nm {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--ink-2);
  line-height: 1.15;
}
.state-pill.is-live { opacity: 1; }
.state-pill.is-live a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}
.state-pill.is-live .ab { color: var(--good); }
.state-pill.is-live .nm { color: var(--ink); }
.state-pill.is-live:hover { background: var(--ink); }
.state-pill.is-live:hover .ab,
.state-pill.is-live:hover .nm { color: var(--paper); }

/* Responsive */
@media (max-width: 980px) {
  .static-page .lp-hero { grid-template-columns: 1fr; }
  .static-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .static-stat-strip > div:nth-child(2) { border-right: 0; }
  .static-stat-strip > div:nth-child(1),
  .static-stat-strip > div:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .static-checklist td:first-child { width: auto; }
  .static-checklist td,
  .static-checklist th { display: block; border-right: 0; }
  .static-prose { grid-template-columns: 1fr; gap: 16px; }
  .static-cta-card { grid-template-columns: 1fr; }
  .states-live-grid { grid-template-columns: 1fr; }
  .state-card { border-right: 0; }
  .state-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .state-card:last-child { border-bottom: 0; }
  .states-grid-50 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .states-grid-50 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   GENERATOR — seller bill-of-sale 5-step flow
   Extends .intake-* primitives. Adds:
   - .generator-grid       2-col field grid for steps 1/2
   - .generator-parties    seller/buyer side-by-side
   - .generator-clauses    toggle list (step 4)
   - .generator-escape     "skip — download blank template" link
   - .generator-upsell     post-generate $24 review CTA
   - .bos-doc              the editorial bill-of-sale output
   - .doc-field            click-to-edit inline field
   ============================================================ */

.generator { max-width: 920px; }

.generator .intake-step { animation: cc-step-in 480ms cubic-bezier(.2,.8,.2,1) both; }

.generator-draft-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  min-height: 20px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.generator-draft-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.generator-draft-status.is-cloud::before {
  background: #2f8d48;
  box-shadow: 0 0 0 5px rgba(47, 141, 72, 0.12);
}

.generator-draft-status.is-saving::before {
  background: var(--accent);
  animation: save-chip-pulse 900ms ease-out infinite;
}

.generator-draft-status small {
  color: #8f1f1f;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.generator-saved-drafts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 6px;
  padding: 14px 16px;
  border: 1px solid rgba(22, 22, 20, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(134, 63, 255, 0.10), rgba(255,255,255,0) 46%),
    var(--paper);
}

.generator-saved-drafts span,
.generator-saved-drafts small {
  display: block;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.generator-saved-drafts strong {
  display: block;
  margin: 3px 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}

.generator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  margin: 22px 0 28px;
}
.generator-grid-full { grid-column: 1 / -1; }

.generator-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 22px 0 28px;
}
.generator-party h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.generator-clauses {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
}
.generator-clauses li {
  border-bottom: 1px solid var(--rule);
}
.generator-clauses li:last-child { border-bottom: 0; }

.generator-clause {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.generator-clause:hover { background: rgba(0,0,0,.02); }
.generator-clause input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.generator-clause span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.generator-clause strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--ink);
}
.generator-clause small {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.generator-escape {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--rule);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.generator-escape a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 140ms ease;
}
.generator-escape a:hover { color: var(--ink); text-decoration: underline; }

.generator-review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.generator-doc-fallback {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  border: 1px dashed var(--rule);
  border-radius: 8px;
}

.generator-pdf-error,
.generator-pdf-success {
  max-width: 720px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.generator-pdf-error {
  color: #8f1f1f;
  background: #fff2ef;
  border: 1px solid #efc7bd;
}

.generator-pdf-success {
  color: #285c36;
  background: #eef8f0;
  border: 1px solid #bfe1c7;
}

.generator-upsell {
  margin-top: 36px;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.04));
}
.generator-upsell strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin-bottom: 8px;
}
.generator-upsell p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
}

/* ============================================================
   BILL OF SALE DOCUMENT — editorial output rendered on Step 5
   ============================================================ */

.bos-doc {
  background: #fdfbf5;
  background-image:
    radial-gradient(rgba(120,90,40,.04) 1px, transparent 1px),
    radial-gradient(rgba(120,90,40,.03) 1px, transparent 1px);
  background-size: 18px 18px, 11px 11px;
  background-position: 0 0, 9px 9px;
  border: 1px solid rgba(120,90,40,.18);
  border-radius: 6px;
  padding: 48px 56px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.03),
    0 24px 60px -28px rgba(40,30,20,.18),
    0 6px 18px -8px rgba(40,30,20,.10);
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.65;
}

.bos-doc-head {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
}
.bos-doc-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.bos-doc-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 54px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 10px;
  font-variation-settings: "opsz" 60;
}
.bos-doc-subtitle {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.bos-doc-section {
  margin-bottom: 28px;
}
.bos-doc-section h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bos-doc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
}

.bos-doc-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.bos-doc-dl > div { display: flex; flex-direction: column; gap: 4px; }
.bos-doc-dl dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bos-doc-dl dd {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0;
}

.bos-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.bos-doc-party h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
  font-weight: 500;
}
.bos-doc-party p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
}

.bos-doc-prose {
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
  text-align: justify;
}

.bos-doc-clause-body {
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: justify;
  margin: 0;
  padding: 14px 18px;
  background: rgba(255,255,255,.5);
  border-left: 3px solid rgba(0,0,0,.18);
  border-radius: 0 4px 4px 0;
}

.bos-doc-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 16px;
}
.bos-doc-sig-line {
  border-bottom: 1.5px solid var(--ink);
  height: 36px;
  margin-bottom: 6px;
}
.bos-doc-sig-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.bos-doc-sig-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

.bos-doc-footnote {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0,0,0,.18);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
  line-height: 1.6;
}
.bos-doc-footnote strong {
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: var(--font-mono);
  margin-right: 6px;
}

/* ============================================================
   EDITABLE FIELDS — click-to-edit pattern (Step 5)
   ============================================================ */

.doc-field {
  display: inline-block;
  position: relative;
  padding: 1px 4px;
  margin: 0 1px;
  border-radius: 3px;
  cursor: text;
  transition: background-color 140ms ease, box-shadow 140ms ease;
  border-bottom: 1px dotted transparent;
}
.doc-field.is-hydrated {
  animation: bos-field-hydrate 1350ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(120ms + (var(--hydrate-index, 0) * 54ms));
  transform-origin: center;
  will-change: background-color, box-shadow, transform;
}
.doc-field:hover {
  background: rgba(255, 213, 96, 0.18);
  border-bottom-color: rgba(120, 90, 30, 0.45);
}
.doc-field:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.doc-field.is-empty {
  color: var(--ink-3);
  font-style: italic;
  background: rgba(0,0,0,.03);
  border-bottom-color: rgba(0,0,0,.20);
}
.doc-field-static { cursor: default; }
.doc-field-static:hover { background: transparent; border-bottom-color: transparent; }
.doc-field.mono { font-family: var(--font-mono); font-size: 0.94em; letter-spacing: 0.02em; }

.doc-field-editing {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: rgba(255, 248, 220, 0.9);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0 1px;
  outline: none;
  min-width: 80px;
  max-width: 100%;
}
.doc-field-editing.mono { font-family: var(--font-mono); font-size: 0.94em; }

@media (prefers-reduced-motion: reduce) {
  .doc-field.is-hydrated {
    animation: none !important;
  }
}

/* ============================================================
   GENERATOR — mobile breakpoint
   ============================================================ */

@media (max-width: 760px) {
  .generator-grid { grid-template-columns: 1fr; gap: 14px; }
  .generator-parties { grid-template-columns: 1fr; gap: 22px; }
  .generator-review-head { flex-direction: column; }
  .bos-doc { padding: 28px 22px; border-radius: 4px; }
  .bos-doc-title { font-size: 32px; }
  .bos-doc-parties { grid-template-columns: 1fr; gap: 20px; }
  .bos-doc-sig-grid { grid-template-columns: 1fr; gap: 24px; }
  .bos-doc-dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .bos-doc { padding: 22px 16px; }
  .bos-doc-section h2 { font-size: 15px; }
  .bos-doc-prose { font-size: 15px; line-height: 1.7; }
  .bos-doc-dl { grid-template-columns: 1fr; }
}

/* ============================================================
   GENERATOR — print stylesheet (Generate PDF via window.print)
   ============================================================ */

@media print {
  .topbar, .intake-progress-wrap, .intake-stepnum, .intake-title, .intake-sub,
  .generator-review-head, .intake-actions, .generator-upsell {
    display: none !important;
  }
  body, .static-page { background: #fff !important; }
  .bos-doc {
    box-shadow: none !important;
    border: 0 !important;
    background: #fff !important;
    padding: 0 !important;
    background-image: none !important;
  }
  .doc-field { border-bottom: 0 !important; background: transparent !important; }
  .bos-doc-clause-body { background: transparent !important; }
  @page { margin: 0.6in 0.7in; }
}

/* ============================================================
   FLORIDA STATE PAGE — editorial seller-primary redesign
   - .hero-callout.info  (notary block badge)
   - .btn-stack          (CTA with metadata strip below title)
   - .editorial-section  (kicker + serif h2 pair)
   - .editorial-facts    (mono-caps left labels + serif right values)
   - .editorial-include  (seller-side "what goes on a BOS" list)
   - .editorial-howto    (numbered seller flow steps)
   - .editorial-upsell   ($24 review card at bottom)
   - .editorial-sources  (Authoritative references list)
   ============================================================ */

/* Info callout (notary block — neutral / informational) */
.hero-callout.info { color: var(--ink); }
.hero-callout.info span { background: var(--ink); }

/* Generate-mode hero stage — slightly different vibe (compliance positive) */
.hero-mode-generate .hero-callout.good { color: #2c8a4d; }
.hero-mode-generate .hero-callout.good span { background: #2c8a4d; }
.hero-mode-generate .hero-paper-highlight.green::before,
.hero-mode-generate .hero-paper-highlight.green::after {
  background: rgba(44, 138, 77, 0.20);
}

/* .btn-stack — CTA with title + metadata strip in one button */
.btn-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 26px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
  text-align: center;
  border: 1px solid transparent;
  font-family: inherit;
}
.btn-stack:hover { transform: translateY(-1px); }
.btn-stack:active { transform: translateY(0); }
.btn-stack-top {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
}
.btn-stack-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 500;
}
.btn-stack.btn-primary {
  background: var(--accent, #d63a1d);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(214, 58, 29, .55);
}
.btn-stack.btn-primary:hover { box-shadow: 0 12px 28px -10px rgba(214, 58, 29, .65); }
.btn-stack.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
}
.btn-stack.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-stack.btn-ghost .btn-stack-meta { opacity: 0.55; }
.btn-stack.btn-lg { padding: 20px 32px; }

/* Editorial section header (kicker + h2 pair) */
.editorial-section-head {
  margin: 56px 0 24px;
}
.editorial-section-head .editorial-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.editorial-section-head h2,
.editorial-section-head .editorial-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 60;
}

/* Editorial facts (Quick Facts + What goes on a BOS + similar) */
.editorial-facts {
  border: 0;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}
.editorial-facts caption { display: none; }
.editorial-facts tr {
  border-top: 1px solid var(--rule);
}
.editorial-facts tr:last-child { border-bottom: 1px solid var(--rule); }
.editorial-facts th,
.editorial-facts td {
  padding: 18px 20px;
  vertical-align: top;
  text-align: left;
  font-weight: normal;
}
.editorial-facts th {
  width: 32%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
.editorial-facts td {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  font-variation-settings: "opsz" 18;
}

/* "How to make one in 60 seconds" — numbered flow steps */
.editorial-howto {
  list-style: none;
  counter-reset: howto;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.editorial-howto li {
  counter-increment: howto;
  position: relative;
  padding: 22px 22px 22px 64px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
}
.editorial-howto li::before {
  content: counter(howto);
  position: absolute;
  left: 22px;
  top: 22px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editorial-howto strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin-bottom: 8px;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.editorial-howto p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.editorial-howto-cta {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.editorial-howto-cta .cta-with-meta {
  flex: 0 1 380px;
  max-width: 380px;
  width: 100%;
}

/* $24 review upsell card */
.editorial-upsell {
  margin: 56px 0 24px;
  padding: 32px 36px;
  border: 1px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05));
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
.editorial-upsell .editorial-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.editorial-upsell h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}
.editorial-upsell ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.editorial-upsell li::before {
  content: '✓';
  color: #2c8a4d;
  font-weight: 700;
  margin-right: 8px;
}
.editorial-upsell .editorial-upsell-disclaimer {
  font-size: 12px;
  color: var(--ink-3);
  margin: 12px 0 0;
  font-style: italic;
}
.editorial-upsell-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
/* The upload-cta inside the upsell column stretches to fill the
   right-side action column. */
.editorial-upsell-action .cta-with-meta { max-width: none; flex: 0 0 auto; }
.editorial-upsell-action .cta-with-meta .upload-cta {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
}
/* Secondary action — simple text link, not a button. Matches the
   editorial mono-caps tone of the rest of the page. */
.editorial-upsell-link {
  display: inline-block;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  padding: 6px 4px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.editorial-upsell-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}

/* Editorial sources list ("Authoritative references.") */
.editorial-sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.editorial-sources-list li {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
}
.editorial-sources-list li > .editorial-sources-host {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  align-self: center;
}
.editorial-sources-list li > a,
.editorial-sources-list li > span {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease, color 140ms ease;
  align-self: center;
}
.editorial-sources-list li > a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-3);
}

/* Mobile breakpoints for the new editorial blocks */
@media (max-width: 760px) {
  .editorial-howto { grid-template-columns: 1fr; gap: 14px; }
  .editorial-upsell { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .editorial-facts th,
  .editorial-facts td { display: block; width: auto; padding: 8px 0; }
  .editorial-facts th { padding-top: 16px; padding-bottom: 4px; }
  .editorial-facts tr { padding: 4px 0 12px; }
  .editorial-sources-list li { grid-template-columns: 1fr; gap: 4px; }
  .editorial-sources-list li > .editorial-sources-host { font-size: 11px; }
}

/* Editorial pivot — section-transition aside used to signal a change of
   audience or context within a long article (e.g. seller content → buyer
   content on dual-audience state pages). Visually a bordered, indented
   block in mono kicker + serif body. Sits in the body flow, not in a
   gutter. */
.editorial-pivot {
  margin: 48px 0 32px;
  padding: 22px 28px;
  border-left: 3px solid var(--ink);
  background: rgba(0, 0, 0, 0.025);
  border-radius: 0 8px 8px 0;
}
.editorial-pivot .editorial-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.editorial-pivot p {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  font-style: italic;
  font-variation-settings: "opsz" 20;
}
@media (max-width: 600px) {
  .editorial-pivot { padding: 18px 20px; }
  .editorial-pivot p { font-size: 15px; }
}

/* ============================================================
   .upload-cta-stack + .upload-cta-ghost
   Beefs up the FL state-page hero CTAs with the same polish as
   the home page .upload-cta (scan-corners, icon, press animation,
   hover scale) while keeping the two-line title + metadata layout
   from the previous .btn-stack design. Also adds an outlined
   ghost variant for the secondary "Review my bill of sale" CTA.
   ============================================================ */

/* CTA with metadata strip below — wrapper that pairs an .upload-cta
   button with a small mono caption underneath (FREE · 60 SECONDS ·
   PDF IN BROWSER). Matches the design where the button stays the
   home-page height (66px) and the meta lives below in body type. */
.cta-with-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  flex: 0 1 430px;
  max-width: 430px;
  min-width: 0;
}
.cta-with-meta .upload-cta { width: 100%; max-width: none; flex: 1 1 auto; }
.cta-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.4;
  /* Prevent stray decoration if a parent rule cascades */
  text-decoration: none;
}

/* Make sure the .upload-cta anchor never inherits underlines or muted
   text from a parent .lp-hero / .static-page link rule. The home page
   button works because it's a <button>; the FL hero now uses an <a>
   for the primary CTA so we explicitly lock styles. */
.upload-cta,
.upload-cta:visited,
.upload-cta:hover,
.upload-cta:active {
  text-decoration: none;
}
.upload-cta .upload-cta-label,
.upload-cta .upload-cta-price {
  color: inherit;
  text-decoration: none;
}

/* Outlined ghost variant — same scan-corner + icon + animation
   recipe, but cream paper background with ink text + border. Used
   for the secondary "Already have the seller's? Review it for $24"
   CTA in the hero. */
.upload-cta.upload-cta-ghost {
  background: var(--paper);
  background-image: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 6px 14px -8px rgba(0,0,0,.18);
}
.upload-cta.upload-cta-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow:
    0 2px 0 rgba(0,0,0,.06),
    0 14px 28px -10px rgba(0,0,0,.32);
  filter: none;
  transform: translateY(-1px) scale(1.006);
}
.upload-cta.upload-cta-ghost:active {
  background: var(--ink);
  color: var(--paper);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.22),
    0 4px 10px -6px rgba(0, 0, 0, 0.18);
  filter: none;
  transform: translateY(3px) scale(0.972);
}
.upload-cta.upload-cta-ghost .upload-cta-icon {
  border-right-color: rgba(0, 0, 0, 0.14);
}
.upload-cta.upload-cta-ghost .upload-cta-icon svg {
  color: var(--ink-2);
}
.upload-cta.upload-cta-ghost:hover .upload-cta-icon svg {
  color: var(--paper);
}
.upload-cta.upload-cta-ghost .scan-corner {
  color: rgba(0, 0, 0, 0.18);
}
.upload-cta.upload-cta-ghost:hover .scan-corner {
  color: rgba(255, 234, 220, 0.32);
}
.upload-cta.upload-cta-ghost .upload-cta-icon text {
  fill: var(--ink);
}
.upload-cta.upload-cta-ghost:hover .upload-cta-icon text {
  fill: var(--paper);
}

/* Mobile: full-width CTAs, stacked vertically by .lp-hero-cta-row's
   existing breakpoint. .cta-with-meta inherits the column layout and
   sizes to the row width. */
@media (max-width: 760px) {
  .cta-with-meta { max-width: 100%; }
  .cta-meta { font-size: 10.5px; }
}

/* Hero disclaimer — quiet liability-defensive line under the CTA meta
   row. Affirms "informational paperwork, not legal advice" close to
   the CTAs so users don't form a "this is legally certified" mental
   model from the surrounding statute citations in body content. */
.hero-disclaimer {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-style: italic;
}

/* Stacked CTA layout — primary action above, "or" divider, secondary
   action below. Used on the FL state-page hero so the longer copy
   ("Already have the seller's? Review for $24") fits one line and the
   primary action gets clear visual priority. */
.lp-hero-cta-row.is-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  /* Compact — 380px just fits the [icon | "Review Bill of Sale" |
     $24] 3-col grid without label truncation. Reads as a tight
     CTA pair, not full-width banners. */
  max-width: 380px;
}
.lp-hero-cta-row.is-stacked .cta-with-meta {
  flex: 1 1 auto;
  max-width: none;
}
.lp-hero-cta-row.is-stacked .upload-cta {
  max-width: none;
}

.cta-or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cta-or-divider::before,
.cta-or-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.cta-or-divider span {
  padding: 0 4px;
  font-weight: 500;
}

/* Purple gradient variant of .upload-cta — used on the FL primary
   "Make Bill of Sale" so it visually differs from the red secondary
   "Review Bill of Sale". Same scan-corner + press animations apply. */
.upload-cta.upload-cta-purple {
  --cta-purple-1: #a855f7;
  --cta-purple-2: #9333ea;
  --cta-purple-3: #7e22ce;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 38%),
    linear-gradient(135deg, var(--cta-purple-1), var(--cta-purple-2) 58%, var(--cta-purple-3));
  border: 1px solid rgba(76, 16, 130, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -3px 0 rgba(54, 12, 92, 0.20),
    0 14px 28px rgba(112, 38, 180, 0.26);
  color: #ffffff;
}
.upload-cta.upload-cta-purple .upload-cta-label,
.upload-cta.upload-cta-purple .upload-cta-price { color: #ffffff; }
.upload-cta.upload-cta-purple:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -3px 0 rgba(54, 12, 92, 0.22),
    0 18px 34px rgba(112, 38, 180, 0.34);
  filter: saturate(1.08);
  transform: translateY(-1px) scale(1.006);
}
.upload-cta.upload-cta-purple:active {
  background:
    linear-gradient(180deg, rgba(20, 5, 30, 0.12), rgba(20, 5, 30, 0.20)),
    linear-gradient(135deg, #9333ea, #7e22ce 58%, #5b1aa6);
  box-shadow:
    inset 0 4px 12px rgba(36, 8, 70, 0.36),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 8px 18px rgba(112, 38, 180, 0.20);
  filter: saturate(1.15) brightness(0.86);
  transform: translateY(5px) scale(0.962);
}
.upload-cta.upload-cta-purple .upload-cta-icon {
  border-right-color: rgba(255,255,255,0.18);
}
.upload-cta.upload-cta-purple .upload-cta-icon svg {
  color: rgba(255, 240, 255, 0.84);
}
.upload-cta.upload-cta-purple .upload-cta-icon text {
  fill: var(--cta-purple-2);
}
.upload-cta.upload-cta-purple .upload-cta-price {
  border-left-color: rgba(255,255,255,0.22);
}
.upload-cta.upload-cta-purple .scan-corner {
  color: rgba(232, 210, 255, 0.30);
}

/* Sparkles around an .upload-cta — small twinkling orange/gold dots
   positioned around the button perimeter. Each <i> is a 4px dot with
   a soft glow + staggered twinkle animation. Pure decoration. The
   sparkles sit in a layer behind the button content (z-index: -1
   inside the button's isolated stacking context). Currently used on
   the secondary "Review Bill of Sale" red CTA to draw attention to
   the paid product without overpowering the primary free generator. */
.upload-cta:has(> .cta-sparkles) { isolation: isolate; }
.cta-sparkles {
  position: absolute;
  inset: -16px;
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}
.cta-sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff4d8;
  box-shadow:
    0 0 8px 2px rgba(255, 200, 110, 0.78),
    0 0 14px 4px rgba(255, 170, 80, 0.36);
  opacity: 0;
  transform: scale(0.4);
  animation: cta-sparkle-twinkle 2.6s ease-in-out infinite;
}
.cta-sparkles i:nth-child(1)  { top:   6%; left:   4%; width: 5px; height: 5px; animation-delay: 0.0s; }
.cta-sparkles i:nth-child(2)  { top:  -8%; left:  26%;                          animation-delay: 0.4s; }
.cta-sparkles i:nth-child(3)  { top:  12%; left:  54%; width: 3px; height: 3px; animation-delay: 0.9s; }
.cta-sparkles i:nth-child(4)  { top:  -6%; left:  78%; width: 5px; height: 5px; animation-delay: 1.4s; }
.cta-sparkles i:nth-child(5)  { top:  50%; left:  96%;                          animation-delay: 0.7s; }
.cta-sparkles i:nth-child(6)  { top:  88%; left:  88%; width: 3px; height: 3px; animation-delay: 1.8s; }
.cta-sparkles i:nth-child(7)  { top: 102%; left:  60%; width: 5px; height: 5px; animation-delay: 0.2s; }
.cta-sparkles i:nth-child(8)  { top:  94%; left:  32%;                          animation-delay: 1.1s; }
.cta-sparkles i:nth-child(9)  { top: 102%; left:   6%; width: 3px; height: 3px; animation-delay: 1.6s; }
.cta-sparkles i:nth-child(10) { top:  50%; left:  -3%;                          animation-delay: 0.5s; }
.cta-sparkles i:nth-child(11) { top:  32%; left:  38%; width: 3px; height: 3px; animation-delay: 2.0s; }
.cta-sparkles i:nth-child(12) { top:  70%; left:  70%; width: 3px; height: 3px; animation-delay: 1.3s; }
@keyframes cta-sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3); }
  35%      { opacity: 1; transform: scale(1.0); }
  60%      { opacity: 0.55; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-sparkles i { animation: none; opacity: 0.6; }
}

/* Static state-page hero entrance — staggered fade-up on the eyebrow,
   H1, byline, tagline, sub, and CTAs. Uses the existing cc-fade-up
   keyframe (opacity + 14px translateY). Each element gets a slightly
   longer animation-delay so the eye reads them in order. Honors
   prefers-reduced-motion. */
.static-page .lp-hero .lp-eyebrow,
.static-page .lp-hero h1,
.static-page .lp-hero .editorial-byline,
.static-page .lp-hero-tagline,
.static-page .lp-hero-sub,
.static-page .lp-hero-cta-row .cta-with-meta,
.static-page .lp-hero-cta-meta,
.static-page .hero-disclaimer {
  animation: cc-fade-up 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  /* `both` keeps the start state (opacity:0) before the delay fires
     so elements don't flash visible before animating in. */
}
.static-page .lp-hero .lp-eyebrow             { animation-delay: 60ms; }
.static-page .lp-hero h1                      { animation-delay: 160ms; }
.static-page .lp-hero .editorial-byline       { animation-delay: 280ms; }
.static-page .lp-hero-tagline                 { animation-delay: 380ms; }
.static-page .lp-hero-sub                     { animation-delay: 480ms; }
.static-page .lp-hero-cta-row .cta-with-meta:nth-child(1) { animation-delay: 580ms; }
.static-page .lp-hero-cta-row .cta-with-meta:nth-child(2) { animation-delay: 680ms; }
.static-page .lp-hero-cta-meta                { animation-delay: 780ms; }
.static-page .hero-disclaimer                 { animation-delay: 880ms; }

@media (prefers-reduced-motion: reduce) {
  .static-page .lp-hero .lp-eyebrow,
  .static-page .lp-hero h1,
  .static-page .lp-hero .editorial-byline,
  .static-page .lp-hero-tagline,
  .static-page .lp-hero-sub,
  .static-page .lp-hero-cta-row .cta-with-meta,
  .static-page .lp-hero-cta-meta,
  .static-page .hero-disclaimer {
    animation: none;
  }
}

/* Intermittent glimmer sweep on the primary purple "Make Bill of Sale"
   CTA — a soft white shine traverses the button every ~8s, takes about
   1.4s to complete, then pauses for the remaining 6.6s before
   repeating. Just enough motion to draw the eye occasionally without
   becoming a flashing distraction. */
.upload-cta.upload-cta-purple::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.36) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 62%,
    transparent 100%
  );
  background-size: 260% 100%;
  background-position: 260% 0;
  animation: cta-glimmer 8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
  z-index: 1;
  mix-blend-mode: screen;
}
.upload-cta.upload-cta-purple > * {
  position: relative;
  z-index: 2;
}
@keyframes cta-glimmer {
  0%   { background-position: 260% 0; }
  18%  { background-position: -160% 0; }
  100% { background-position: -160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-cta.upload-cta-purple::before { animation: none; opacity: 0; }
}