:root {
        --green-cta: #246b22; /* ONE green for the Member App CTA (header pill + mobile drawer) */
        --bg: #f6f8f7;
        --bg-soft: #edf3f2;
        --surface: #ffffff;
        --text: #17324a;
        --muted: #5c7084;
        --line: rgba(23, 50, 74, 0.12);
        --blue: #1e5d8f;
        --navy2: #17324a;
        --blue-deep: #18466d;
        --green: #58b947;
        --green-deep: #3f9632;
        --shadow: 0 24px 60px rgba(24, 70, 109, 0.14);
      }

      * {
        box-sizing: border-box;
      }

      html {
        /* No smooth-scroll: on-load anchor jumps land instantly + accurately at
           scroll-margin-top; smooth-on-load animated past the offset inconsistently. */
        overflow-x: hidden;
      }

      body {
        margin: 0;
        font-family: "Segoe UI", "Avenir Next", Arial, sans-serif;
        color: var(--text);
        background-color: var(--bg);
        background-image:
          radial-gradient(circle 1100px at top left, rgba(88,185,71,0.16), transparent),
          radial-gradient(circle 1100px at top right, rgba(30,93,143,0.14), transparent),
          linear-gradient(180deg, #fbfdfc 0px, rgba(251,253,252,0) 1100px);
        background-repeat: no-repeat;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      img {
        max-width: 100%;
        display: block;
      }

      .container {
        width: min(1120px, calc(100% - 32px));
        margin: 0 auto;
      }

      .header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(251, 253, 252, 0.9);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
      }

      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 0;
      }

      .footer-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        padding: 28px 0;
      }

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

      /* Header layout: logo + nav links hug the left; CTA group (divider + Member App/Admin Portal)
         is pushed to the right via the divider's margin-left:auto. */
      .header-inner > .nav {
        flex: 1 1 auto;
      }

      .nav a,
      .btn {
        border-radius: 999px;
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        text-align: center;
      }
      /* Header nav must fit the 1120px container (footer nav keeps its own
       * spacing). Tighter horizontal padding + gap reclaims the ~144px the
       * 8 links + 2 pills otherwise spill into the page margins. */
      .header-inner > .nav {
        gap: 2px;
      }
      .header-inner > .nav a:not([style]) {
        padding-left: 11px;
        padding-right: 11px;
      }

      .nav a:hover {
        background: #fff;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .btn-primary {
        background: var(--blue);
        color: #fff;
      }

      .btn-secondary {
        background: #fff;
        border: 1px solid var(--line);
        color: var(--blue-deep);
      }

      .hero,
      .section,
      .cta {
        padding: 56px 0;
        scroll-margin-top: 93px;
      }
      .hero {
        padding-top: 24px;
      }
      .section {
        padding-top: 28px;
      }

      .hero-grid,
      .evidence-grid,
      .cta-grid {
        display: grid;
        gap: 32px;
      }

      .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
      }

      .eyebrow {
        display: inline-flex;
        padding: 10px 14px;
        border-radius: 999px;
        background: linear-gradient(
          135deg,
          rgba(88, 185, 71, 0.12),
          rgba(30, 93, 143, 0.14)
        );
        color: var(--blue-deep);
        font-size: 13px;
        font-weight: 700;
      }

      h1 {
        font-size: clamp(40px, 6vw, 64px);
        line-height: 1.05;
        margin: 20px 0 18px;
        text-wrap: balance;
      }

      h2 {
        font-size: clamp(30px, 4vw, 44px);
        line-height: 1.1;
        margin: 0;
        text-wrap: balance;
      }

      p {
        margin: 0;
      }

      .lede,
      .section-copy,
      .card p,
      .metric p,
      .list li,
      .footer-copy {
        color: var(--muted);
        line-height: 1.7;
        text-wrap: pretty;
      }

      .actions,
      .metrics,
      .cards {
        display: grid;
        gap: 16px;
      }

      .actions {
        grid-template-columns: repeat(2, max-content);
        margin-top: 28px;
        justify-content: center;
      }

      .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 34px;
      }

      .metric,
      .card,
      .panel,
      .evidence-panel {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--line);
        border-radius: 28px;
        box-shadow: var(--shadow);
      }

      .metric,
      .card {
        padding: 22px;
      }

      .metric strong,
      .card strong {
        display: block;
        margin-bottom: 8px;
        color: var(--blue-deep);
      }

      .panel {
        padding: 22px;
      }

      .dashboard {
        border-radius: 28px;
        background: #fff;
        border: 1px solid var(--line);
        padding: 24px;
      }

      .dashboard-top,
      .dashboard-bottom {
        display: grid;
        gap: 16px;
      }

      .dashboard-top {
        grid-template-columns: 1.1fr 0.9fr;
        margin-top: 20px;
      }

      .mini-card,
      .prompt-card,
      .mini-stat {
        border-radius: 22px;
        padding: 18px;
      }

      .mini-card,
      .mini-stat {
        background: var(--bg-soft);
      }

      .prompt-card {
        background: var(--blue-deep);
        color: #fff;
      }

      .chart {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;
        align-items: end;
        height: 120px;
        margin-top: 16px;
      }

      .bar {
        background: linear-gradient(180deg, var(--green), var(--blue));
        border-radius: 999px 999px 0 0;
      }

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

      .cards.cards-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      @media (max-width: 900px) {
        .cards.cards-4 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 480px) {
        .cards.cards-4 {
          grid-template-columns: 1fr;
        }
      }

      .section-head {
        max-width: 880px;
        margin-bottom: 32px;
      }

      .section-head p {
        margin-top: 14px;
      }

      .step,
      .tag {
        display: inline-flex;
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .step {
        background: var(--bg-soft);
        color: var(--blue-deep);
      }

      .tag {
        background: rgba(88, 185, 71, 0.12);
        color: var(--green-deep);
      }

      .card h3 {
        margin: 14px 0 10px;
        font-size: 24px;
      }

      .feature-grid,
      .audience-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }

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

      .evidence-grid {
        grid-template-columns: 0.95fr 1.05fr;
      }

      .evidence-panel.dark {
        background: var(--blue-deep);
        color: #fff;
        padding: 32px;
      }

      .evidence-panel.light {
        background: #fff;
        padding: 32px;
      }

      .list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 18px;
      }

      .list li {
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 14px;
        align-items: start;
      }

      .check {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(88, 185, 71, 0.14);
        color: var(--green-deep);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
      }

      .cta-box {
        border-radius: 36px;
        background: linear-gradient(
          135deg,
          var(--blue-deep),
          var(--blue),
          var(--green-deep)
        );
        color: #fff;
        padding: 40px;
        box-shadow: var(--shadow);
      }

      .cta-grid {
        grid-template-columns: 1fr auto;
        align-items: center;
      }

      .cta-actions {
        display: grid;
        gap: 12px;
      }

      .footer {
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.86);
      }

      .footer-copy {
        max-width: 1000px;
        text-align: center;
        /* NO white-space:nowrap — the crisis line is a full sentence and MUST
           wrap. Forcing nowrap overflowed the page by ~47px across the whole
           861–1080px tablet band (footer stacks at ≤860, so nowrap only bit
           in that window). Wrapping reads as a tidy centered 2-line note. */
      }

      .footer-inner .nav {
        gap: 28px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .footer-inner .nav a {
        padding: 6px 0;
        font-size: 13px;
        background: transparent;
        color: #000;
      }
      /* ~40px touch targets on mobile (P2 a11y) */
      @media (max-width: 640px) {
        .footer-inner .nav a { padding: 14px 12px; }
      }

      .footer-inner .nav a:hover {
        background: transparent;
        color: var(--navy2);
        opacity: 0.7;
      }

      .footer-inner > div > img,
      .footer-inner > div .logo,
      .footer-inner > div img {
        display: block;
        margin: 0 auto;
      }

      @media (max-width: 980px) {
        .hero-grid,
        .evidence-grid,
        .cta-grid,
        .dashboard-top,
        .cards,
        .feature-grid,
        .audience-grid,
        .metrics {
          grid-template-columns: 1fr;
        }

        .header-inner {
          flex-direction: column;
          align-items: flex-start;
        }
        .footer-inner {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
        .footer-inner > div {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }

      @media (max-width: 640px) {
        .hero,
        .section,
        .cta {
          padding: 56px 0;
        }

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

        .btn {
          width: 100%;
        }

        .cta-box {
          padding: 28px;
        }
      }

      /* Enhanced card icons + hover */
      .feat-icon,
      .aud-icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        flex-shrink: 0;
      }
      .card.feat-card,
      .card.aud-card {
        padding: 28px;
        transition:
          transform 0.22s ease,
          box-shadow 0.22s ease;
      }
      /* feat/aud card hover lives in the polish layer (see ~line 1400) — single source. */
      .card.feat-card h3,
      .card.aud-card h3 {
        margin: 0 0 10px;
        font-size: 20px;
      }
      .card.aud-card {
        display: flex;
        flex-direction: column;
      }

      /* ═══ MOBILE NAVIGATION ═══ */
      .nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 10px 8px;
        border-radius: 10px;
        transition: background 0.15s;
        z-index: 21;
      }
      .nav-toggle:hover {
        background: rgba(30, 93, 143, 0.07);
      }
      .nav-toggle .hb {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--navy2);
        border-radius: 2px;
        transition:
          transform 0.26s ease,
          opacity 0.18s ease,
          width 0.26s ease;
      }
      .nav-toggle .hb2 {
        width: 16px;
      }
      body.nav-open .nav-toggle .hb1 {
        transform: translateY(7px) rotate(45deg);
        width: 22px;
      }
      body.nav-open .nav-toggle .hb2 {
        opacity: 0;
      }
      body.nav-open .nav-toggle .hb3 {
        transform: translateY(-7px) rotate(-45deg);
      }

      .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10, 20, 35, 0.48);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 198;
        opacity: 0;
        transition: opacity 0.28s ease;
        pointer-events: none;
        visibility: hidden;
      }
      .nav-overlay.nav-overlay-active {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
      }

      .mobile-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(360px, 100vw);
        height: 100dvh;
        background: #fff;
        z-index: 199;
        transform: translateX(105%);
        /* visibility keeps the 11 drawer links OUT of the tab order when closed (WCAG 4.1.2/2.4.3);
           the delayed visibility transition preserves the slide-out animation. */
        visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.32s;
        flex-direction: column;
        box-shadow: -16px 0 48px rgba(10, 20, 35, 0.16);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
      }
      .mobile-nav.mob-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
      }

      .mob-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid var(--line);
        flex-shrink: 0;
      }
      .mob-nav-close {
        border: none;
        background: none;
        cursor: pointer;
        width: 44px;  /* 44px touch-target minimum */
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: var(--muted);
        transition:
          background 0.14s,
          color 0.14s;
      }
      .mob-nav-close:hover {
        background: var(--bg-soft);
        color: var(--navy2);
      }

      .mob-nav-links {
        display: flex;
        flex-direction: column;
        padding: 10px 12px;
        gap: 2px;
        flex: 1;
      }
      .mob-nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 13px 16px;
        font-size: 15px;
        font-weight: 600;
        color: var(--navy2);
        text-decoration: none;
        border-radius: 10px;
        transition: background 0.14s;
      }
      .mob-nav-links a:hover {
        background: var(--bg-soft);
      }
      .mob-sep {
        height: 1px;
        background: var(--line);
        margin: 8px 4px;
      }
      .mob-btn-outline {
        justify-content: center;
        border: 1.5px solid var(--navy2);
        margin-top: 4px;
      }
      .mob-btn-fill {
        justify-content: center !important;
        background: var(--blue-deep) !important;
        color: #fff !important;
        margin-top: 6px;
        border-radius: 10px !important;
      }
      .mob-btn-fill.is-primary {
        background: var(--green-cta) !important;
      }
      .mob-btn-fill.is-primary:hover {
        background: var(--green) !important;
      }
      /* Match the desktop solid-blue Client Login pill so the mobile
       * menu CTA looks like the same brand button, not a separate
       * tier. */
      .mob-btn-fill.is-secondary {
        background: var(--blue) !important;
        color: #fff !important;
        border: 1.5px solid var(--blue) !important;
      }
      .mob-btn-fill.is-secondary:hover {
        background: var(--blue-deep) !important;
      }
      .mob-btn-fill:hover {
        background: var(--navy2) !important;
      }

      /* ═══ 1120px — Hamburger threshold (raised from 980 so the 8-item
             primary nav only shows where it fits without clipping the CTAs) ═══ */
      @media (max-width: 1120px) {
        .nav {
          display: none;
        }
        .nav-toggle {
          display: flex;
        }
        .header-inner {
          flex-direction: row !important;
          align-items: center;
          padding: 14px 0;
        }
      }

      /* ═══ 768px — Tablet / Large Mobile ═══ */
      @media (max-width: 768px) {
        .hero {
          padding: 48px 0 32px;
        }

        /* Dashboard panel is secondary on mobile — phone video is the hero */
        .panel {
          display: none;
        }
        /* Show compact panel strip on mobile */
        .panel-mobile-strip {
          display: flex;
        }

        /* Demo section mobile */
        #demo-flex {
          gap: 28px !important;
          width: 100%;
          justify-content: center;
        }
        .demo-cards {
          max-width: 100% !important;
          width: 100%;
        }
        .demo-cards .metric {
          font-size: 13px;
        }
        /* On mobile the fixed 258×540 phone wrap was too wide for ~360px
         * viewports, forcing horizontal scroll and cropping the bezel.
         * Scale the wrap + the inner <video> down proportionally so the
         * mockup always fits with comfortable side padding.
         *
         * Also re-enable pointer-events on the wrap: iOS Safari blocks
         * autoplay under Low Power Mode / battery thresholds and shows
         * a giant ⏵ overlay; with pointer-events:none on the wrap the
         * user couldn't even tap to start it. Letting taps through
         * means the OS-rendered play button becomes functional. */
        .phone-mockup-wrap {
          margin: 0 auto;
          width: min(220px, 64vw) !important;
          height: min(460px, 134vw) !important;
          border-radius: 32px !important;
          pointer-events: auto !important;
        }
        .phone-mockup-wrap video {
          width: 105% !important;
          height: 102% !important;
          top: -1% !important;
          left: -2.5% !important;
        }

        /* Center store buttons row on mobile */
        .store-buttons {
          align-items: center !important;
          width: 100%;
        }
        .store-buttons > a {
          width: 100%;
          justify-content: center;
        }
        .store-buttons > div {
          justify-content: center;
          width: 100%;
        }

        /* Metrics: 2-col */
        .metrics {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          margin-top: 24px;
        }

        /* Audience: 2-col */
        .audience-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px;
        }

        /* CTA */
        .cta-box {
          text-align: center;
        }
        .cta-actions {
          align-items: center;
          justify-items: center;
          justify-content: center;
          width: 100%;
        }
        .cta-actions .btn {
          width: 100%;
          max-width: 300px;
          justify-self: center;
          margin: 0 auto;
        }

        /* Footer: center */
        .footer-inner {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center;
          gap: 20px;
        }
        .footer-inner > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }
        .footer-copy {
          max-width: 100%;
          text-align: center;
          white-space: normal;
        }
        /* Footer nav on mobile — keep visible (Privacy / Terms must be
         * reachable on mobile for legal compliance). Stack as a single
         * centered row of small links. */
        .footer-inner .nav {
          display: flex !important;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: 10px 18px;
        }
        .footer-inner .nav a {
          padding: 11px 10px; /* ~40px touch target on mobile (P2 a11y) */
          color: #000;
        }
      }

      /* ═══ 480px — Small Mobile ═══ */
      /* Force 1-col stacking for any 3-card grid below 640px so we never
       * leave an orphan 3rd card under a 2-col layout. */
      @media (max-width: 640px) {
        .metrics {
          grid-template-columns: 1fr;
        }
        .audience-grid {
          grid-template-columns: 1fr;
        }
      }

      /* Go deeper: keep all 3 cards on one row even on mobile — compact width, but
         a bit taller with larger text so they read as substantial cards. */
      @media (max-width: 640px) {
        .godeep-grid { align-items: stretch; }
        .godeep-grid .feat-card { padding: 20px 13px; }
        .godeep-grid .feat-card strong { font-size: 15px; line-height: 1.28; display: block; }
        .godeep-grid .feat-card p { font-size: 13px; line-height: 1.5; margin-top: 9px; }
      }
      @media (max-width: 560px) {
        .godeep-2col { grid-template-columns: 1fr !important; }
      }

      @media (max-width: 480px) {
        h1 {
          font-size: clamp(32px, 9vw, 44px);
        }
        h2 {
          font-size: clamp(22px, 7.5vw, 34px);
        }

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

        .actions {
          grid-template-columns: 1fr;
        }
        .btn {
          justify-content: center;
        }

        .section {
          padding: 24px 0 44px;
        }
        .section-head {
          margin-bottom: 18px;
        }

        .card.feat-card,
        .card.aud-card {
          padding: 20px;
        }

        .price-num {
          font-size: 52px !important;
        }

        .cta-box {
          padding: 28px 22px;
        }
      }

      /* ══ iPhone 15 Pro Hero Mockup ══ */
      .hero-phone-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .iphone-body {
        position: relative;
        width: 260px;
        height: 534px;
        border-radius: 44px;
        background: linear-gradient(
          148deg,
          #525252 0%,
          #272727 48%,
          #3e3e3e 100%
        );
        box-shadow:
          0 52px 104px rgba(10, 20, 40, 0.44),
          0 16px 36px rgba(10, 20, 40, 0.24),
          inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
          inset 0 -1px 0 rgba(0, 0, 0, 0.45),
          0 0 0 1px rgba(0, 0, 0, 0.42);
        padding: 1px 10px 4px 10px;
        flex-shrink: 0;
      }

      .iphone-screen {
        width: 100%;
        height: 100%;
        border-radius: 36px;
        background: #0d1520;
        overflow: hidden;
        position: relative;
      }

      .iphone-island {
        position: absolute;
        top: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 84px;
        height: 26px;
        background: #000;
        border-radius: 20px;
        z-index: 10;
      }

      .iphone-status {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        padding: 14px 22px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.92);
        z-index: 9;
        pointer-events: none;
      }

      .iphone-app {
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f0f4f8;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      .iphone-home {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 88px;
        height: 4px;
        background: rgba(0, 0, 0, 0.22);
        border-radius: 2px;
        z-index: 10;
        pointer-events: none;
      }

      /* Placeholder for demo-section phone when video is absent */
      .phone-placeholder {
        position: absolute;
        inset: 0;
        background: #16324a;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 13px;
        z-index: 0;
      }

      /* ════════════════════════════════════════════════════════════
         MULTI-PAGE ADDITIONS (mockup) — dropdown nav + shared blocks
         Builds on the existing tokens/components above. No overrides.
         ════════════════════════════════════════════════════════════ */

      /* Active nav state */
      .nav a.is-active {
        background: #fff;
        color: var(--blue-deep);
      }

      /* ── Desktop dropdown menus (Company ▾, etc.) ── */
      .nav-item {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .nav-item > .nav-trigger {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
      }
      .nav-trigger .caret {
        width: 9px;
        height: 9px;
        transition: transform 0.18s ease;
      }
      .nav-item:hover .nav-trigger .caret,
      .nav-item:focus-within .nav-trigger .caret {
        transform: rotate(180deg);
      }
      .dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        min-width: 230px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 8px;
        display: grid;
        gap: 2px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.18s ease,
          transform 0.18s ease,
          visibility 0.18s;
        z-index: 30;
      }
      .nav-item:hover .dropdown,
      .nav-item:focus-within .dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }
      .dropdown a {
        display: block;
        text-align: left;
        white-space: nowrap;
        padding: 10px 14px;
        border-radius: 11px;
        font-size: 14px;
        font-weight: 600;
        color: var(--navy2);
      }
      .dropdown a:hover {
        background: var(--bg-soft);
        color: var(--blue-deep);
      }
      .dropdown a small {
        display: block;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--muted);
        margin-top: 2px;
      }

      /* Mobile dropdown group label */
      .mob-group-label {
        padding: 14px 16px 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--muted);
      }

      /* ── Eyebrow variants for audience pages ── */
      /* Unified to the home-page gradient pill — the .green modifier now matches
         the base .eyebrow (soft green→blue gradient) so every hero pill is consistent. */
      .eyebrow.green {
        background: linear-gradient(
          135deg,
          rgba(88, 185, 71, 0.12),
          rgba(30, 93, 143, 0.14)
        );
        color: var(--blue-deep);
      }

      /* ── Audience split row (For Individuals / For Organizations) ── */
      .split-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }
      @media (max-width: 860px) {
        .split-2 { grid-template-columns: 1fr; }
      }
      .audience-tile {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 30px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .audience-tile h3 { margin: 0; font-size: 24px; }
      .audience-tile .tile-cta {
        margin-top: auto;
        font-weight: 700;
        color: var(--blue-deep);
        display: inline-flex;
        gap: 6px;
        align-items: center;
      }

      /* ── Evidence tier badges (Research) ── */
      .tier-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
      }
      .tier-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--blue-deep);
      }
      .tier-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--green);
      }
      .tier-dot.b { background: var(--blue); }
      .tier-dot.c { background: #c79a3a; }

      /* ── Pricing cards ── */
      .price-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        align-items: stretch;
      }
      @media (max-width: 860px) {
        .price-grid { grid-template-columns: 1fr; }
      }
      .price-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 34px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .price-card.featured {
        border: 1.5px solid var(--green);
        position: relative;
      }
      /* Single-plan pages: keep the green-border emphasis but drop the
         "Most popular" ribbon (nothing to be most-popular among). */
      .price-card.featured.no-ribbon::before { content: none; }
      /* Organizations card: blue border matching its pill (color-codes the two audiences). */
      .price-card.featured-org { border: 1.5px solid var(--blue); position: relative; }
      /* Footer legal/utility row (Contact · Privacy · Terms) directly under the primary nav */
      .footer-legal { margin-top: 10px; font-size: 13px; color: var(--muted); opacity: 0.85; }
      .footer-legal a { color: var(--muted); text-decoration: none; display: inline-block; padding: 6px 4px; }
      .footer-legal a:hover { text-decoration: underline; color: var(--blue-deep); }
      .price-card.featured::before {
        content: "Most popular";
        position: absolute;
        top: -12px;
        left: 34px;
        background: var(--green-deep);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        padding: 5px 12px;
        border-radius: 999px;
      }
      .price-num {
        font-size: 56px;
        font-weight: 800;
        line-height: 1;
        margin: 12px 0 4px;
        color: var(--navy2);
      }
      .price-num small {
        font-size: 16px;
        font-weight: 600;
        color: var(--muted);
      }

      /* ── Safety callout strip ── */
      .safety-strip {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 24px;
        padding: 22px 26px;
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(30,93,143,0.10), rgba(88,185,71,0.10));
        border: 1px solid var(--line);
      }
      .safety-strip strong { color: var(--blue-deep); }

      /* ── Generic page-hero (non-home) ── */
      .page-hero { padding: 40px 0 12px; }
      .page-hero h1 { font-size: clamp(34px, 5vw, 52px); }
      .page-hero .lede { max-width: 680px; margin-top: 16px; font-size: 18px; }

      /* ── Admin monitor showcase frame (Apple-style dark display) ── */
      .monitor-wrap { display:flex; flex-direction:column; align-items:center; }
      .monitor {
        width: min(880px, 100%);
        background: linear-gradient(145deg, #3a3a3c, #1c1c1e);
        border-radius: 20px;
        padding: 12px;
        box-shadow:
          0 44px 96px rgba(10, 20, 40, 0.40),
          inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
          0 0 0 1px rgba(0, 0, 0, 0.4);
      }
      .monitor-screen {
        position: relative;
        aspect-ratio: 16 / 10;
        border-radius: 11px;
        background: #0d1520;
        overflow: hidden;
      }
      .monitor-bar {
        height: 32px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 13px;
        background: rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .monitor-dot { width: 11px; height: 11px; border-radius: 50%; }
      .monitor-neck { width: 58px; height: 16px; background: linear-gradient(180deg, #3a3a3c, #262628); }
      .monitor-base { width: 190px; height: 9px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #2a2a2c, #1c1c1e); box-shadow: 0 8px 18px rgba(10,20,40,0.30); }

      /* ════════════════════════════════════════════════════════════════════
         PROFESSIONAL ELEVATION LAYER — "calm clinical editorial"
         Visual upgrades only (fonts, type scale, depth, motion, interactivity).
         Appended last so it refines the base without breaking layout grids.
         ════════════════════════════════════════════════════════════════════ */

      :root {
        --font-display: "Fraunces", Georgia, "Times New Roman", serif;
        --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
        --radius: 22px;
        --radius-sm: 14px;
        --shadow-xs: 0 1px 2px rgba(16, 42, 67, 0.05), 0 2px 8px rgba(16, 42, 67, 0.05);
        --shadow-sm: 0 2px 6px rgba(16, 42, 67, 0.09), 0 14px 34px rgba(16, 42, 67, 0.10);
        --shadow-md: 0 10px 24px rgba(16, 42, 67, 0.09), 0 26px 60px rgba(24, 70, 109, 0.12);
        --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
      }

      /* ── Base typography ── */
      body {
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        letter-spacing: -0.006em;
      }
      h1, h2, h3, .price-num {
        font-family: var(--font-display);
        font-weight: 560;
        letter-spacing: -0.018em;
        text-wrap: balance;
      }
      h1 { line-height: 1.03; font-weight: 580; }
      h2 { line-height: 1.1; }
      h3 { letter-spacing: -0.012em; }
      .lede {
        font-size: clamp(17px, 1.6vw, 20px);
        line-height: 1.6;
        max-width: 74ch;
        color: var(--muted);
      }
      .section-copy { font-size: 16.5px; line-height: 1.65; max-width: 52rem; text-wrap: pretty; }
      ::selection { background: rgba(88, 185, 71, 0.22); }

      /* ── Atmospheric depth: faint grain + soft hero glow ── */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.5;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
      }
      .header, main, .footer { position: relative; z-index: 1; }

      /* ── Header refinement ── */
      .header {
        background: rgba(251, 253, 252, 0.78);
        backdrop-filter: saturate(140%) blur(16px);
        -webkit-backdrop-filter: saturate(140%) blur(16px);
        transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
      }
      .header.scrolled {
        background: rgba(251, 253, 252, 0.92);
        box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(16, 42, 67, 0.06);
      }
      .nav a { transition: background 0.16s var(--ease), color 0.16s var(--ease); }

      /* ── Buttons ── */
      .btn {
        font-family: var(--font-sans);
        font-weight: 650;
        letter-spacing: -0.006em;
        transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), opacity 0.18s;
        will-change: transform;
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--blue), var(--blue-deep));
        box-shadow: 0 6px 18px rgba(30, 93, 143, 0.28);
      }
      .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 93, 143, 0.34); }
      .btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(30, 93, 143, 0.3); }
      .btn:focus-visible, .nav a:focus-visible, a.card:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
      }

      /* ── Eyebrow / tag / step pills ── */
      .eyebrow {
        font-size: 12.5px;
        letter-spacing: 0.02em;
        padding: 9px 15px;
        border: 1px solid rgba(30, 93, 143, 0.12);
        box-shadow: var(--shadow-xs);
      }
      .tag, .step {
        font-size: 11px;
        letter-spacing: 0.1em;
      }

      /* ── Cards: refined surface + tactile hover + clickable affordance ── */
      .metric, .card, .panel, .evidence-panel, .audience-tile, .price-card, .dashboard {
        border-radius: var(--radius);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        background: #ffffff;
      }
      .card.feat-card, .card.aud-card, .audience-tile, .price-card {
        position: relative;
        transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease);
      }
      .card.feat-card:hover, .card.aud-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: rgba(30, 93, 143, 0.22);
      }
      /* Anything that is a link card gets the pointer + a reveal-on-hover arrow */
      a.card { cursor: pointer; color: inherit; }
      a.card.feat-card::after {
        content: "→";
        position: absolute;
        top: 22px;
        right: 24px;
        font-size: 18px;
        font-weight: 700;
        color: var(--blue);
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
      }
      a.card.feat-card:hover::after { opacity: 1; transform: translateX(0); }
      .card h3 { font-size: 21px; }
      .feat-icon, .aud-icon {
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(16, 42, 67, 0.05);
      }
      a.card.feat-card:hover .feat-icon { transform: scale(1.04); transition: transform 0.24s var(--ease); }

      /* ── Section rhythm (desktop; mobile restored below) ── */
      .section { padding-top: 64px; padding-bottom: 64px; }
      /* Optional clean section demarcation: an edge-faded hairline that sits ON the
         page gradient (a line, not a fill) — never a solid band. */
      .section--ruled { position: relative; padding-top: 60px !important; }
      .section--ruled::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(23, 50, 74, 0.08) 18%, rgba(23, 50, 74, 0.08) 82%, transparent);
      }
      .hero { padding-top: 40px; }
      .section-head { margin-bottom: 40px; }
      .section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }

      /* ── Evidence / CTA / pricing polish ── */
      .evidence-panel.dark, .cta-box { box-shadow: 0 26px 64px rgba(13, 31, 45, 0.28); }
      .cta-box { border-radius: 32px; }
      .price-card.featured { box-shadow: 0 18px 48px rgba(63, 150, 50, 0.18); }
      .price-num { font-weight: 600; letter-spacing: -0.03em; }

      /* ── Footer refinement ── */
      .footer { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); }
      .footer-inner .nav a { font-weight: 550; transition: opacity 0.16s; }

      /* ── Scroll-reveal motion (JS adds .reveal-init then .reveal-in) ── */
      @media (prefers-reduced-motion: no-preference) {
        .reveal-init { opacity: 0; transform: translateY(12px); }
        .reveal-in {
          opacity: 1;
          transform: none;
          transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
        }
      }

      /* ── Restore comfortable mobile spacing (after desktop overrides) ── */
      @media (max-width: 640px) {
        .section { padding-top: 40px; padding-bottom: 44px; }
        .section-head { margin-bottom: 24px; }
        .hero { padding-top: 28px; }
      }

      /* ── Elegant draft/placeholder flag (replaces loud dashed banners) ── */
      .draft-wrap {
        position: relative;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        padding: 26px 30px;
      }
      .draft-wrap::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #e6c25a, #c79a3a);
      }
      .draft-flag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #8a6212;
        background: rgba(199, 154, 58, 0.12);
        padding: 5px 12px;
        border-radius: 999px;
        margin-bottom: 14px;
      }

      /* ── Centered page heroes (detail pages use .hero > .section-head) ── */
      .hero .section-head { text-align: center; margin-left: auto; margin-right: auto; }
      .hero .section-head h1 { font-size: clamp(38px, 5.2vw, 56px); }
      .hero .section-head .lede { margin-left: auto; margin-right: auto; }
      .hero .section-head .actions { justify-content: center; }

      /* ── Dashboard preview: progress bar + bottom stat row (Image #15) ── */
      .progress { height: 8px; background: rgba(16, 42, 67, 0.10); border-radius: 999px; margin-top: 12px; overflow: hidden; }
      .progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--blue)); }
      .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
      .dash-stats .mini-stat { padding: 14px; }
      .mini-stat strong { display: block; color: var(--blue-deep); font-size: 13px; margin-bottom: 3px; }
      .mini-stat span { font-size: 12.5px; color: var(--muted); }
      @media (max-width: 480px) { .dash-stats { grid-template-columns: 1fr; } }

      /* ── Audience nav buttons (green=member, blue=org) — clearly redirects, not a toggle ── */
      .btn-member { background: linear-gradient(135deg, #58b947, #3f9632); color: #fff; box-shadow: 0 6px 18px rgba(63,150,50,0.28); }
      .btn-member:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(63,150,50,0.34); }
      .btn-org { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: 0 6px 18px rgba(30,93,143,0.28); }
      .btn-org:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30,93,143,0.34); }


      /* ════ ACCESSIBILITY / CONTRAST FIXES (WCAG AA) ════
         NOTE: this :root block INTENTIONALLY OVERRIDES the base tokens above
         (--green-deep #3f9632→#2d7025, --muted #5c7084→#4a5568) for AA contrast.
         These are the FINAL values everywhere; the earlier definitions are the
         pre-audit originals kept for history. Trace tokens from here first. */
      :root { --green-deep: #2d7025; --muted: #4a5568; }
      .btn-member { background: linear-gradient(135deg, #2f7d27, #236a20); box-shadow: 0 6px 18px rgba(35,106,32,0.30); }
      .btn-member:hover { box-shadow: 0 12px 28px rgba(35,106,32,0.38); }
      .cta-box h2, .cta-box p { text-shadow: 0 1px 2px rgba(10,25,40,0.22); }
      .nav-toggle { padding: 12px 11px; }
      .nav-toggle:focus-visible, .mob-nav-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
      .skip-link { position: absolute; left: 12px; top: -52px; z-index: 300; background: var(--navy2); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none; transition: top 0.15s ease; }
      .skip-link:focus { top: 0; outline: 2px solid var(--green); outline-offset: 2px; }

      /* visually-hidden but screen-reader-available */
      .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

      /* ════ BRAND LOCKUP (monogram + crisp HTML wordmark) ════ */
      .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
      .brand-mark { height: 42px; width: auto; display: block; }
      .brand-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
      .brand-wordmark .bw1 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy2); }
      .brand-wordmark .bw2 { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-deep); }
      .header .brand-wordmark { display: none; }  /* header = monogram only when nav is dense; wordmark returns on wide screens (F-015) */
      @media (min-width: 1360px) {
        .header .brand-wordmark { display: flex; }
        .header .brand { flex-shrink: 0; margin-right: 8px; }
        .header .brand-wordmark .bw1,
        .header .brand-wordmark .bw2 { white-space: nowrap; }
        /* At ≥1360 the wordmark (~119px) rejoins the lockup inside the fixed
           1120 container, which pushed the nav 12px past the container edge
           (invisible — absorbed by the wide side margins — but not clean).
           Reclaim it with a 2px-per-side nav-padding trim, scoped to this
           range so the 1122–1359 monogram band keeps its roomier 11px. */
        .header-inner > .nav a:not([style]) { padding-left: 9px; padding-right: 9px; }
      }

      /* value-forward dashboard stats */
      .dash-stats .mini-stat { display: flex; flex-direction: column; gap: 3px; }
      .stat-val { font-size: 20px; font-weight: 800; color: var(--navy2); line-height: 1; letter-spacing: -0.01em; }
      .stat-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.3; }

      /* Home showcase: the admin demo now fluid-scales (JS .demo-fit) so it fits
         below the phone on tablet/mobile instead of being hidden. */
      @media (max-width: 1000px) {
        #app-showcase { overflow-x: hidden; }
      }

      /* ────────────────────────────────────────────────────────────────
         Consistency classes — single source for treatments that were
         previously repeated as inline styles across every page.
         On-dark CTA buttons (inside the gradient .cta-box) + tag colors.
         ──────────────────────────────────────────────────────────────── */
      .btn-on-dark { background: #fff; color: var(--blue-deep); }
      .btn-ghost-dark { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.4); } /* 0.10 fill: white 14px text ≥4.5:1 over the CTA gradient's green end (WCAG AA) */
      .tag.tag-org { background: rgba(30,93,143,0.12); color: var(--blue-deep); }
      .tag.tag-on-dark { background: rgba(255,255,255,0.16); color: #fff; }