/* ============================================
   DESIGN TOKENS - sourced from app_colors.dart / app_theme.dart
   ============================================ */
    :root {
      /* Primary website palette */
      --av-primary: #006C63;
      --av-primary-hover: #005E56;
      --av-primary-pressed: #004B45;
      --av-aqua: #00B8B0;
      --av-aqua-bright: #00C0B0;
      --av-vault-blue: #185098;
      --av-vault-blue-light: #1868A0;
      --av-medical-sky: #9CCFF0;
      --av-paper: #FFFFFF;
      --av-bg: #F6FAF8;
      --av-bg-subtle: #EEF5F2;
      --av-text: #071615;
      --av-text-muted: #334B47;
      --av-text-soft: #596D68;
      --av-border: #CAD8D4;
      --av-border-subtle: #E1EAE7;

      /* Dark website palette */
      --av-dark-bg: #0B1113;
      --av-dark-surface: #111A1C;
      --av-dark-card: #1B2729;
      --av-dark-elevated: #243234;
      --av-dark-border: #3B4D49;
      --av-dark-text: #F4FAF8;
      --av-dark-text-muted: #C7D5D1;
      --av-dark-primary: #69DDD2;
      --av-dark-primary-hover: #86E8DF;
      --av-dark-secondary: #9CCFF0;

      /* Semantic */
      --sem-success-text: #1F7A4D;
      --sem-success-bg: #DDF6E8;
      --sem-warning-text: #8A4D00;
      --sem-warning-bg: #FFF0D2;
      --sem-error-text: #B3263B;
      --sem-error-bg: #FDE7EA;
      --sem-info-text: #1E6F9F;
      --sem-info-bg: #E2F2FB;

      /* Spacing scale */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 16px;
      --sp-4: 24px;
      --sp-5: 32px;
      --sp-6: 48px;
      --sp-7: 64px;
      --radius-card: 8px;
      --radius-btn: 8px;
      --radius-panel: 12px;

      --ease: cubic-bezier(.22, 1, .36, 1);
      --font: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Tamil", Arial, sans-serif;
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

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

    html {
      scroll-behavior: smooth;
    }

    /* Keep anchor targets clear of the 72px fixed nav on native fragment jumps */
    [id] {
      scroll-margin-top: 84px;
    }

    body {
      background: var(--av-bg);
      color: var(--av-text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

    ul {
      list-style: none;
    }

    button {
      border: none;
      cursor: pointer;
      font-family: inherit;
      background: none;
    }

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

    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    ::selection {
      background: var(--av-bg-subtle);
      color: var(--av-primary);
    }

    :focus-visible {
      outline: 2.5px solid var(--av-primary);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 2000;
      transform: translateY(-150%);
      background: var(--av-text);
      color: #fff;
      padding: 10px 14px;
      border-radius: var(--radius-btn);
      font-weight: 600;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    html.icons-not-ready .material-symbols-outlined {
      color: transparent !important;
    }

    /* ============================================
   LAYOUT
   ============================================ */
    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .wrap-narrow {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 24px;
    }

    section {
      position: relative;
    }

    .eyebrow {
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--av-primary);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--av-aqua);
      border-radius: 50%;
    }

    .eyebrow.on-dark {
      color: var(--av-dark-primary);
    }

    .eyebrow.on-dark::before {
      background: var(--av-dark-primary);
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--av-text);
      font-weight: 600;
      letter-spacing: 0;
    }

    h1 {
      font-size: clamp(2.1rem, 4.4vw, 3.2rem);
      line-height: 1.1;
    }

    h2 {
      font-size: clamp(1.7rem, 3vw, 2.2rem);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    h3 {
      font-size: 1.15rem;
      line-height: 1.35;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .lede {
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      color: var(--av-text-muted);
      max-width: 620px;
      line-height: 1.55;
    }

    .section-head {
      max-width: 620px;
      margin-bottom: 48px;
    }

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

    /* ============================================
   BUTTONS
   ============================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 24px;
      border-radius: var(--radius-btn);
      font-weight: 600;
      font-size: 0.96rem;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.2s ease;
      white-space: nowrap;
      max-width: 100%;
      box-sizing: border-box;
    }

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

    .btn-primary:hover {
      background: var(--av-primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(0, 108, 99, 0.22);
    }

    .btn-primary:active {
      background: var(--av-primary-pressed);
    }

    .btn-primary-dark {
      background: var(--av-dark-primary);
      color: #05201D;
    }

    .btn-primary-dark:hover {
      background: var(--av-dark-primary-hover);
      transform: translateY(-1px);
    }

    .btn-secondary {
      background: transparent;
      color: var(--av-primary);
      border: 1.5px solid var(--av-border);
    }

    .btn-secondary:hover {
      border-color: var(--av-primary);
      background: var(--av-bg-subtle);
    }

    .btn-secondary.on-dark {
      color: var(--av-dark-text);
      border-color: var(--av-dark-border);
    }

    .btn-secondary.on-dark:hover {
      border-color: var(--av-dark-primary);
      color: var(--av-dark-primary);
      background: rgba(105, 221, 210, 0.08);
    }

    .btn-sm {
      min-height: 40px;
      padding: 0 18px;
      font-size: 0.88rem;
    }

    .btn-icon {
      font-size: 1.1rem;
      line-height: 0;
      transition: transform 0.25s var(--ease);
    }

    .btn:hover .btn-icon {
      transform: translateX(3px);
    }

    /* ============================================
   NAVIGATION
   ============================================ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5%;
      background: rgba(246, 250, 248, 0.82);
      backdrop-filter: blur(12px) saturate(160%);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s ease, background 0.3s ease;
    }

    nav.scrolled {
      border-bottom-color: var(--av-border-subtle);
      background: rgba(246, 250, 248, 0.95);
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .header-logo {
      height: 36px;
      width: 36px;
      border-radius: 8px;
      object-fit: cover;
    }

    .logo-text {
      font-size: 1.25rem;
      font-weight: 700;
      display: flex;
    }

    .logo-ayu {
      color: var(--av-primary);
    }

    .logo-vault {
      color: var(--av-vault-blue);
    }

    .nav-links {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }

    .nav-links .nav-item {
      display: inline-block;
      font-weight: 500;
      font-size: 0.92rem;
      color: var(--av-text-muted);
      position: relative;
      padding: 6px 0;
      margin-right: clamp(18px, 2.2vw, 32px);
      transition: color 0.2s ease;
    }

    .nav-links .nav-item:last-of-type {
      margin-right: 0;
    }

    .nav-links .nav-item::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 0;
      background: var(--av-aqua);
      transition: width 0.25s var(--ease);
    }

    .nav-links .nav-item:hover {
      color: var(--av-text);
    }

    .nav-links .nav-item:hover::after,
    .nav-links .nav-item[aria-current="page"]::after {
      width: 100%;
    }

    .nav-links .nav-item[aria-current="page"] {
      color: var(--av-text);
    }

    .nav-cta-group {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-left: clamp(18px, 2.2vw, 32px);
    }

    .mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }

    .mobile-toggle .material-symbols-outlined {
      font-size: 26px;
      color: var(--av-text);
    }

    .mobile-menu {
      position: fixed;
      inset: 72px 0 0 0;
      background: var(--av-bg);
      z-index: 999;
      padding: 16px 6% 40px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transform: translateY(-12px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
      overflow-y: auto;
    }

    .mobile-menu.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-menu a {
      padding: 16px 4px;
      font-size: 1.1rem;
      font-weight: 500;
      border-bottom: 1px solid var(--av-border-subtle);
    }

    .mobile-menu a[aria-current="page"] {
      color: var(--av-primary);
      font-weight: 700;
    }

    .mobile-menu .btn {
      margin-top: 18px;
      width: 100%;
    }

    /* ============================================
   HERO
   ============================================ */
    .hero {
      position: relative;
      padding: 140px 0 80px;
      background:
        radial-gradient(ellipse 800px 460px at 82% -8%, rgba(0, 184, 176, 0.10), transparent 60%),
        radial-gradient(ellipse 640px 460px at 0% 8%, rgba(24, 80, 152, 0.07), transparent 60%);
      overflow: hidden;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 40px;
      align-items: center;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    .hero h1 {
      margin-bottom: 20px;
    }

    .hero h1 .accent {
      color: var(--av-primary);
    }

    .hero .lede {
      margin-bottom: 30px;
    }

    .hero-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    @media (max-width:480px) {
      .hero-ctas {
        flex-direction: column;
      }

      .hero-ctas .btn {
        width: 100%;
      }
    }

    .hero-visual {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 540px;
    }

    .schematic-ring {
      position: absolute;
      width: 460px;
      height: 460px;
      border-radius: 50%;
      border: 1px dashed var(--av-border);
      opacity: 0.6;
      animation: spin-slow 70s linear infinite;
    }

    .schematic-ring.r2 {
      width: 560px;
      height: 560px;
      opacity: 0.35;
      animation-duration: 100s;
      animation-direction: reverse;
    }

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

    .phone-mock {
      position: relative;
      width: 264px;
      max-width: 78vw;
      aspect-ratio: 264/540;
      background: linear-gradient(155deg, #3a3d42 0%, #1a1c1f 18%, #0c0d0f 50%, #1a1c1f 82%, #3a3d42 100%);
      border-radius: 46px;
      padding: 3px;
      box-shadow:
        0 36px 72px -18px rgba(7, 22, 21, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .js-reveal-active .phone-mock {
      opacity: 0;
      transform: translateY(24px) scale(0.97);
      animation: rise-in 0.8s var(--ease) 0.1s forwards;
    }

    @keyframes rise-in {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* side buttons - purely decorative, suggest volume + power */
    .phone-mock::before {
      content: '';
      position: absolute;
      left: -2px;
      top: 19%;
      width: 2px;
      height: 7%;
      background: linear-gradient(90deg, #0c0d0f, #2a2c2f);
      border-radius: 2px 0 0 2px;
    }

    .phone-mock::after {
      content: '';
      position: absolute;
      left: -2px;
      top: 30%;
      width: 2px;
      height: 11%;
      background: linear-gradient(90deg, #0c0d0f, #2a2c2f);
      border-radius: 2px 0 0 2px;
    }

    .phone-mock .side-button-right {
      position: absolute;
      right: -2px;
      top: 21%;
      width: 2px;
      height: 10%;
      background: linear-gradient(270deg, #0c0d0f, #2a2c2f);
      border-radius: 0 2px 2px 0;
    }

    .phone-screen {
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #FFFFFF 0%, #F0F8F8 58%, #DDEDF7 100%);
      border-radius: 43px;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.9);
    }

    .phone-notch {
      position: absolute;
      top: 9px;
      left: 50%;
      transform: translateX(-50%);
      width: 34%;
      height: 18px;
      background: #0a0a0c;
      border-radius: 14px;
      z-index: 5;
    }

    .phone-notch::after {
      content: '';
      position: absolute;
      right: 14%;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1c2230;
      box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.04);
    }

    .phone-home-indicator {
      position: absolute;
      bottom: 7px;
      left: 50%;
      transform: translateX(-50%);
      width: 30%;
      height: 4px;
      background: rgba(7, 22, 21, 0.55);
      border-radius: 3px;
      z-index: 5;
    }

    .phone-screen-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 18px;
      text-align: center;
      gap: 12px;
    }

    .phone-placeholder-icon {
      width: 58px;
      height: 58px;
      border-radius: 14px;
      background: var(--av-bg-subtle);
      color: var(--av-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

    .phone-placeholder-icon .material-symbols-outlined {
      font-size: 30px;
    }

    .phone-screen-content p.ph-title {
      font-weight: 700;
      color: var(--av-text);
      font-size: 0.96rem;
    }

    .phone-screen-content p.ph-sub {
      font-size: 0.78rem;
      color: var(--av-text-soft);
      max-width: 185px;
    }

    .phone-screenshot-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }


    .annot {
      display: none;
      position: absolute;
      z-index: 4;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--av-vault-blue);
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(6px);
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid var(--av-border);
      align-items: center;
      gap: 6px;
      opacity: 1;
      transform: translateX(0);
      box-shadow: 0 8px 22px rgba(7, 22, 21, 0.14);
      white-space: nowrap;
      max-width: none;
    }

    .js-reveal-active .annot {
      opacity: 0;
      transform: translateX(-8px);
    }

    .js-reveal-active .annot.a2 {
      transform: translateX(8px);
    }

    .annot::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--av-aqua);
      flex-shrink: 0;
    }

    .annot.a1 {
      top: 13%;
      left: 2%;
    }

    .annot.a2 {
      top: 42%;
      right: 2%;
    }

    .annot.a3 {
      bottom: 16%;
      left: 2%;
    }

    .js-reveal-active .annot.a1 {
      animation: fade-slide 0.55s var(--ease) 1.0s forwards;
    }

    .js-reveal-active .annot.a2 {
      animation: fade-slide-r 0.55s var(--ease) 1.25s forwards;
    }

    .js-reveal-active .annot.a3 {
      animation: fade-slide 0.55s var(--ease) 1.5s forwards;
    }

    @keyframes fade-slide {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fade-slide-r {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Annotation pills are decorative only. They are hidden by default (see
   .annot{display:none} above) and only switched on at very wide desktop
   widths where there's genuine room for them outside the phone/text columns.
   This is intentionally an opt-IN (min-width), not an opt-out (max-width),
   so a caching issue or unexpected viewport can never cause them to show
   somewhere they'd overlap or run off the page. */
    @media (min-width:1340px) {
      .annot {
        display: flex;
      }
    }

    @media (max-width:980px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        order: 1;
      }

      .hero-visual {
        order: 2;
        min-height: 420px;
      }

      .schematic-ring {
        width: 320px;
        height: 320px;
      }

      .schematic-ring.r2 {
        width: 380px;
        height: 380px;
      }
    }

    @media (max-width:560px) {
      .hero {
        padding-bottom: 56px;
      }

      .hero-grid {
        gap: 22px;
      }

      .hero .lede {
        margin-bottom: 22px;
      }

      .hero-ctas {
        margin-bottom: 10px;
      }

      .hero-visual {
        min-height: 360px;
      }

      .phone-mock {
        width: min(236px, 68vw);
      }

      .schematic-ring {
        width: 280px;
        height: 280px;
      }

      .schematic-ring.r2 {
        width: 330px;
        height: 330px;
      }
    }

    /* ============================================
   TRUST STRIP
   ============================================ */
    .trust-strip {
      background: var(--av-dark-bg);
      padding: 0;
    }

    .trust-strip-inner {
      display: flex;
      flex-wrap: wrap;
    }

    .trust-pill {
      flex: 1;
      min-width: 200px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 22px 20px;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 0.86rem;
      color: var(--av-dark-text-muted);
      font-weight: 500;
    }

    .trust-pill:last-child {
      border-right: none;
    }

    .trust-pill .material-symbols-outlined {
      color: var(--av-dark-primary);
      font-size: 20px;
      flex-shrink: 0;
    }

    @media (max-width:900px) {
      .trust-pill {
        min-width: 48%;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
    }

    @media (max-width:480px) {
      .trust-pill {
        min-width: 100%;
      }
    }

    /* ============================================
   PROBLEM SECTION
   ============================================ */
    .problem-section {
      padding: 96px 0 88px;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 56px;
      align-items: start;
      margin-top: 44px;
    }

    .chaos-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .chaos-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 4px;
      border-bottom: 1px solid var(--av-border-subtle);
      opacity: 1;
    }

    .js-reveal-active .chaos-item {
      opacity: 0;
      transform: translateY(12px);
    }

    .chaos-item .ci-icon {
      width: 42px;
      height: 42px;
      border-radius: var(--radius-card);
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--av-text-soft);
    }

    .chaos-item h3 {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--av-text);
      margin-bottom: 3px;
    }

    .chaos-item p {
      font-size: 0.9rem;
      color: var(--av-text-muted);
    }

    .problem-callout {
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-panel);
      padding: 40px;
      box-shadow: 0 10px 30px rgba(16, 32, 29, 0.08);
    }

    .problem-callout p.lead-stat {
      font-size: 1.3rem;
      line-height: 1.4;
      color: var(--av-text);
      font-weight: 600;
      margin-bottom: 26px;
    }

    .problem-callout .triggers {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .trigger-row {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .trigger-row .t-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--av-bg-subtle);
      color: var(--av-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .trigger-row .t-icon .material-symbols-outlined {
      font-size: 18px;
    }

    .trigger-row strong {
      display: block;
      font-size: 0.94rem;
      color: var(--av-text);
      margin-bottom: 2px;
    }

    .trigger-row span {
      font-size: 0.86rem;
      color: var(--av-text-muted);
    }

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

    /* ============================================
   WORKFLOW PIPELINE
   ============================================ */
    .pipeline-section {
      padding: 96px 0;
      background: var(--av-bg-subtle);
    }

    .pipeline-rail {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 52px;
      position: relative;
    }

    .pipeline-rail::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 6%;
      right: 6%;
      height: 1.5px;
      background: repeating-linear-gradient(90deg, var(--av-border) 0 8px, transparent 8px 14px);
      z-index: 0;
    }

    .pipe-step {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 12px;
      opacity: 1;
    }

    .js-reveal-active .pipe-step {
      opacity: 0;
      transform: translateY(16px);
    }

    .pipe-num {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: var(--av-paper);
      border: 1.5px solid var(--av-border);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--av-vault-blue);
      transition: all 0.35s var(--ease);
    }

    .pipe-num .material-symbols-outlined {
      font-size: 26px;
    }

    .pipe-step:hover .pipe-num {
      background: var(--av-primary);
      border-color: var(--av-primary);
      color: #fff;
      transform: scale(1.06);
    }

    .pipe-step h3 {
      font-size: 0.96rem;
      font-weight: 700;
      color: var(--av-text);
      margin-bottom: 6px;
    }

    .pipe-step p {
      font-size: 0.83rem;
      color: var(--av-text-muted);
      line-height: 1.5;
    }

    @media (max-width:900px) {
      .pipeline-rail {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .pipeline-rail::before {
        display: none;
      }
    }

    /* ============================================
   SCREENSHOT SHOWCASE
   ============================================ */
    .showcase-section {
      padding: 96px 0;
      background: var(--av-bg-subtle);
    }

    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      margin-top: 48px;
    }

    .showcase-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .showcase-phone {
      position: relative;
      width: 100%;
      max-width: 220px;
      aspect-ratio: 264/540;
      background: linear-gradient(155deg, #3a3d42 0%, #1a1c1f 18%, #0c0d0f 50%, #1a1c1f 82%, #3a3d42 100%);
      border-radius: 38px;
      padding: 5px;
      margin-bottom: 22px;
      box-shadow:
        0 24px 48px -14px rgba(7, 22, 21, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
    }

    .showcase-phone::after {
      content: '';
      position: absolute;
      right: -1.5px;
      top: 21%;
      width: 1.5px;
      height: 9%;
      background: linear-gradient(270deg, #0c0d0f, #2a2c2f);
      border-radius: 0 2px 2px 0;
    }

    .showcase-phone img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      border-radius: 34px;
      display: block;
      box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.9);
    }

    .showcase-phone .phone-notch {
      top: 7px;
      width: 28%;
      height: 14px;
      border-radius: 11px;
    }

    .showcase-phone .phone-notch::after {
      width: 5px;
      height: 5px;
      right: 14%;
    }

    .showcase-phone .phone-home-indicator {
      bottom: 5px;
      width: 28%;
      height: 3px;
    }

    .showcase-card h3 {
      font-size: 1.02rem;
      margin-bottom: 8px;
    }

    .showcase-card p {
      font-size: 0.86rem;
      color: var(--av-text-muted);
      line-height: 1.55;
      max-width: 240px;
    }

    @media (max-width:980px) {
      .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 24px;
      }
    }

    @media (max-width:560px) {
      .showcase-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 48px auto 0;
      }
    }

    /* ============================================
   APP TOUR (animated feature showcase)
   ============================================ */
    .app-tour-section {
      padding: 96px 0;
      background: var(--av-bg-subtle);
      overflow: hidden;
    }

    .app-tour-layout {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
      gap: 56px;
      margin-top: 48px;
    }

    .app-tour-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .app-tour-step {
      border-radius: var(--radius-panel);
      background: transparent;
      box-shadow: inset 3px 0 0 transparent;
      opacity: 0.7;
      transition: opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }

    .app-tour-step-h {
      margin: 0;
      font-size: inherit;
    }

    .app-tour-step-btn {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 14px;
      padding: 8px 16px;
      text-align: left;
      color: inherit;
      border-radius: var(--radius-panel);
    }

    .app-tour-step-btn:hover {
      color: inherit;
    }

    .app-tour-step .f-icon {
      flex: none;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      margin-bottom: 0;
    }

    .app-tour-step .f-icon .material-symbols-outlined {
      font-size: 18px;
    }

    .app-tour-step-title {
      font-size: 0.95rem;
      font-weight: 600;
      line-height: 1.35;
    }

    .app-tour-step-body {
      padding: 0 16px 12px 66px;
    }

    .app-tour-step p {
      font-size: 0.88rem;
      color: var(--av-text-muted);
      line-height: 1.55;
    }

    /* Collapsed by default once the stepper script is active; active step expands */
    .js-tour .app-tour-step-body {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      padding-bottom: 0;
      transition: grid-template-rows 0.45s var(--ease), opacity 0.3s ease, padding-bottom 0.45s var(--ease);
    }

    .js-tour .app-tour-step-body > p {
      overflow: hidden;
      min-height: 0;
    }

    .js-tour .app-tour-step.active .app-tour-step-body {
      grid-template-rows: 1fr;
      opacity: 1;
      padding-bottom: 14px;
    }

    .app-tour-step.active {
      opacity: 1;
      background: var(--av-paper);
      box-shadow: inset 3px 0 0 var(--av-primary), 0 12px 26px -20px rgba(7, 22, 21, 0.28);
    }

    .app-tour-step:not(.active) .app-tour-step-btn:hover {
      background: rgba(255, 255, 255, 0.55);
    }

    .app-tour-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .app-tour-controls {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .app-tour-arrow {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--av-text);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .app-tour-arrow:hover {
      background: var(--av-primary);
      border-color: var(--av-primary);
      color: #fff;
      transform: translateY(-1px);
    }

    .app-tour-counter {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--av-text-muted);
      min-width: 56px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    /* Hide the controls until the stepper script takes over */
    .app-tour-controls {
      visibility: hidden;
    }

    .js-tour .app-tour-controls {
      visibility: visible;
    }

    /* Phone frame reuses the site's device styling */
    .app-tour-phone {
      position: relative;
      width: 100%;
      max-width: 270px;
      aspect-ratio: 1080/2340;
      background: linear-gradient(155deg, #3a3d42 0%, #1a1c1f 18%, #0c0d0f 50%, #1a1c1f 82%, #3a3d42 100%);
      border-radius: 44px;
      padding: 6px;
      box-shadow:
        0 30px 60px -18px rgba(7, 22, 21, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
    }

    .app-tour-phone::after {
      content: '';
      position: absolute;
      right: -1.5px;
      top: 21%;
      width: 1.5px;
      height: 9%;
      background: linear-gradient(270deg, #0c0d0f, #2a2c2f);
      border-radius: 0 2px 2px 0;
    }

    .app-tour-screens {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 38px;
      overflow: hidden;
      box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.9);
      background: #fff;
    }

    .app-tour-screen {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      opacity: 0;
      display: block;
      transition: opacity 0.5s ease;
    }

    .app-tour-screen.is-first,
    .app-tour-screen.active {
      opacity: 1;
    }

    /* Scroll-entrance initial states (set visible by the reveal observer) */
    .js-reveal-active .app-tour-list,
    .js-reveal-active .app-tour-stage {
      opacity: 0;
      transform: translateY(30px);
    }

    .js-reveal-active .app-tour-stage {
      transform: translateY(30px) scale(0.97);
    }

    @keyframes appTourFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @media (prefers-reduced-motion: no-preference) {
      .app-tour-phone {
        animation: appTourFloat 6s ease-in-out infinite;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .app-tour-step {
        opacity: 1;
      }
    }

    @media (max-width:880px) {
      .app-tour-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 36px;
      }

      /* Phone and its controls first on small screens, steps below */
      .app-tour-stage {
        order: -1;
      }

      .app-tour-phone {
        max-width: min(240px, 62vw);
      }
    }

    @media (max-width:560px) {
      .app-tour-section {
        padding: 72px 0;
      }

      .app-tour-step-btn {
        padding: 9px 12px;
        gap: 12px;
      }

      .app-tour-step-body {
        padding-left: 56px;
        padding-right: 12px;
      }

      .app-tour-step-title {
        font-size: 0.92rem;
      }

      .app-tour-step p {
        font-size: 0.84rem;
      }
    }

    .download-notify-link {
      color: inherit;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* ============================================
   FEATURES
   ============================================ */
    .features-section {
      padding: 96px 0;
    }

    .feature-tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 44px;
      flex-wrap: wrap;
    }

    .feature-tab {
      padding: 9px 18px;
      border-radius: var(--radius-btn);
      font-size: 0.86rem;
      font-weight: 600;
      border: 1.5px solid var(--av-border);
      color: var(--av-text-muted);
      transition: all 0.25s var(--ease);
    }

    .feature-tab:hover {
      border-color: var(--av-primary);
      color: var(--av-primary);
    }

    .feature-tab.active {
      background: var(--av-text);
      color: #fff;
      border-color: var(--av-text);
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .feature-card {
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      padding: 28px;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
      opacity: 1;
    }

    .js-reveal-active .feature-card {
      opacity: 0;
      transform: translateY(14px);
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(16, 32, 29, 0.08);
    }

    .f-icon {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      background: var(--av-bg-subtle);
      color: var(--av-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    .f-icon .material-symbols-outlined {
      font-size: 24px;
    }

    .feature-card h3 {
      font-size: 1.04rem;
    }

    .feature-card p {
      color: var(--av-text-muted);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    @media (max-width:980px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width:640px) {
      .features-grid {
        grid-template-columns: 1fr;
      }
    }

    .care-tools {
      margin-top: 28px;
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-panel);
      padding: 30px;
      box-shadow: 0 10px 30px rgba(16, 32, 29, 0.05);
    }

    .care-tools-head {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 28px;
      align-items: end;
      margin-bottom: 22px;
    }

    .care-tools-head h3 {
      font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      max-width: 520px;
    }

    .care-tools-head p {
      color: var(--av-text-muted);
      font-size: 0.95rem;
      line-height: 1.65;
      max-width: 650px;
    }

    .care-tools-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .care-tool-card {
      background: var(--av-bg-subtle);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      padding: 20px;
      min-width: 0;
    }

    .care-tool-card .material-symbols-outlined {
      color: var(--av-primary);
      font-size: 27px;
      margin-bottom: 12px;
    }

    .care-tool-card h3 {
      font-size: 0.98rem;
      margin-bottom: 8px;
    }

    .care-tool-card p {
      color: var(--av-text-muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    @media (max-width:980px) {
      .care-tools-head {
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: start;
      }

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

    @media (max-width:640px) {
      .care-tools {
        padding: 22px 18px;
      }

      .care-tools-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================
   SECURITY (dark section)
   ============================================ */
    .security-section {
      background: linear-gradient(135deg, #0B1113 0%, #123F3B 48%, #17364A 100%);
      color: var(--av-dark-text);
      padding: 110px 0;
      position: relative;
      overflow: hidden;
    }

    .security-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 44px 44px;
      pointer-events: none;
    }

    .security-head {
      max-width: 680px;
      margin-bottom: 56px;
      position: relative;
      z-index: 1;
    }

    .security-head h2 {
      color: #fff;
    }

    .security-head .lede {
      color: var(--av-dark-text-muted);
    }

    .sec-flow {
      display: flex;
      align-items: stretch;
      gap: 0;
      position: relative;
      z-index: 1;
      flex-wrap: wrap;
      margin-bottom: 56px;
    }

    .sec-node {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--av-dark-border);
      border-radius: var(--radius-card);
      padding: 22px 20px;
      flex: 1;
      min-width: 150px;
      opacity: 1;
    }

    .js-reveal-active .sec-node {
      opacity: 0;
      transform: translateY(14px);
    }

    .sec-node .mono-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--av-dark-primary);
      margin-bottom: 8px;
      display: block;
      text-transform: uppercase;
    }

    .sec-node h3 {
      color: #fff;
      font-size: 0.96rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .sec-node p {
      font-size: 0.8rem;
      color: var(--av-dark-text-muted);
      line-height: 1.5;
    }

    .sec-arrow {
      color: rgba(255, 255, 255, 0.28);
      font-size: 20px;
      padding: 0 6px;
      flex-shrink: 0;
      align-self: center;
    }

    @media (max-width:980px) {
      .sec-flow {
        flex-direction: column;
        align-items: stretch;
      }

      .sec-arrow {
        transform: rotate(90deg);
        align-self: center;
        padding: 6px 0;
      }
    }

    .sec-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--av-dark-border);
      border-radius: var(--radius-card);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .sec-stat-cell {
      background: var(--av-dark-bg);
      padding: 26px 22px;
      opacity: 1;
    }

    .js-reveal-active .sec-stat-cell {
      opacity: 0;
      transform: translateY(12px);
    }

    .sec-stat-cell .num {
      font-size: 1.5rem;
      color: #fff;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .sec-stat-cell .lbl {
      font-size: 0.78rem;
      color: var(--av-dark-text-muted);
      line-height: 1.4;
    }

    @media (max-width:900px) {
      .sec-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .sec-honesty-note {
      margin-top: 40px;
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--av-dark-border);
      border-radius: var(--radius-card);
      padding: 20px 22px;
      font-size: 0.86rem;
      color: var(--av-dark-text-muted);
      line-height: 1.6;
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .sec-honesty-note .material-symbols-outlined {
      color: var(--av-dark-secondary);
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* ============================================
   PLANS (no pricing - single honest note)
   ============================================ */
    .plans-section {
      padding: 96px 0;
      background: var(--av-bg-subtle);
    }

    .plans-card {
      max-width: 760px;
      margin: 44px auto 0;
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-panel);
      padding: 44px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(16, 32, 29, 0.06);
    }

    .plans-card .material-symbols-outlined {
      font-size: 34px;
      color: var(--av-primary);
      margin-bottom: 16px;
    }

    .plans-card p {
      color: var(--av-text-muted);
      font-size: 1.02rem;
      line-height: 1.6;
      max-width: 560px;
      margin: 0 auto 20px;
    }

    .plans-future-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 20px;
    }

    .plans-future-list span {
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--av-vault-blue);
      background: var(--av-bg-subtle);
      border: 1px solid var(--av-border-subtle);
      padding: 7px 14px;
      border-radius: 100px;
    }

    /* ============================================
   DOWNLOAD
   ============================================ */
    .download-section {
      padding: 104px 0;
      background: var(--av-dark-bg);
      color: var(--av-dark-text);
    }

    .download-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 42px;
      align-items: center;
    }

    .download-section h2 {
      color: var(--av-dark-text);
      max-width: 640px;
    }

    .download-section .lede {
      color: var(--av-dark-text-muted);
      max-width: 650px;
    }

    .store-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .store-badge {
      min-width: 178px;
      min-height: 58px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border-radius: var(--radius-btn);
      border: 1px solid var(--av-dark-border);
      background: var(--av-dark-card);
      color: var(--av-dark-text);
      font: inherit;
      text-align: left;
      transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    }

    .store-badge:not(:disabled):hover {
      transform: translateY(-2px);
      border-color: var(--av-dark-primary);
      background: var(--av-dark-elevated);
    }

    .store-badge:disabled {
      cursor: not-allowed;
      opacity: 0.82;
    }

    .store-badge .material-symbols-outlined {
      color: var(--av-dark-primary);
      font-size: 28px;
      flex-shrink: 0;
    }

    .store-badge small,
    .store-badge strong {
      display: block;
      line-height: 1.1;
    }

    .store-badge small {
      color: var(--av-dark-text-muted);
      font-size: 0.72rem;
      margin-bottom: 4px;
    }

    .store-badge strong {
      font-size: 1rem;
      font-weight: 700;
    }

    .download-note {
      margin-top: 16px;
      color: var(--av-dark-text-muted);
      font-size: 0.88rem;
    }

    .download-proof {
      display: grid;
      gap: 12px;
      min-width: 260px;
    }

    .download-proof-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--av-dark-text-muted);
      font-size: 0.94rem;
    }

    .download-proof-item .material-symbols-outlined {
      color: var(--av-dark-primary);
      font-size: 20px;
      flex-shrink: 0;
    }

    @media (max-width:900px) {
      .download-panel {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .download-proof {
        min-width: 0;
      }
    }

    @media (max-width:560px) {
      .download-section {
        padding: 78px 0;
      }

      .store-badges {
        flex-direction: column;
      }

      .store-badge {
        width: 100%;
      }
    }

    /* ============================================
   FAQ
   ============================================ */
    .faq-section {
      padding: 96px 0;
    }

    .faq-list {
      max-width: 740px;
      margin: 44px auto 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item {
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      overflow: hidden;
    }

    .faq-q {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      text-align: left;
      font-weight: 600;
      font-size: 0.98rem;
      color: var(--av-text);
    }

    .faq-q .material-symbols-outlined {
      color: var(--av-primary);
      transition: transform 0.3s var(--ease);
      flex-shrink: 0;
      margin-left: 14px;
    }

    .faq-item.open .faq-q .material-symbols-outlined {
      transform: rotate(45deg);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s var(--ease);
    }

    .faq-a-inner {
      padding: 0 24px 22px;
      color: var(--av-text-muted);
      font-size: 0.92rem;
      line-height: 1.6;
    }

    .faq-item.open .faq-a {
      max-height: 340px;
    }

    /* ============================================
   DISCLAIMER BAND
   ============================================ */
    .disclaimer-band {
      background: var(--av-bg-subtle);
      border-top: 1px solid var(--av-border-subtle);
      border-bottom: 1px solid var(--av-border-subtle);
      padding: 28px 0;
    }

    .disclaimer-band .wrap {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .disclaimer-band .material-symbols-outlined {
      color: var(--av-text-soft);
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .disclaimer-band p {
      font-size: 0.86rem;
      color: var(--av-text-soft);
      line-height: 1.6;
      max-width: 760px;
    }

    /* ============================================
   FINAL CTA
   ============================================ */
    .cta-section {
      padding: 110px 0;
      text-align: center;
    }

    .cta-section h2 {
      max-width: 600px;
      margin: 0 auto 16px;
    }

    .cta-form {
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 440px;
      margin: 32px auto 0;
      background: var(--av-paper);
      border: 1.5px solid var(--av-border);
      border-radius: 100px;
      padding: 5px 5px 5px 20px;
    }

    .cta-form input {
      flex: 1;
      border: none;
      outline: none;
      font-family: inherit;
      font-size: 0.94rem;
      background: transparent;
      color: var(--av-text);
      min-width: 0;
    }

    .cta-form input::placeholder {
      color: var(--av-text-soft);
    }

    .cta-form .btn {
      border-radius: 100px;
      flex-shrink: 0;
    }

    .cta-microcopy {
      font-size: 0.8rem;
      color: var(--av-text-soft);
      margin-top: 14px;
    }

    /* ============================================
   LEGAL PAGES
   ============================================ */
    .legal-page {
      display: none;
      padding: 140px 0 96px;
      min-height: 70vh;
    }

    .legal-page.active {
      display: block;
    }

    #home-view.hidden-view {
      display: none;
    }

    .legal-content {
      max-width: 740px;
      margin: 0 auto;
      background: var(--av-paper);
      padding: 48px;
      border-radius: var(--radius-panel);
      border: 1px solid var(--av-border-subtle);
    }

    .legal-content h1 {
      font-size: 1.9rem;
      text-align: center;
      margin-bottom: 8px;
    }

    .legal-content .last-updated {
      text-align: center;
      color: var(--av-text-soft);
      margin-bottom: 8px;
      font-size: 0.84rem;
    }

    .legal-content .todo-banner {
      background: var(--sem-warning-bg);
      border: 1px solid #EAD2AC;
      border-radius: var(--radius-card);
      padding: 16px 18px;
      margin: 24px 0 32px;
      font-size: 0.85rem;
      color: var(--sem-warning-text);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .legal-content .todo-banner .material-symbols-outlined {
      flex-shrink: 0;
      font-size: 18px;
      margin-top: 1px;
    }

    .legal-content h2 {
      font-size: 1.15rem;
      color: var(--av-text);
      margin-top: 34px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--av-border-subtle);
    }

    .legal-content p {
      margin-bottom: 13px;
      color: var(--av-text-muted);
      font-size: 0.92rem;
      line-height: 1.65;
    }

    .legal-content ul {
      margin: 0 0 16px 20px;
      color: var(--av-text-muted);
      list-style: disc;
      font-size: 0.92rem;
      line-height: 1.65;
    }

    .legal-content ul li {
      margin-bottom: 6px;
    }

    .legal-content table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 18px;
      font-size: 0.88rem;
    }

    .legal-content th,
    .legal-content td {
      text-align: left;
      padding: 8px 10px;
      border-bottom: 1px solid var(--av-border-subtle);
      color: var(--av-text-muted);
    }

    .legal-content th {
      color: var(--av-text);
      font-weight: 600;
    }

    .legal-content .todo-inline {
      background: var(--sem-warning-bg);
      color: var(--sem-warning-text);
      padding: 1px 6px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 0.85em;
    }

    .back-to-site {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 26px;
      color: var(--av-primary);
      font-weight: 600;
      font-size: 0.88rem;
    }

    @media (max-width:768px) {
      .legal-content {
        padding: 30px 20px;
      }
    }



    /* ============================================
   DATA OWNERSHIP / OPEN-SOURCE BACKUP TRUST
   ============================================ */
    .header-logo-wide {
      width: 220px;
      height: auto;
      border-radius: 0;
      object-fit: contain;
    }

    .footer-logo-wide {
      width: 180px;
      height: auto;
      margin-bottom: 12px;
      display: block;
    }

    @media (max-width:480px) {
      .header-logo-wide {
        width: 170px;
      }
    }

    .ownership-section {
      padding: 96px 0;
      background: var(--av-bg);
    }

    .ownership-panel {
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-panel);
      padding: 44px;
      box-shadow: 0 10px 30px rgba(16, 32, 29, 0.06);
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 36px;
      align-items: center;
    }

    .ownership-copy p {
      color: var(--av-text-muted);
      font-size: 0.98rem;
      line-height: 1.65;
      margin-bottom: 14px;
    }

    .ownership-copy .btn {
      margin-top: 8px;
      white-space: normal;
      text-align: center;
      line-height: 1.25;
    }

    .ownership-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .ownership-card {
      background: var(--av-bg-subtle);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      padding: 22px;
      min-width: 0;
    }

    .ownership-card .material-symbols-outlined {
      color: var(--av-primary);
      font-size: 28px;
      margin-bottom: 12px;
    }

    .ownership-card h3 {
      font-size: 0.98rem;
      margin-bottom: 6px;
    }

    .ownership-card p {
      color: var(--av-text-muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    .promise-strip {
      margin-top: 22px;
      background: linear-gradient(135deg, var(--av-primary) 0%, var(--av-vault-blue) 100%);
      color: #fff;
      border-radius: var(--radius-panel);
      padding: 22px 28px;
      display: grid;
      grid-template-columns: 1.1fr repeat(3, 1fr);
      gap: 22px;
      align-items: center;
    }

    .promise-strip strong, .promise-strip span {
      display: block;
    }

    .promise-strip strong {
      font-size: 1rem;
      color: #fff;
    }

    .promise-strip span {
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .footer-trust-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      align-items: center;
    }

    .footer-trust-links a {
      color: var(--av-dark-text-muted);
    }

    .footer-trust-links a:hover {
      color: var(--av-dark-primary);
    }

    @media (max-width:900px) {
      .ownership-panel, .promise-strip {
        grid-template-columns: 1fr;
      }

      .ownership-panel {
        align-items: stretch;
      }
    }

    @media (max-width:560px) {
      .ownership-section {
        padding: 72px 0;
      }

      .ownership-panel {
        padding: 28px 18px;
        gap: 26px;
      }

      .ownership-copy .btn {
        width: 100%;
        min-height: auto;
        padding: 13px 16px;
        align-items: center;
      }

      .ownership-copy .btn-icon {
        flex-shrink: 0;
      }

      .ownership-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .ownership-card {
        padding: 18px;
      }

      .promise-strip {
        padding: 20px 18px;
        gap: 14px;
      }
    }

    /* ============================================
   FOOTER
   ============================================ */
    footer {
      background: var(--av-dark-bg);
      color: var(--av-dark-text-muted);
      padding: 56px 0 28px;
    }

    .footer-disclaimer {
      font-size: 0.84rem;
      line-height: 1.65;
      max-width: 760px;
      margin-bottom: 36px;
      padding-bottom: 36px;
      border-bottom: 1px solid var(--av-dark-border);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 36px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--av-dark-border);
      margin-bottom: 24px;
    }

    .footer-brand .logo-text {
      color: #fff;
      margin-bottom: 12px;
    }

    .footer-brand .logo-ayu {
      color: var(--av-dark-primary);
    }

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

    .footer-brand p {
      font-size: 0.86rem;
      max-width: 230px;
      line-height: 1.6;
    }

    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 18px;
    }

    .footer-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 38px;
      box-sizing: border-box;
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 10px;
      color: #fff;
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    .footer-social a:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
      filter: brightness(1.06);
    }

    .footer-social a.ig {
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    }

    .footer-social a.yt {
      background: #ff0000;
    }

    .footer-social svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    .footer-col h4 {
      color: #fff;
      font-size: 0.84rem;
      margin-bottom: 14px;
      letter-spacing: 0.01em;
    }

    .footer-col a {
      display: block;
      font-size: 0.86rem;
      padding: 6px 0;
      transition: color 0.2s ease;
    }

    .footer-col a:hover {
      color: var(--av-dark-primary);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 0.8rem;
    }

    @media (max-width:768px) {
      .footer-top {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:1180px) {
      nav .header-logo-wide {
        width: 190px;
      }

      .nav-links .nav-item {
        margin-right: clamp(10px, 1.15vw, 16px);
        font-size: 0.84rem;
      }

      .nav-cta-group {
        margin-left: clamp(10px, 1.15vw, 16px);
      }

      .nav-cta-group .btn {
        padding: 0 16px;
        font-size: 0.86rem;
      }
    }

    @media (max-width:1080px) {
      .nav-links {
        display: none;
      }

      .mobile-toggle {
        display: flex;
      }

      .hero {
        padding-top: 112px;
      }
    }

    /* ============================================
   BLOG INDEX AND ARTICLES
   ============================================ */
    .blog-index-hero {
      padding: 140px 0 56px;
      background:
        radial-gradient(ellipse 760px 420px at 80% -10%, rgba(0, 184, 176, 0.10), transparent 60%),
        linear-gradient(180deg, var(--av-bg) 0%, var(--av-bg-subtle) 100%);
    }

    .blog-index-hero h1,
    .blog-article-header h1 {
      max-width: 820px;
      margin-bottom: 18px;
    }

    .blog-eyebrow {
      color: var(--av-primary);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .blog-eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--av-aqua);
      border-radius: 50%;
    }

    .blog-dek {
      max-width: 760px;
      color: var(--av-text-muted);
      font-size: clamp(1rem, 1.45vw, 1.16rem);
      line-height: 1.65;
    }

    .blog-index-list {
      padding: 56px 0 96px;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .blog-card {
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      overflow: hidden;
      transition: transform 0.22s var(--ease), border-color 0.22s ease;
    }

    .blog-card:hover {
      transform: translateY(-3px);
      border-color: var(--av-border);
    }

    .blog-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background: var(--av-bg-subtle);
    }

    .blog-card-body {
      padding: 22px;
    }

    .blog-card-body span,
    .blog-meta {
      color: var(--av-text-soft);
      font-size: 0.82rem;
      font-weight: 600;
    }

    .blog-card-body h2 {
      font-size: 1.08rem;
      line-height: 1.35;
      margin: 8px 0 10px;
    }

    .blog-card-body p {
      color: var(--av-text-muted);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .blog-article {
      padding: 128px 0 96px;
    }

    .blog-article-wrap {
      max-width: 920px;
    }

    .blog-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-top: 22px;
    }

    .blog-hero-image {
      margin: 34px 0;
      border-radius: var(--radius-panel);
      overflow: hidden;
      border: 1px solid var(--av-border-subtle);
      background: var(--av-bg-subtle);
    }

    .blog-hero-image img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .blog-content {
      max-width: 760px;
      margin: 0 auto;
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-panel);
      padding: 44px;
    }

    .blog-content h2 {
      font-size: 1.32rem;
      margin: 34px 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--av-border-subtle);
    }

    .blog-content h2:first-child {
      margin-top: 0;
    }

    .blog-content h3 {
      font-size: 1rem;
      margin: 0 0 6px;
    }

    .blog-content p,
    .blog-content li,
    .blog-content td,
    .blog-content th {
      color: var(--av-text-muted);
      font-size: 0.95rem;
      line-height: 1.72;
    }

    .blog-content p {
      margin-bottom: 14px;
    }

    .blog-content ul,
    .blog-content ol {
      margin: 0 0 18px 22px;
    }

    .blog-content a {
      color: var(--av-primary);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .blog-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: 0.92rem;
    }

    .blog-content th,
    .blog-content td {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--av-border-subtle);
    }

    .blog-content th {
      color: var(--av-text);
      font-weight: 700;
      background: var(--av-bg-subtle);
    }

    .blog-note {
      background: var(--av-bg-subtle);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      color: var(--av-text-muted);
      font-size: 0.9rem;
      line-height: 1.65;
      padding: 16px 18px;
      margin: 30px 0;
    }

    .blog-faq-list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .blog-faq-item,
    .related-card {
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      padding: 16px;
      background: var(--av-bg);
    }

    .blog-faq-item p {
      margin-bottom: 0;
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 16px;
    }

    .related-card {
      display: block;
      text-decoration: none !important;
    }

    .related-card span {
      display: block;
      color: var(--av-text-soft);
      font-size: 0.78rem;
      font-weight: 700;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .related-card strong {
      color: var(--av-text);
      font-size: 0.94rem;
      line-height: 1.35;
    }

    @media (max-width: 980px) {
      .blog-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

    @media (max-width: 680px) {
      .blog-grid {
        grid-template-columns: 1fr;
      }

      .blog-content {
        padding: 28px 20px;
      }

      .blog-article {
        padding-top: 108px;
      }
    }
    .blog-preview-section {
      padding: 88px 0;
      background: var(--av-bg-subtle);
    }

    .blog-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 28px;
    }

    .blog-preview-card {
      display: block;
      background: var(--av-paper);
      border: 1px solid var(--av-border-subtle);
      border-radius: var(--radius-card);
      padding: 22px;
      transition: transform 0.22s var(--ease), border-color 0.22s ease;
    }

    .blog-preview-card:hover {
      transform: translateY(-3px);
      border-color: var(--av-border);
    }

    .blog-preview-card span {
      display: block;
      color: var(--av-primary);
      font-size: 0.78rem;
      font-weight: 700;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .blog-preview-card strong {
      display: block;
      color: var(--av-text);
      font-size: 1rem;
      line-height: 1.4;
    }

    @media (max-width: 760px) {
      .blog-preview-grid {
        grid-template-columns: 1fr;
      }
    }