* { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      html, body { height: 100%; margin: 0; }
      body {
        margin: 0;
        min-height: 100%;
        font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: clip;
      }

      /* System layers: grain 40, page 10, island nav 60, overlay 55 stays under the pill. */
      :root {
        color-scheme: dark;
        --bg: #050507;
        --bg-deep: #0a0a0d;
        --surface: #0d0d11;
        --surface-2: #111116;
        --hairline: rgba(255, 255, 255, 0.09);
        --hairline-strong: rgba(255, 255, 255, 0.16);
        --text: #f2f4f7;
        --muted: #a7b1bc;
        --faint: #69727c;
        --accent: #43c0ff;
        --accent-strong: #7cd2ff;
        --accent-soft: rgba(67, 192, 255, 0.13);
        --on-accent: #03111d;
        --glass: rgba(10, 10, 14, 0.72);
        --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.55);
        --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.3);
        --r-outer: 34px;
        --r-inner: 27px;
        --ease-flow: cubic-bezier(0.32, 0.72, 0, 1);
        --ease-snap: cubic-bezier(0.83, 0, 0.17, 1);
        --ease-press: cubic-bezier(0.23, 1, 0.32, 1);
        --sp-section: 128px;
      }

      a { color: var(--accent-strong); text-decoration: none; }
      img { max-width: 100%; display: block; }
      a:focus-visible, button:focus-visible, summary:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 12px;
      }
      section[id] { scroll-margin-top: 92px; }

      /* Fixed film grain, one layer, never captures input. */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 40;
        pointer-events: none;
        opacity: 0.06;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      /* Entrance: one heavy settle, custom curve, transform + opacity only. */
      @keyframes rise {
        from { opacity: 0; transform: translateY(28px); }
        to { opacity: 1; transform: none; }
      }
      @media (prefers-reduced-motion: no-preference) {
        .hero-copy > * { animation: rise 0.9s var(--ease-flow) both; }
        .hero-copy > *:nth-child(2) { animation-delay: 0.06s; }
        .hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
        .hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
        .hero-visual { animation: rise 1s var(--ease-flow) 0.12s both; }
      }
      @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

      @media (scripting: enabled) {
        .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease-flow), transform 0.8s var(--ease-flow); }
        .reveal.in { opacity: 1; transform: none; }
        .feat { opacity: 0; transition: opacity 0.8s var(--ease-flow) calc(var(--i, 0) * 60ms), transform 0.8s var(--ease-flow) calc(var(--i, 0) * 60ms); }
        .feat.in { opacity: 1; }
        @media (hover: hover) and (pointer: fine) {
          .feat { transform: translateY(14px); }
          .feat.in { transform: none; }
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal, .feat { opacity: 1; transform: none; transition: none; }
      }

      /* ---- Buttons ---------------------------------------------------------
         Island CTA: pill body, nested circle carries the arrow, full morph. */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: none;
        border-radius: var(--r-pill, 999px);
        font: inherit;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        white-space: nowrap;
        padding: 12px 12px 12px 26px;
        transition: transform 0.28s var(--ease-flow), box-shadow 0.28s var(--ease-flow), background-color 0.28s var(--ease-flow), border-color 0.28s var(--ease-flow);
      }
      .btn:active,
      .btn:hover:active {
        transform: translateY(0) scale(0.97);
        transition-duration: 130ms;
        transition-timing-function: var(--ease-press);
      }
      .btn .btn-ic {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.28s var(--ease-flow);
      }
      .btn .btn-ic svg { width: 17px; height: 17px; }
      @media (hover: hover) and (pointer: fine) {
        .btn:hover { transform: translateY(-3px); }
        .btn:hover .btn-ic { transform: translate(3px, -3px) scale(1.08); }
      }
      .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-soft); }
      .btn-primary .btn-ic { background: rgba(3, 17, 29, 0.14); color: var(--on-accent); }
      .btn-primary:hover { box-shadow: var(--shadow-float); }
      .btn-ghost { background: transparent; color: var(--text); padding: 12px 24px; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
      .btn-ghost:hover { color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }

      /* ---- Island nav: a floating pill, not a glued bar. -------------------- */
      .nav {
        position: fixed;
        top: 18px;
        left: 50%;
        z-index: 60;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px 8px 18px;
        border-radius: 999px;
        background: var(--glass);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        backdrop-filter: blur(20px) saturate(160%);
        box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--hairline);
        width: max-content;
        max-width: calc(100vw - 24px);
        transition: box-shadow 0.3s var(--ease-flow);
      }
      .nav.scrolled { box-shadow: var(--shadow-float), inset 0 0 0 1px var(--hairline); }
      .nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
      .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; color: var(--text); letter-spacing: -0.01em; }
      .brand img { width: 30px; height: 30px; border-radius: 9px; }
      .brand em { font-style: normal; color: var(--accent-strong); }

      .nav-links { display: flex; align-items: center; gap: 2px; }
      .nav-links a { padding: 9px 13px; border-radius: 999px; color: var(--muted); font-size: 0.9rem; font-weight: 600; transition: color 0.3s var(--ease-flow), background-color 0.3s var(--ease-flow); }
      .nav-links a:hover { color: var(--text); background: var(--accent-soft); }
      .nav-links .btn { margin-left: 6px; }
      .nav-links-buy { display: inline-flex; }
      .nav-links a.nav-links-buy { color: var(--on-accent); }
      .nav-links-buy .btn-ic { background: rgba(3, 17, 29, 0.14); color: var(--on-accent); }
      .nav-links a.nav-links-buy:hover { color: var(--on-accent); background: var(--accent); }

      .nav-menu {
        display: none;
        position: relative;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        background: transparent;
        border: none;
        cursor: pointer;
      }
      .nav-menu span {
        position: absolute;
        left: 12px;
        width: 18px;
        height: 1.6px;
        border-radius: 2px;
        background: var(--text);
        transition: transform 0.5s var(--ease-snap), opacity 0.3s var(--ease-flow);
      }
      .nav-menu span:nth-child(1) { top: 17px; }
      .nav-menu span:nth-child(2) { top: 24px; }
      .nav.open .nav-menu span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
      .nav.open .nav-menu span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

      /* Expanded: the pill content becomes the full-screen glass overlay. */

      .page { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

      /* ---- Hero -------------------------------------------------------------
         Editorial split: giant display left, the mark in a machined bezel right. */
      .hero {
        min-height: 100dvh;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
        gap: 56px;
        max-width: 1180px;
        margin: 0 auto;
        padding: 128px 24px 96px;
      }
      .hero-bg {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(42% 34% at 74% 22%, var(--accent-soft), transparent 70%);
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-strong);
        box-shadow: inset 0 0 0 1px var(--hairline);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }
      .hero-copy h1 {
        margin: 26px 0 20px;
        font-size: clamp(2.7rem, 5.6vw, 4.6rem);
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: -0.045em;
      }
      .hero-copy h1 .hl {
        color: var(--accent-strong);
        background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 0 / 100% 0.42em;
        background-position-y: 68%;
      }
      .hero-copy > p {
        color: var(--muted);
        font-size: 1.1rem;
        line-height: 1.68;
        max-width: 44ch;
        margin: 0 0 32px;
      }
      .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

      .hero-visual { position: relative; display: grid; place-items: center; }
      .hero-visual::before {
        content: "";
        position: absolute;
        width: 82%;
        aspect-ratio: 1;
        left: 50%;
        top: 46%;
        transform: translate(-46%, -54%);
        background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%);
        filter: blur(14px);
        pointer-events: none;
      }
      .hero-devices {
        position: relative;
        width: min(460px, 100%);
        aspect-ratio: 460 / 450;
        overflow: hidden;
      }
      .phone-back {
        position: absolute;
        left: 6%;
        top: 6%;
        width: 40%;
        transform: rotate(-8deg);
        z-index: 1;
        opacity: 0.8;
      }
      .phone-back .phone-screen img { width: 62%; height: auto; object-fit: contain; display: block; opacity: 0.9; }
      .phone-front {
        position: absolute;
        left: 36%;
        top: 2%;
        width: 44%;
        transform: rotate(3deg);
        z-index: 2;
      }
      .phone {
        background: linear-gradient(160deg, #1d2129, #0c0e13 60%);
        border-radius: 18px;
        padding: 11px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.07),
          inset 0 1px 3px rgba(255, 255, 255, 0.08),
          var(--shadow-float);
      }
      .phone-back {
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.05),
          inset 0 1px 2px rgba(255, 255, 255, 0.05),
          0 14px 34px rgba(0, 0, 0, 0.42);
      }
      .phone-front {
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.07),
          inset 0 1px 3px rgba(255, 255, 255, 0.08),
          0 30px 64px rgba(0, 0, 0, 0.62);
      }
      .phone::before {
        content: "";
        position: absolute;
        right: -3px;
        top: 62px;
        width: 3px;
        height: 40px;
        border-radius: 0 3px 3px 0;
        background: #242a33;
      }
      .phone::after {
        content: "";
        position: absolute;
        right: -3px;
        top: 112px;
        width: 3px;
        height: 46px;
        border-radius: 0 3px 3px 0;
        background: #242a33;
      }
      .phone-screen {
        width: 100%;
        aspect-ratio: 390 / 844;
        border-radius: 9px;
        background:
          linear-gradient(160deg, rgba(255, 255, 255, 0.045), transparent 42%),
          #08090d;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
      }
      .phone-front .phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .hero-logo-caption {
        position: absolute;
        top: calc(100% + 20px);
        color: var(--faint);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .hero-logo-caption b { color: var(--text); font-weight: 800; }

      /* ---- Capability marquee, seamless CSS loop. ---------------------------- */
      .marquee {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--hairline);
        background: color-mix(in srgb, var(--surface) 45%, transparent);
      }
      .marquee::after,
      .marquee::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 1;
        pointer-events: none;
      }
      .marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
      .marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
      .marquee-track {
        display: flex;
        width: max-content;
        padding: 18px 0;
      }
      .marquee-group {
        display: flex;
        align-items: center;
        gap: 42px;
        padding-right: 42px;
        margin: 0;
        list-style: none;
      }
      .marquee-group li {
        display: flex;
        align-items: center;
        gap: 42px;
        color: var(--muted);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }
      .marquee-group li::after {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 2px;
        rotate: 45deg;
        background: color-mix(in srgb, var(--accent) 55%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
      }
      @media (prefers-reduced-motion: no-preference) {
        .marquee-track { animation: marquee 36s linear infinite; }
        .marquee:hover .marquee-track { animation-play-state: paused; }
      }
      @keyframes marquee {
        to { transform: translateX(-50%); }
      }

      /* ---- Trust, hairline facts without cards. ----------------------------- */
      .trust {
        border-top: 1px solid var(--hairline);
        border-bottom: 1px solid var(--hairline);
        background: color-mix(in srgb, var(--surface) 55%, transparent);
      }
      .trust .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
      .trust .item { padding: 34px 28px; border-left: 1px solid var(--hairline); display: flex; flex-direction: column; align-items: flex-start; }
      .trust .item:first-child { border-left: none; padding-left: 0; }
      .trust .trust-ic {
        width: 32px;
        height: 32px;
        margin-bottom: 16px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex: none;
        color: var(--accent-strong);
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 1px var(--hairline);
      }
      .trust .trust-ic svg { width: 16px; height: 16px; display: block; margin: auto; }
      .trust .item strong { display: block; font-size: 0.98rem; margin-bottom: 5px; letter-spacing: -0.015em; }
      .trust .item span:not(.trust-ic) { color: var(--muted); font-size: 0.87rem; line-height: 1.55; display: block; }

      /* ---- Shared section rhythm: macro whitespace. ------------------------- */
      .section { padding: var(--sp-section) 0; }
      .section-head { max-width: 640px; }
      .section-head.center { margin: 0 auto; text-align: center; }
      .section-head h2 { margin: 0 0 16px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; }
      .section-head p { margin: 0; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }
      .section-head .eyebrow { margin-bottom: 22px; }

      /* ---- Features: asymmetric bento of machined cells. -------------------- */
      .features-grid {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: auto;
        gap: 22px;
        margin-top: 56px;
      }
      .feat-a { grid-column: span 7; grid-row: span 2; }
      .feat-b, .feat-c { grid-column: span 5; }
      .feat-d, .feat-e, .feat-f { grid-column: span 4; }

      .feat {
        position: relative;
        background: rgba(12, 20, 28, 0.04);
        box-shadow: inset 0 0 0 1px var(--hairline);
        border-radius: var(--r-outer);
        padding: 12px;
        transition: transform 0.25s var(--ease-flow), box-shadow 0.25s var(--ease-flow);
      }
      .feat-core {
        height: 100%;
        border-radius: calc(var(--r-outer) - 12px);
        background: var(--surface);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
        padding: 34px 32px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
      }
      .feat-ic {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        background: var(--accent-soft);
        color: var(--accent-strong);
        box-shadow: inset 0 0 0 1px var(--hairline);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 26px;
      }
      .feat-ic svg { width: 23px; height: 23px; }
      .feat h3 { margin: 0 0 8px; font-size: 1.14rem; letter-spacing: -0.015em; }
      .feat p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.62; max-width: 46ch; }
      .feat--spot .feat-core { background-image: radial-gradient(120% 100% at 100% 0%, var(--accent-soft), transparent 62%); }
      .feat--dots .feat-core { background-image: radial-gradient(var(--hairline-strong) 1px, transparent 1.6px); background-size: 24px 24px; }
      .feat--sheen .feat-core { background-image: linear-gradient(150deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%); }
      @media (hover: hover) and (pointer: fine) {
        .feat:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--hairline)), var(--shadow-soft); }
      }

      /* ---- Compare: paper vs online-only vs offline-first. ------------------- */
      .cmp-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin-top: 56px;
      }
      .cmp-card {
        position: relative;
        background: rgba(12, 20, 28, 0.04);
        box-shadow: inset 0 0 0 1px var(--hairline);
        border-radius: var(--r-outer);
        padding: 12px;
        transition: transform 0.25s var(--ease-flow), box-shadow 0.25s var(--ease-flow);
      }
      .cmp-core {
        height: 100%;
        border-radius: calc(var(--r-outer) - 12px);
        background: var(--surface);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
        padding: 30px 28px 24px;
        display: flex;
        flex-direction: column;
      }
      .cmp-featured { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--hairline)); }
      .cmp-featured .cmp-core { background-image: radial-gradient(120% 80% at 100% 0%, var(--accent-soft), transparent 60%); }
      .cmp-tag {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--faint);
        margin-bottom: 14px;
      }
      .cmp-featured .cmp-tag { color: var(--accent-strong); }
      .cmp-head h3 { margin: 0 0 8px; font-size: 1.3rem; letter-spacing: -0.02em; }
      .cmp-head p { margin: 0 0 22px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
      .cmp-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
      .cmp-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid var(--hairline);
      }
      .cmp-list li:last-child { border-bottom: none; padding-bottom: 4px; }
      .cmp-ic {
        flex: none;
        width: 22px;
        height: 22px;
        margin-top: 1px;
        border-radius: 7px;
        display: grid;
        place-items: center;
      }
      .cmp-ic svg { width: 13px; height: 13px; }
      .cmp-ok { color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
      .cmp-fail { color: var(--faint); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--hairline); }
      .cmp-neu { color: var(--faint); background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
      .cmp-t { display: flex; flex-direction: column; gap: 2px; }
      .cmp-t b { font-size: 0.9rem; font-weight: 700; color: var(--text); }
      .cmp-t span { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
      @media (hover: hover) and (pointer: fine) {
        .cmp-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--hairline)), var(--shadow-soft); }
      }

      /* ---- Lead cell: a live dental chart in pure CSS, mirroring the app's  ----
         ---- outline tooth + condition/treatment mark model (see DentalChartScreen). */
      .feat-chart {
        margin-top: 24px;
        display: grid;
        gap: 9px;
      }
      .feat-chart .chart-lab {
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .feat-chart .arch-row { display: flex; gap: 12px; }
      .feat-chart .teeth { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
      .feat-chart .t {
        position: relative;
        display: grid;
        justify-items: center;
        align-items: start;
        padding-top: 14px;
        min-width: 0;
      }
      .feat-chart .t b {
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;
        white-space: nowrap;
        color: var(--muted);
      }
      .feat-chart .t .body {
        width: 100%;
        max-width: 26px;
        margin-top: 3px;
        aspect-ratio: 1 / 0.92;
        background: transparent;
        box-shadow: inset 0 0 0 1.25px var(--hairline-strong);
      }
      .feat-chart .arch-row--upper .t .body { border-radius: 48% 48% 6px 6px; }
      .feat-chart .arch-row--lower .t .body { border-radius: 6px 6px 48% 48%; }
      .feat-chart .tm {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 13px;
        height: 13px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #374151;
        color: #fff;
        font-size: 7.5px;
        font-weight: 800;
        font-style: normal;
        line-height: 1;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
      }
      .feat-chart .tm-d { background: #b91c1c; }
      .feat-chart .tm-j { background: #0891b2; }
      .feat-chart .tm-r { background: #3b82f6; }
      .feat-chart .tm-p { background: #10b981; }
      .feat-chart .tm-s { background: #f97316; }
      .feat-chart .tm-o { background: #6366f1; }
      .feat-chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 18px;
        margin-top: 16px;
        font-size: 0.72rem;
        color: var(--muted);
      }
      .feat-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
      .feat-chart-legend .tm {
        position: static;
        transform: none;
        width: 12px;
        height: 12px;
        font-size: 7px;
        box-shadow: none;
      }

      /* ---- Pricing: one-time license card with a first-30 price. -------------- */
      .pricing-card {
        max-width: 640px;
        margin: 56px auto 0;
      }
      .pricing-core {
        border-radius: var(--r-inner);
        background: var(--surface);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 0 0 1px var(--hairline), var(--shadow-soft);
        padding: 48px 46px;
        position: relative;
        overflow: hidden;
      }
      .pricing-core::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
      }
      .price-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
      .price-top h3 { margin: 0; font-size: 1.15rem; letter-spacing: -0.015em; }
      .price { font-size: 3.1rem; font-weight: 800; letter-spacing: -0.045em; color: var(--accent-strong); white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 42%, transparent); }
      .price small { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-left: 8px; }
      .price-sub { color: var(--muted); font-size: 0.92rem; margin-top: 8px; }
      .includes { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 4px; }
      .includes li {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 9px 0;
        font-size: 0.96rem;
      }
      .includes li svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent-strong); transform: translateY(3px); }
      .addons { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 0.88rem; }
      .addons strong { color: var(--text); font-weight: 600; }
      .early {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 15px;
        border-radius: 999px;
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, #f59e0b 11%, transparent));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--hairline));
        font-size: 0.86rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text);
      }
      .early b { color: var(--accent-strong); font-weight: 800; margin-right: 2px; }
      .early-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #f59e0b;
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
        animation: earlyPulse 2.4s ease-in-out infinite;
      }
      @keyframes earlyPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(0.8); }
      }
      .pricing-card .btn { width: 100%; justify-content: space-between; padding-left: 26px; margin-top: 28px; }
      .pricing-how {
        margin-top: 16px;
        padding: 22px 24px;
        border-radius: var(--r-inner);
        border: 1px solid var(--hairline);
        background: color-mix(in srgb, var(--surface) 60%, transparent);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .how-step { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
      .how-step + .how-step { border-left: 1px solid var(--hairline); padding-left: 18px; }
      .how-n {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent-strong);
        font-size: 0.72rem;
        font-weight: 800;
      }
      .how-t { min-width: 0; }
      .how-t b { display: block; color: var(--text); font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; }
      .how-t small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 3px; line-height: 1.35; }

      /* ---- Waitlist: feature card + waitlist form. ---------------------------- */
      .waitlist-card {
        max-width: 640px;
        margin: 56px auto 0;
      }
      .waitlist-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
      }
      .waitlist-card {
        border-radius: var(--r-inner);
        background: var(--surface);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 0 0 1px var(--hairline), var(--shadow-soft);
        padding: 44px 46px;
        position: relative;
        overflow: hidden;
      }
      .waitlist-form .wl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      .wl-field { display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
      .wl-field input {
        font: inherit;
        font-size: 1rem;
        font-weight: 400;
        color: var(--text);
        caret-color: var(--accent);
        background: #08090d;
        border: 1px solid var(--hairline);
        border-radius: 12px;
        padding: 13px 15px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .wl-field input::placeholder { color: var(--faint); }
      .wl-field input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(67, 192, 255, 0.18);
      }
      .wl-actions { margin-top: 24px; }
      .wl-actions .btn { width: 100%; justify-content: space-between; padding-left: 26px; }
      .wl-consent {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 18px;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--muted);
        cursor: pointer;
      }
      .wl-consent input {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        accent-color: var(--accent);
        cursor: pointer;
      }
      .wl-consent a { color: var(--accent-strong); }
      .waitlist-form .form-note { margin: 14px 0 0; color: var(--faint); font-size: 0.85rem; line-height: 1.6; }

      /* ---- FAQ: title column + machined accordion cards. --------------------- */
      .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1.55fr;
        gap: 72px;
        align-items: start;
      }
      .faq-aside .section-head { margin-top: 6px; max-width: 400px; }
      .faq-list { max-width: none; }
      .faq-item {
        margin-bottom: 12px;
        border: none;
        border-radius: var(--r-inner);
        background: var(--surface);
        box-shadow: inset 0 0 0 1px var(--hairline);
        overflow: hidden;
        transition: box-shadow 0.35s var(--ease-flow);
      }
      .faq-item:last-child { margin-bottom: 0; }
      .faq-item[open] { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
      .faq-item summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 22px 26px;
        font-weight: 700;
        font-size: 1.03rem;
        letter-spacing: -0.01em;
        transition: color 0.3s var(--ease-flow);
      }
      .faq-item summary:hover { color: var(--accent-strong); }
      .faq-item summary::-webkit-details-marker { display: none; }
      .faq-item summary::after {
        content: "+";
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        line-height: 1;
        font-weight: 500;
        color: var(--accent-strong);
        background: var(--accent-soft);
        transition: transform 0.55s var(--ease-snap), background 0.3s var(--ease-flow), color 0.3s var(--ease-flow);
      }
      .faq-item summary:hover::after { background: var(--accent); color: var(--on-accent); }
      .faq-item[open] summary::after { transform: rotate(45deg); }
      .faq-item[open] summary:hover::after { background: var(--accent-strong); color: var(--on-accent); }
      .faq-item p {
        margin: 0;
        padding: 0 26px 24px;
        color: var(--muted);
        font-size: 0.97rem;
        line-height: 1.66;
        max-width: 60ch;
      }

      /* ---- Contact: the closing action slab. --------------------------------- */
      .contact { text-align: center; padding: 0 0 var(--sp-section); }
      .contact-shell {
        position: relative;
        border-radius: var(--r-outer);
        background: rgba(12, 20, 28, 0.04);
        box-shadow: inset 0 0 0 1px var(--hairline);
        padding: 12px;
        overflow: hidden;
      }
      .contact-core {
        position: relative;
        border-radius: calc(var(--r-outer) - 12px);
        background: var(--surface);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
        padding: 84px 48px 76px;
        overflow: hidden;
      }
      .contact-core::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(48% 64% at 50% 0%, var(--accent-soft), transparent 72%);
        pointer-events: none;
      }
      .contact .section-head h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
      .contact .cta-row { display: flex; gap: 18px 20px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding: 40px 0 56px;
        color: var(--faint);
        font-size: 0.85rem;
        border-top: 1px solid var(--hairline);
      }
      .footer a { color: var(--faint); }
      .footer a:hover { color: var(--text); }
      .footer .links { display: flex; flex-wrap: wrap; row-gap: 8px; gap: 24px; }

      /* ---- Legal (privacy) page -------------------------------------------- */
      .legal {
        max-width: 780px;
        margin: 0 auto;
        padding: 160px 24px 80px;
      }
      .thanks {
        max-width: 640px;
        margin: 0 auto;
        padding: 160px 24px 80px;
        text-align: center;
      }
      .thanks .eyebrow { margin-bottom: 22px; }
      .thanks h1 { margin: 0 0 14px; font-size: clamp(2.4rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
      .thanks-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 460px; margin: 0 auto; }
      .thanks-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }
      @media (max-width: 640px) {
        .legal { padding: 132px 18px 56px; }
        .legal-panel { padding: 28px 22px; }
        .thanks { padding: 132px 18px 56px; }
      }
      .legal .eyebrow { margin-bottom: 22px; }
      .legal h1 { margin: 0 0 12px; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
      .legal .legal-meta { color: var(--faint); font-size: 0.85rem; margin: 0 0 40px; }
      .legal-panel {
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: var(--r-inner);
        padding: 40px;
        box-shadow: var(--shadow-soft);
      }
      .legal-panel h2 { margin: 34px 0 10px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
      .legal-panel h2:first-child { margin-top: 0; }
      .legal-panel p { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }
      .legal-panel ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }
      .legal-panel li { margin-bottom: 4px; }
      @media (max-width: 640px) {
        .legal { padding: 132px 18px 56px; }
        .legal-panel { padding: 28px 22px; }
      }

      /* ---- Responsive ------------------------------------------------------- */
      @media (max-width: 1023px) {
        .hero { gap: 44px; }
        .trust .grid { grid-template-columns: repeat(2, 1fr); }
        .trust .item:nth-child(3) { border-left: none; }
        .features-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
        .feat-a { grid-column: span 2; grid-row: span 1; }
        .feat-b, .feat-c, .feat-d, .feat-e { grid-column: span 1; }
        .feat-f { grid-column: span 2; }
        .feat, .feat-core { border-radius: var(--r-inner); }
        .cmp-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
        .cmp-card, .cmp-core { border-radius: var(--r-inner); }
      }
      @media (max-width: 900px) {
        /* The pill collapses; its links become the full-screen glass overlay. */
        .nav { width: calc(100% - 24px); justify-content: space-between; height: 60px; background: rgba(10, 10, 14, 0.92); }
        .brand { z-index: 2; }
        .nav-links {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 100dvh;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 6px;
          padding: 24px 28px;
          background: #0a0a0e;
          -webkit-backdrop-filter: blur(28px) saturate(160%);
          backdrop-filter: blur(28px) saturate(160%);
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.45s var(--ease-flow), transform 0.45s var(--ease-flow);
        }
        .nav.open .nav-links { opacity: 1; pointer-events: auto; }
        .nav-links a {
          font-size: clamp(1.9rem, 7vw, 2.6rem);
          font-weight: 800;
          letter-spacing: -0.03em;
          color: var(--text);
          padding: 8px 4px;
          opacity: 0;
          transform: translateY(14px);
        }
        .nav-links a.nli, .nav-links .nli {
          transition: opacity 0.45s var(--ease-flow), transform 0.45s var(--ease-flow);
        }
        .nav.open .nav-links a {
          opacity: 1;
          transform: none;
        }
        .nav.open .nav-links .nli:nth-child(1) { transition-delay: 0.08s; }
        .nav.open .nav-links .nli:nth-child(2) { transition-delay: 0.14s; }
        .nav.open .nav-links .nli:nth-child(3) { transition-delay: 0.2s; }
        .nav.open .nav-links .nli:nth-child(4) { transition-delay: 0.26s; }
        .nav.open .nav-links .nli:nth-child(5) { transition-delay: 0.32s; }
        .nav-links .btn { margin-left: 0; margin-top: 26px; font-size: 0.95rem; padding: 12px 12px 12px 22px; }
        .nav-menu { display: block; }
        .hero { grid-template-columns: 1fr; text-align: center; padding-top: 132px; }
        .hero-copy p { margin-left: auto; margin-right: auto; }
        .hero-cta { justify-content: center; }
        .hero-devices { margin-bottom: 30px; }
        .hero-logo-caption { left: 50%; transform: translateX(-50%); }
        .faq-grid { grid-template-columns: 1fr; gap: 40px; }
        .faq-aside .section-head { margin-top: 0; }
      }
      @media (max-width: 640px) {
        :root { --sp-section: 96px; --r-outer: 28px; --r-inner: 22px; }
        .page { padding: 0 18px; }
        .hero { padding: 128px 18px 72px; gap: 32px; }
        .trust .grid { grid-template-columns: 1fr; }
        .trust .item { border-left: none; padding: 22px 0; border-top: 1px solid var(--hairline); }
        .trust .item:first-child { border-top: none; }
        .features-grid { grid-template-columns: 1fr; }
        .feat-a, .feat-b, .feat-c, .feat-d, .feat-e, .feat-f { grid-column: span 1; }
        .feat-chart { margin-top: 18px; }
        .contact-shell { padding: 9px; }
        .contact-core { padding: 60px 24px 54px; }
        .contact .section-head h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
        .waitlist-card { padding: 38px 24px; }
        .waitlist-form .wl-fields { grid-template-columns: 1fr; gap: 16px; }
        .wl-actions .btn { padding-left: 18px; }
        .pricing-core { padding: 34px 26px; }
        .price-top { flex-direction: column; gap: 6px; }
        .price { font-size: 2.4rem; }
        .includes { grid-template-columns: 1fr; }
        .pricing-card .btn { padding-left: 18px; }
        .pricing-how { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
        .how-step + .how-step { border-left: none; padding-left: 0; }
        .footer { flex-direction: column; align-items: flex-start; }
      }
      @media (max-width: 360px) {
        .brand span.tg { display: none; }
      }