/* Verena hi-fi D2 home: layout + components. Type/spacing tokens: shared-marketing-rhythm.css; color: verena-brand-tokens.css */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      font-size: 100%;
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      /* Native form controls / scrollbars follow light tokens in verena-brand-tokens.css */
      color-scheme: light;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    body {
      min-height: 100dvh;
      /* background: var(--canvas); */
      background: #ECEDF5;
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: var(--text-body-size);
      line-height: var(--text-body-line-height);
      overflow-x: clip;
    }
    @media (max-width: 899px) {
      body.nav-open {
        overflow: hidden;
        touch-action: none;
      }
    }
    .skip-link {
      position: absolute;
      top: -100px;
      left: var(--space-4);
      z-index: 200;
      padding: var(--space-2) var(--space-3);
      background: var(--accent-primary);
      color: var(--cta-text);
      font: 600 var(--text-nav-size-sm) / 1 var(--font-body);
      text-decoration: none;
      border-radius: var(--radius-ui);
      transition: top 0.15s ease;
    }
    .skip-link:focus {
      top: var(--space-2);
      outline: var(--focus-outline-width) solid var(--focus-ring);
      outline-offset: var(--focus-offset-tight);
    }

    #verena-plans {
      position: relative;
      background: #ECEDF5;
      --hs-space-2: 8px;
      --hs-space-3: 12px;
      --hs-space-4: 16px;
      --hs-space-5: 20px;
      --hs-space-6: 24px;
    }
    /* Center microcopy + card row as one column; row shrink-wraps so three cards stay optically centered on wide viewports. */
    #verena-plans .zone__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }
    #verena-plans .scroll-pricing-micro-block {
      width: min(36rem, 100%);
      box-sizing: border-box;
    }

    /* Sticky header clearance for in-page anchors (tracks --site-header-h from verena-hero-scroll.js). */
    #zone1,
    #how-it-works,
    #verena-plans,
    #pricing,
    #email-entry {
      scroll-margin-top: max(88px, calc(var(--site-header-h) + var(--space-1-5)));
    }

    /* Page width shell — matches Invictus D3 `.container` + header grid (build/invictus-hifi-d3-home.html). */
    .container {
      width: 100%;
      max-width: var(--page-max);
      margin: 0 auto;
      padding: 0 var(--page-margin);
      box-sizing: border-box;
    }

    /* Header: same min-heights, grid alignment, and nav type scale as Invictus hi-fi D3; Verena color tokens. */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      padding-top: env(safe-area-inset-top, 0px);
      border-bottom: 1px solid var(--border);
      background: var(--header-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .site-header__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      min-height: var(--size-header-min-h-sm);
    }
    @media (min-width: 900px) {
      .site-header__inner {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gutter);
        justify-content: unset;
        min-height: var(--size-header-min-h-lg);
      }
      .site-header__brand {
        grid-column: 1 / span 3;
      }
      .site-header .site-nav {
        grid-column: 4 / span 6;
        justify-self: center;
        overflow: visible;
        max-width: none;
        margin: 0;
        padding: 0;
      }
    }

    .site-header__brand {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      line-height: 0;
      text-decoration: none;
      border-radius: var(--radius-ui);
    }
    .site-header__brand:focus-visible {
      outline: var(--focus-outline-width) solid var(--focus-ring);
      outline-offset: var(--focus-offset-loose);
    }
    .site-header__logo {
      display: block;
      height: var(--size-logo-h);
      width: auto;
    }

    /* Mobile menu toggle (pattern: iai-website build/invictus-hifi-d3-home.html) */
    .nav-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--size-nav-toggle);
      height: var(--size-nav-toggle);
      padding: 0;
      border: 1px solid var(--border);
      background: var(--elevated);
      color: var(--text);
      cursor: pointer;
      border-radius: var(--radius-ui);
      flex-shrink: 0;
    }
    .nav-toggle:focus-visible {
      outline: var(--focus-outline-width) solid var(--focus-ring);
      outline-offset: var(--focus-offset-tight);
    }
    .nav-toggle__icon--close {
      display: none;
    }
    .nav-toggle.is-open .nav-toggle__icon--menu {
      display: none;
    }
    .nav-toggle.is-open .nav-toggle__icon--close {
      display: block;
    }
    @media (min-width: 900px) {
      .nav-toggle {
        display: none !important;
      }
    }

    .site-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 110;
      background: var(--bg-app);
      border-bottom: 1px solid var(--border);
      padding: var(--space-3) var(--page-margin);
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-1);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
      box-sizing: border-box;
    }
    .site-nav.is-open {
      display: flex;
    }
    @media (min-width: 900px) {
      .site-nav {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        max-width: none;
        margin: 0;
        gap: 0;
      }
    }

    .nav-prim {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-1);
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
    }
    @media (min-width: 900px) {
      .nav-prim {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-2);
        width: auto;
        white-space: nowrap;
      }
    }
    .nav-prim li {
      width: 100%;
    }
    @media (min-width: 900px) {
      .nav-prim li {
        width: auto;
      }
    }
    .nav-prim a {
      display: block;
      font-size: var(--text-nav-size-md);
      font-weight: 600;
      line-height: var(--text-nav-line-height);
      letter-spacing: 0.01em;
      color: var(--text-secondary);
      text-decoration: none;
      padding: var(--pad-nav-link-y) var(--pad-nav-link-x);
      border-radius: var(--radius-ui);
      transition: color 0.15s ease, background 0.15s ease, text-decoration-color 0.15s ease;
    }
    @media (min-width: 900px) {
      .nav-prim a {
        display: inline-block;
        font-size: var(--text-nav-size-md);
      }
    }
    .nav-prim a:hover {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: var(--text-underline-offset-nav);
      text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
    }
    .nav-prim a:focus-visible {
      outline: var(--focus-outline-width) solid var(--focus-ring);
      outline-offset: var(--focus-offset-tight);
    }

    @media (prefers-reduced-motion: reduce) {
      .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .nav-prim a {
        transition: none;
      }
    }

    .zone {
      padding: var(--section-pad-y) var(--page-margin);
    }
    #zone1 {
      /* Contains HIW pin stacking (ScrollTrigger z-index 40) so #verena-plans can sit above in document order. */
      isolation: isolate;
      --zone1-pad-y: clamp(27px, 5.333vw, 54px);
      /* Second fold sits at viewport bottom: room for pin padding + stack pad + ≥32px of .scroll-logo. */
      --hiw-logo-min-visible: 32px;
      --fold-peek: max(
        var(--hiw-logo-min-visible),
        calc(var(--hiw-logo-min-visible) + var(--space-3) + var(--space-2))
      );
      --hero-to-hiw-gap: clamp(var(--space-2), 2.5vw, var(--space-4));
      padding: var(--zone1-pad-y) var(--page-margin) var(--section-pad-y);
      background:
        radial-gradient(ellipse 120% 80% at 50% -40%, var(--zone1-hero-tint), transparent 55%),
        #ECEDF5;
    }
    .zone:last-of-type { border-bottom: none; }

    .zone__inner {
      max-width: var(--page-max);
      margin: 0 auto;
    }
    .zone__inner--narrow {
      max-width: 40rem;
    }

    .zone1-hero-inner {
      max-width: var(--page-max);
      margin: 0 auto;
      box-sizing: border-box;
      padding-top: clamp(
        calc(var(--space-4) * 4 / 3),
        4vw,
        calc(var(--space-heading-to-block) * 4 / 3)
      );
      /* svh only (not dvh): dynamic viewport grows/shrinks when browser chrome hides on scroll, which
         changed min-height and flex-centered spacing vs first paint after round-trip to footer. */
      min-height: calc(
        100svh - var(--site-header-h) - var(--zone1-pad-y) - var(--hero-to-hiw-gap) - var(--fold-peek)
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    /* Desktop: center hero + email panel in the first-fold min-height; mobile stays top-aligned. */
    @media (min-width: 900px) {
      .zone1-hero-inner {
        justify-content: center;
      }
    }
    .zone1-grid {
      display: grid;
      column-gap: 96px;
      row-gap: 40px;
      align-items: start;
      width: 100%;
    }
    @media (min-width: 900px) {
      .zone1-grid {
        grid-template-columns: 1fr minmax(280px, 1fr);
        align-items: center;
      }
    }
    .hero-copy {
      max-width: 38rem;
    }

    .eyebrow {
      font-size: var(--text-micro-size);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: var(--pad-nav-link-y);
    }
    .zone h2 {
      font-family: var(--font-h);
      font-weight: 600;
      font-size: var(--text-section-size);
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: var(--text-section-line-height);
      margin-bottom: var(--pad-cta-x);
    }
    .zone h3 {
      font-family: var(--font-h);
      font-weight: 600;
      font-size: var(--text-subsection-size);
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: var(--text-subsection-line-height);
      margin: clamp(var(--space-5), 6vw, var(--space-7)) 0 var(--space-1-5);
    }
    .zone__lede {
      font-size: var(--text-lead-size);
      color: var(--text-secondary);
      max-width: 52ch;
      margin-bottom: clamp(var(--space-2-5), 4vw, var(--space-4));
      line-height: var(--text-lead-line-height);
    }
    .zone__lede a {
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
    }
    .zone__lede a:hover { text-decoration: underline; }
    .zone__lede a:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
      border-radius: 2px;
    }

    .composer {
      border-top: 1px solid var(--border);
      padding: var(--space-2);
      background: var(--bg-app);
    }
    .composer__row {
      display: flex;
      gap: var(--space-1-5);
      flex-wrap: wrap;
      align-items: flex-end;
    }
    @media (max-width: 540px) {
      .composer__row {
        flex-direction: column;
        align-items: stretch;
      }
      .composer__row .btn-send {
        width: 100%;
      }
    }
    .field-wrap { flex: 1; min-width: 200px; }
    .field-wrap label {
      display: block;
      font-size: var(--text-caption-size);
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .field-wrap input {
      width: 100%;
      font-family: var(--font-body);
      font-size: var(--text-body-size);
      padding: var(--space-1-5) var(--pad-cta-x);
      border-radius: 4px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--text);
    }
    .field-wrap input:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 1px;
    }
    .field-wrap input[aria-invalid="true"] { border-color: var(--error); }
    .err-text {
      font-size: var(--text-nav-size-sm);
      color: var(--error);
      margin-top: 6px;
      display: none;
    }
    .field-wrap.has-error .err-text { display: block; }
    .btn-send {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: var(--text-body-size);
      color: var(--cta-text);
      background: var(--primary);
      border: none;
      border-radius: 100px;
      padding: var(--space-1-5) var(--space-3);
      min-height: var(--size-control-md);
      cursor: pointer;
    }
    .btn-send:hover:not(:disabled) { background: var(--primary-hover); }
    .btn-send:disabled { opacity: 0.45; cursor: not-allowed; }
    .btn-send:focus-visible {
      outline: 2px solid var(--focus-ring-strong);
      outline-offset: 2px;
    }

    /* Google-branded secondary (post-email); colors match the standard Google mark */
    .btn-google-oauth {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: var(--text-body-size);
      line-height: var(--text-cta-line-height);
      color: var(--text);
      background: transparent;
      border: 1px solid var(--oauth-border);
      border-radius: 14px;
      padding: 0 var(--space-2-5);
      min-height: var(--size-control-md);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-1-5);
      box-sizing: border-box;
      width: 100%;
    }
    .btn-google-oauth__icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
    }
    .btn-google-oauth__icon svg {
      display: block;
      width: 18px;
      height: 18px;
    }
    .btn-google-oauth:hover:not(:disabled) {
      background: var(--oauth-bg-hover);
      border-color: var(--oauth-border-hover);
    }
    .btn-google-oauth:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .btn-google-oauth:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .sr-note {
      font-size: var(--text-micro-size);
      color: var(--text-muted);
      margin-top: 12px;
      line-height: var(--line-height-micro);
    }

    .hero-h1 {
      font-family: var(--font-h);
      font-weight: 600;
      font-size: 51px;
      color: var(--text);
      letter-spacing: -0.03em;
      line-height: var(--text-hero-line-height);
      margin-bottom: var(--space-2);
    }
    .hero-sub {
      font-family: var(--font-h);
      font-weight: 500;
      font-size: 23px;
      color: var(--text-secondary);
      line-height: var(--line-height-relaxed);
      max-width: 42ch;
      margin-bottom: var(--pad-cta-x);
    }
    .hero-support {
      font-size: var(--text-body-size);
      color: var(--text-muted);
      max-width: 48ch;
      line-height: var(--text-body-line-height);
      margin: 0;
    }
    #zone1 .email-panel .hero-support {
      max-width: none;
      margin: 0 0 var(--zone1-hero-stack-gap);
    }

    .email-panel {
      background: var(--elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 22px;
      margin-top: 8px;
    }
    #zone1 .email-panel {
      background: var(--elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-zone1-hero-shell);
      padding: var(--zone1-hero-card-pad);
      margin-top: 0;
      box-sizing: border-box;
      width: min(100%, var(--zone1-hero-card-max));
      justify-self: start;
    }
    @media (max-width: 899px) {
      #zone1 .email-panel {
        width: 100%;
        max-width: none;
        justify-self: stretch;
      }
    }
    #zone1 .email-panel #emailFormBlock {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    #zone1 .email-panel form .composer__row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--zone1-hero-stack-gap);
    }
    .zone1-email-divider {
      display: flex;
      align-items: center;
      gap: var(--space-1-5);
      margin: 0;
      font-size: var(--text-micro-size);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .zone1-email-divider::before,
    .zone1-email-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--divider-line);
    }
    .zone1-email-divider span {
      flex-shrink: 0;
    }
    #zone1 .email-panel .field-wrap {
      flex: none;
      width: 100%;
      min-width: 0;
    }
    #zone1 .email-panel .field-wrap label {
      margin-bottom: 8px;
    }
    #zone1 .email-panel .field-wrap input {
      border-radius: var(--radius-zone1-hero-control);
      min-height: var(--zone1-hero-control-height);
      box-sizing: border-box;
      padding: 0 var(--pad-input-x-comfort);
      font-size: var(--text-body-size);
    }
    #zone1 .email-panel .field-wrap input:focus-visible {
      outline-offset: 2px;
    }
    #zone1 .email-panel .btn-send {
      width: 100%;
      min-height: var(--zone1-hero-control-height);
      border-radius: 100px;
      padding: 12px 24px;
      box-sizing: border-box;
    }
    /* Google + magic-link + legal copy: one block, same type scale as `.sr-note` / former `.zone1-success-note` (--text-micro-size). */
    #zone1 .email-panel #emailFormBlock .zone1-email-panel-note {
      margin-top: var(--zone1-hero-foot-gap);
      margin-bottom: 0;
      text-align: center;
      white-space: normal;
      max-width: 36rem;
      margin-left: auto;
      margin-right: auto;
    }
    @keyframes zone1-email-success-in {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    #zone1 .email-panel #emailSuccess:not([hidden]) {
      display: flex;
      flex-direction: column;
      gap: var(--zone1-hero-stack-gap);
      animation: zone1-email-success-in 240ms ease-out both;
    }
    @media (prefers-reduced-motion: reduce) {
      #zone1 .email-panel #emailSuccess:not([hidden]) {
        animation: none;
      }
    }
    #zone1 .email-panel #emailSuccess .email-success__title {
      margin: 0;
      max-width: 38ch;
      margin-inline: auto;
      text-align: center;
      letter-spacing: -0.02em;
    }
    #zone1 .email-panel #emailSuccess .email-success__title:focus-visible {
      outline: 2px solid var(--focus-ring-strong);
      outline-offset: 2px;
      border-radius: 4px;
    }
    #zone1 .email-panel .btn-google-oauth {
      min-height: var(--zone1-hero-control-height);
      border-radius: var(--radius-zone1-hero-control);
    }
    #zone1 .email-panel #emailSuccess .btn-google-oauth {
      margin-top: 0;
    }
    #zone1 .email-panel #emailSuccess .sr-note {
      margin-top: 0;
      text-align: center;
    }
    .email-panel form .composer__row {
      align-items: flex-end;
    }
    .email-success {
      text-align: left;
    }
    .email-success__title {
      font-family: var(--font-h);
      font-weight: 600;
      font-size: var(--text-lead-size);
      line-height: var(--text-lead-line-height);
      color: var(--text);
      margin: 0 0 8px;
    }
    .email-success__body {
      font-size: var(--text-link-size);
      color: var(--text-secondary);
      margin-bottom: 16px;
      line-height: var(--text-body-line-height);
    }

    /* How it works: lives inside .hero-scroll-bleed with hero pin + scroll-scrub chat. */
    #how-it-works.hiw-story {
      overflow-x: clip;
      padding-top: 0;
      --hiw-space-2: var(--space-1);
      --hiw-space-3: var(--space-1-5);
      --hiw-space-4: var(--space-2);
      --hiw-space-5: var(--space-2-5);
      --hiw-space-6: var(--space-3);
      --hiw-space-8: var(--space-4);
      --hiw-space-10: var(--space-5);
    }
    .hiw-intro-in-pin {
      text-align: center;
      width: 100%;
      max-width: min(68rem, 100%);
      margin: 0 auto;
      padding-inline: var(--grid-gutter);
    }
    @media (prefers-reduced-motion: no-preference) {
      #verena-hero-scroll:not(.hero-scroll--reduced) .hiw-intro-in-pin {
        opacity: 0;
        visibility: hidden;
      }
    }
    /* Section H2 uses global `.zone h2` scale; space below headline before offer cards / chat. */
    #how-it-works h2#hiw-title {
      margin-top: 0;
      margin-bottom: var(--hiw-space-3);
    }
    /* Invictus D3 offer-card copy, Verena surfaces + type tokens (scoped under #how-it-works). */
    #how-it-works .hiw-offer-cards {
      width: 100%;
      text-align: initial;
    }
    #how-it-works .hiw-offer-cards__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--grid-gutter);
      width: 100%;
      margin-top: var(--space-6);
      margin-bottom: var(--space-5);
      box-sizing: border-box;
    }
    @media (min-width: 700px) {
      #how-it-works .hiw-offer-cards__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    #how-it-works .hiw-offer-card {
      background: var(--elevated);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: var(--space-4);
      box-sizing: border-box;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    #how-it-works .hiw-offer-card:hover {
      border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
      box-shadow: var(--card-shadow);
    }
    #how-it-works .hiw-offer-card:focus-within {
      outline: 2px solid var(--focus-ring-strong);
      outline-offset: 2px;
    }
    #how-it-works .hiw-offer-card__index {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: clamp(1.625rem, 3.2vw, 2.125rem);
      line-height: 1.08;
      color: var(--primary);
      margin: 0;
      letter-spacing: -0.02em;
    }
    #how-it-works .hiw-offer-card__title {
      font-family: var(--font-h);
      font-weight: 600;
      font-size: var(--text-card-title-size);
      line-height: var(--text-card-title-line-height);
      margin: var(--space-3) 0 0;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    #how-it-works .hiw-offer-card__body {
      margin: var(--space-3) 0 0;
      font-size: var(--text-nav-size-md);
      line-height: var(--line-height-relaxed);
      color: var(--text-secondary);
    }
    /* Chat sits inside .hero-scroll-pin (single ScrollTrigger progress with hero; see verena-hero-scroll.js). */
    .hero-scroll-pin__chat {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      box-sizing: border-box;
    }

    /* How it works: illustrative chat transcript (workspace bubble styling, scoped). */
    .hiw-demo-bleed {
      position: relative;
      width: 100%;
      background: transparent;
      overflow-x: clip;
      min-height: 0;
      box-sizing: border-box;
    }
    .hiw-chat-demo-wrap {
      box-sizing: border-box;
      max-width: var(--width-hiw-chat-demo);
      margin: 0 auto;
      padding: var(--hiw-space-6) var(--hiw-space-6) var(--hiw-space-8);
    }
    .hiw-chat-demo {
      --hiw-type-chat-body: var(--text-chat-body-size);
      --hiw-type-xs: var(--text-caption-size);
      --hiw-type-md: var(--text-nav-size-md);
      --hiw-lh-body: var(--line-height-relaxed);
      --hiw-lh-micro: var(--line-height-micro);
      --hiw-chat-gap: var(--space-3);
      --hiw-chat-radius: var(--radius-chat-bubble);
      --hiw-chat-radius-tail: var(--radius-chat-bubble-tail);
      --hiw-chat-pad-x: var(--pad-chat-bubble-x);
      --hiw-chat-pad-y: var(--pad-chat-bubble-y);
      --hiw-bubble-max-agent: min(560px, 78%);
      --hiw-bubble-max-customer: min(420px, 72%);
      --hiw-bubble-agent-bg: #eeeef4;
      --hiw-bubble-agent-border: #d8d6e8;
      --hiw-bubble-user-bg: var(--primary);
      --hiw-bubble-user-text: var(--cta-text);
      --hiw-skeleton-bg: #f4f4f8;
      --hiw-skeleton-border: #d8d6e8;
      --hiw-sk-line-bg: rgba(24, 15, 26, 0.1);
      --hiw-profile-badge-bg: #eeeef4;
      --hiw-profile-badge-border: var(--border);
      --hiw-profile-row-divider: rgba(24, 15, 26, 0.1);
      --hiw-profile-foot-divider: rgba(24, 15, 26, 0.1);
      font-family: var(--font-body);
    }
    /*
      Invictus.ai (light) embed: add class hiw-chat-demo--invictus-light on #hiw-chat-demo,
      or data-hiw-theme="invictus-light" on .hiw-chat-demo-wrap.
      Scoped tokens override only inside the demo subtree (safe on a light parent page).
    */
    .hiw-chat-demo--invictus-light,
    .hiw-chat-demo-wrap[data-hiw-theme="invictus-light"] .hiw-chat-demo {
      --text: #180f1a;
      --text-secondary: rgba(24, 15, 26, 0.72);
      --text-muted: rgba(13, 13, 13, 0.72);
      --surface: #fcfcfd;
      --border: rgba(24, 15, 26, 0.12);
      --border-strong: #d8d6e8;
      --primary: #423ba5;
      --primary-hover: #232366;
      --cta-text: #efebf5;
      --hiw-bubble-agent-bg: #eeeef4;
      --hiw-bubble-agent-border: #d8d6e8;
      --hiw-bubble-user-bg: var(--primary);
      --hiw-bubble-user-text: var(--cta-text);
      --hiw-skeleton-bg: #f4f4f8;
      --hiw-skeleton-border: #d8d6e8;
      --hiw-sk-line-bg: rgba(24, 15, 26, 0.1);
      --hiw-profile-badge-bg: #eeeef4;
      --hiw-profile-badge-border: #d8d6e8;
      --hiw-profile-row-divider: rgba(24, 15, 26, 0.1);
      --hiw-profile-foot-divider: rgba(24, 15, 26, 0.1);
    }
    /* Verena homepage light: transcript chrome follows page tokens (not a dark island). Invictus light embed unchanged. */
    .hiw-chat-demo-wrap:not([data-hiw-theme="invictus-light"]) .hiw-chat-demo:not(.hiw-chat-demo--invictus-light) {
      --hiw-bubble-agent-bg: #eeeef4;
      --hiw-bubble-agent-border: var(--border-strong);
      --hiw-bubble-user-bg: var(--primary);
      --hiw-bubble-user-text: var(--cta-text);
      --hiw-skeleton-bg: #f4f4f8;
      --hiw-skeleton-border: var(--border);
      --hiw-sk-line-bg: rgba(24, 15, 26, 0.1);
      --hiw-profile-badge-bg: #eeeef4;
      --hiw-profile-badge-border: var(--border-strong);
      --hiw-profile-row-divider: rgba(24, 15, 26, 0.1);
      --hiw-profile-foot-divider: rgba(24, 15, 26, 0.1);
    }
    @media (max-width: 767px) {
      .hiw-chat-demo {
        --hiw-bubble-max-agent: min(100%, 305px);
        --hiw-bubble-max-customer: min(100%, 344px);
      }
    }
    .hiw-chat-demo__thread {
      display: flex;
      flex-direction: column;
      gap: 0;   /* gap handled via margin on visible steps so collapsed items don't add space */
      width: 100%;
    }
    @keyframes hiw-chat-step-in {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /*
      Hidden steps use max-height:0 + overflow:hidden instead of display:none.
      This keeps the thread's layout height STABLE so GSAP ScrollTrigger progress
      never jumps when a step appears (display:none→flex caused height shifts that
      broke the scrub).
    */
    .hiw-chat-demo__step {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      margin: 0;
      pointer-events: none;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.35s ease, max-height 0.4s ease, margin 0.4s ease;
    }
    .hiw-chat-demo__step--visible {
      opacity: 1;
      max-height: 600px;       /* generous ceiling; real content is shorter */
      pointer-events: auto;
      overflow: visible;
      margin-top: var(--hiw-chat-gap);
    }
    .hiw-chat-demo__step--visible:first-child {
      margin-top: 0;
    }
    .hiw-chat-demo--static .hiw-chat-demo__step {
      opacity: 1;
      max-height: none;
      overflow: visible;
      transform: none;
      pointer-events: auto;
      transition: none;
      margin-top: var(--hiw-chat-gap);
    }
    .hiw-chat-demo--static .hiw-chat-demo__step:first-child {
      margin-top: 0;
    }
    .hiw-chat-demo__step--customer {
      align-items: flex-end;
    }
    /* Reserve the same vertical rail as a Verena label row so customer bubble spacing matches other turns. */
    .hiw-chat-demo__step--customer::before {
      content: "";
      display: block;
      align-self: flex-end;
      width: 100%;
      max-width: var(--hiw-bubble-max-customer);
      height: calc(var(--hiw-type-xs) * 1.45 + var(--hiw-space-2));
      flex-shrink: 0;
      pointer-events: none;
    }
    .hiw-chat-demo__sender {
      font-size: var(--hiw-type-xs);
      font-weight: 600;
      line-height: var(--line-height-micro);
      letter-spacing: 0.0174em;
      color: var(--text-muted);
      margin-bottom: var(--hiw-space-2);
      padding: 0 var(--hiw-space-2);
    }
    .hiw-chat-demo__bubble {
      padding: var(--hiw-chat-pad-y) var(--hiw-chat-pad-x);
      font-size: var(--hiw-type-chat-body);
      line-height: var(--hiw-lh-body);
      letter-spacing: 0.0064em;
      max-width: 100%;
      box-sizing: border-box;
    }
    .hiw-chat-demo__agent-bubbles {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--hiw-space-2);
      width: 100%;
      max-width: min(100%, var(--hiw-bubble-max-agent));
    }
    .hiw-chat-demo__bubble--agent {
      align-self: flex-start;
      max-width: min(100%, var(--hiw-bubble-max-agent));
      background: var(--hiw-bubble-agent-bg);
      color: var(--text);
      border-radius: var(--hiw-chat-radius) var(--hiw-chat-radius) var(--hiw-chat-radius) var(--hiw-chat-radius-tail);
      border: 1px solid var(--hiw-bubble-agent-border);
    }
    .hiw-chat-demo__bubble--agent a {
      color: var(--primary);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .hiw-chat-demo__bubble--agent a:hover {
      color: var(--primary-hover);
    }
    .hiw-chat-demo__bubble--agent a:focus-visible {
      outline: 2px solid var(--focus-ring-strong);
      outline-offset: 2px;
      border-radius: 2px;
    }
    .hiw-chat-demo__bubble--process-followup:not([hidden]) {
      animation: hiw-chat-step-in 0.4s ease forwards;
    }
    .hiw-chat-demo__bubble--customer {
      max-width: min(100%, var(--hiw-bubble-max-customer));
      background: var(--hiw-bubble-user-bg);
      color: var(--hiw-bubble-user-text);
      border-radius: var(--hiw-chat-radius) var(--hiw-chat-radius) var(--hiw-chat-radius-tail) var(--hiw-chat-radius);
    }
    .hiw-chat-demo__skeleton {
      align-self: flex-start;
      max-width: min(100%, var(--hiw-bubble-max-agent));
      padding: var(--hiw-space-3) var(--hiw-space-4) var(--hiw-space-4);
      background: var(--hiw-skeleton-bg);
      border: 1px solid var(--hiw-skeleton-border);
      border-radius: var(--hiw-chat-radius) var(--hiw-chat-radius) var(--hiw-chat-radius) var(--hiw-chat-radius-tail);
      display: flex;
      flex-direction: column;
      gap: var(--hiw-space-3);
    }
    .hiw-chat-demo__skeleton-label {
      font-size: var(--hiw-type-xs);
      font-weight: 600;
      color: var(--text-muted);
    }
    .hiw-chat-demo__sk-line {
      height: var(--hiw-space-2);
      border-radius: 4px;
      background: var(--hiw-sk-line-bg);
    }
    .hiw-chat-demo__sk-line--mid { width: 80%; }
    .hiw-chat-demo__sk-line--full { width: 100%; }
    .hiw-chat-demo__sk-line--short { width: 55%; }
    .hiw-chat-demo__sk-hint {
      font-size: var(--text-micro-size);
      font-style: italic;
      color: var(--text-muted);
    }
    .hiw-chat-demo__profile {
      align-self: flex-start;
      max-width: min(100%, var(--hiw-bubble-max-agent));
      width: 100%;
      box-sizing: border-box;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 14px;
      padding: var(--hiw-space-4) var(--hiw-space-5) var(--hiw-space-4);
    }
    .hiw-chat-demo__profile-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--hiw-space-2);
      margin-bottom: var(--hiw-space-3);
    }
    .hiw-chat-demo__profile-title {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: var(--hiw-type-md);
      color: var(--text);
      line-height: var(--text-nav-line-height);
    }
    .hiw-chat-demo__profile-badge {
      font-size: var(--text-micro-size);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: var(--hiw-space-2) var(--hiw-space-3);
      border-radius: 100px;
      background: var(--hiw-profile-badge-bg);
      color: var(--text-secondary);
      border: 1px solid var(--hiw-profile-badge-border);
    }
    .hiw-chat-demo__profile-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--hiw-space-3);
      padding: var(--hiw-space-2) 0;
      border-bottom: 1px solid var(--hiw-profile-row-divider);
      font-size: var(--text-nav-size-sm);
    }
    .hiw-chat-demo__profile-row:last-of-type {
      border-bottom: none;
    }
    .hiw-chat-demo__profile-k {
      color: var(--text-muted);
    }
    .hiw-chat-demo__profile-v {
      font-weight: 600;
      color: var(--text);
      text-align: right;
      line-height: var(--line-height-micro);
      max-width: 58%;
    }
    .hiw-chat-demo__profile-v--compliance {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      align-items: center;
      justify-content: flex-end;
    }
    .compliance-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .compliance-tag__info {
      position: relative;
      display: inline-flex;
      align-items: center;
      color: var(--text-muted);
      cursor: pointer;
      background: transparent;
      border: none;
      padding: 0;
    }
    .compliance-tag__info:focus-visible {
      outline: var(--focus-outline-width) solid var(--focus-ring);
      outline-offset: 2px;
      border-radius: var(--radius-ui);
    }
    .compliance-tag__info > svg {
      pointer-events: none;
    }
    .compliance-tag__tooltip {
      position: absolute;
      bottom: calc(100% + 6px);
      right: 50%;
      transform: translateX(50%);
      width: max-content;
      max-width: 220px;
      padding: 6px 10px;
      border-radius: 8px;
      background: var(--text);
      color: var(--surface);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.4;
      text-align: left;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
      z-index: 10;
    }
    .compliance-tag__info:hover .compliance-tag__tooltip,
    .compliance-tag__info:focus .compliance-tag__tooltip {
      opacity: 1;
    }
    .compliance-tag__name {
      font-weight: 600;
      font-size: inherit;
    }
    .compliance-tag__check {
      color: var(--accent, #22863a);
      flex-shrink: 0;
    }
    .hiw-chat-demo__profile-foot {
      font-size: var(--hiw-type-xs);
      color: var(--text-muted);
      line-height: var(--hiw-lh-micro);
      margin-top: var(--hiw-space-3);
      padding-top: var(--hiw-space-3);
      border-top: 1px solid var(--hiw-profile-foot-divider);
    }
    @media (prefers-reduced-motion: reduce) {
      .hiw-chat-demo__step,
      .hiw-chat-demo__step--visible {
        transition: none;
      }
      .hiw-chat-demo__step--visible {
        opacity: 1;
        max-height: none;
        overflow: visible;
        transform: none;
      }
      .hiw-chat-demo__bubble--process-followup:not([hidden]) {
        animation: none;
      }
    }
    /* Static / reduced-motion transcript: show full processing copy (scroll scrub does not run). */
    .hiw-chat-demo--static #hiw-chat-processing-profile {
      display: block !important;
    }
    .hiw-chat-demo--static #hiw-chat-demo-skeleton {
      display: none;
    }

    .site-footer {
      border-top: 1px solid var(--border);
      padding: 28px 24px 40px;
      background: var(--bg-app);
    }
    .site-footer__inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 16px 32px;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-nav-size-sm);
      color: var(--text-muted);
    }
    .site-footer a {
      color: var(--text-secondary);
      text-decoration: none;
    }
    .site-footer a:hover { text-decoration: underline; }
    .site-footer a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

    /* Hero scroll transformation (GSAP) */
    .hero-scroll-bleed {
      position: relative;
      width: auto;
      margin-left: calc(-1 * var(--page-margin));
      margin-right: calc(-1 * var(--page-margin));
      margin-top: var(--hero-to-hiw-gap);
      /* Match #zone1 / body --canvas so the hero → HIW seam is not two different neutrals */
      /* background: var(--canvas); */
      background: #ECEDF5;
      overflow-x: clip;
    }
    .hero-scroll-container {
      position: relative;
      /* Height set dynamically by verena-hero-scroll.js based on actual content. */
      height: 1600px;
      /* background-color: var(--canvas); */
      background-color: #ECEDF5; 
      overflow-x: clip;
      overflow-y: visible;
    }
    @media (max-width: 899px) {
      .hero-scroll-container {
        height: auto;
      }
    }
    /* Hero pricing cards: 8px grid (scoped). */
    #verena-hero-scroll {
      --hs-space-2: 8px;
      --hs-space-3: 12px;
      --hs-space-4: 16px;
      --hs-space-5: 20px;
      --hs-space-6: 24px;
    }
    /* GSAP pin wrapper: allow card motion to paint outside the pin box */
    #verena-hero-scroll .pin-spacer {
      overflow: visible !important;
    }
    .hero-scroll-pin {
      /* Viewport slice below sticky header; logo starts visually centered then settles to top (GSAP). */
      width: 100%;
      position: relative;
      z-index: 1;
      overflow: visible;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      padding-inline: 24px;
      padding-top: var(--space-3);
      padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
      box-sizing: border-box;
      /* Pin fills viewport minus header when GSAP fixes it; content flexes within. */
      min-height: calc(100svh - var(--site-header-h));
      height: auto;
    }
    .hero-scroll-pin__stack {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: var(--page-max);
      gap: 14px;
      box-sizing: border-box;
      overflow: visible;
      /* padding-top driven by verena-hero-scroll.js (Invictus-style lockup centering → tight stack). */
    }
    /*
      Logo uses GSAP y: 8vh → 0 (transform does not affect layout). Fixed stack gap keeps logo and
      intro separated during scrub without viewport-dependent overlap (tuned in browser preview).
    */
    #verena-hero-scroll:not(.hero-scroll--reduced) .hero-scroll-pin__stack {
      gap: 36px;
    }
    .hero-scroll-pin > .hero-scroll-pin__stack {
      flex-shrink: 1;
    }
    .scroll-pricing-micro-block {
      text-align: center;
      max-width: 36rem;
      margin-inline: auto;
      margin-bottom: var(--space-heading-to-block);
      padding-inline: 24px;
    }
    /* Section H2 uses global `.zone h2` scale; tighten gap to microcopy below. */
    #verena-plans h2#verena-plans-heading {
      margin-top: 0;
      margin-bottom: var(--space-2);
      text-align: center;
      width: min(36rem, 100%);
    }
    #verena-plans .scroll-pricing-micro-block .scroll-pricing-micro {
      margin-bottom: 4px;
    }
    /* Caption-style token explainer below pricing cards (same type treatment as former position under headline). */
    #verena-plans .scroll-pricing-tokens-micro {
      margin: var(--space-4) auto 0;
      max-width: 42rem;
      padding-inline: 24px;
      font-size: var(--text-caption-size);
      line-height: var(--line-height-micro);
      color: var(--text-muted);
      text-align: center;
    }
    #verena-plans .scroll-pricing-micro-block .scroll-pricing-info-micro {
      margin: var(--space-3) auto 0;
      max-width: 42rem;
      font-size: var(--text-caption-size);
      line-height: var(--line-height-micro);
      color: var(--text-muted);
      text-align: center;
    }
    .scroll-logo-group {
      position: relative;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      will-change: transform;
    }
    .scroll-logo {
      position: relative;
      z-index: 1;
      width: 320px;
      max-width: 100%;
      height: auto;
      pointer-events: none;
      display: block;
    }
    .scroll-pricing-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      align-content: center;
      gap: 16px;
      width: fit-content;
      max-width: min(1100px, 100%);
      margin-top: 0;
      margin-inline: auto;
      box-sizing: border-box;
      position: relative;
      z-index: 3;
    }
    .scroll-sub-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      flex: 1 1 min(200px, 100%);
      max-width: 320px;
      width: 320px;
      min-height: 0;
    }
    .scroll-sub-card > .subscription-card-inner--hero {
      flex: 1 1 auto;
      min-height: 0;
    }
    .subscription-card-inner {
      width: 100%;
      background: var(--card-mock-bg);
      border-radius: 14px;
      border: 1px solid var(--card-mock-border);
      overflow: hidden;
      font-family: var(--font-body);
      color: var(--card-mock-text);
      box-shadow: var(--card-shadow-lg), 0 0 80px var(--card-purple-glow);
    }
    .subscription-card-inner__accent {
      height: 4px;
      background: var(--primary);
    }
    .subscription-card-inner__body {
      padding: 28px 24px 24px;
    }
    .subscription-card-inner__tier {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: var(--text-subsection-size);
      line-height: var(--text-subsection-line-height);
      margin-bottom: 4px;
    }
    .subscription-card-inner__price-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 4px;
    }
    .subscription-card-inner__price {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: var(--text-section-size);
      line-height: var(--text-section-line-height);
    }
    .subscription-card-inner__period {
      font-size: var(--text-nav-size-md);
      color: var(--card-mock-muted);
    }
    .subscription-card-inner__annual {
      font-size: var(--text-caption-size);
      color: var(--card-mock-muted);
      margin-bottom: 24px;
    }
    .subscription-card-inner__features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 0;
      padding: 0;
    }
    .subscription-card-inner__features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: var(--text-nav-size-md);
      line-height: var(--text-link-line-height);
    }
    .subscription-card-inner__check {
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--primary);
    }
    .scroll-sub-cta {
      margin-top: 28px;
      width: 100%;
      box-sizing: border-box;
      min-height: 44px;
      padding: 12px 16px;
      border-radius: 100px;
      background: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: var(--font-h);
      font-weight: 600;
      font-size: var(--text-nav-size-md);
      letter-spacing: 0.03em;
      line-height: var(--text-card-title-line-height);
      color: var(--cta-text);
      text-decoration: none;
    }
    .scroll-sub-cta:hover {
      background: var(--primary-hover);
      color: var(--cta-text);
    }
    .scroll-sub-cta:focus-visible {
      outline: 2px solid var(--focus-ring-strong);
      outline-offset: 2px;
    }
    .subscription-card-inner--hero {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 0;
      box-shadow: var(--card-shadow);
    }
    /* Professional tier in #verena-plans: subtle primary border only (token: --pricing-plan-featured-border). */
    #verena-plans .subscription-card-inner--hero.subscription-card-inner--plan-featured {
      border-color: var(--pricing-plan-featured-border);
    }
    /* Recommended tier: primary border + soft glow + pill (tokens: --pricing-recommended-*). */
    .subscription-card-inner--hero.subscription-card-inner--hero-recommended {
      border-color: var(--pricing-recommended-border);
      box-shadow: var(--card-shadow), 0 0 36px var(--pricing-recommended-glow);
    }
    .subscription-card-inner__recommended-label {
      margin: 0;
      padding: var(--hs-space-3) var(--hs-space-4) 0;
      text-align: center;
      flex-shrink: 0;
    }
    /* Invisible duplicate of the pill reserves the same block size as the real “Recommended” row (reference: tier titles align). */
    .subscription-card-inner__recommended-pill--placeholder {
      visibility: hidden;
    }
    .subscription-card-inner__recommended-label--placeholder {
      user-select: none;
    }
    .subscription-card-inner__recommended-pill {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 100px;
      font-family: var(--font-h);
      font-size: var(--text-micro-size);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: var(--line-height-micro);
      background: var(--pricing-recommended-pill-bg);
      color: var(--pricing-recommended-pill-text);
      border: 1px solid var(--pricing-recommended-pill-border);
    }
    /* Grid: feature list stays compact; 1fr row stretches so cards share height; fixed gap above CTA. */
    .subscription-card-inner--hero .subscription-card-inner__body {
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto minmax(var(--hs-space-6), 1fr) auto;
      min-height: 0;
      padding: var(--hs-space-5) var(--hs-space-4) var(--hs-space-4);
    }
    .subscription-card-inner--hero .subscription-card-inner__tier {
      grid-row: 1;
      font-size: var(--text-body-size);
      line-height: var(--text-body-line-height);
    }
    .subscription-card-inner--hero .subscription-card-inner__price-row {
      grid-row: 2;
    }
    .subscription-card-inner--hero .subscription-card-inner__annual {
      grid-row: 3;
    }
    .subscription-card-inner--hero .subscription-card-inner__features {
      grid-row: 4;
      align-self: start;
      gap: var(--hs-space-3);
    }
    .subscription-card-inner--hero .subscription-card-inner__price {
      font-size: clamp(1.625rem, 5vw, 2rem);
      line-height: var(--text-section-line-height);
    }
    .subscription-card-inner--hero .subscription-card-inner__annual {
      margin-bottom: var(--hs-space-4);
    }
    .subscription-card-inner--hero .subscription-card-inner__features li {
      font-size: var(--text-nav-size-sm);
      gap: 6px;
    }
    .subscription-card-inner--hero .scroll-sub-cta {
      grid-row: 6;
      align-self: stretch;
      margin-top: 0;
      width: 100%;
      min-height: 44px;
      padding: 10px 14px;
      font-size: var(--text-nav-size-sm);
      line-height: var(--text-cta-line-height);
    }
    /* #verena-plans: ghost CTAs + neutral checks (reference: accent on border/label, not solid purple blocks). */
    #verena-plans .subscription-card-inner--hero .scroll-sub-cta {
      background: var(--pricing-cta-ghost-bg);
      border: 1px solid var(--pricing-cta-ghost-border);
      color: var(--pricing-cta-ghost-text);
    }
    #verena-plans .subscription-card-inner--hero .scroll-sub-cta:hover {
      background: var(--pricing-cta-ghost-hover-bg);
      border-color: var(--pricing-cta-ghost-hover-border);
      color: var(--pricing-cta-ghost-hover-text);
    }
    #verena-plans .subscription-card-inner__check {
      color: var(--pricing-feature-check);
    }
    @media (max-width: 719px) {
      .scroll-pricing-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }
      .scroll-sub-card {
        max-width: 340px;
        width: 100%;
        align-self: center;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-scroll-container,
      .hero-scroll-container.hero-scroll--reduced {
        height: auto !important;
      }
      .hero-scroll-pin {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }
      .scroll-logo-group {
        transform: none !important;
      }
      .hiw-intro-in-pin {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
      }
      .hero-scroll-pin__stack {
        padding-top: 0 !important;
      }
    }
    .hero-scroll-container.hero-scroll--reduced .hero-scroll-pin {
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
    }
    .hero-scroll-container.hero-scroll--reduced {
      height: auto !important;
    }
    .hero-scroll-container.hero-scroll--reduced .hiw-intro-in-pin {
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
    }
    .hero-scroll-container.hero-scroll--reduced .hero-scroll-pin__stack {
      padding-top: 0 !important;
    }

    .pricing-highlight {
      max-width: 420px;
      margin-top: clamp(20px, 3vw, 28px);
      background: var(--elevated);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
    }
    .pricing-highlight__accent {
      height: 4px;
      background: var(--primary);
    }
    .pricing-highlight__body {
      padding: 28px 24px 24px;
    }
    .pricing-highlight__label {
      font-size: var(--text-caption-size);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .pricing-highlight__price {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: var(--text-section-size);
      line-height: var(--text-section-line-height);
      color: var(--text);
      margin-bottom: 12px;
    }
    .pricing-highlight__period {
      font-size: var(--text-card-title-size);
      line-height: var(--text-card-title-line-height);
      font-weight: 600;
      color: var(--text-secondary);
    }
    .oauth-done-msg {
      margin-top: 10px;
    }
    .pricing-highlight__note {
      font-size: var(--text-link-size);
      color: var(--text-secondary);
      line-height: var(--text-body-line-height);
    }