.price-page .hero-copy h1 {
  max-width: 12ch;
}

.price-dropdown {
  position: relative;
}

.price-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.price-dropdown > a::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.08rem) rotate(45deg);
}

.price-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 16rem;
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in oklab, var(--line) 90%, white);
  background: color-mix(in oklab, white 94%, var(--background));
  box-shadow: 0 18px 40px oklch(0.28 0.05 247 / 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 80;
}

.price-dropdown:hover .price-dropdown-menu,
.price-dropdown:focus-within .price-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.price-dropdown-menu a {
  display: block;
  padding: 0.8rem 0.9rem;
  border-radius: 0.9rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--foreground);
}

.price-dropdown-menu a:hover,
.price-dropdown-menu a:focus-visible {
  background: color-mix(in oklab, var(--primary) 10%, white);
  outline: none;
}

.price-dropdown-menu a.current {
  background: color-mix(in oklab, var(--primary) 14%, white);
  color: var(--primary);
}

.price-grid,
.stats-grid,
.vendor-grid,
.faq-grid {
  display: grid;
  gap: 1.2rem;
}

.price-grid,
.vendor-grid,
.faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.price-card,
.section-card,
.faq-card {
  border: 1px solid color-mix(in oklab, var(--line) 90%, white);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in oklab, white 92%, var(--background)) 0%, color-mix(in oklab, white 72%, var(--background)) 100%);
  box-shadow: var(--shadow-soft);
}

.price-card,
.section-card,
.faq-card {
  padding: 1.45rem;
}

.price-card strong,
.stat-card strong {
  display: block;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.stat-card {
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--line) 85%, white);
  background: color-mix(in oklab, white 74%, var(--background));
}

.stat-card span,
.price-card span {
  display: block;
  margin-top: 0.45rem;
  color: var(--foreground-soft);
  line-height: 1.65;
}

.section-stack {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.section-card h2,
.faq-card h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.section-card p,
.section-card li,
.faq-card p {
  color: var(--foreground-soft);
  line-height: 1.9;
}

.section-card ul,
.section-card ol {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 88%, white);
}

.price-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
}

.cta-band {
  padding: 1.7rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--line) 90%, white);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--primary) 9%, white), color-mix(in oklab, var(--accent) 10%, white)),
    color-mix(in oklab, white 78%, var(--background));
  box-shadow: var(--shadow-soft);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.cta-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}

.cta-primary {
  background: var(--foreground);
  color: var(--primary-ink);
}

.cta-secondary {
  border: 1px solid color-mix(in oklab, var(--line) 88%, white);
  background: color-mix(in oklab, white 82%, var(--background));
}

.hubspot-shell {
  margin-top: 1.4rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--line) 88%, white);
  background: color-mix(in oklab, white 72%, var(--background));
}

.hubspot-shell .hs-form-frame {
  min-height: 16rem;
}

@media (max-width: 860px) {
  .price-grid,
  .stats-grid,
  .vendor-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .price-table {
    display: block;
    overflow-x: auto;
  }

  .price-dropdown-menu {
    right: auto;
    left: 0;
    min-width: min(18rem, calc(100vw - 2rem));
  }
}


      .price-page .topbar {
        border-bottom: 1px solid color-mix(in oklab, var(--line) 88%, white);
        background: color-mix(in oklab, white 96%, var(--background));
        backdrop-filter: blur(10px);
      }

      .price-page .topbar-inner {
        min-height: 5.6rem;
        gap: 1.35rem;
      }

      .price-page .brand {
        gap: 1rem;
      }

      .price-page .brand img {
        width: 3.9rem;
        height: 3.9rem;
        object-fit: contain;
      }

      .price-page .brand-copy {
        gap: 0;
      }

      .price-page .brand-copy strong {
        font-size: 1.08rem;
      }

      .price-page .brand-copy span {
        display: none;
      }

      .price-page .topnav {
        gap: 0.45rem;
      }

      .price-page .topnav a {
        padding: 0.72rem 0.96rem;
        color: color-mix(in oklab, var(--foreground-soft) 92%, var(--foreground));
      }

      .price-page .price-dropdown > a.current {
        min-height: 3.15rem;
        padding: 0.82rem 1.45rem;
        border-radius: 1rem;
        background: #2cb6d8;
        color: white;
        box-shadow: 0 12px 28px oklch(0.62 0.11 229 / 0.24);
      }

      .price-page .price-dropdown-menu {
        border-radius: 1rem;
      }

      .price-page .hero {
        padding: clamp(4.35rem, 8vw, 6.25rem) 0 2.35rem;
      }

      .price-page .hero::after {
        inset: auto 50% -1rem;
        width: min(92vw, 78rem);
        height: min(44rem, 72vw);
        transform: translateX(-50%);
        border-radius: 3rem;
        background:
          radial-gradient(circle at 50% 18%, oklch(0.95 0.035 225 / 0.96), transparent 62%),
          linear-gradient(180deg, oklch(0.98 0.01 220 / 0.96), oklch(0.95 0.03 224 / 0.92));
        filter: none;
      }

      .price-page .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.1rem;
        justify-items: center;
        align-items: start;
        text-align: center;
      }

      .price-page .hero-copy {
        max-width: 68rem;
      }

      .price-page .hero-copy .eyebrow {
        justify-content: center;
        color: #4a6177;
      }

      .price-page .hero-copy .eyebrow::before {
        background: currentColor;
      }

      .price-page .hero-copy h1 {
        max-width: none;
        font-size: clamp(3.4rem, 7.4vw, 5.9rem);
        letter-spacing: -0.075em;
      }

      .price-page .hero-copy p {
        margin: 1.15rem auto 0;
        max-width: 56rem;
        font-size: clamp(1.08rem, 1.9vw, 1.28rem);
        line-height: 1.7;
      }

      .price-page .signal-row {
        justify-content: center;
        margin-top: 1.65rem;
      }

      .price-page .signal-chip {
        background: color-mix(in oklab, white 92%, var(--background));
      }

      .price-page .hero-panel {
        width: min(100%, 66rem);
        padding: 1.75rem 1.9rem;
        border-radius: 1.5rem;
        background: color-mix(in oklab, white 92%, var(--background));
      }

      .price-page .hero-panel::before {
        display: none;
      }

      .price-page .panel-label {
        color: #0f6aa2;
      }

      .price-page .panel-copy {
        margin-top: 0.65rem;
        font-size: 1.02rem;
      }

      .price-page .metrics {
        margin-top: 1.1rem;
      }

      .price-page .metric {
        background: white;
      }

      .price-page .page {
        padding-top: 1.7rem;
      }

      .price-page .stat-card,
      .price-page .price-card,
      .price-page .section-card,
      .price-page .faq-card,
      .price-page .cta-band,
      .price-page .hubspot-shell {
        background: white;
      }

      .price-page .cta-band {
        background:
          linear-gradient(180deg, color-mix(in oklab, white 90%, var(--background)), color-mix(in oklab, white 98%, var(--background)));
      }

      @media (max-width: 980px) {
        .price-page .topbar-inner {
          flex-wrap: wrap;
          justify-content: center;
          padding: 0.85rem 0;
        }

        .price-page .topnav {
          justify-content: center;
        }
      }

      @media (max-width: 860px) {
        .price-page .hero {
          padding-top: 3.2rem;
        }

        .price-page .hero-copy h1 {
          font-size: clamp(2.8rem, 12vw, 4rem);
        }

        .price-page .hero-panel {
          padding: 1.35rem;
        }
      }


/* ---- added: shared inner-page helpers (Sep 2026 rebuild) ---- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .price-table { min-width: 560px; }
.price-table td.num, .price-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.updated-note { font-size: .92rem; color: var(--muted); margin: .4rem 0 0; }
.archive-banner { border: 1px solid var(--accent-100); background: var(--accent-50); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.archive-banner a { color: var(--accent); font-weight: 700; text-decoration: underline; }
.section-card a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-top: 1rem; }
.link-grid a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; text-decoration: none !important; color: var(--ink) !important; font-weight: 700; }
.link-grid a span { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.link-grid a:hover { border-color: var(--accent); }
.source-list { font-size: .92rem; color: var(--muted); padding-left: 1.1rem; }
.source-list li { margin: .25rem 0; }
.legacy-content h2 { margin-top: 1.6rem; }
.legacy-content h3 { margin: 1.2rem 0 .4rem; }
.legacy-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.legacy-content th, .legacy-content td { border-bottom: 1px solid var(--line); padding: .55rem .6rem; text-align: left; vertical-align: top; }
.legacy-content blockquote { border-left: 3px solid var(--accent); margin: 1rem 0; padding: .2rem 1rem; color: var(--ink-2); }
.tool-form { display: grid; gap: 1.1rem; }
.tool-form label { font-weight: 700; display: block; margin-bottom: .35rem; }
.tool-form .hint { font-size: .9rem; color: var(--muted); margin: 0 0 .35rem; }
.tool-form input, .tool-form select { width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0; }
.choice-grid legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.choice-grid label { font-weight: 500; margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .7rem .8rem; cursor: pointer; background: #fff; }
.choice-grid input { width: auto; margin-right: .45rem; }
.choice-grid label:has(input:checked) { border-color: var(--accent); background: var(--accent-50); }
.tool-submit { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: .85rem 1.4rem; background: var(--accent); color: #fff; cursor: pointer; justify-self: start; }
.tool-submit:hover { background: var(--accent-press); }
.tool-result { margin-top: 1.2rem; border-left: 4px solid var(--accent); background: var(--accent-tint); padding: 1rem 1.2rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tool-result[hidden] { display: none; }
.tool-result h3 { margin-top: 0; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
.section-stack, .section-stack > *, .section-card, .vendor-grid > * { min-width: 0; }
.lang-switch { display: inline-flex; gap: .15rem; margin-left: auto; }
.lang-switch a { padding: 0 .35rem; opacity: .75; font-weight: 600; }
.lang-switch a.on { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.topnav { flex-wrap: nowrap; }
.topnav > a, .topnav .price-dropdown > a { white-space: nowrap; }
@media (max-width: 1180px) { .topnav { gap: 14px; } .header-right .btn { white-space: nowrap; } }
@media (max-width: 560px) { .header-right .btn { display: none; } }
.legacy-content { overflow-x: auto; overflow-wrap: break-word; }
.legacy-content .table-wrap { max-width: 100%; }
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 560px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } }

.page-figure { margin: 1.4rem 0 .4rem; }
.page-figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.page-figure figcaption { color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: .6rem; }

/* YouTube click-to-load embeds (scripts/videos.py) */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #f7f6fa; margin-top: 1rem; }
.video-embed iframe, .yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade { padding: 0; cursor: pointer; background: #f7f6fa; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; border-radius: 14px; background: #5b27d6; box-shadow: 0 6px 20px rgba(91, 39, 214, .35); transition: transform .15s; }
.yt-play::after { content: ""; position: absolute; left: 31px; top: 16px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: scale(1.08); }
.video-link { margin-top: .6rem; font-size: .92rem; }

/* JS clips (jsvideo.js): autoplay explainers at the top of five pages */
.jsv-card { padding: 1rem; }
.jsv { position: relative; }
.jsv-stage { position: relative; width: 100%; aspect-ratio: 1280 / 560; overflow: hidden; border-radius: 14px; background: #f7f6fa; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.jsv-bar { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; }
.jsv-btn { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #5b27d6; color: #fff; display: grid; place-items: center; cursor: pointer; }
.jsv-btn:hover, .jsv-btn:focus-visible { background: #4a1fb0; }
.jsv-btn .i-pause, .jsv.is-playing .jsv-btn .i-play { display: none; }
.jsv.is-playing .jsv-btn .i-pause { display: block; }
.jsv-track { flex: 1; height: 8px; border-radius: 4px; background: #e6dcfb; cursor: pointer; overflow: hidden; }
.jsv-track i { display: block; height: 100%; width: 0; background: #5b27d6; }
.jsv-time { flex: none; font: 400 .8rem/1 'Space Mono', ui-monospace, monospace; color: var(--muted); }
.jsv-cap { margin: .7rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }