/* ===== DESIGN TOKENS (Direction A2, Aurora Dark Premium) ===== */
    :root {
      /* Fonts */
      --om-font-display: 'Cormorant Garamond', Georgia, serif;
      --om-font-body: 'Inter', system-ui, sans-serif;
      --om-font-number: 'Josefin Sans', sans-serif;
      --om-body-size: 1.125rem;
      --om-body-leading: 1.68;
      --om-measure: 46rem;
      /* Spacing scale */
      --om-space-1: 0.5rem;
      --om-space-2: 0.75rem;
      --om-space-3: 1rem;
      --om-space-4: 1.5rem;
      --om-space-5: 2.25rem;
      --om-space-6: 3rem;
      --om-space-7: 4.5rem;
      /* Brand gold */
      --om-gold-hi: #f0cd8e;
      --om-gold-lo: #b88a3c;
      --om-heading-grad: linear-gradient(180deg, #f0cd8e 0%, #b88a3c 100%);
      --om-accent-strong: #e6c185;
      --om-link: #e6c185;
      /* Surfaces and ink */
      --om-bg: #0a1417;
      --om-ink: #eae6db;
      --om-ink-soft: #c4ccc9;
      --om-ink-faint: #82908e;
      --om-line: rgba(240, 205, 142, 0.16);
      /* Display cream: non-gold headline text sits in this, not in gold */
      --om-display-ink: #f0e9d8;
      /* Top logo bar (Element Studio S1, Option B) */
      --om-topbar-bg: rgba(7, 17, 20, 0.78);
      --om-topbar-measure: 72rem;
      --om-topbar-logo-w: 150px;
      --om-topbar-logo-w-mobile: 118px;
      /* Hero split and aurora glow (CSS fallback behind the photo) */
      --om-hero-left: #0b1a1d;
      --om-hero-right: #0e1316;
      --om-hero-glow:
        radial-gradient(55% 75% at 18% 12%, rgba(45, 110, 104, 0.38), transparent 62%),
        radial-gradient(45% 65% at 82% 18%, rgba(184, 138, 60, 0.20), transparent 60%),
        radial-gradient(50% 70% at 62% 95%, rgba(36, 74, 108, 0.30), transparent 65%);
      --om-hero-split-opacity: 0.85;
      /* Photo hero */
      --om-hero-h: clamp(360px, 60vh, 640px);
      --om-hero-h-mobile: clamp(300px, 48vh, 430px);
      --om-hero-scrim: linear-gradient(180deg,
        rgba(10, 20, 23, 0) 24%,
        rgba(10, 20, 23, 0.52) 58%,
        rgba(10, 20, 23, 0.94) 100%);
      --om-hero-h1-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
      /* Glassy cards */
      --om-card-bg: rgba(255, 255, 255, 0.045);
      --om-card-border: rgba(240, 205, 142, 0.22);
      --om-card-blur: blur(14px);
      --om-card-shadow: 0 12px 44px rgba(0, 0, 0, 0.38);
      /* Short answer illuminated panel (Element Studio S2, Option A) */
      --om-answer-border: rgba(240, 205, 142, 0.38);
      --om-answer-border-hover: rgba(240, 205, 142, 0.60);
      --om-answer-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018) 55%, rgba(45, 110, 104, 0.05));
      --om-answer-shadow: inset 0 1px 0 rgba(240, 205, 142, 0.14), 0 12px 44px rgba(0, 0, 0, 0.38);
      --om-answer-shadow-hover: inset 0 1px 0 rgba(240, 205, 142, 0.22), 0 0 34px rgba(240, 205, 142, 0.14), 0 12px 44px rgba(0, 0, 0, 0.42);
      --om-answer-lead-size: clamp(1.45rem, 3vw, 1.85rem);
      --om-answer-chip-border: rgba(240, 205, 142, 0.5);
      --om-answer-chip-bg: rgba(240, 205, 142, 0.06);
      --om-answer-sweep-grad: linear-gradient(90deg,
        transparent 0%,
        rgba(240, 205, 142, 0.10) 35%,
        rgba(240, 205, 142, 0.95) 50%,
        rgba(240, 205, 142, 0.10) 65%,
        transparent 100%);
      /* HD / GK two-column split (echoes the split-face hero) */
      --om-split-measure: 64rem;
      --om-split-gap: clamp(2rem, 5vw, 3.5rem);
      --om-split-leading: 1.78;
      --om-split-divider-grad: linear-gradient(180deg,
        transparent 0%, var(--om-gold-hi) 30%, var(--om-gold-lo) 70%, transparent 100%);
      --om-split-divider-grad-h: linear-gradient(90deg,
        transparent 0%, var(--om-gold-hi) 30%, var(--om-gold-lo) 70%, transparent 100%);
      --om-eyebrow-size: 0.75rem;
      --om-eyebrow-tracking: 0.24em;
      --om-essence-size: clamp(1.35rem, 2.6vw, 1.7rem);
      --om-split-icon: 34px;
      /* Bridge band (So which one is right for you? Both.) */
      --om-bridge-bg: rgba(240, 205, 142, 0.045);
      --om-bridge-measure: 40rem;
      /* Table */
      --om-table-size: 1rem;
      --om-table-border: rgba(240, 205, 142, 0.15);
      --om-table-alt: rgba(255, 255, 255, 0.028);
      --om-table-head-bg: rgba(240, 205, 142, 0.07);
      /* Aurora CTA centerpiece */
      --om-aurora-base: linear-gradient(180deg, #0a1d20 0%, #071114 55%, #04090b 100%);
      --om-aurora-gold: radial-gradient(closest-side, rgba(214, 164, 84, 0.34), transparent 70%);
      --om-aurora-teal: radial-gradient(closest-side, rgba(45, 110, 104, 0.44), transparent 70%);
      --om-aurora-blue: radial-gradient(closest-side, rgba(36, 74, 108, 0.40), transparent 70%);
      --om-aurora-blur: blur(36px);
      --om-cta-sub-ink: #a8b3ae;
      /* Signature Omni button: gold border, soft glow, centered label */
      --om-btn-text: #f0cd8e;
      --om-btn-bg: rgba(240, 205, 142, 0.05);
      --om-btn-bg-hover: rgba(240, 205, 142, 0.11);
      --om-btn-border: 1px solid rgba(240, 205, 142, 0.75);
      --om-btn-radius: 999px;
      --om-btn-glow: 0 0 20px rgba(240, 205, 142, 0.40), 0 0 55px rgba(240, 205, 142, 0.16);
      --om-btn-glow-rest: 0 0 16px rgba(240, 205, 142, 0.28), 0 0 46px rgba(240, 205, 142, 0.12);
      --om-btn-pad: 0.9rem 2.4rem;
      --om-btn-size: 0.95rem;
      --om-btn-tracking: 0.14em;
      /* FAQ accordion (Element Studio S3, Option A; questions enlarged, gold) */
      --om-faq-q-size: clamp(1.32rem, 2.6vw, 1.6rem);
      --om-faq-q-pad: 1.35rem 1.6rem;
      --om-faq-divider: linear-gradient(90deg, rgba(240, 205, 142, 0.45), rgba(240, 205, 142, 0.05));
      /* Global interaction layer */
      --om-spot-size: 340px;
      --om-spot-glow: rgba(240, 205, 142, 0.075);
      --om-underline-grad: linear-gradient(90deg, var(--om-gold-hi), var(--om-gold-lo));
      /* Device mockup (See it inside the app): frames and sliding screens */
      --om-mock-measure: 60rem;
      --om-mock-chrome: #262626;
      --om-mock-chrome-line: #404040;
      --om-mock-chrome-ink: #a3a3a3;
      --om-mock-island: #050505;
      --om-mock-screen-bg: #04090b;
      --om-mock-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
      --om-mock-phone-w: 28%;
      --om-mock-phone-w-mobile: 30%;
      --om-mock-fade: 0.9s;
      --om-mock-dot: rgba(240, 205, 142, 0.25);
      --om-mock-dot-on: var(--om-gold-hi);
      --om-shot-name-size: clamp(1.3rem, 2.8vw, 2rem);
      --om-shot-name-size-phone: clamp(0.7rem, 1.5vw, 1.05rem);
      --om-shot-hd-glow: radial-gradient(80% 70% at 50% 32%, rgba(45, 110, 104, 0.40), transparent 72%);
      --om-shot-gk-glow: radial-gradient(80% 70% at 50% 32%, rgba(184, 138, 60, 0.26), transparent 72%);
      --om-shot-astro-glow: radial-gradient(80% 70% at 50% 32%, rgba(36, 74, 108, 0.44), transparent 72%);
      /* Radii */
      --om-radius: 12px;
      --om-radius-lg: 18px;
    }

    /* ===== BASE (token-driven) ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--om-font-body);
      font-size: var(--om-body-size);
      line-height: var(--om-body-leading);
      color: var(--om-ink);
      background: var(--om-bg);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    .om-wrap {
      max-width: var(--om-measure);
      margin: 0 auto;
      padding-left: var(--om-space-4);
      padding-right: var(--om-space-4);
    }
    main p { color: var(--om-ink-soft); }
    main a { color: var(--om-link); }
    .om-visually-hidden {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap;
    }

    /* Display type: Cormorant Garamond 500. Section H2s keep the full gold
       gradient; the H1 sits in soft cream and only .gold spans go gold. */
    h1, main h2 {
      font-family: var(--om-font-display);
      font-weight: 500;
      line-height: 1.18;
    }
    /* H2s are static gold everywhere; the hover shimmer was removed in the
       v6 founder calm pass. */
    main h2 {
      display: inline-block;
      font-size: clamp(1.6rem, 3.4vw, 2.15rem);
      margin-bottom: var(--om-space-3);
      color: var(--om-gold-lo);
      background-image: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    h1 { color: var(--om-display-ink); }
    h1 .gold {
      color: var(--om-gold-lo);
      background: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ===== cursor-follow spotlight (global, fine pointers only) ===== */
    .om-spot {
      position: fixed;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      background: radial-gradient(var(--om-spot-size) circle at var(--om-spot-x, 50%) var(--om-spot-y, -20%), var(--om-spot-glow), transparent 70%);
      opacity: 0;
      transition: opacity 0.6s ease;
    }
    .om-spot.om-spot-on { opacity: 1; }
    @media (hover: none), (pointer: coarse) {
      .om-spot { display: none; }
    }

    /* ===== animated gold underline on inline text links (global) ===== */
    main a:not(.om-btn), .om-footer a:not(.om-btn) {
      position: relative;
      text-decoration: none;
      padding-bottom: 2px;
    }
    main a:not(.om-btn)::after, .om-footer a:not(.om-btn)::after {
      content: "";
      position: absolute;
      left: 0; bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--om-underline-grad);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    main a:not(.om-btn):hover::after, main a:not(.om-btn):focus-visible::after,
    .om-footer a:not(.om-btn):hover::after, .om-footer a:not(.om-btn):focus-visible::after {
      transform: scaleX(1);
    }

    /* ===== reveal on scroll: removed in v6 (founder calm pass). All body
       sections render immediately and statically. ===== */

    /* ===== top logo bar (Element Studio S1, Option B) ===== */
    .om-topbar {
      position: relative;
      z-index: 10;
      background: var(--om-topbar-bg);
      -webkit-backdrop-filter: var(--om-card-blur);
      backdrop-filter: var(--om-card-blur);
      border-bottom: 1px solid var(--om-line);
    }
    .om-topbar-inner {
      max-width: var(--om-topbar-measure);
      margin: 0 auto;
      padding: var(--om-space-3) var(--om-space-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--om-space-3);
    }
    .om-topbar-logo {
      width: var(--om-topbar-logo-w);
      aspect-ratio: 2400/826;
      height: auto;
    }

    /* Animated logo box (mirrors the app's .omlogo: shader canvas fills it) */
    .omlogo { position: relative; cursor: pointer; box-sizing: border-box; overflow: visible; display: block; }
    .omlogo canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; display: block; }

    /* ===== hero (full-width cover photo, scrim, CSS split-motif fallback) ===== */
    .om-hero {
      position: relative;
      overflow: hidden;
      height: var(--om-hero-h);
      display: flex;
      align-items: flex-end;
      border-bottom: 1px solid var(--om-line);
    }
    /* Fallback layers: the Direction A split motif shows whenever the photo
       is missing or still loading. */
    .om-hero-bg {
      position: absolute; inset: 0;
      background: linear-gradient(104deg,
        var(--om-hero-left) 0%, var(--om-hero-left) 50%,
        var(--om-hero-right) 50%, var(--om-hero-right) 100%);
    }
    .om-hero-glow { position: absolute; inset: 0; background: var(--om-hero-glow); }
    .om-hero-split {
      position: absolute; top: -12%; bottom: -12%; left: 50%; width: 1px;
      background: linear-gradient(180deg,
        transparent 0%, var(--om-gold-hi) 30%, var(--om-gold-lo) 70%, transparent 100%);
      transform: skewX(-14deg);
      opacity: var(--om-hero-split-opacity);
    }
    .om-hero-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 30%;
    }
    .om-hero-scrim {
      position: absolute; inset: 0;
      background: var(--om-hero-scrim);
    }
    .om-hero-inner {
      position: relative;
      width: 100%;
      max-width: var(--om-measure);
      margin: 0 auto;
      padding: var(--om-space-6) var(--om-space-4) var(--om-space-6);
      text-align: center;
    }
    .om-hero h1 {
      font-size: clamp(2.15rem, 5.6vw, 3.4rem);
      max-width: 21ch;
      margin: 0 auto;
      text-shadow: var(--om-hero-h1-shadow);
    }

    /* ===== short answer (Element Studio S2, Option A: illuminated panel;
       gold hairline frame, small gold label chip, slow gold shimmer sweep
       along the top edge, larger Cormorant lead, soft hover glow) ===== */
    .om-answer {
      position: relative;
      overflow: hidden;
      margin-top: var(--om-space-6);
      border: 1px solid var(--om-answer-border);
      border-radius: var(--om-radius-lg);
      background: var(--om-answer-bg);
      -webkit-backdrop-filter: var(--om-card-blur);
      backdrop-filter: var(--om-card-blur);
      box-shadow: var(--om-answer-shadow);
      padding: var(--om-space-5);
      transition: box-shadow 0.5s ease, border-color 0.5s ease;
    }
    .om-answer:hover {
      border-color: var(--om-answer-border-hover);
      box-shadow: var(--om-answer-shadow-hover);
    }
    .om-answer-sweep {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 1px;
      background: var(--om-answer-sweep-grad);
      background-size: 220% 100%;
      background-position: -120% 0;
      pointer-events: none;
    }
    @media (prefers-reduced-motion: no-preference) {
      .om-answer-sweep { animation: om-answer-sweep 5.5s ease-in-out infinite; }
      @keyframes om-answer-sweep {
        0%   { background-position: -120% 0; }
        60%  { background-position: 220% 0; }
        100% { background-position: 220% 0; }
      }
    }
    .om-answer-chip {
      display: inline-block;
      font-family: var(--om-font-number);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--om-gold-hi);
      border: 1px solid var(--om-answer-chip-border);
      border-radius: 999px;
      padding: 0.35rem 0.95rem;
      margin-bottom: var(--om-space-3);
      background: var(--om-answer-chip-bg);
    }
    .om-answer-lead {
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: var(--om-answer-lead-size);
      line-height: 1.3;
      color: var(--om-display-ink);
      margin-bottom: var(--om-space-3);
    }
    .om-answer-lead .om-gold-text { font-weight: 600; }
    .om-gold-text {
      color: var(--om-gold-lo);
      background: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .om-answer-body { font-size: calc(var(--om-body-size) * 0.97); }

    /* ===== section ===== */
    .om-section { padding-top: var(--om-space-6); }
    .om-section p { margin-bottom: var(--om-space-3); }

    /* ===== HD / GK split (one two-column section echoing the split-face
       hero: motif icon, gold eyebrow, gold essence line, then the original
       paragraph. Static: no reveal, no hover effects.) ===== */
    .om-split { padding-top: var(--om-space-6); }
    .om-split-wrap {
      max-width: var(--om-split-measure);
      margin: 0 auto;
      padding-left: var(--om-space-4);
      padding-right: var(--om-space-4);
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      column-gap: var(--om-split-gap);
      align-items: start;
    }
    .om-split-divider {
      align-self: stretch;
      width: 1px;
      background: var(--om-split-divider-grad);
      opacity: 0.7;
    }
    .om-split-icon {
      display: block;
      width: var(--om-split-icon);
      height: var(--om-split-icon);
      color: var(--om-gold-hi);
      opacity: 0.85;
      margin-bottom: var(--om-space-2);
    }
    .om-split-eyebrow {
      font-family: var(--om-font-number);
      font-size: var(--om-eyebrow-size);
      letter-spacing: var(--om-eyebrow-tracking);
      text-transform: uppercase;
      color: var(--om-gold-hi);
      margin-bottom: var(--om-space-1);
    }
    .om-split-essence {
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: var(--om-essence-size);
      line-height: 1.25;
      margin-bottom: var(--om-space-3);
      color: var(--om-gold-lo);
      background: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .om-split-col p {
      line-height: var(--om-split-leading);
      margin-bottom: var(--om-space-3);
    }
    /* Inline pull-quote accent, kept inside the sentence flow */
    .om-pull-accent {
      font-family: var(--om-font-display);
      font-style: italic;
      font-weight: 500;
      font-size: 1.12em;
      color: var(--om-gold-hi);
    }
    @media (max-width: 760px) {
      .om-split-wrap {
        grid-template-columns: 1fr;
        row-gap: var(--om-space-5);
      }
      .om-split-divider {
        width: 62%;
        height: 1px;
        align-self: auto;
        justify-self: center;
        background: var(--om-split-divider-grad-h);
      }
    }

    /* ===== bridge band (So which one is right for you? Both.; a slim
       centered highlighted strip, lighter than a full section, static) ===== */
    .om-bridge {
      margin-top: var(--om-space-6);
      padding: var(--om-space-5) 0;
      text-align: center;
      background: var(--om-bridge-bg);
      border-top: 1px solid var(--om-line);
      border-bottom: 1px solid var(--om-line);
    }
    .om-bridge h2 { margin-bottom: var(--om-space-2); }
    .om-bridge p {
      max-width: var(--om-bridge-measure);
      margin: 0 auto;
      font-size: calc(var(--om-body-size) * 0.95);
      line-height: 1.7;
    }

    /* ===== comparison-table ===== */
    .om-cmp { padding-top: var(--om-space-6); }
    .om-cmp h2 { margin-bottom: var(--om-space-4); }
    .om-cmp-scroll {
      overflow-x: auto;
      max-width: 100%;
      border: 1px solid var(--om-table-border);
      border-radius: var(--om-radius);
      background: var(--om-card-bg);
      -webkit-backdrop-filter: var(--om-card-blur);
      backdrop-filter: var(--om-card-blur);
      box-shadow: var(--om-card-shadow);
    }
    .om-cmp table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: var(--om-table-size);
      line-height: 1.5;
    }
    .om-cmp th, .om-cmp td {
      padding: var(--om-space-3);
      text-align: left;
      vertical-align: top;
      overflow-wrap: break-word;
      border-bottom: 1px solid var(--om-table-border);
    }
    .om-cmp thead th {
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: 1.2rem;
      color: var(--om-accent-strong);
      background: var(--om-table-head-bg);
    }
    .om-cmp tbody th {
      font-family: var(--om-font-number);
      font-weight: 400;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--om-ink-faint);
      white-space: nowrap;
    }
    .om-cmp tbody td { color: var(--om-ink-soft); }
    .om-cmp th:first-child, .om-cmp td:first-child { width: 26%; }
    .om-cmp tbody tr:nth-child(even) { background: var(--om-table-alt); }
    .om-cmp tbody tr:last-child th,
    .om-cmp tbody tr:last-child td { border-bottom: none; }

    /* ===== cta (centerpiece: animated logo over a pure-CSS aurora) ===== */
    .om-cta {
      position: relative;
      overflow: hidden;
      margin-top: 28px;
      padding: var(--om-space-7) 0;
      text-align: center;
      background: var(--om-aurora-base);
      border-top: 1px solid var(--om-line);
      border-bottom: 1px solid var(--om-line);
    }
    .om-cta-aurora { position: absolute; inset: 0; pointer-events: none; }
    .om-cta-orb {
      position: absolute;
      display: block;
      border-radius: 50%;
      filter: var(--om-aurora-blur);
      will-change: transform, opacity;
    }
    .om-cta-orb-1 {
      width: 46rem; height: 30rem;
      left: -14rem; top: -12rem;
      background: var(--om-aurora-teal);
      opacity: 0.85;
    }
    .om-cta-orb-2 {
      width: 38rem; height: 26rem;
      right: -12rem; top: -6rem;
      background: var(--om-aurora-gold);
      opacity: 0.7;
    }
    .om-cta-orb-3 {
      width: 44rem; height: 28rem;
      left: 22%; bottom: -16rem;
      background: var(--om-aurora-blue);
      opacity: 0.8;
    }
    /* Drift is transform and opacity only, and only for users who have not
       asked for reduced motion. Everyone else gets the static aurora wash. */
    @media (prefers-reduced-motion: no-preference) {
      .om-cta-orb-1 { animation: om-drift-1 26s ease-in-out infinite alternate; }
      .om-cta-orb-2 { animation: om-drift-2 32s ease-in-out infinite alternate; }
      .om-cta-orb-3 { animation: om-drift-3 38s ease-in-out infinite alternate; }
      @keyframes om-drift-1 {
        from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
        to   { transform: translate3d(6rem, 2.5rem, 0) scale(1.12); opacity: 0.95; }
      }
      @keyframes om-drift-2 {
        from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
        to   { transform: translate3d(-5rem, 3.5rem, 0) scale(1.16); opacity: 0.8; }
      }
      @keyframes om-drift-3 {
        from { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.6; }
        to   { transform: translate3d(4rem, -3rem, 0) scale(1); opacity: 0.85; }
      }
    }
    .om-cta-inner { position: relative; }
    .om-cta h2 { margin-bottom: var(--om-space-5); }
    .om-cta .omlogo { margin: 0 auto var(--om-space-5); }
    .om-cta-sub {
      color: var(--om-cta-sub-ink);
      font-size: calc(var(--om-body-size) * 0.9);
      max-width: 34rem;
      margin: 0 auto var(--om-space-5);
    }

    /* Signature button. The label is perfectly centered: inline-flex with
       both axes centered, symmetric horizontal padding, text-align center,
       and a text-indent equal to the tracking so the letter-spacing's
       trailing gap cannot pull the glyphs off optical center. */
    .om-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1;
      font-family: var(--om-font-number);
      font-size: var(--om-btn-size);
      letter-spacing: var(--om-btn-tracking);
      text-indent: var(--om-btn-tracking);
      text-transform: uppercase;
      color: var(--om-btn-text);
      background: var(--om-btn-bg);
      border: var(--om-btn-border);
      border-radius: var(--om-btn-radius);
      padding: var(--om-btn-pad);
      text-decoration: none;
      white-space: nowrap;
      transition: box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease;
    }
    .om-btn:hover, .om-btn:focus-visible {
      box-shadow: var(--om-btn-glow);
      background: var(--om-btn-bg-hover);
      transform: translateY(-2px);
    }
    /* Glow variant: the button rests with a soft gold glow already on */
    .om-btn-glow { box-shadow: var(--om-btn-glow-rest); }
    .om-btn-glow:hover, .om-btn-glow:focus-visible { box-shadow: var(--om-btn-glow); }
    .om-btn-sm { padding: 0.55rem 1.4rem; font-size: 0.8rem; }

    /* ===== faq (Element Studio S3 Option A: accordion; questions enlarged
       and gold so the question outweighs the interaction) ===== */
    .om-faq { padding-top: var(--om-space-7); padding-bottom: var(--om-space-5); }
    .om-faq h2 { margin-bottom: var(--om-space-4); }
    .acc {
      border: 1px solid var(--om-card-border);
      border-radius: var(--om-radius-lg);
      background: var(--om-card-bg);
      -webkit-backdrop-filter: var(--om-card-blur);
      backdrop-filter: var(--om-card-blur);
      box-shadow: var(--om-card-shadow);
      overflow: hidden;
    }
    .acc-item + .acc-item { border-top: 1px solid var(--om-line); }
    .acc-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--om-space-3);
      text-align: left;
      border: none;
      cursor: pointer;
      padding: var(--om-faq-q-pad);
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: var(--om-faq-q-size);
      line-height: 1.3;
      color: var(--om-gold-lo);
      background: none;
      background-image: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: opacity 0.25s ease;
    }
    .acc-q:hover { opacity: 0.85; }
    .acc-icon {
      position: relative;
      flex-shrink: 0;
      width: 14px; height: 14px;
    }
    .acc-icon::before, .acc-icon::after {
      content: "";
      position: absolute;
      background: var(--om-gold-hi);
      border-radius: 2px;
      transition: transform 0.35s ease;
    }
    .acc-icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
    .acc-icon::after  { left: 6px; top: 0; width: 2px; height: 14px; }
    .acc-item.open .acc-icon::after { transform: rotate(90deg); }
    /* Answers collapse only once JS has run; without JS every answer stays
       visible, so there is no content trap. */
    .acc-body { overflow: hidden; }
    .om-js .acc-body {
      max-height: 0;
      opacity: 0;
      transition: max-height 0.45s ease, opacity 0.45s ease;
    }
    .om-js .acc-item.open .acc-body { opacity: 1; }
    .acc-inner { position: relative; padding: 0 1.6rem 1.35rem; }
    .acc-inner::before {
      content: "";
      position: absolute;
      top: 0; left: 1.6rem; right: 1.6rem;
      height: 1px;
      background: var(--om-faq-divider);
    }
    .acc-inner p { padding-top: var(--om-space-3); font-size: 1.02rem; }

    /* ===== device mockup (Safari + iPhone frames, sliding app screens) ===== */
    .om-mock { padding-top: var(--om-space-7); text-align: center; }
    .om-mock-wrap {
      max-width: var(--om-mock-measure);
      margin: 0 auto;
      padding-left: var(--om-space-4);
      padding-right: var(--om-space-4);
    }
    .om-mock-sub {
      color: var(--om-ink-soft);
      max-width: 34rem;
      margin: 0 auto;
    }
    .om-mock-stage { position: relative; margin: var(--om-space-5) auto 6%; }
    .om-mock-frame { position: relative; overflow: hidden; }
    /* Safari desktop frame: wrapper keeps the 1203/753 aspect, the screen div
       sits at the SVG's screen cutout (x1 y52 1200x700 as percentages), and
       the chrome SVG paints on top with pointer-events off. */
    .om-mock-safari {
      width: 100%;
      aspect-ratio: 1203/753;
      border-radius: 1% / 1.6%;
      box-shadow: var(--om-mock-shadow);
    }
    /* iPhone frame: same technique, viewBox 433x882, screen 21.25 19.25
       389.5x843.5 with a 55.75 corner radius (14.3% / 6.6% of the screen). */
    .om-mock-phone {
      position: absolute;
      right: 0;
      bottom: -6%;
      width: var(--om-mock-phone-w);
      aspect-ratio: 433/882;
      border-radius: 16.6% / 8.2%;
      box-shadow: var(--om-mock-shadow);
      z-index: 4;
    }
    .om-mock-chrome {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
      z-index: 3;
      pointer-events: none;
    }
    /* Chrome SVG parts stay token-driven through classes, no hard-coded fills */
    .om-mock-c-body { fill: var(--om-mock-chrome); }
    .om-mock-c-detail { fill: var(--om-mock-chrome-line); }
    .om-mock-c-line { stroke: var(--om-mock-chrome-line); fill: none; }
    .om-mock-c-ink { fill: var(--om-mock-chrome-ink); font-family: var(--om-font-body); }
    .om-mock-c-island { fill: var(--om-mock-island); }
    .om-mock-screen {
      position: absolute;
      overflow: hidden;
      background: var(--om-mock-screen-bg);
      z-index: 1;
    }
    .om-mock-safari .om-mock-screen { left: 0.083%; top: 6.905%; width: 99.75%; height: 92.96%; }
    .om-mock-phone .om-mock-screen {
      left: 4.908%; top: 2.183%; width: 89.954%; height: 95.635%;
      border-radius: 14.3% / 6.6%;
    }
    /* Sliding screens: panels are stacked; the active one slides in while the
       previous one slides out with a soft crossfade. Motion only runs for
       users who have not asked for reduced motion. */
    .om-mock-track { position: absolute; inset: 0; }
    .om-shot {
      position: absolute; inset: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateX(8%);
      z-index: 1;
    }
    .om-shot.is-active { opacity: 1; transform: none; z-index: 2; }
    .om-shot.is-prev { transform: translateX(-8%); }
    @media (prefers-reduced-motion: no-preference) {
      .om-shot {
        transition: opacity var(--om-mock-fade) ease,
                    transform var(--om-mock-fade) cubic-bezier(0.22, 1, 0.36, 1);
      }
    }
    .om-shot-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 2;
    }
    /* Fallback panel: shows whenever the real screenshot is missing */
    .om-shot-fallback {
      position: absolute; inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4%;
      background: var(--om-mock-screen-bg);
    }
    .om-shot-hd .om-shot-fallback { background: var(--om-shot-hd-glow), var(--om-mock-screen-bg); }
    .om-shot-gk .om-shot-fallback { background: var(--om-shot-gk-glow), var(--om-mock-screen-bg); }
    .om-shot-astro .om-shot-fallback { background: var(--om-shot-astro-glow), var(--om-mock-screen-bg); }
    .om-shot-motif { width: 24%; max-width: 150px; color: var(--om-gold-hi); opacity: 0.4; }
    .om-shot-name {
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: var(--om-shot-name-size);
      line-height: 1.1;
      color: var(--om-gold-lo);
      background: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .om-mock-phone .om-shot-name { font-size: var(--om-shot-name-size-phone); }
    .om-mock-phone .om-shot-motif { width: 30%; }
    /* Dot indicators, synced to the slide by the carousel script */
    .om-mock-dots {
      display: flex;
      justify-content: center;
      gap: 0.6rem;
      margin-top: var(--om-space-4);
    }
    .om-mock-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--om-mock-dot);
      transition: background 0.4s ease, box-shadow 0.4s ease;
    }
    .om-mock-dot.is-on {
      background: var(--om-mock-dot-on);
      box-shadow: 0 0 10px rgba(240, 205, 142, 0.5);
    }

    /* ===== footer ===== */
    .om-footer {
      padding: var(--om-space-6) 0;
      text-align: center;
      font-size: 0.92rem;
      color: var(--om-ink-faint);
      border-top: 1px solid var(--om-line);
      margin-top: var(--om-space-5);
    }
    .om-footer-line { margin-bottom: var(--om-space-2); }
    .om-footer a { color: var(--om-link); }

    /* ===== responsive: tokens tighten on small screens ===== */
    @media (max-width: 640px) {
      :root {
        --om-space-5: 1.6rem;
        --om-space-6: 2.4rem;
        --om-space-7: 3.2rem;
        --om-faq-q-pad: 1.1rem 1.15rem;
      }
      .om-topbar-logo { width: var(--om-topbar-logo-w-mobile); }
      .om-hero { height: var(--om-hero-h-mobile); }
      .om-cmp th, .om-cmp td { padding: var(--om-space-2); }
      .om-cmp table { font-size: calc(var(--om-table-size) * 0.92); }
      .om-cmp tbody th { font-size: 0.66rem; letter-spacing: 0.04em; white-space: normal; }
      .om-cmp th:first-child, .om-cmp td:first-child { width: 31%; }
      .om-answer { padding: var(--om-space-4); }
      .acc-inner { padding: 0 1.15rem 1.1rem; }
      .acc-inner::before { left: 1.15rem; right: 1.15rem; }
      .om-mock-phone { width: var(--om-mock-phone-w-mobile); bottom: -5%; }
      .om-mock-stage { margin-bottom: 8%; }
    }

    /* ===== v7 additions: founder credibility (author byline + founder note).
       Both blocks are calm and static: no reveal, no shimmer, no hover motion.
       New tokens extend :root; nothing existing is overridden. ===== */
    :root {
      --om-byline-avatar: 52px;
      --om-byline-ring: rgba(240, 205, 142, 0.55);
      --om-byline-name-size: 1.35rem;
      --om-byline-role-size: 0.85rem;
      --om-founder-cutout-h: 470px;
      --om-founder-cutout-h-mobile: 280px;
      --om-founder-glow: radial-gradient(closest-side, rgba(214, 164, 84, 0.22), transparent 70%);
      --om-founder-gap: clamp(2rem, 5vw, 3.5rem);
      --om-founder-sign-size: 1.3rem;
    }

    /* Author byline: slim horizontal row right after the hero */
    .om-byline {
      display: flex;
      align-items: center;
      gap: var(--om-space-3);
      margin-top: var(--om-space-5);
      padding-bottom: var(--om-space-3);
      border-bottom: 1px solid var(--om-line);
    }
    .om-byline-avatar {
      width: var(--om-byline-avatar);
      height: var(--om-byline-avatar);
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--om-byline-ring);
      flex-shrink: 0;
    }
    .om-byline-name {
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: var(--om-byline-name-size);
      line-height: 1.2;
      color: var(--om-gold-lo);
      background: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .om-byline-role {
      font-size: var(--om-byline-role-size);
      line-height: 1.45;
      color: var(--om-ink-faint);
    }

    /* From the founder: cutout floats directly on the aurora background,
       copy and signature to its right; stacks under 760px */
    .om-founder { padding-top: var(--om-space-6); padding-bottom: 0; position: relative; overflow-x: clip; overflow-y: visible; }
    .om-founder-wrap {
      max-width: var(--om-split-measure);
      margin: 0 auto;
      padding-left: var(--om-space-4);
      padding-right: var(--om-space-4);
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--om-founder-gap);
      align-items: end;
    }
    .om-founder-figure {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .om-founder-glow {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 135%;
      height: 112%;
      transform: translate(-50%, -50%);
      background: var(--om-founder-glow);
      pointer-events: none;
    }
    .om-founder-cutout {
      position: relative;
      display: block;
      max-height: var(--om-founder-cutout-h);
      width: auto;
      max-width: 100%;
      margin-bottom: -28px;
    }
    .om-founder-eyebrow {
      font-family: var(--om-font-number);
      font-size: clamp(0.9rem, 1.5vw, 1.08rem);
      letter-spacing: var(--om-eyebrow-tracking);
      text-transform: uppercase;
      color: var(--om-gold-hi);
      margin-bottom: var(--om-space-3);
    }
    .om-founder-body {
      font-size: var(--om-body-size);
      line-height: var(--om-body-leading);
      max-width: 36rem;
      margin-bottom: var(--om-space-3);
    }
    .om-founder-sign {
      font-family: var(--om-font-display);
      font-weight: 500;
      font-size: clamp(1.5rem, 2.7vw, 2rem);
      line-height: 1.25;
      color: var(--om-gold-lo);
      background: var(--om-heading-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    @media (max-width: 760px) {
      .om-founder-wrap {
        grid-template-columns: 1fr;
        row-gap: var(--om-space-4);
        text-align: center;
      }
      .om-founder-cutout { max-height: var(--om-founder-cutout-h-mobile); }
      .om-founder-body { margin-left: auto; margin-right: auto; }
    }