/* =========================================================
     Design tokens, modeled on the pricing page screenshot
     ========================================================= */
  :root {
    --blue-700: #1e40af;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --blue-50: #eff6ff;
    --ink-900: #0a0a0f;
    --ink-800: #18181b;
    --ink-700: #27272a;
    --ink-500: #71717a;
    --ink-400: #a1a1aa;
    --ink-300: #d4d4d8;
    --ink-200: #e4e4e7;
    --ink-100: #f4f4f5;
    --ink-50: #fafafa;
    --green-500: #10b981;
    --green-50: #ecfdf5;
    --amber-500: #f59e0b;
    --amber-50: #fffbeb;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
  }

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

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-800);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Always push the footer below the fold, only applies on single-section pages
     so multi-section pages aren't affected */
  body>section:only-of-type,
  body>main:only-of-type {
    flex: 1 0 auto;
    min-height: calc(100vh - 65px);
  }

  body>footer {
    margin-top: auto;
  }

  .serif {
    font-family: 'Source Serif 4', Georgia, serif;
  }

  em.serif {
    font-style: italic;
    font-weight: 600;
  }

  a {
    color: var(--blue-600);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  .container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 40px;
  }

  .container-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* =========================================================
     Buttons
     ========================================================= */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
  }

  .btn-primary {
    background: var(--blue-600);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
  }

  .btn-primary:hover {
    background: var(--blue-700);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }

  .btn-secondary {
    background: #fff;
    color: var(--ink-800);
    border-color: var(--ink-200);
  }

  .btn-secondary:hover {
    background: var(--ink-50);
    border-color: var(--ink-300);
    text-decoration: none;
  }

  .btn-ghost {
    background: transparent;
    color: var(--ink-700);
    padding: 8px 12px;
  }

  .btn-ghost:hover {
    color: var(--ink-900);
    background: var(--ink-100);
    text-decoration: none;
  }

  .btn-lg {
    padding: 14px 24px;
    font-size: 16px;
  }

  .btn-sm {
    padding: 8px 14px;
    font-size: 14px;
  }

  /* =========================================================
     Nav
     ========================================================= */
  .nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f172a;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    /* 1000px outer minus 40+40 padding = 920px visible content (matches body content width) */
    max-width: 1380px;
    margin: 0 auto;
  }

  .logo {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
  }

  .nav .logo img {
    height: 28px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
  }

  .footer .logo img {
    height: 24px;
    filter: brightness(0) invert(1) opacity(0.92);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-link {
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    text-decoration: none;
  }

  .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
  }

  .nav-cta {
    margin-left: 8px;
  }

  /* =========================================================
     Hero, dark gradient for max contrast against search bar
     ========================================================= */
  .hero {
    padding: 96px 0 80px;
    /* Single linear gradient, light navy at top, deep navy at bottom.
       No radial highlights (they were creating the lighter→darker→lighter zigzag). */
    background: linear-gradient(180deg, #2347a3 0%, #15214d 60%, #080d24 100%);
    text-align: center;
    position: relative;
    /* overflow visible so autocomplete dropdown can extend past the hero */
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
  }

  .hero .container {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
  }

  .hero-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--green-500);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  }

  .hero h1 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: #fff;
    max-width: 880px;
    margin: 0 auto 20px;
  }

  .hero h1 em {
    font-style: italic;
    color: #93c5fd;
    font-weight: 600;
  }

  .hero-sub {
    font-size: 19px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    max-width: 640px;
    margin: 0 auto 40px;
  }

  /* Search box, primary conversion element, intentionally large */
  /* Shell reserves layout space, fixed height matching the closed panel.
     Page below sits below this; panel grows downward as overlay when dropdown opens. */
  .search-shell {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    height: 80px;
  }

  /* Single white panel, owns the only shadow. Overlays the shell so page doesn't shift. */
  .search-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.55),
      0 12px 30px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.10);
    z-index: 11;
    transition: box-shadow 0.15s;
  }

  .search-panel:focus-within {
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.55),
      0 12px 30px rgba(0, 0, 0, 0.35),
      0 0 0 4px rgba(59, 130, 246, 0.45);
  }

  /* Search row inside the panel, no bg/shadow */
  .search-card {
    background: transparent;
    border: none;
    padding: 6px;
    display: flex;
    gap: 0;
    align-items: stretch;
  }

  .search-state {
    position: relative;
    flex: 0 0 170px;
    border-right: 1px solid var(--ink-200);
  }

  .search-state select {
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 12px 0 0 12px;
    padding: 18px 40px 18px 20px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink-800);
    font-weight: 600;
    cursor: pointer;
    outline: none;
  }

  .search-state::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-500);
    border-bottom: 2px solid var(--ink-500);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
  }

  .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 18px 22px;
    font-family: inherit;
    font-size: 19px;
    color: var(--ink-900);
    outline: none;
    font-weight: 500;
    min-width: 0;
  }

  .search-input::placeholder {
    color: var(--ink-400);
    font-weight: 400;
  }

  .search-submit {
    background: var(--blue-600);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 32px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    margin: 0;
  }

  .search-submit:hover {
    background: var(--blue-700);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  }

  .search-submit svg {
    width: 18px;
    height: 18px;
  }

  /* Autocomplete, lives INSIDE the panel, in flow. Hidden by default.
     When open, panel grows downward, single shadow envelops the whole unit. */
  .autocomplete {
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 55%, #eceef2 100%);
    border-top: 1px solid var(--ink-100);
    text-align: left;
    display: none;
  }

  .autocomplete.open {
    display: block;
  }

  .autocomplete-header {
    padding: 10px 18px;
    background: transparent;
    border-bottom: 1px solid var(--ink-100);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .autocomplete-header .count {
    color: var(--ink-700);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
  }

  .autocomplete-row {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--ink-100);
    cursor: pointer;
    transition: background 0.1s;
  }

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

  .autocomplete-row:hover,
  .autocomplete-row:focus {
    background: var(--blue-50);
    outline: none;
  }

  .autocomplete-icon {
    width: 36px;
    height: 36px;
    background: var(--ink-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-500);
    flex-shrink: 0;
  }

  .autocomplete-row:hover .autocomplete-icon {
    background: #fff;
    color: var(--blue-600);
  }

  .autocomplete-main {
    flex: 1;
    min-width: 0;
  }

  .autocomplete-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .autocomplete-meta {
    font-size: 13px;
    color: var(--ink-500);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .autocomplete-meta .dot {
    width: 3px;
    height: 3px;
    background: var(--ink-300);
    border-radius: 50%;
  }

  .autocomplete-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
  }

  .autocomplete-status.active {
    background: var(--green-50);
    color: #047857;
  }

  .autocomplete-status.active .dot {
    width: 5px;
    height: 5px;
    background: var(--green-500);
    border-radius: 50%;
  }

  .autocomplete-status.dissolved {
    background: var(--ink-100);
    color: var(--ink-500);
  }

  .autocomplete-footer {
    padding: 12px 18px;
    background: transparent;
    font-size: 13px;
    color: var(--ink-500);
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .autocomplete-footer kbd {
    display: inline-block;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 4px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--ink-700);
    margin: 0 2px;
  }

  .hero-meta {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
  }

  .hero-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .hero-meta svg {
    color: #34d399;
  }

  /* =========================================================
     Trustpilot widget, uses official brand styling
     ========================================================= */
  .trustpilot-mini {
    margin: 36px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  }

  .trustpilot-mini.on-light {
    background: #fff;
    border: 1px solid var(--ink-200);
    color: var(--ink-900);
    box-shadow: var(--shadow-sm);
  }

  .tp-label {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .tp-stars {
    display: inline-flex;
    gap: 2px;
  }

  .tp-star {
    width: 22px;
    height: 22px;
    display: block;
  }

  .tp-score {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }

  .trustpilot-mini.on-light .tp-score {
    color: var(--ink-700);
  }

  .tp-score strong {
    color: #fff;
    font-weight: 600;
  }

  .trustpilot-mini.on-light .tp-score strong {
    color: var(--ink-900);
  }

  .tp-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
  }

  .trustpilot-mini.on-light .tp-divider {
    background: var(--ink-200);
  }

  .tp-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .trustpilot-mini.on-light .tp-logo {
    color: var(--ink-900);
  }

  .tp-logo-star {
    width: 18px;
    height: 18px;
  }

  /* =========================================================
     Trust bar, stats centered + larger, sources own subtle row below
     ========================================================= */
  .trust {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--ink-100);
  }

  .trust-stats {
    display: flex;
    justify-content: center;
    gap: 64px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    text-align: center;
  }

  .trust-stat .num {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 52px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    line-height: 1;
  }

  .trust-stat .label {
    font-size: 14px;
    color: var(--ink-500);
    margin-top: 10px;
  }

  .trust-sources {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
    border-top: 1px solid var(--ink-100);
  }

  .trust-sources .label {
    font-size: 12px;
    color: var(--ink-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .source-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .source-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--ink-500);
    font-weight: 500;
  }

  .source-pill .dot {
    width: 5px;
    height: 5px;
    background: var(--blue-600);
    border-radius: 50%;
  }

  /* =========================================================
     Section header
     ========================================================= */
  .section {
    padding: 96px 0;
  }

  /* Section separators, same lightweight style as the trust bar bottom border */
  .pricing-teaser {
    border-top: 1px solid var(--ink-100);
  }

  #faq {
    border-top: 1px solid var(--ink-100);
  }

  .section-eyebrow {
    display: inline-block;
    color: var(--blue-600);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
  }

  .section-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 16px;
  }

  .section-title em {
    font-style: italic;
    color: var(--blue-600);
    font-weight: 600;
  }

  .section-sub {
    font-size: 18px;
    color: var(--ink-500);
    max-width: 600px;
    line-height: 1.55;
  }

  .section-head {
    margin-bottom: 56px;
  }

  .section-head.center {
    text-align: center;
  }

  .section-head.center .section-sub {
    margin-left: auto;
    margin-right: auto;
  }

  /* =========================================================
     Sample report
     ========================================================= */
  .sample {
    background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
  }

  .report-card {
    max-width: 1300px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  /* Section heads on the sample/breakdown also stay at 920px */
  .sample .section-head {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }

  .report-header {
    padding: 28px 32px;
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--ink-50);
  }

  .report-entity {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .report-icon {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-600);
  }

  .report-entity-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.2;
  }

  .report-entity-meta {
    font-size: 13px;
    color: var(--ink-500);
    margin-top: 2px;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
  }

  .badge-success {
    background: var(--green-50);
    color: #047857;
  }

  .badge-success .dot {
    width: 6px;
    height: 6px;
    background: var(--green-500);
    border-radius: 50%;
  }

  /* Quick-jump category pills */
  .report-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 24px 32px;
    background: #fff;
    border-bottom: 1px solid var(--ink-100);
  }

  .report-cat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    color: var(--blue-700);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
  }

  .report-cat-pill:hover {
    background: var(--blue-50);
    border-color: var(--blue-500);
    text-decoration: none;
  }

  .report-cat-pill svg {
    color: var(--blue-600);
    flex-shrink: 0;
  }

  /* Section blocks */
  .report-section {
    border-top: 1px solid var(--ink-100);
  }

  .report-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    background: var(--ink-50);
    color: var(--blue-700);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .report-section-head svg {
    color: var(--blue-600);
  }

  .report-section-body {
    padding: 4px 0;
    background: #fff;
  }

  .report-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 12px 32px;
    border-bottom: 1px solid var(--ink-100);
    gap: 24px;
  }

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

  .rrk {
    font-size: 13px;
    color: var(--ink-500);
  }

  .rrv {
    font-size: 13px;
    color: var(--ink-900);
    font-weight: 500;
    word-break: break-word;
  }

  .rrv.strong {
    color: var(--blue-700);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .rrv.link {
    color: var(--blue-600);
  }

  /* Interactive collapse rows using <details> */
  .report-collapse {
    border-bottom: 1px solid var(--ink-100);
  }

  .report-collapse:last-child {
    border-bottom: none;
  }

  .report-collapse-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    cursor: pointer;
    list-style: none;
    transition: background 0.1s;
  }

  .report-collapse-row::-webkit-details-marker {
    display: none;
  }

  .report-collapse-row:hover {
    background: var(--blue-50);
  }

  .report-collapse-body {
    background: var(--ink-50);
    border-top: 1px solid var(--ink-100);
    padding: 4px 0;
  }

  .report-collapse-body .report-row {
    padding: 10px 32px 10px 68px;
    border-bottom: 1px solid var(--ink-100);
  }

  .report-collapse-body .report-row:last-child {
    border-bottom: none;
  }

  .report-collapse.is-open .rcr-icon {
    background: var(--blue-600);
    color: #fff;
  }

  .rcr-icon {
    transition: background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1), color 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Animated slide-open for sample-report collapsible rows */
  .report-collapse-body {
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .rcr-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }

  .rcr-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .report-collapse.is-open .rcr-icon svg {
    transform: rotate(45deg);
  }

  .rcr-label {
    flex: 1;
    font-size: 14px;
    color: var(--blue-600);
    font-weight: 600;
  }

  .rcr-count {
    font-size: 13px;
    color: var(--ink-500);
  }

  .report-empty {
    padding: 16px 32px;
    font-size: 13px;
    color: var(--ink-500);
    font-style: italic;
  }

  /* Section-by-section breakdown, alternating image/text rows */
  .report-breakdown {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }

  .rb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    padding: 64px 0;
    border-top: 1px solid var(--ink-100);
  }

  .rb-row:first-child {
    border-top: none;
    padding-top: 32px;
  }

  /* Default (odd rows): text on left, visual on right hugs the right edge */
  .rb-visual {
    justify-content: flex-end;
  }

  /* Even rows: visual on left, hugs the left edge */
  .rb-row:nth-child(even) .rb-visual {
    order: -1;
    justify-content: flex-start;
  }

  .rb-text {
    max-width: 460px;
  }

  .rb-eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-600);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
  }

  /* Headline row: large number sits inline with the heading */
  .rb-headline {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
  }

  .rb-num {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, var(--blue-600) 0%, var(--blue-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--blue-600);
    flex-shrink: 0;
  }

  .rb-headline .rb-heading {
    margin-bottom: 0;
  }

  .rb-heading {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 16px;
  }

  .rb-body {
    font-size: 16px;
    color: var(--ink-500);
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .rb-list {
    list-style: none;
    padding: 0;
  }

  .rb-list li {
    padding: 8px 0 8px 24px;
    font-size: 14px;
    color: var(--ink-700);
    position: relative;
  }

  .rb-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-600);
  }

  /* Mini visual preview cards */
  .rb-visual {
    display: flex;
  }

  .rb-mini-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: 100%;
    max-width: 420px;
  }

  .rb-mini-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--ink-50);
    color: var(--blue-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--ink-100);
  }

  .rb-mini-head svg {
    color: var(--blue-600);
  }

  .rb-mini-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ink-100);
    font-size: 12px;
  }

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

  .rb-mini-row span {
    color: var(--ink-500);
  }

  .rb-mini-row strong {
    color: var(--ink-900);
    font-weight: 600;
    word-break: break-word;
  }

  .rb-mini-row strong.link {
    color: var(--blue-600);
  }

  /* Mini list item (court records, UCC, patents) */
  .rb-mini-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ink-100);
  }

  .rb-mini-item:last-child {
    border-bottom: none;
  }

  .rb-mini-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    grid-column: 1;
  }

  .rb-mini-item-meta {
    font-size: 12px;
    color: var(--ink-500);
    grid-column: 1;
    margin-top: 2px;
  }

  .rb-mini-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .rb-mini-pill.green {
    background: var(--green-50);
    color: #047857;
  }

  .rb-mini-pill.gray {
    background: var(--ink-100);
    color: var(--ink-500);
  }

  .rb-mini-pill.blue {
    background: var(--blue-50);
    color: var(--blue-700);
  }

  /* Officer mini row */
  .rb-mini-officer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ink-100);
  }

  .rb-mini-officer:last-child {
    border-bottom: none;
  }

  .rb-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .rb-mini-officer-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
  }

  .rb-mini-officer-role {
    font-size: 12px;
    color: var(--ink-500);
  }

  /* Trademark mini row */
  .rb-mini-tm {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ink-100);
  }

  .rb-mini-tm:last-child {
    border-bottom: none;
  }

  .rb-mini-tm-mark {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-900);
    background: var(--ink-50);
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.02em;
  }

  .rb-mini-tm-no {
    font-size: 12px;
    color: var(--ink-700);
    font-weight: 600;
  }

  .rb-mini-tm-meta {
    font-size: 11px;
    color: var(--ink-500);
  }

  @media (max-width: 900px) {
    .rb-row {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 48px 0;
    }

    .rb-row:nth-child(even) .rb-visual {
      order: 0;
    }

    .rb-heading {
      font-size: 26px;
    }
  }

  .report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .report-cell {
    padding: 20px 32px;
    border-bottom: 1px solid var(--ink-100);
    border-right: 1px solid var(--ink-100);
  }

  .report-cell:nth-child(even) {
    border-right: none;
  }

  .report-cell:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .cell-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .cell-value {
    font-size: 15px;
    color: var(--ink-900);
    font-weight: 500;
  }

  .report-cell.locked {
    background: var(--ink-50);
    position: relative;
  }

  .report-cell.locked .cell-value {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
  }

  .report-cell.locked .cell-label {
    color: var(--blue-600);
  }

  .lock-icon {
    width: 14px;
    height: 14px;
    color: var(--blue-600);
  }

  .report-footer {
    padding: 24px 32px;
    background: linear-gradient(180deg, var(--ink-50) 0%, #eff6ff 100%);
    border-top: 1px solid var(--ink-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .report-footer-text {
    font-size: 14px;
    color: var(--ink-700);
  }

  .report-footer-text strong {
    color: var(--ink-900);
  }

  /* =========================================================
     Use cases
     ========================================================= */
  .use-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .use-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 28px;
    transition: all 0.2s;
  }

  .use-card:hover {
    border-color: var(--blue-500);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .use-icon {
    width: 44px;
    height: 44px;
    background: var(--blue-50);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-600);
    margin-bottom: 16px;
  }

  .use-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 6px;
  }

  .use-desc {
    font-size: 14px;
    color: var(--ink-500);
    line-height: 1.55;
  }

  /* =========================================================
     How it works
     ========================================================= */
  .how {
    background:
      radial-gradient(circle at 30% 0%, rgba(37, 99, 235, 0.06), transparent 60%),
      radial-gradient(circle at 70% 100%, rgba(124, 58, 237, 0.05), transparent 60%),
      linear-gradient(180deg, #f5f8ff 0%, #eef3fc 100%);
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
  }

  .how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
  }

  .how-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 32px;
    position: relative;
  }

  .how-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--blue-600);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
    font-family: 'Source Serif 4', Georgia, serif;
  }

  .how-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 8px;
  }

  .how-desc {
    font-size: 15px;
    color: var(--ink-500);
    line-height: 1.55;
  }

  /* =========================================================
     Pricing teaser
     ========================================================= */
  .pricing-teaser {
    background: #fff;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .price-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 28px;
    position: relative;
  }

  .price-card.featured {
    border: 2px solid var(--blue-600);
    box-shadow: var(--shadow-lg);
  }

  .price-badge {
    position: absolute;
    top: -10px;
    left: 28px;
    padding: 4px 10px;
    background: var(--blue-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
  }

  .price-tier {
    font-size: 14px;
    color: var(--ink-500);
    font-weight: 500;
    margin-bottom: 4px;
  }

  .price-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 16px;
  }

  .price-amount {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1;
  }

  .price-amount .unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-500);
  }

  .price-fineprint {
    font-size: 13px;
    color: var(--ink-500);
    margin-top: 6px;
    margin-bottom: 20px;
  }

  .price-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-700);
    padding: 6px 0;
  }

  .price-feature svg {
    color: var(--green-500);
    flex-shrink: 0;
  }

  .pricing-cta {
    text-align: center;
    margin-top: 40px;
  }

  /* =========================================================
     Cross-sell
     ========================================================= */
  .cross-sell {
    background: var(--ink-50);
    padding: 56px 0;
  }

  .cross-sell-card {
    background: linear-gradient(135deg, #fff 0%, var(--blue-50) 100%);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
  }

  .cross-sell-content {
    flex: 1;
    min-width: 280px;
  }

  .cross-sell-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue-600);
    margin-bottom: 8px;
  }

  .cross-sell-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 4px;
    line-height: 1.2;
  }

  .cross-sell-desc {
    font-size: 14px;
    color: var(--ink-500);
  }

  /* =========================================================
     States
     ========================================================= */
  .states {
    background: #fff;
  }

  .state-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .state-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .state-link:hover {
    border-color: var(--blue-500);
    color: var(--blue-700);
    background: var(--blue-50);
    text-decoration: none;
  }

  /* =========================================================
     Testimonials
     ========================================================= */
  .testimonials {
    background: var(--ink-50);
  }

  .test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .test-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 28px;
  }

  .test-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
  }

  .test-stars .tp-star {
    width: 20px;
    height: 20px;
  }

  .test-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #00B67A;
    font-weight: 600;
    margin-top: 6px;
  }

  .test-quote {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-800);
    margin-bottom: 20px;
  }

  .test-author {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .test-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--blue-50);
    color: var(--blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
  }

  .test-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
  }

  .test-role {
    font-size: 13px;
    color: var(--ink-500);
  }

  /* =========================================================
     FAQ
     ========================================================= */
  .faq-list {
    max-width: 1300px;
    margin: 0 auto;
  }

  .faq-item {
    border-bottom: 1px solid var(--ink-200);
  }

  .faq-summary {
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink-900);
    transition: color 0.15s;
  }

  .faq-summary:hover {
    color: var(--blue-600);
  }

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

  .faq-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--ink-500);
  }

  .faq-item[open] .faq-toggle {
    transform: rotate(45deg);
    color: var(--blue-600);
  }

  .faq-content {
    padding: 0 0 24px;
    font-size: 15px;
    color: var(--ink-500);
    line-height: 1.6;
    max-width: 720px;
  }

  /* =========================================================
     Final CTA
     ========================================================= */
  .final-cta {
    background: linear-gradient(135deg, var(--ink-900) 0%, #1e3a8a 100%);
    color: #fff;
    text-align: center;
    padding: 96px 0;
  }

  .final-cta h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin-bottom: 16px;
    color: #fff;
  }

  .final-cta h2 em {
    font-style: italic;
    color: var(--blue-500);
    font-weight: 600;
  }

  .final-cta p {
    font-size: 19px;
    color: var(--ink-300);
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .final-cta .btn-primary {
    background: #fff;
    color: var(--ink-900);
  }

  .final-cta .btn-primary:hover {
    background: var(--ink-100);
    color: var(--ink-900);
  }

  /* =========================================================
     Footer
     ========================================================= */
  .footer {
    background: #1a202c;
    color: var(--ink-400);
    padding: 64px 0 32px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto 48px;
  }

  .footer-brand .logo {
    color: #fff;
  }

  .footer-brand .logo .accent {
    color: var(--blue-500);
  }

  .footer-brand .logo .tld {
    color: var(--ink-300);
  }

  .footer-brand p {
    margin-top: 16px;
    font-size: 14px;
    color: var(--ink-400);
    max-width: 280px;
    line-height: 1.55;
  }

  .footer-family {
    margin-top: 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--ink-300);
    max-width: 320px;
  }

  .footer-family strong {
    color: #fff;
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
  }

  .footer-col h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
  }

  .footer-col li {
    margin-bottom: 10px;
  }

  .footer-col a {
    color: var(--ink-400);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s;
  }

  .footer-col a:hover {
    color: #fff;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--ink-500);
    max-width: 1300px;
    margin: 0 auto;
  }

  /* =========================================================
     Responsive
     ========================================================= */
  @media (max-width: 900px) {
    .hero h1 {
      font-size: 44px;
    }

    .section-title {
      font-size: 32px;
    }

    .section {
      padding: 64px 0;
    }

    .hero {
      padding: 56px 0 40px;
    }

    .nav-links .nav-link:not(.nav-cta) {
      display: none;
    }

    .search-card {
      flex-direction: column;
    }

    .search-state {
      flex: 1;
    }

    .trust-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .use-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .how-grid,
    .pricing-grid,
    .test-grid {
      grid-template-columns: 1fr;
    }

    .state-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
      grid-template-columns: 1fr 1fr;
    }

    .final-cta h2 {
      font-size: 32px;
    }
  }

  /* =========================================================
     Checkout, Joe's mockup spine + hybrid preview teaser
     ========================================================= */
  .checkout {
    background: var(--ink-50);
    padding-bottom: 96px;
  }

  .checkout-topbar {
    background: #fff;
    border-bottom: 1px solid var(--ink-100);
    padding: 12px 0;
  }

  .ct-step {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    font-size: 12px;
    color: var(--ink-500);
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }

  .ct-step svg {
    color: var(--green-500);
  }

  .ct-step-text {
    color: var(--green-500);
    font-weight: 600;
  }

  .ct-step-divider {
    width: 1px;
    height: 14px;
    background: var(--ink-200);
  }

  .ct-step-pos {
    font-weight: 500;
    color: var(--ink-700);
  }

  /* Locked preview, rich sample report mosaic */
  .locked-preview {
    max-width: 1300px;
    margin: 0 auto 32px;
  }

  .lp-doc {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
  }

  .lp-doc-head {
    padding: 18px 26px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .lp-doc-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-700);
    letter-spacing: 0.02em;
  }

  .lp-doc-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--blue-700);
    background: var(--blue-50);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.06em;
  }

  .lp-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
  }

  .lp-section {
    padding: 18px 22px;
    border-right: 1px solid var(--ink-100);
    border-bottom: 1px solid var(--ink-100);
  }

  .lp-section:nth-child(even) {
    border-right: none;
  }

  .lp-section:nth-child(5),
  .lp-section:nth-child(6) {
    border-bottom: none;
  }

  .lp-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .lp-section-head svg {
    color: var(--blue-600);
    flex-shrink: 0;
  }

  .lp-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--ink-100);
  }

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

  .lp-row>span:first-child {
    color: var(--ink-500);
    flex-shrink: 0;
  }

  .lp-blur {
    color: var(--blue-600);
    font-weight: 500;
    text-align: right;
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    flex: 1;
  }

  .lp-strong {
    color: var(--ink-900);
    font-weight: 600;
    text-align: right;
    flex: 1;
  }

  /* In multi-mode, hide the single-entity-specific rows */
  .lp-doc-grid.is-multi [data-single] {
    display: none;
  }

  .lp-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.96) 75%,
        rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lp-lock {
    margin-top: 80px;
    text-align: center;
    color: var(--blue-600);
  }

  .lp-lock svg {
    color: var(--blue-600);
    filter: drop-shadow(0 6px 16px rgba(37, 99, 235, 0.25));
  }

  .lp-lock-msg {
    margin-top: 12px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
  }

  .lp-lock-sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-500);
  }

  /* Title block — matches the content width (same as the 2-col layout
     below) so a long "Get the full report on [Entity]" headline can sit
     on one line whenever it fits, instead of wrapping at the old 720px. */
  .checkout-title-block {
    text-align: center;
    margin: 0 auto 44px;
    max-width: 1300px;
  }

  .checkout-h1 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 12px;
  }

  .checkout-h1 em {
    font-style: italic;
    color: var(--blue-600);
    font-weight: 600;
  }

  .checkout-sub {
    font-size: 15px;
    color: var(--ink-500);
    line-height: 1.55;
  }

  /* 3-plan row (single mode); 2-column when multi-mode is active */
  .plan-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 1300px;
    margin: 0 auto 20px;
  }

  .plan-row.is-multi {
    grid-template-columns: 1fr 1fr;
  }

  .plan-card {
    display: block;
    background: #fff;
    border: 2px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 24px 22px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    box-shadow: var(--shadow-sm);
  }

  .plan-card:hover {
    border-color: var(--blue-500);
  }

  .plan-card input[type="radio"] {
    position: absolute;
    top: 22px;
    right: 22px;
    accent-color: var(--blue-600);
    width: 18px;
    height: 18px;
  }

  /* Blue ring shows ONLY around the currently-selected plan (regardless of which plan
     is the "featured" / Most Popular). When the user picks 1 Report or 3 Reports,
     the trial card drops back to the default grey border. */
  .plan-card:has(input:checked) {
    border-color: var(--blue-600);
    background: linear-gradient(180deg, #eff6ff 0%, #fff 60%);
  }

  .plan-body {
    padding-right: 32px;
  }

  .plan-badge {
    display: inline-block;
    background: var(--blue-600);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
  }

  .plan-tag {
    display: inline-block;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
    background: var(--ink-100);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  .plan-tag.accent {
    color: #92400e;
    background: #fef3c7;
  }

  .plan-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 2px;
  }

  .plan-tagline {
    font-size: 13px;
    color: var(--ink-500);
    margin-bottom: 12px;
  }

  .plan-price {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1;
  }

  .plan-price .plan-unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-500);
  }

  .plan-fineprint {
    font-size: 12px;
    color: var(--ink-500);
    margin: 6px 0 14px;
  }

  .plan-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    border-top: 1px solid var(--ink-100);
    padding-top: 14px;
  }

  .plan-features li {
    font-size: 13px;
    color: var(--ink-700);
    padding: 5px 0 5px 22px;
    position: relative;
  }

  .plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-500);
    font-weight: 700;
  }

  /* Disclosure + agree + CTA — disclosure-box lives INSIDE the payment
     section now, so it ditches its own border and just sits as inline
     trial copy above the CTA. */
  .disclosure-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0 12px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-700);
    line-height: 1.6;
  }

  .disclosure-box strong {
    color: var(--ink-900);
    font-weight: 600;
  }

  .disclosure-box a {
    color: var(--blue-600);
  }

  .agree-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    font-size: 14px;
    color: var(--ink-700);
    cursor: pointer;
    max-width: 1300px;
    margin: 0 auto 12px;
  }

  .agree-box input[type="checkbox"] {
    accent-color: var(--blue-600);
    width: 18px;
    height: 18px;
  }

  .agree-box.error {
    border-color: #dc2626;
    background: #fef2f2;
  }

  .cta-pay {
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ink-400);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 auto;
    font-family: inherit;
  }

  .cta-pay.ready {
    background: var(--blue-600);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  }

  .cta-pay.ready:hover {
    background: var(--blue-700);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
  }

  .upgrade-hint {
    text-align: center;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--ink-500);
  }

  .upgrade-hint a {
    color: var(--blue-600);
    font-weight: 500;
  }

  /* Trust badges — full-width row at the bottom of the page */
  .checkout-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
  }

  .cb {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .cb svg {
    color: var(--blue-600);
  }

  .cb strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
  }

  .cb span {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 2px;
  }

  /* What's in your report */
  .wir {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 28px 32px;
    max-width: 1300px;
    margin: 0 auto 24px;
  }

  .wir-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
  }

  .wir-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0;
  }

  .wir-sample {
    font-size: 13px;
    color: var(--blue-600);
    background: var(--blue-50);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 500;
  }

  .wir-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 0;
    border-top: 1px solid var(--ink-100);
  }

  .wir-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ink-100);
  }

  .wir-item-text {
    flex: 1;
    min-width: 0;
  }

  /* Hide bottom border on the last row of items */
  .wir-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .wir-icon {
    width: 32px;
    height: 32px;
    background: var(--blue-50);
    color: var(--blue-600);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .wir-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 2px;
  }

  .wir-desc {
    font-size: 12px;
    color: var(--ink-500);
    line-height: 1.5;
  }

  @media (max-width: 900px) {
    .plan-row {
      grid-template-columns: 1fr;
    }

    .checkout-badges {
      grid-template-columns: 1fr;
    }

    .wir-grid {
      grid-template-columns: 1fr;
    }

    .pt-grid {
      grid-template-columns: 1fr;
    }

    .checkout-h1 {
      font-size: 28px;
    }

    .selected-entity {
      flex-wrap: wrap;
    }
  }

  /* Above-the-fold 2-column layout. LEFT column = sample-report preview
   (vertical, sticky). RIGHT column = order summary + plan + payment +
   CTA. Width matched to the nav-inner so content aligns with the logo
   on the left and the nav buttons on the right. */
  .checkout-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "preview form";
    gap: 36px;
    max-width: 1300px;
    margin: 0 auto 32px;
    /* align-items: start — each column sized to its own natural content.
       JS sets the sample-report's explicit height to match the form
       column's offsetHeight (see bottom of this file). */
    align-items: start;
  }

  .checkout-col-left {
    grid-area: form;
    min-width: 0;
  }

  .checkout-col-right {
    grid-area: preview;
    min-width: 0;
  }

  .order-summary-wrap {
    display: block;
  }

  .order-summary-wrap>.sample-report {
    /* height controlled by JS; overflow clips anything past the bottom */
    overflow: hidden;
  }

  @media (max-width: 880px) {
    .checkout-2col {
      grid-template-columns: 1fr;
      grid-template-areas: "preview" "form";
      gap: 24px;
    }
  }

  /* Inside the 2-col layout, override max-widths so children fill their column */
  .checkout-2col .locked-preview,
  .checkout-2col .checkout-title-block,
  .checkout-2col .plan-row,
  .checkout-2col .disclosure-box,
  .checkout-2col .agree-box,
  .checkout-2col .payment-section,
  .checkout-2col .cancel-tag,
  .checkout-2col .cta-pay,
  .checkout-2col .upgrade-hint {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .checkout-2col .checkout-title-block {
    text-align: left;
    margin-top: 22px;
    margin-bottom: 22px;
    padding: 0;
  }

  .checkout-2col .checkout-h1 {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .checkout-2col .checkout-sub {
    font-size: 14px;
    line-height: 1.45;
  }

  .checkout-2col .plan-card {
    padding: 16px 18px;
  }

  .checkout-2col .plan-features li {
    padding: 4px 0 4px 22px;
  }

  .checkout-2col .locked-preview {
    margin-bottom: 0;
  }

  .checkout-2col .cancel-tag {
    margin: 0 auto 10px;
  }

  .checkout-2col .upgrade-hint {
    margin: 16px 0 0;
  }

  /* Sample report — styled like a real PDF / official records document.
     Header band, metadata strip, quick-facts stats, detailed sections
     with mixed visible/blurred content, soft unlock fade at the bottom. */
  .sample-report {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  /* Header band (logo on left, entity on right, neutral divider) */
  .sr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(to right, #f8fafc, #fff);
    border-bottom: 1px solid var(--ink-200);
  }

  .sr-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .sr-brand-logo {
    height: 18px;
    width: auto;
    display: block;
    filter: brightness(0);
    /* force pure black for the print/PDF feel */
  }

  .sr-entity-wrap {
    text-align: right;
    max-width: 55%;
  }

  .sr-entity-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 2px;
  }

  .sr-entity {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    word-break: break-word;
  }

  /* Metadata strip below header */
  .sr-meta {
    display: flex;
    gap: 20px;
    padding: 10px 22px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-100);
    font-size: 11px;
    flex-wrap: wrap;
  }

  .sr-meta-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .sr-meta-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .sr-meta-value {
    font-weight: 600;
    color: var(--ink-800);
    font-variant-numeric: tabular-nums;
  }

  .sr-meta-status {
    color: #047857;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .sr-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-500);
    display: inline-block;
  }

  /* Quick-facts stat strip */
  .sr-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--ink-100);
  }

  .sr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    background: var(--blue-50);
    border-radius: 6px;
  }

  .sr-stat strong {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-700);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .sr-stat span {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
  }

  /* Sections rendered as individual sub-cards inside the report wrapper,
     laid out as a 2-column masonry (CSS columns) so each card stacks
     tightly under the previous one in its column — matches EntityCheck's
     staggered preview where each column flows independently of the other. */
  .sr-sections-grid {
    column-count: 2;
    column-gap: 10px;
    column-fill: balance;
    padding: 12px;
  }

  .sr-sections-grid>.sr-section,
  .sr-sections-grid>.sr-section-fade {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 10px;
    padding: 10px 12px 2px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
  }

  /* Mini fade at the bottom of each section card — sits directly over
     the last visible rows so the blurred data appears to fade out into
     "more below". */
  .sr-sections-grid>.sr-section::after,
  .sr-sections-grid>.sr-section-fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.50) 40%,
        rgba(255, 255, 255, 0.90) 75%,
        #fff 100%);
    pointer-events: none;
    border-radius: 0 0 8px 8px;
  }

  /* Also drop the last row's divider so it blends into the gradient */
  .sr-sections-grid .sr-row:last-child {
    border-bottom: none;
  }

  .sr-sections-grid .sr-person:last-child {
    border-bottom: none;
  }

  .sr-section {}

  .sr-section-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--ink-200);
  }

  .sr-section-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sr-section-icon svg {
    width: 13px;
    height: 13px;
  }

  .sr-section-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: 0.005em;
    flex: 1;
  }

  .sr-section-count {
    font-size: 11px;
    color: var(--ink-500);
    font-weight: 500;
  }

  .sr-rows {
    display: flex;
    flex-direction: column;
  }

  .sr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    gap: 8px;
    font-size: 10.5px;
    border-bottom: 1px solid var(--ink-100);
  }

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

  .sr-k {
    color: var(--ink-700);
    font-weight: 500;
    flex-shrink: 0;
  }

  /* People row variant — avatar + 2 lines */
  .sr-people {
    display: flex;
    flex-direction: column;
  }

  .sr-person {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ink-100);
  }

  .sr-person:last-child {
    border-bottom: none;
  }

  .sr-person:first-child {
    padding-top: 2px;
  }

  /* Blurred portrait silhouette — looks like a small, locked photo */
  .sr-avatar {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e6ecf3, #d4dce5);
    filter: blur(2.2px);
    -webkit-filter: blur(2.2px);
  }

  .sr-avatar::before {
    /* head */
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #94a3b8;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
  }

  .sr-avatar::after {
    /* shoulders / bust */
    content: '';
    position: absolute;
    width: 24px;
    height: 18px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #94a3b8;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Subtle per-person hue variation so it doesn't look like 3 identical clones */
  .sr-person:nth-child(2) .sr-avatar {
    background: linear-gradient(135deg, #f1e9e2, #e2d8cd);
  }

  .sr-person:nth-child(2) .sr-avatar::before,
  .sr-person:nth-child(2) .sr-avatar::after {
    background: #a1907d;
  }

  .sr-person:nth-child(3) .sr-avatar {
    background: linear-gradient(135deg, #e6ecf3, #cdd6e0);
  }

  .sr-person:nth-child(3) .sr-avatar::before,
  .sr-person:nth-child(3) .sr-avatar::after {
    background: #7b8aa0;
  }

  .sr-person-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }

  /* Blurred real text — looks like data is there but locked */
  .sample-blur {
    display: inline-block;
    color: var(--ink-900);
    font-weight: 500;
    filter: blur(4.5px);
    -webkit-filter: blur(4.5px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
  }

  /* In key/value rows the blurred value sits on the right */
  .sr-row .sample-blur {
    text-align: right;
  }

  /* In the people section the blurred lines sit on the left */
  .sr-person-lines .sample-blur {
    text-align: left;
    font-size: 10.5px;
    line-height: 1.2;
  }

  .sr-person-lines .sample-blur+.sample-blur {
    font-size: 9.5px;
    font-weight: 400;
    color: var(--ink-600);
  }

  .sr-person-lines {
    gap: 2px;
  }

  .sample-blur {
    filter: blur(3.5px);
    -webkit-filter: blur(3.5px);
  }

  /* Last section fades — implies more content below */
  /* The bottom-most section gets a slight opacity reduction so the
     unlock-fade gradient blends naturally as it passes over it. */
  .sr-section-fade {
    opacity: 0.7;
  }

  /* Bottom unlock gradient — absolutely positioned over the lower
     portion of the report, covering the last ~2 sections. Aggressive
     linear gradient ramps from transparent at the top to solid white at
     the bottom. The pill is anchored well above the bottom edge. */
  .sample-report {
    position: relative;
  }

  .sr-unlock-fade {
    /* Gradient only — pill is positioned separately. Fade scales with
       card height so the bottom always softly disappears into white. */
    position: absolute;
    left: 0;
    right: 0;
    top: 62%;
    bottom: 0;
    min-height: 280px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.20) 20%,
        rgba(255, 255, 255, 0.50) 45%,
        rgba(255, 255, 255, 0.80) 70%,
        rgba(255, 255, 255, 0.96) 88%,
        #fff 100%);
    pointer-events: none;
    z-index: 2;
  }

  .sr-unlock-pill {
    /* Anchored to a FIXED top offset from the sample-report card so
       it doesn't move when the card's overall height changes (i.e.
       when the user toggles plans and the form column resizes). */
    position: absolute;
    top: 540px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 28px 16px;
    background: rgba(51, 65, 85, 0.48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18), 0 3px 8px rgba(15, 23, 42, 0.08);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    pointer-events: auto;
    text-align: center;
    letter-spacing: 0.005em;
    white-space: nowrap;
  }

  .sr-unlock-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 2px;
  }

  .sr-unlock-pill svg {
    color: #fff;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    opacity: 0.95;
  }

  /* Legacy entity-preview overrides (kept for backward compat) */
  .checkout-2col .entity-preview {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 22px 24px 24px;
  }

  /* Top section: hide the standalone icon (felt like a placeholder), keep
     entity name + status as a tight header. */
  .checkout-col-right .ep-icon {
    display: none;
  }

  .checkout-col-right .ep-top {
    display: block;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 16px;
  }

  .checkout-col-right .ep-info {
    width: 100%;
    margin-bottom: 8px;
  }

  .checkout-col-right .ep-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }

  .checkout-col-right .ep-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-900);
  }

  /* Status pill + meta on a single line, comma-style */
  .checkout-col-right .ep-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .checkout-col-right .ep-active {
    font-size: 11px;
    padding: 2px 8px;
  }

  .checkout-col-right .ep-meta {
    color: var(--ink-500);
    font-size: 13px;
  }

  /* Stats: tight rows, label left, number right. Replaces horizontal stat
     strip with a clean vertical record list. */
  .checkout-col-right .ep-bottom {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 16px;
  }

  .checkout-col-right .ep-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 13px;
  }

  .checkout-col-right .ep-stats>span:not(.ep-divider) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    color: var(--ink-700);
  }

  .checkout-col-right .ep-stats>span:not(.ep-divider) strong {
    color: var(--ink-900);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
  }

  .checkout-col-right .ep-divider {
    display: none;
  }

  /* Preview rows: section eyebrow + rows that DON'T wrap to multiple lines */
  .checkout-col-right .ep-preview {
    padding: 0;
    position: relative;
  }

  .checkout-col-right .ep-preview::before {
    content: 'REPORT PREVIEW';
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }

  .checkout-col-right .ep-preview-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ink-100);
    font-size: 12.5px;
  }

  .checkout-col-right .ep-preview-row:last-child {
    border-bottom: none;
  }

  .checkout-col-right .ep-preview-label {
    flex: 0 0 140px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .checkout-col-right .ep-preview-value {
    flex: 1;
    min-width: 0;
    color: var(--ink-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Officers row needs to stay inline at narrow widths */
  .checkout-col-right .ep-preview-value.ep-people {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden;
  }

  .checkout-col-right .ep-preview-value.ep-people .rf-more {
    color: var(--ink-400);
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Unlock overlay anchored at the bottom of the preview area. Overrides
     the original's translateX(-50%) which was causing it to bleed off the
     left edge of the narrow column. */
  .checkout-col-right .ep-preview-overlay {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap;
  }

  .checkout-col-right .ep-preview-overlay svg {
    color: var(--blue-600);
    flex-shrink: 0;
  }

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

    .checkout-2col .checkout-h1 {
      font-size: 28px;
    }
  }

  /* Combined entity + preview teaser card */
  .checkout-title-block {
    margin-top: 32px;
  }

  .entity-preview {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: 0 auto 24px;
    max-width: 1300px;
    overflow: hidden;
  }

  .ep-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--ink-100);
  }

  .ep-icon {
    width: 44px;
    height: 44px;
    background: var(--blue-50);
    color: var(--blue-600);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ep-info {
    flex: 1;
    min-width: 0;
  }

  .ep-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  .ep-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.1;
  }

  .ep-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .ep-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--green-50);
    color: #047857;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
  }

  .ep-active .dot {
    width: 5px;
    height: 5px;
    background: var(--green-500);
    border-radius: 50%;
  }

  .ep-meta {
    font-size: 13px;
    color: var(--ink-500);
  }

  .ep-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    background: var(--ink-50);
  }

  .ep-stats {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-700);
    flex-wrap: wrap;
  }

  .ep-stats strong {
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--blue-700);
    font-weight: 700;
    margin-right: 4px;
  }

  .ep-divider {
    width: 1px;
    height: 12px;
    background: var(--ink-200);
  }

  .ep-lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-700);
    flex-shrink: 0;
  }

  .ep-lock svg {
    color: var(--blue-600);
  }

  /* Multi-report mode: hide entity-specific ornamentation, keep only generic placeholders */
  .entity-preview.is-multi .ep-icon {
    display: none;
  }

  .entity-preview.is-multi .ep-eyebrow {
    display: none;
  }

  .entity-preview.is-multi .ep-active {
    display: none;
  }

  .entity-preview.is-multi .ep-bottom {
    display: none;
  }

  .entity-preview.is-multi .ep-preview-row.visible-row {
    display: none;
  }

  .entity-preview.is-multi .ep-name {
    font-size: 22px;
  }

  .entity-preview.is-multi .ep-top {
    padding-left: 22px;
  }

  .entity-preview.is-multi .ep-meta {
    font-style: italic;
    color: var(--ink-500);
  }

  .entity-preview.is-multi .ep-preview {
    border-top: none;
    padding-top: 0;
  }

  /* Preview area, visible-but-redacted on top, fade-to-more on bottom */
  .ep-preview {
    position: relative;
    padding: 16px 22px 0;
    border-top: 1px dashed var(--ink-200);
  }

  .ep-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--ink-100);
  }

  .ep-preview-row:last-of-type {
    border-bottom: none;
  }

  .ep-preview-label {
    flex: 0 0 140px;
    color: var(--ink-500);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
  }

  .ep-preview-value {
    flex: 1;
    color: var(--ink-900);
    font-weight: 500;
    line-height: 1.5;
    min-width: 0;
  }

  .ep-people {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ep-people>span {
    display: block;
    line-height: 1.4;
  }

  .ep-people .rf-more {
    display: block;
    font-size: 11px;
    color: var(--ink-500);
    font-style: italic;
    font-weight: 400;
    margin-top: 2px;
  }

  /* Fade-out section, suggests "more below" */
  .ep-preview-fade {
    position: relative;
    margin: 0 -22px;
    padding: 0 22px 60px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.08) 78%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 12%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.08) 78%, transparent 95%);
  }

  .ep-preview-fade .ep-preview-row {
    padding: 9px 0;
  }

  .ep-preview-fade .ep-preview-row:last-child {
    border-bottom: 1px solid var(--ink-100);
  }

  /* Inline redaction blocks (same dev-tools-proof style as search results) */
  .ini-blur {
    display: inline-block;
    background: #94a3b8;
    border-radius: 2px;
    height: 0.85em;
    margin: 0 1.5px;
    vertical-align: -1px;
    user-select: none;
    pointer-events: none;
  }

  .ep-preview-label {
    flex: 0 0 140px;
    color: var(--ink-500);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ep-preview-value {
    flex: 1;
    color: var(--ink-900);
    font-weight: 500;
  }

  .ep-preview-value.blur {
    filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
  }

  .ep-preview-overlay {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ink-200);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap;
    z-index: 2;
  }

  .ep-preview-overlay svg {
    color: var(--blue-600);
  }

  /* Payment method, radio cards with branded buttons */
  .payment-section {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 22px 24px 24px;
    max-width: 1300px;
    margin: 0 auto 4px;
  }

  .payment-head {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 14px;
  }

  .pay-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pay-options[hidden] {
    display: none !important;
  }

  .pay-option[hidden] {
    display: none !important;
  }

  .pay-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    height: 64px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
  }

  .pay-option:hover {
    border-color: var(--blue-300);
  }

  .pay-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ink-300);
    border-radius: 50%;
    background: #fff;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
  }

  .pay-option input[type="radio"]:checked {
    border-color: var(--blue-600);
    border-width: 5px;
  }

  .pay-option-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
  }

  .pay-option-label svg.pm-icon {
    color: var(--blue-600);
    flex-shrink: 0;
  }

  .pay-option:has(input:checked) {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
  }

  /* Brand-style icons on the right of each radio row */
  .pay-icon-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 56px;
    height: 28px;
    flex-shrink: 0;
  }

  .pay-icon-right svg {
    display: block;
  }

  .pay-icon-right.card-icon {
    color: #4b5563;
  }

  .pay-icon-right.apple-icon {
    color: #1f2937;
  }

  .pay-pill .gpay-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
  }

  .pay-pill .gpay-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #e8eaed;
    font-weight: 500;
    font-size: 13px;
  }

  .card-form {
    display: none;
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--ink-50);
    border-radius: var(--radius-sm);
  }

  .card-form.show {
    display: block;
  }

  .cf-row {
    margin-bottom: 12px;
  }

  .cf-row:last-child {
    margin-bottom: 0;
  }

  .cf-row-3 {
    display: grid;
    grid-template-columns: 1.2fr 0.85fr 1.1fr;
    gap: 10px;
  }

  .cf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .cf-field input {
    width: 100%;
    min-width: 0;
  }

  .cf-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .cf-field input {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink-900);
    outline: none;
    transition: border-color 0.15s;
  }

  .cf-field input:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .cf-input-wrap {
    position: relative;
    display: block;
  }

  .cf-input-wrap input {
    width: 100%;
    padding-right: 56px;
  }

  .cf-brand {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    pointer-events: none;
    transition: opacity 0.15s;
    opacity: 0;
  }

  .cf-brand.show {
    opacity: 1;
  }

  .cf-brand svg {
    display: block;
    height: 22px;
    width: auto;
  }

  /* Native pay buttons (siblings of CTA, sit just below the agree-box) */
  .native-pay {
    display: none;
    max-width: 1300px;
    margin: 0 auto 24px;
  }

  .native-pay.show {
    display: block;
  }

  .native-pay-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--radius-md);
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-size: 19px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 0;
    transition: opacity 0.15s;
  }

  .native-pay-btn:hover {
    opacity: 0.9;
  }

  .native-pay-btn.apple {
    gap: 6px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
  }

  .native-pay-btn.apple>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .native-pay-btn.apple .apple-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 22px;
  }

  .native-pay-btn.apple .apple-glyph svg {
    width: 22px;
    height: 26px;
    display: block;
  }

  .native-pay-btn.google {
    background: #000;
    color: #fff;
    gap: 14px;
    padding: 0 20px;
  }

  .native-pay-btn.google .gpay-logo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Roboto', 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #fff;
  }

  .native-pay-btn.google .gpay-logo .g-icon {
    width: 22px;
    height: 22px;
    display: block;
  }

  .native-pay-btn.google .gpay-sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
  }

  .native-pay-btn.google .gpay-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e8eaed;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .native-pay-btn.google .gpay-card-thumb {
    width: 28px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 50%, #44403c 100%);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  .native-pay-btn.google .gpay-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
  }

  @media (max-width: 600px) {
    .cf-row-3 {
      grid-template-columns: 1fr 1fr;
    }

    .cf-row-3 .cf-field:nth-child(3) {
      grid-column: span 2;
    }

    .ep-top {
      flex-wrap: wrap;
    }

    .ep-bottom {
      flex-wrap: wrap;
    }
  }

  /* =========================================================
     Mobile responsive (≤ 640px), phones
     ========================================================= */
  @media (max-width: 640px) {
    .container {
      padding: 0 16px;
    }

    /* Nav */
    .nav-inner {
      padding: 12px 16px;
    }

    .nav .logo img {
      height: 26px;
    }

    .nav .btn-sm {
      padding: 8px 12px;
      font-size: 13px;
    }

    /* Checkout topbar */
    .checkout-topbar {
      padding: 10px 0;
    }

    .ct-step {
      font-size: 12px;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .ct-step-pos {
      font-size: 12px;
    }

    /* Title block */
    .checkout-title-block {
      padding: 20px 0 12px;
    }

    .checkout-h1 {
      font-size: 24px;
      line-height: 1.2;
    }

    .checkout-sub {
      font-size: 14px;
    }

    /* Entity preview */
    .entity-preview {
      padding: 16px;
      border-radius: var(--radius-md);
    }

    .ep-top {
      gap: 12px;
      flex-direction: column;
      align-items: flex-start;
    }

    .ep-icon {
      width: 40px;
      height: 40px;
    }

    .ep-icon svg {
      width: 20px;
      height: 20px;
    }

    .ep-name {
      font-size: 18px;
    }

    .ep-status {
      align-items: flex-start;
    }

    .ep-bottom {
      padding-top: 14px;
    }

    .ep-stats {
      gap: 10px;
      font-size: 12px;
      flex-wrap: wrap;
    }

    .ep-divider {
      display: none;
    }

    /* Plan row stacks vertically */
    .plan-row {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .plan-card {
      padding: 16px;
    }

    .plan-name {
      font-size: 15px;
    }

    .plan-price {
      font-size: 22px;
    }

    /* Payment section */
    .payment-section {
      padding: 18px 16px;
      border-radius: var(--radius-md);
    }

    .payment-section h3 {
      font-size: 16px;
    }

    /* Payment method radios */
    .pm-options {
      gap: 8px;
    }

    .pm-option {
      padding: 14px;
    }

    .pm-label {
      font-size: 14px;
    }

    .pm-sublabel {
      font-size: 12px;
    }

    /* Card form rows */
    .cf-row-2,
    .cf-row-3 {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .cf-row-3 .cf-field:nth-child(3) {
      grid-column: auto;
    }

    .cf-input {
      font-size: 16px;
      padding: 12px;
    }

    /* prevent iOS zoom */
    .cf-label {
      font-size: 12px;
    }

    /* Native pay button */
    .native-pay-btn {
      padding: 14px;
      font-size: 14px;
    }

    .gpay-card-thumb {
      width: 40px;
      height: 26px;
    }

    /* Submit button */
    .checkout-submit {
      padding: 14px;
      font-size: 15px;
    }

    /* Order summary */
    .order-summary {
      padding: 16px;
    }

    .summary-row {
      font-size: 13px;
    }

    .summary-total {
      font-size: 18px;
    }

    /* Trust signals */
    .trust-row {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .trust-item {
      font-size: 11px;
    }

    /* Disclosure */
    .agree-disclosure {
      font-size: 11px;
      padding: 12px;
    }

    /* Footer */
    .footer {
      padding: 32px 0 18px;
    }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }

    .footer-bottom {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      font-size: 12px;
    }
  }

  /* Small phones (≤ 380px) */
  @media (max-width: 380px) {
    .checkout-h1 {
      font-size: 20px;
    }

    .ep-stats {
      gap: 6px;
      font-size: 11px;
    }

    .trust-row {
      grid-template-columns: 1fr;
    }
  }

  /* Finalizing-purchase overlay, covers the page after the user clicks
     the pay CTA so the redirect doesn't feel instant/jarring */
  .pay-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }

  .pay-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .pay-overlay-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--ink-200, #e4e4e7);
    border-top-color: var(--blue-600, #2563eb);
    border-radius: 50%;
    animation: pay-spin 0.7s linear infinite;
  }

  .pay-overlay-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-900, #0a0a0f);
    letter-spacing: -0.01em;
  }

  .pay-overlay-sub {
    font-size: 13px;
    color: var(--ink-500, #71717a);
    margin-top: -10px;
  }

  @keyframes pay-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* =========================================================
   NEW: Stripe Checkout 3-state UI
   ========================================================= */

  /* ── Purchase tabs (Credits / Subscribe) ───────────────────────────────────── */
  .co-tabs {
    display: flex;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
  }

  .co-tab {
    flex: 1;
    padding: 11px 16px;
    background: #fff;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    transition: all 0.15s;
  }

  .co-tab:not(:last-child) {
    border-right: 1px solid var(--ink-200);
  }

  .co-tab.active {
    background: var(--blue-600);
    color: #fff;
  }

  .co-tab:not(.active):hover {
    background: var(--ink-50);
    color: var(--ink-800);
  }

  /* ── Pricing slider box (BESPricingSlider output) ──────────────────────────── */
  .bes-slider-box {
    /* border: 1px solid var(--ink-200);*/
    /* border-radius: var(--radius-md);*/
    /* padding: 20px;*/
    /* background: #fff;*/
  }

  .bes-qty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .bes-qty-label {
    font-size: 14px;
    color: var(--ink-500);
    font-weight: 500;
  }

  .bes-qty-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
  }

  .bes-qty-num {
    color: var(--blue-600);
  }

  /* Range slider track */
  .bes-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--blue-600) var(--fill, 0%), var(--ink-200) var(--fill, 0%));
    outline: none;
    cursor: pointer;
    margin-bottom: 8px;
  }

  .bes-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    cursor: pointer;
  }

  .bes-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue-600);
    border: none;
    cursor: pointer;
  }

  .bes-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-400);
    margin-bottom: 12px;
  }

  .bes-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .bes-preset {
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-700);
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
  }

  .bes-preset.active,
  .bes-preset:hover {
    background: var(--blue-600);
    color: #fff;
    border-color: var(--blue-600);
  }

  .bes-total-box {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bes-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }

  .bes-k {
    color: var(--ink-500);
  }

  .bes-v {
    font-weight: 600;
    color: var(--ink-900);
  }

  .bes-save {
    color: #059669;
  }

  .bes-total-big {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--ink-200);
  }

  .bes-total-big .bes-k {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-800);
  }

  .bes-total-big .bes-v {
    font-size: 22px;
    color: var(--blue-700);
  }

  .bes-expiry {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-400);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .bes-subsave {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 13px;
    color: #065f46;
  }

  .bes-subsave-lead {
    font-weight: 600;
  }

  .bes-subsave-amt {
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
  }

  /* ── Auth gate (State A) ────────────────────────────────────────────────────── */
  .auth-sub {
    color: var(--ink-500);
    font-size: 14px;
    margin-bottom: 18px;
  }

  .social-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }

  .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
  }

  /* Google: white bg, light grey border, dark text */
  .social-btn.google-btn {
    background: #fff;
    color: #1f1f1f;
    border-color: #dadce0;
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  .social-btn.google-btn:hover {
    background: #f8f9fa;
    border-color: #d2d4d8;
    text-decoration: none;
  }

  /* Apple: black bg, white text + logo */
  .social-btn.apple-btn {
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  }

  .social-btn.apple-btn:hover {
    background: #1a1a1a;
    text-decoration: none;
  }

  .social-btn.apple-btn .apple-glyph {
    display: inline-flex;
    align-items: center;
    margin-top: -2px;
  }

  .auth-divider {
    position: relative;
    text-align: center;
    margin: 16px 0;
    color: var(--ink-400);
    font-size: 13px;
  }

  .auth-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--ink-200);
  }

  .auth-divider span {
    position: relative;
    background: #fff;
    padding: 0 10px;
  }

  .auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--ink-200);
    margin-bottom: 16px;
    gap: 0;
  }

  .auth-tab {
    background: none;
    border: none;
    padding: 8px 16px 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
  }

  .auth-tab.active {
    color: var(--blue-600);
    border-bottom-color: var(--blue-600);
  }

  .auth-field {
    margin-bottom: 14px;
  }

  .auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 5px;
  }

  .auth-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-900);
    outline: none;
    transition: border-color 0.15s;
  }

  .auth-field input:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .auth-error {
    color: #dc2626;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 10px;
  }

  .auth-forgot {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-500);
  }

  /* ── Price summary row ─────────────────────────────────────────────────────── */
  .co-price-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
  }

  .ps-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
  }

  .ps-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue-700);
  }

  /* ── Payment Request Button (Apple/Google Pay) ─────────────────────────────── */
  .prb-container {
    margin-bottom: 16px;
  }

  .prb-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--ink-400);
  }

  .prb-divider::before,
  .prb-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-200);
  }

  /* ── Saved card chip (State C) ─────────────────────────────────────────────── */
  .saved-card-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: #fff;
    margin-bottom: 14px;
  }

  .sc-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-700);
    text-transform: uppercase;
    min-width: 50px;
    letter-spacing: 0.05em;
  }

  .sc-info {
    flex: 1;
  }

  .sc-number {
    display: block;
    font-weight: 600;
    color: var(--ink-900);
    font-size: 15px;
  }

  .sc-expiry {
    font-size: 12px;
    color: var(--ink-500);
  }

  .sc-change {
    background: none;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--blue-600);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }

  .sc-change:hover {
    background: var(--blue-50);
    border-color: var(--blue-500);
  }

  /* ── Payment error ─────────────────────────────────────────────────────────── */
  .pay-error {
    color: #dc2626;
    font-size: 13px;
    min-height: 18px;
    margin-top: 8px;
  }

  /* ── Payment notice (lock icon) ────────────────────────────────────────────── */
  .payment-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-400);
    margin-top: 10px;
    justify-content: center;
  }

  /* ── Success overlay ───────────────────────────────────────────────────────── */
  .co-success {
    text-align: center;
    padding: 40px 20px;
  }

  .co-success-icon {
    margin-bottom: 16px;
  }

  .co-success-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 8px;
  }

  .co-success-msg {
    font-size: 15px;
    color: var(--ink-500);
    margin-bottom: 20px;
  }

  .co-success-link {
    display: inline-block;
    padding: 10px 20px;
    background: var(--blue-600);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }

  .co-success-link:hover {
    background: var(--blue-700);
    text-decoration: none;
  }

  /* ── Sub card (subscription plan card full-width) ──────────────────────────── */
  .sub-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 8px;
  }
/* ════════════════════════════════════════════════════════════════════════════
   Auth Modals (Login + Signup) — checkout page overlay
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Overlay backdrop ─────────────────────────────────────────────────────── */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.auth-modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.auth-modal-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22), 0 4px 16px rgba(15, 23, 42, 0.08);
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 28px 28px;
  position: relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
  opacity: 0;
}

.auth-modal-overlay.is-open .auth-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--ink-100, #f3f4f6);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500, #6b7280);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.auth-modal-close:hover {
  background: var(--ink-200, #e5e7eb);
  color: var(--ink-900, #111827);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.auth-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900, #111827);
  margin: 0 0 6px;
  line-height: 1.25;
}

.auth-modal-sub {
  font-size: 13px;
  color: var(--ink-500, #6b7280);
  margin: 0 0 20px;
}

/* ── Social buttons ───────────────────────────────────────────────────────── */
.auth-modal-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.auth-modal-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
  border: 1.5px solid var(--ink-200, #e5e7eb);
  background: #fff;
  color: var(--ink-900, #111827);
}

.auth-modal-social-btn:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  opacity: 0.9;
}

.auth-modal-social-btn.apple {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ── Or divider ───────────────────────────────────────────────────────────── */
.auth-modal-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: 12px;
  color: var(--ink-400, #9ca3af);
  font-weight: 500;
}

.auth-modal-divider::before,
.auth-modal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink-200, #e5e7eb);
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.auth-modal-field {
  margin-bottom: 12px;
}

.auth-modal-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700, #374151);
  margin-bottom: 5px;
}

.auth-modal-input {
  width: 100%;
  height: 42px;
  border: 1.5px solid var(--ink-200, #e5e7eb);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--ink-900, #111827);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
}

.auth-modal-input:focus {
  border-color: var(--blue-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.auth-modal-pw-wrap {
  position: relative;
}

.auth-modal-pw-wrap .auth-modal-input {
  padding-right: 60px;
}

.auth-modal-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-600, #2563eb);
  cursor: pointer;
  padding: 4px 6px;
}

/* ── Forgot password ──────────────────────────────────────────────────────── */
.auth-modal-forgot {
  text-align: right;
  margin-bottom: 14px;
}

.auth-modal-forgot a {
  font-size: 12px;
  color: var(--blue-600, #2563eb);
  text-decoration: none;
}

.auth-modal-forgot a:hover { text-decoration: underline; }

/* ── Submit button ────────────────────────────────────────────────────────── */
.auth-modal-submit {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--blue-600, #2563eb);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-family: inherit;
}

.auth-modal-submit:hover { background: var(--blue-700, #1d4ed8); }
.auth-modal-submit:active { transform: scale(0.98); }
.auth-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Inline error ─────────────────────────────────────────────────────────── */
.auth-modal-error {
  font-size: 13px;
  color: var(--red-600, #dc2626);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: none;
}

.auth-modal-error.is-visible { display: block; }

/* ── Footer switch link ───────────────────────────────────────────────────── */
.auth-modal-footer {
  text-align: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-100, #f3f4f6);
  font-size: 13px;
  color: var(--ink-500, #6b7280);
}

.auth-modal-footer a {
  color: var(--blue-600, #2563eb);
  font-weight: 600;
  text-decoration: none;
}

.auth-modal-footer a:hover { text-decoration: underline; }

/* ── Fine-print (signup terms) ────────────────────────────────────────────── */
.auth-modal-fineprint {
  font-size: 11px;
  color: var(--ink-400, #9ca3af);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

.auth-modal-fineprint a {
  color: var(--ink-500, #6b7280);
}

/* ── Password strength bar ────────────────────────────────────────────────── */
.auth-modal-pw-strength {
  margin-top: 6px;
  display: none;
}

.auth-modal-pw-strength.visible { display: block; }

.auth-modal-pw-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--ink-100, #f3f4f6);
  overflow: hidden;
  margin-bottom: 4px;
}

.auth-modal-pw-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s, background 0.3s;
  width: 0%;
}

.auth-modal-pw-label {
  font-size: 11px;
  color: var(--ink-500, #6b7280);
}