:root {
        color-scheme: dark;
        --bg: #0a0a0a;
        --panel: rgba(255, 255, 255, 0.04);
        --panel2: rgba(255, 255, 255, 0.03);
        --border: rgba(255, 255, 255, 0.1);
        --border2: rgba(255, 255, 255, 0.15);
        --text: rgba(255, 255, 255, 0.92);
        --muted: rgba(255, 255, 255, 0.7);
        --muted2: rgba(255, 255, 255, 0.6);
        --muted3: rgba(255, 255, 255, 0.55);
        --shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
        --radius-xl: 32px;
        --radius-lg: 24px;
        --radius-md: 18px;
        --max: 1120px;
        /* Hero animated code opacity multiplier (0..1) */
        --heroCodeOpacity: 0.20;
      }

      * { box-sizing: border-box; }
      html {
        scroll-behavior: smooth;
        overflow-x: hidden;
        background: var(--bg);
        min-height: 100%;
      }
      body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji";
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
        min-height: 100vh;
        min-height: 100dvh;
      }

      /* Mobile WebView/SFSafariViewController sheets often have floating controls at the bottom.
         Reserve space so the page doesn't appear clipped behind them. */
      @media (max-width: 768px) {
        body {
          padding-bottom: calc(env(safe-area-inset-bottom) + 96px);
        }
      }

      /* Prefer clipping to prevent iOS horizontal "rubber band" */
      @supports (overflow: clip) {
        html, body { overflow-x: clip; }
      }


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

      /* Background */
      .bg {
        position: fixed;
        left: 46%;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      .bg .grid {
        position: absolute;
        inset: 0;
        opacity: 0.18;
        background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
        background-size: 38px 38px;
      }
      .bg .noise {
        position: absolute;
        inset: 0;
        opacity: 0.35;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
        background-size: 220px 220px;
      }
      .bg .blob {
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 999px;
        filter: blur(60px);
        background: rgba(255, 255, 255, 0.08);
      }
      .bg .blob.top {
        left: 50%;
        top: -160px;
        transform: translateX(-50%);
        filter: blur(70px);
        background: radial-gradient(
          ellipse at 50% 0%,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0.08) 55%,
          rgba(255, 255, 255, 0) 100%
        );
      }
      .bg .blob.left { left: -190px; top: 160px; opacity: 0.65; }
      .bg .blob.right { right: -190px; top: 320px; opacity: 0.65; }

      /* Layout */
      .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
      .section { padding: 15px 0; }
      @media (max-width: 640px) {
        .section { padding: 36px 0; }
      }

      /* Header */
      #site-header {
        position: sticky;
        top: 0;
        z-index: 60;
      }

      /* Ensure content renders above the fixed background layer */
      main,
      #site-footer {
        position: relative;
        z-index: 1;
      }
      header {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid var(--border);
        background: rgba(10, 10, 10, 0.6);
        backdrop-filter: blur(10px);
      }
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        gap: 16px;
      }
      .brand,
      .brand:visited {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.95);
      }
      .brand img { width: 45px; height: 45px;}
      .brand .t1 {
        font-family: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
        font-style: italic;
        font-weight: 800;
        letter-spacing: -0.02em;
        font-size: 20px;
        line-height: 1.05;
        color: rgba(255, 255, 255, 0.95);
      }

      .navlinks {
        display: none;
        align-items: center;
        gap: 24px;
        font-size: 18px;
        font-weight: 700;
        /* text-transform: uppercase; */
        /* letter-spacing: 0.28em; */
        color: rgba(255, 255, 255, 0.7);
      }
      .navlinks a,
      .navlinks a:visited {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color 180ms ease;
      }
      .navlinks a:hover { color: rgba(255, 255, 255, 1); }

      .navcta { display: none; align-items: center; gap: 12px; }

      .mobileActions { display: inline-flex; gap: 10px; align-items: center; }

      .iconbtn {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        cursor: pointer;
      }

      @media (min-width: 768px) {
        .navlinks { display: flex; }
        .navcta { display: flex; }
        .nav .mobileOnly { display: none; }
      }

      /* Mobile menu (header) */
      .mobileMenu {
        margin: 0 0 16px;
        padding: 12px 0 0;
        border-top: 1px solid var(--border);
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .mobileMenu[hidden] { display: none; }
      .mobileMenu a,
      .mobileMenu a:visited {
        display: block;
        width: 100%;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 18px;
        font-weight: 700;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        transition: background 180ms ease, transform 180ms ease;
      }
      .mobileMenu a:hover {
        background: rgba(255, 255, 255, 0.06);
        transform: translateY(-1px);
      }
      @media (min-width: 768px) {
        .mobileMenu { display: none !important; }
      }

      /* UI */
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 16px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(10px);
      }
      .pill svg { width: 20px; height: 20px; opacity: 0.9; }

      /* Store buttons - matching index-new.html */
      .storeBtn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 10px 22px;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        text-decoration: none;
        font-weight: 700;
        transition: transform 160ms ease, box-shadow 160ms ease;
      }
      .storeBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15); }
      .storeBtn:active { transform: translateY(0); }
      .storeBtn svg { width: 28px; height: 28px; flex-shrink: 0; }
      .storeBtn__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
      .storeBtn__overline { font-size: 11px; font-weight: 400; opacity: 0.85; }
      .storeBtn__title { font-size: 17px; font-weight: 700; }

      /* iOS button - white background */
      .storeBtn--ios {
        background: #fff;
        color: #000;
      }
      .storeBtn--ios:visited { color: #000; }

      /* Windows button - accent gradient */
      .storeBtn--win {
        background: linear-gradient(90deg, #6ea2e7, #a5c8fc);
        color: #000;
        box-shadow: 0 0 20px rgba(110, 231, 183, 0.3);
      }
      .storeBtn--win:visited { color: #000; }

      /* Legacy buttons kept for compatibility */
      .btnPrimary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 18px;
        border: 0;
        cursor: pointer;
        background: white;
        color: #0a0a0a;
        font-size: 14px;
        font-weight: 700;
        box-shadow: 0 14px 40px rgba(255, 255, 255, 0.08);
        transition: transform 160ms ease, box-shadow 160ms ease;
      }
      .btnPrimary:hover { transform: translateY(-2px); box-shadow: 0 18px 60px rgba(255, 255, 255, 0.12); }
      .btnPrimary:active { transform: translateY(0); }
      .btnPrimary svg { width: 20px; height: 20px; }

      /* Platform logos (Apple / Windows) used in CTAs */
      .btnPrimary .platIcon,
      .btnSecondary .platIcon {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }

      .btnSecondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 18px;
        border: 1px solid var(--border2);
        cursor: pointer;
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-weight: 700;
        backdrop-filter: blur(10px);
        transition: transform 160ms ease, background 160ms ease;
        text-decoration: none;
      }
      .btnSecondary:visited { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
      .btnSecondary:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
      .btnSecondary:active { transform: translateY(0); }
      .btnSecondary svg { width: 20px; height: 20px; }

      .card {
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: var(--panel2);
        overflow: hidden;
      }
      .cardInner { padding: 28px; }

      .soft {
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
      }

      .h2wrap { max-width: 720px; margin: 0 auto; text-align: center; }
      .h2wrap.left { text-align: left; margin: 0; }
      .h2wrap h2 { margin: 18px 0 0; font-size: 40px; letter-spacing: -0.03em; }
      .h2wrap p { margin: 14px 0 0; color: var(--muted); font-size: 20px; line-height: 1.6; }
      @media (max-width: 640px) {
        .h2wrap h2 { font-size: 28px; }
        .h2wrap p { font-size: 16px; }
      }

      /* Animations */
      .fade-up {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 600ms ease, transform 600ms ease;
      }
      .fade-up.show { opacity: 1; transform: translateY(0); }

      @keyframes floatA { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
      @keyframes floatB { 0% { transform: translateY(0); } 50% { transform: translateY(6px); } 100% { transform: translateY(0); } }

      /* Hero */
      .hero {
        position: relative;
        z-index: 1;
        padding: 56px 0 64px;
        isolation: isolate;
      }

      /* Full-width hero background image */
      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        width: 100dvw;
        transform: translateX(-50%);
        background-image:
          linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.55)),
          url("/assets/background-001.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: 0;
      }

      /* Hero-only animated code overlay (over background image, under all hero content) */
      .heroCodeBg {
        position: absolute;
        top: -10%;
        bottom: 0;
        left: 50%;
        width: 100vw;
        width: 100dvw;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
      }

      .heroCodeCard {
        position: absolute;
        top: -50px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: rgba(255, 255, 255, 0.9);
        padding: 8px 14px;
        border-radius: 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.16em;
        white-space: nowrap;
        opacity: 0;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        will-change: transform, opacity;
        animation: heroCodeFloat linear infinite;
        --scale: 1;
        --opacity: 0.8;
      }

      @keyframes heroCodeFloat {
        0% { transform: translateY(0) scale(var(--scale)); opacity: 0; }
        5% { opacity: calc(var(--opacity) * var(--heroCodeOpacity)); }
        95% { opacity: calc(var(--opacity) * var(--heroCodeOpacity)); }
        100% { transform: translateY(800px) scale(var(--scale)); opacity: 0; }
      }

      .heroGrid { display: grid; gap: 48px; align-items: center; position: relative; z-index: 2; }
      @media (min-width: 1024px) {
        .heroGrid { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
        .hero { padding: 72px 0 84px; }
      }

      /* Hero badge: move up without shifting the H1 (avoid transform so fade-up still works) */
      .hero .heroGrid > div:first-child > .pill {
        position: relative;
        top: -30px;
      }
      .hero h1 {
        margin: 18px 0 0;
        font-size: 65px;
        letter-spacing: 0;
        line-height: 1.18;
        font-weight: 750;
      }
      .hero p.lead { margin: 18px 0 0; font-size: 26px; color: rgba(255, 255, 255, 0.75); line-height: 1.65; max-width: 560px; }
      @media (max-width: 640px) {
        .hero h1 { font-size: 40px; }
      }
      .heroCtas { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
      @media (min-width: 640px) { .heroCtas { flex-direction: row; align-items: center; } }

      .stats { margin-top: 26px; display: grid; gap: 12px; }
      @media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
      .stat {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
      }
      .stat .i {
        width: 40px;
        height: 40px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        display: grid;
        place-items: center;
      }
      .stat .i svg { width: 18px; height: 18px; opacity: 0.9; }
      .stat .v { font-weight: 750; letter-spacing: -0.02em; }
      .stat .l { font-size: 12px; color: var(--muted2); margin-top: 2px; }

      .demoRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
      .demo .k {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--muted2);
      }
      .demo .code { margin-top: 8px; display: flex; align-items: baseline; gap: 12px; }
      .demo .code .digits { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 22px; letter-spacing: 0.18em; }
      .demo .code .hint { font-size: 12px; color: var(--muted2); }

      .heroArt {
        position: relative;
        max-width: 520px;
        margin: 0;
      }
      .heroArt .phone {
        position: relative;
        z-index: 2;
        padding-top: 100px;
        width: 50%;
        margin: 0;
        transform: translateX(-10%);
        filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.65));
      }
      .heroArt .pc {
        position: absolute;
        left: 46%;
        bottom: -40px;
        width: 92%;
        transform: translateX(-30%);
        z-index: 1;
        filter: drop-shadow(0 35px 90px rgba(0, 0, 0, 0.7));
      }
      .heroArt .frame {
        position: absolute;
        inset: -4px;
        border-radius: 48px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        pointer-events: none;
      }

      .heroArt .flyingCode {
        position: absolute;
        left: 18%;
        top: 64%;
        z-index: 3;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: 0.18em;
        background: rgba(255, 255, 255, 0.92);
        color: #0a0a0a;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
        animation: heroFlight 3s infinite ease-in-out;
        pointer-events: none;
        user-select: none;
        white-space: nowrap;
      }

      .heroArt .flyingCode::before {
        content: "\1F512";
        margin-right: 8px;
        opacity: 0.9;
      }

      @keyframes heroFlight {
        0% { left: 13%; top: 57%; opacity: 0; transform: scale(0.3); }
        18% { opacity: 1; transform: scale(1); }
        80% { left: 52%; top: 54%; opacity: 1; transform: scale(1.35); }
        100% { left: 52%; top: 54%; opacity: 0; transform: scale(0.75); }
      }
      .callout {
        position: absolute;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        padding: 14px;
        backdrop-filter: blur(10px);
        display: none;
      }
      .callout .row { display: flex; align-items: center; gap: 12px; }
      .callout .badge {
        width: 40px;
        height: 40px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        display: grid;
        place-items: center;
      }
      .callout .badge svg { width: 18px; height: 18px; opacity: 0.85; }
      .callout .t { font-size: 12px; font-weight: 750; color: rgba(255, 255, 255, 0.85); }
      .callout .s { font-size: 12px; color: var(--muted2); margin-top: 2px; }

      @media (min-width: 640px) {
        .callout { display: block; }
        .callout.right { right: -24px; top: 42px; }
        .callout.left { left: -24px; bottom: 62px; }
      }

      .heroCaption { margin-top: 32px; text-align: center; color: var(--muted); font-size: 16px; }

      /* Two column cards */
      .grid2 { display: grid; gap: 24px; }
      @media (min-width: 1024px) { .grid2 { grid-template-columns: 1fr 1fr; } }
      .stepsList { margin-top: 18px; display: grid; gap: 14px; }
      .stepItem { display: flex; gap: 12px; align-items: flex-start; }
      .stepN {
        width: 28px;
        height: 28px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        display: grid;
        place-items: center;
        font-size: 18px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 2px;
      }

      /* Old Way vs CodeClip Way accents */
      .oldWay .wayTitle { color: rgba(239, 68, 68, 0.95); }
      .oldWay .row svg { color: rgba(239, 68, 68, 0.95); }
      .oldWay .stepN {
        border-color: rgba(239, 68, 68, 0.55);
        background: rgba(239, 68, 68, 0.18);
        color: rgba(255, 255, 255, 0.95);
      }

      .goodWay .wayTitle { color: rgba(34, 197, 94, 0.95); }
      .goodWay .row svg { color: rgba(34, 197, 94, 0.95); }
      .goodWay .stepN {
        border-color: rgba(34, 197, 94, 0.55);
        background: rgba(34, 197, 94, 0.18);
        color: rgba(255, 255, 255, 0.95);
      }
      .stepText { color: var(--muted); font-size: 22px; line-height: 1.6; }

      /* Feature grid */
      .grid4 { display: grid; gap: 18px; margin-top: 40px; }
      @media (min-width: 768px) { .grid4 { grid-template-columns: 1fr 1fr; } }
      @media (min-width: 1024px) { .grid4 { grid-template-columns: repeat(4, 1fr); } }

      .feature {
        position: relative;
        padding: 22px;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
        overflow: hidden;
      }
      .feature:before,
      .feature:after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.09);
        filter: blur(50px);
        opacity: 0;
        transition: opacity 500ms ease;
        pointer-events: none;
      }
      .feature:before { left: -96px; top: -96px; }
      .feature:after { right: -96px; bottom: -96px; }
      .feature:hover:before,
      .feature:hover:after { opacity: 1; }

      .fIcon {
        width: 48px;
        height: 48px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
      }
      .fIcon svg { width: 22px; height: 22px; opacity: 0.88; }
      .feature h3 { margin: 16px 0 0; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; position: relative; z-index: 1; }
      .feature p { margin: 10px 0 0; font-size: 18px; color: var(--muted); line-height: 1.6; position: relative; z-index: 1; }

      /* 3-up */
      .grid3 { display: grid; gap: 18px; margin-top: 18px; }
      @media (min-width: 1024px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }

      /* How steps */
      .howGrid { display: grid; gap: 18px; margin-top: 40px; }
      @media (min-width: 1024px) { .howGrid { grid-template-columns: repeat(3, 1fr); } }
      .howStep {
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        padding: 22px;
      }
      .howTop { display: flex; gap: 14px; align-items: flex-start; }
      .howBadge {
        width: 48px;
        height: 48px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        display: grid;
        place-items: center;
      }
      .howBadge svg { width: 45px; height: 30px; opacity: 0.88; }
      .howMeta { font-size: 15px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted2); }
      .howStep h4 { margin: 8px 0 0; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
      .howStep p { margin: 10px 0 0; font-size: 18px; color: var(--muted); line-height: 1.6; }

      /* CTA bar */
      .bar {
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        padding: 26px;
        margin-top: 40px;
      }
      .barRow { display: flex; flex-direction: column; gap: 18px; }
      @media (min-width: 768px) { .barRow { flex-direction: row; align-items: center; justify-content: space-between; } }
      .bar h3 { margin: 10px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
      .bar p { margin: 10px 0 0; font-size: 18px; color: var(--muted); line-height: 1.6; max-width: 620px; }
      .barCtas { display: flex; flex-direction: column; gap: 12px; width: 100%; }
      @media (min-width: 640px) { .barCtas { flex-direction: row; width: auto; } }

      /* Pricing block */
      .pricing { display: grid; gap: 18px; }
      @media (min-width: 1024px) { .pricing { grid-template-columns: 1.4fr 0.6fr; align-items: start; } }

      /* "What you're buying" card sizing + typography */
      @media (min-width: 1024px) {
        /* Make the right card ~20% wider (0.6fr → 0.72fr) */
        .pricing { grid-template-columns: 1.4fr 0.72fr; }
      }

      .buyingCard .row { font-size: 20px; }
      .buyingCard .row svg { width: 20px; height: 20px; }

      .buyingCard .list li { font-size: 18px; }
      .buyingCard .list svg { width: 18px; height: 18px; }

      .buyingCard .kicker { font-size: 20px; }
      .buyingCard p { font-size: 18px !important; }

      .list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
      .list li { display: flex; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
      .list svg { width: 20px; height: 20px; opacity: 0.75; margin-top: 2px; }

      /* FAQ */
      /* Use multi-column flow so expanded items only push down their own column */
      .faqGrid {
        margin-top: 40px;
        column-count: 1;
        column-gap: 14px;
      }

      details.faq {
        display: inline-block;
        width: 100%;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin: 0 0 10px;
      }

      details.faq {
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        padding: 14px;
      }
      details.faq summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      details.faq summary::-webkit-details-marker { display: none; }
      .q { font-size: 20px; font-weight: 750; color: rgba(255, 255, 255, 0.9); }
      .plus {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        display: grid;
        place-items: center;
        color: rgba(255, 255, 255, 0.75);
        transition: transform 220ms ease;
        user-select: none;
        flex: 0 0 auto;
      }
      details[open].faq .plus { transform: rotate(45deg); }
      .a { margin-top: 10px; color: var(--muted); font-size: 18px; line-height: 1.6; }
      .aInner { padding-top: 0; }

      /* FAQ open/close animation (enabled by JS) */
      .js details.faq .a {
        margin-top: 0;
        display: block;
        overflow: hidden;
        height: 0;
        opacity: 0;
        transition: height 260ms ease, opacity 200ms ease;
        will-change: height, opacity;
      }
      .js details.faq[open] .a { opacity: 1; }
      .js details.faq[open] .aInner { padding-top: 10px; }

      /* Final CTA */
      .final {
        border-radius: 32px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        padding: 32px;
        position: relative;
        overflow: hidden;
      }
      @media (min-width: 640px) { .final { padding: 40px; } }
      .final:before,
      .final:after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        filter: blur(60px);
        pointer-events: none;
      }
      .final:before { right: -80px; top: -96px; }
      .final:after { left: -80px; bottom: -96px; }

      .finalRow { position: relative; display: flex; flex-direction: column; gap: 20px; }
      @media (min-width: 768px) { .finalRow { flex-direction: row; align-items: center; justify-content: space-between; } }

      .footer {
        border-top: 1px solid var(--border);
        padding: 48px 0 32px;
        color: rgba(255, 255, 255, 0.7);
      }
      .footerGrid {
        display: grid;
        gap: 32px;
        margin-bottom: 32px;
      }
      @media (min-width: 768px) {
        .footerGrid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
      }
      .footerBrand { display: flex; flex-direction: column; gap: 12px; }
      .footerBrandRow { display: flex; align-items: center; gap: 12px; }
      .footerBrandRow img { width: 45px; height: 45px;}
      .footerBrandName {
        font-family: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
        font-style: italic;
        font-weight: 800;
        letter-spacing: -0.02em;
        font-size: 26px;
        line-height: 1.05;
        color: rgba(255, 255, 255, 0.95);
      }
      .footerBrandDesc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 280px; }
      .footerCol { display: flex; flex-direction: column; gap: 10px; }
      .footerTitle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.8); margin: 0 0 4px; }
      .footerLink { font-size: 14px; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 180ms ease; }
      .footerLink:hover { color: rgba(255,255,255,1); }
      .footerBottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
      @media (min-width: 768px) { .footerBottom { flex-direction: row; justify-content: space-between; align-items: center; } }
      .footerDisclaimer { font-size: 14px; color: rgba(255,255,255,0.8); }
      .footerRow { display: flex; flex-direction: column; gap: 16px; }
      @media (min-width: 640px) { .footerRow { flex-direction: row; align-items: center; justify-content: space-between; } }
      .footLinks { display: flex; flex-wrap: wrap; gap: 10px; }
      .chip {
        border-radius: 14px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 12px;
        font-size: 12px;
        transition: background 180ms ease;
      }
      .chip:hover { background: rgba(255, 255, 255, 0.1); }

      /* Modal */
      .modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }
      .modal.show { display: flex; }
      .modal .backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
      }
      .modal .panel {
        position: relative;
        width: 100%;
        max-width: 420px;
        border-radius: 32px;
        border: 1px solid var(--border);
        background: #0a0a0a;
        box-shadow: var(--shadow);
        padding: 22px;
        overflow: hidden;
      }
      .modalHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
      .xbtn {
        width: 40px;
        height: 40px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.75);
        cursor: pointer;
        transition: background 180ms ease;
      }
      .xbtn:hover { background: rgba(255, 255, 255, 0.1); }

      .modalGrid { margin-top: 18px; display: grid; gap: 18px; }

      .downloadMobile {
        margin-top: 18px;
        display: grid;
        gap: 14px;
      }
      .downloadMobile[hidden] { display: none; }
      .modalBrand { display: flex; align-items: center; gap: 12px; }
      .modalLogo { width: 44px; height: 44px; border-radius: 18px; }
      .modalBrandName {
        font-family: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
        font-style: italic;
        font-weight: 800;
        letter-spacing: -0.02em;
        font-size: 20px;
        line-height: 1.05;
        color: rgba(255, 255, 255, 0.95);
      }

      .storeBtn--full { width: 100%; justify-content: center; }

      /* Download modal: simplified + centered */
      .modal--download {
        padding: 0;
      }
      .modal--download .panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
        min-height: 0;
      }
      .modal--download .modalHeader {
        justify-content: flex-end;
      }
      .modal--download .downloadMobile {
        margin-top: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        text-align: center;
      }
      .modal--download .modalBrand {
        justify-content: center;
        gap: 14px;
      }
      .modal--download .modalLogo {
        width: 56px;
        height: 56px;
      }
      .modal--download .modalBrandName {
        font-size: 24px;
      }
      .modal--download .storeBtn--full {
        width: auto;
        min-width: 280px;
        justify-content: center;
      }
      .qrBox {
        border-radius: 24px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        padding: 16px;
      }
      .qrBox img { border-radius: 18px; background: white; padding: 8px; max-width: 220px; margin: 0 auto; }

      /* Utility */
      .row { display: flex; align-items: center; gap: 10px; }
      .muted { color: var(--muted); }
      .tiny { font-size: 12px; color: var(--muted3); }

      .kicker {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--muted2);
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .dividerTop { border-top: 1px solid var(--border); }

      /* Small helpers */
      .sp10 { height: 10px; }
      .sp18 { height: 18px; }
      .sp24 { height: 24px; }
      .sp32 { height: 32px; }

      /* Legal / Privacy */
      body.legal { overflow-x: hidden; }
      .legalTitle {
        margin: 18px 0 0;
        font-size: 44px;
        letter-spacing: -0.03em;
        line-height: 1.1;
        font-weight: 750;
      }
      @media (max-width: 640px) {
        .legalTitle { font-size: 34px; }
      }
      .legalLead {
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 20px;
        line-height: 1.6;
        max-width: 820px;
      }

      body.legal .legalShell { overflow: hidden; }

      body.legal .tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px;
        border-bottom: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.02);
      }

      body.legal .tab-btn {
        appearance: none;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.85);
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 750;
        cursor: pointer;
        transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
      }
      body.legal .tab-btn:hover {
        background: rgba(255, 255, 255, 0.06);
        transform: translateY(-1px);
      }
      body.legal .tab-btn[aria-selected="true"] {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.32);
        color: rgba(255, 255, 255, 0.98);
      }

      body.legal .tab-panels { padding: 18px; }
      @media (min-width: 768px) {
        body.legal .tab-panels { padding: 24px; }
      }

      body.legal .panel { display: none; }
      body.legal .panel.active { display: block; }

      body.legal .policy-loading {
        padding: 18px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.02);
        color: var(--muted);
        font-size: 16px;
      }

      body.legal .policy-body {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.75;
      }
      body.legal .policy-body h1,
      body.legal .policy-body h2,
      body.legal .policy-body h3 {
        color: rgba(255, 255, 255, 0.92);
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin: 22px 0 10px;
      }
      body.legal .policy-body h1 { font-size: 24px; }
      body.legal .policy-body h2 { font-size: 20px; }
      body.legal .policy-body h3 { font-size: 18px; }
      body.legal .policy-body p { margin: 10px 0; }
      body.legal .policy-body ul,
      body.legal .policy-body ol { margin: 10px 0 10px 18px; padding: 0; }
      body.legal .policy-body li { margin: 6px 0; }
      body.legal .policy-body a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 2px; }
      body.legal .policy-body a:hover { color: rgba(255, 255, 255, 1); }
      body.legal .policy-body hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
      body.legal .policy-body code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.95em;
        padding: 2px 6px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.88);
      }
      body.legal .policy-body pre {
        overflow: auto;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.02);
      }
      body.legal .policy-body pre code {
        border: 0;
        background: transparent;
        padding: 0;
        color: rgba(255, 255, 255, 0.85);
      }

      /* Support */
      .supportFormWrap { padding: 18px; }
      @media (min-width: 768px) {
        .supportFormWrap { padding: 24px; }
      }

      .supportForm { margin: 0; }
      .supportGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      @media (max-width: 640px) {
        .supportGrid { grid-template-columns: 1fr; }
      }

      .supportField { display: flex; flex-direction: column; gap: 8px; }
      .supportField--full { grid-column: 1 / -1; }

      .supportLabel {
        font-size: 13px;
        font-weight: 750;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.85);
      }

      .supportInput,
      .supportTextarea {
        appearance: none;
        width: 100%;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.92);
        padding: 12px 14px;
        font-size: 16px;
        outline: none;
        transition: background 180ms ease, border-color 180ms ease;
      }
      .supportInput:focus,
      .supportTextarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.28);
      }
      .supportTextarea { resize: vertical; min-height: 160px; line-height: 1.5; }

      .supportActions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: center;
      }

      .supportActions .btnPrimary {
        min-width: 260px;
      }

      /* Setup guide tutorial slider */
      .tutoSlider {
        max-width: 920px;
        margin: 26px auto 0;
        padding: 0;
      }

      /* Setup guide pairing steps */
      .pairingStack {
        max-width: 920px;
        margin: 22px auto 0;
        display: flex;
        flex-direction: column;
        gap: 52px;
      }

      .pairingItem {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
      }

      .pairingText {
        width: 100%;
        max-width: none;
        margin: 0;
      }

      .pairingText h3 {
        margin: 6px 0 0;
        font-size: 22px;
        letter-spacing: -0.02em;
      }

      .pairingText p {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.6;
      }

      .pairingImage {
        width: 100%;
        max-width: none;
        margin: 0;
        display: block;
        filter: drop-shadow(var(--shadow));
      }

      @media (min-width: 960px) {
        .pairingItem {
          width: clamp(320px, 50%, 520px);
          max-width: none;
        }
      }

      .tutoFrame {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        isolation: isolate;
      }

      .tutoStage {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        overflow: hidden;
        border-radius: 0;
        box-shadow: none;
        border: 0;
        background: transparent;
        filter: drop-shadow(var(--shadow));
        aspect-ratio: 500 / 990;
      }

      .tutoSlides {
        position: absolute;
        inset: 0;
        z-index: 1;
      }

      .tutoSlide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        will-change: transform;
      }

      .tutoArrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 100px;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #6ea2e7, #a5c8fc);
        color: rgba(255, 255, 255, 0.95);
        z-index: 20;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        pointer-events: auto;
        transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
      }
      .tutoArrow:hover { transform: translateY(-50%) scale(1.04); box-shadow: 0 12px 30px rgba(255, 255, 255, 0.12); }
      .tutoArrow:active { transform: translateY(-50%) scale(1.0); }
      .tutoArrow svg { width: 22px; height: 22px; }
      /* On mobile: hug the screen edges (respect safe areas). */
      .tutoArrow--left { left: env(safe-area-inset-left, 0px); }
      .tutoArrow--right { right: env(safe-area-inset-right, 0px); }

      .tutoArrow:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
      }

      .tutoProgress {
        width: 80%;
        max-width: 800px;
        height: 10px;
        border-radius: 999px;
        margin: 14px auto 0;
        border: 0;
        background: rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }
      .tutoProgressFill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #6ea2e7, #a5c8fc);
        transition: width 260ms ease;
      }

      .tutoCaption {
        width: 80%;
        max-width: 800px;
        margin: 0 auto 1px;
        min-height: 190px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 8px;
        text-align: center;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .tutoCaption.is-changing {
        opacity: 0;
        transform: translateY(6px);
      }

      .tutoCaptionTitle {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      .tutoCaptionBody {
        margin-top: 6px;
        color: var(--muted);
        font-size: 25px;
        line-height: 1.6;
      }

      /* Smaller step text on smaller screens */
      @media (max-width: 640px) {
        .tutoCaptionTitle { font-size: 22px; }
        .tutoCaptionBody { font-size: 18px; }
      }

      @media (max-width: 420px) {
        .tutoCaptionTitle { font-size: 20px; }
        .tutoCaptionBody { font-size: 16px; }
      }

      /* Mobile-only: slightly narrower slider stage */
      @media (max-width: 640px) {
        .tutoSlider .tutoStage,
        .tutoSlider .tutoProgress {
          width: 60%;
        }

        .tutoSlider .tutoCaption {
          width: 80%;
        }
      }

      @keyframes tutoInFromRight {
        from { transform: translateX(110%); }
        to { transform: translateX(0); }
      }
      @keyframes tutoOutToLeft {
        from { transform: translateX(0); }
        to { transform: translateX(-110%); }
      }
      @keyframes tutoInFromLeft {
        from { transform: translateX(-110%); }
        to { transform: translateX(0); }
      }
      @keyframes tutoOutToRight {
        from { transform: translateX(0); }
        to { transform: translateX(110%); }
      }

      .tutoEnterRight { animation: tutoInFromRight 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
      .tutoExitLeft { animation: tutoOutToLeft 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
      .tutoEnterLeft { animation: tutoInFromLeft 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
      .tutoExitRight { animation: tutoOutToRight 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }

      @media (prefers-reduced-motion: reduce) {
        .tutoEnterRight,
        .tutoExitLeft,
        .tutoEnterLeft,
        .tutoExitRight {
          animation: none;
        }
      }

      /* Desktop-only: smaller phone + arrows closer to it */
      @media (min-width: 960px) {
        .tutoFrame {
          width: auto;
          margin-left: 0;
          margin-right: 0;
        }

        .tutoStage {
          width: clamp(320px, 50%, 520px);
          max-width: none;
        }

        .tutoProgress {
          width: clamp(320px, 50%, 520px);
          max-width: none;
        }

        .tutoCaption {
          width: clamp(320px, 50%, 520px);
          max-width: none;
        }

        .tutoArrow--left {
          left: calc(50% - (clamp(320px, 50%, 520px) / 2) - 14px - 60px);
        }
        .tutoArrow--right {
          right: calc(50% - (clamp(320px, 50%, 520px) / 2) - 14px - 60px);
        }
      }

      .supportStatus {
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
        color: var(--muted);
        font-size: 14px;
        font-weight: 650;
      }
      .supportStatus.is-success {
        border-color: rgba(110, 231, 183, 0.35);
        background: rgba(110, 231, 183, 0.08);
        color: rgba(255, 255, 255, 0.92);
      }
      .supportStatus.is-error {
        border-color: rgba(251, 113, 133, 0.35);
        background: rgba(251, 113, 133, 0.10);
        color: rgba(255, 255, 255, 0.92);
      }
      .supportStatus.is-info {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.88);
      }

      .supportGetStartedLink {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 4px;
      }

      .supportGetStartedLink svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }