/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
      @layer properties;
      :root,
      :host {
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --container-lg: 32rem;
        --container-3xl: 48rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --font-weight-extrabold: 800;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
      .relative {
        position: relative;
      }
      .z-10 {
        z-index: 10;
      }
      .mx-auto {
        margin-inline: auto;
      }
      .mt-2 {
        margin-top: calc(var(--spacing) * 2);
      }
      .mt-4 {
        margin-top: calc(var(--spacing) * 4);
      }
      .mt-5 {
        margin-top: calc(var(--spacing) * 5);
      }
      .mt-6 {
        margin-top: calc(var(--spacing) * 6);
      }
      .mt-8 {
        margin-top: calc(var(--spacing) * 8);
      }
      .mt-9 {
        margin-top: calc(var(--spacing) * 9);
      }
      .mt-12 {
        margin-top: calc(var(--spacing) * 12);
      }
      .mt-14 {
        margin-top: calc(var(--spacing) * 14);
      }
      .mr-2 {
        margin-right: calc(var(--spacing) * 2);
      }
      .mb-3 {
        margin-bottom: calc(var(--spacing) * 3);
      }
      .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
      }
      .mb-5 {
        margin-bottom: calc(var(--spacing) * 5);
      }
      .mb-9 {
        margin-bottom: calc(var(--spacing) * 9);
      }
      .mb-10 {
        margin-bottom: calc(var(--spacing) * 10);
      }
      .mb-12 {
        margin-bottom: calc(var(--spacing) * 12);
      }
      .flex {
        display: flex;
      }
      .grid {
        display: grid;
      }
      .max-w-3xl {
        max-width: var(--container-3xl);
      }
      .max-w-\[260px\] {
        max-width: 260px;
      }
      .max-w-\[290px\] {
        max-width: 290px;
      }
      .max-w-\[410px\] {
        max-width: 410px;
      }
      .max-w-lg {
        max-width: var(--container-lg);
      }
      .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
      .flex-col {
        flex-direction: column;
      }
      .flex-wrap {
        flex-wrap: wrap;
      }
      .items-center {
        align-items: center;
      }
      .items-end {
        align-items: flex-end;
      }
      .items-start {
        align-items: flex-start;
      }
      .justify-between {
        justify-content: space-between;
      }
      .justify-start {
        justify-content: flex-start;
      }
      .gap-2 {
        gap: calc(var(--spacing) * 2);
      }
      .gap-3 {
        gap: calc(var(--spacing) * 3);
      }
      .gap-4 {
        gap: calc(var(--spacing) * 4);
      }
      .gap-6 {
        gap: calc(var(--spacing) * 6);
      }
      .gap-8 {
        gap: calc(var(--spacing) * 8);
      }
      .gap-9 {
        gap: calc(var(--spacing) * 9);
      }
      .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
      }
      .border-white\/10 {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(
            in oklab,
            var(--color-white) 10%,
            transparent
          );
        }
      }
      .pt-0 {
        padding-top: calc(var(--spacing) * 0);
      }
      .pt-6 {
        padding-top: calc(var(--spacing) * 6);
      }
      .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
      }
      .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
      }
      .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
      }
      .font-extrabold {
        --tw-font-weight: var(--font-weight-extrabold);
        font-weight: var(--font-weight-extrabold);
      }
      .heading-tight {
        letter-spacing: -0.015em;
      }
      .focus\:not-sr-only {
        &:focus {
          position: static;
          width: auto;
          height: auto;
          padding: 0;
          margin: 0;
          overflow: visible;
          clip: auto;
          white-space: normal;
        }
      }
      .focus\:fixed {
        &:focus {
          position: fixed;
        }
      }
      .focus\:top-4 {
        &:focus {
          top: calc(var(--spacing) * 4);
        }
      }
      .focus\:left-4 {
        &:focus {
          left: calc(var(--spacing) * 4);
        }
      }
      .focus\:z-50 {
        &:focus {
          z-index: 50;
        }
      }
      .focus\:bg-white {
        &:focus {
          background-color: var(--color-white);
        }
      }
      .focus\:p-2 {
        &:focus {
          padding: calc(var(--spacing) * 2);
        }
      }
      .focus\:text-black {
        &:focus {
          color: var(--color-black);
        }
      }
      .md\:col-span-4 {
        @media (width >= 48rem) {
          grid-column: span 4 / span 4;
        }
      }
      .md\:col-span-8 {
        @media (width >= 48rem) {
          grid-column: span 8 / span 8;
        }
      }
      .md\:mx-0 {
        @media (width >= 48rem) {
          margin-inline: calc(var(--spacing) * 0);
        }
      }
      .md\:mt-20 {
        @media (width >= 48rem) {
          margin-top: calc(var(--spacing) * 20);
        }
      }
      .md\:mb-12 {
        @media (width >= 48rem) {
          margin-bottom: calc(var(--spacing) * 12);
        }
      }
      .md\:mb-14 {
        @media (width >= 48rem) {
          margin-bottom: calc(var(--spacing) * 14);
        }
      }
      .md\:grid-cols-3 {
        @media (width >= 48rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      .md\:grid-cols-12 {
        @media (width >= 48rem) {
          grid-template-columns: repeat(12, minmax(0, 1fr));
        }
      }
      .md\:flex-row {
        @media (width >= 48rem) {
          flex-direction: row;
        }
      }
      .md\:items-center {
        @media (width >= 48rem) {
          align-items: center;
        }
      }
      .md\:gap-5 {
        @media (width >= 48rem) {
          gap: calc(var(--spacing) * 5);
        }
      }
      .md\:gap-10 {
        @media (width >= 48rem) {
          gap: calc(var(--spacing) * 10);
        }
      }
      .md\:gap-16 {
        @media (width >= 48rem) {
          gap: calc(var(--spacing) * 16);
        }
      }
      .md\:text-4xl {
        @media (width >= 48rem) {
          font-size: var(--text-4xl);
          line-height: var(--tw-leading, var(--text-4xl--line-height));
        }
      }
      @property --tw-border-style {
        syntax: "*";
        inherits: false;
        initial-value: solid;
      }
      @property --tw-font-weight {
        syntax: "*";
        inherits: false;
      }
      @property --tw-tracking {
        syntax: "*";
        inherits: false;
      }
      @layer properties {
        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
          ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
          *,
          ::before,
          ::after,
          ::backdrop {
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-tracking: initial;
          }
        }
      }


      :root {
        color-scheme: dark;
        --ink: #0d0c12;
        --bone: #f5f3f2;
        --muted: #898694;
        --accent: #9b54f7;
        --stroke: rgba(255, 255, 255, 0.11);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px;
      }
      body {
        margin: 0;
        background: var(--ink);
        color: var(--bone);
        font-family: "Bricolage Grotesque", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
      }
      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }
      button:focus-visible,
      a:focus-visible,
      summary:focus-visible {
        outline: 2px solid #be91ff;
        outline-offset: 4px;
      }
      .wrap {
        width: min(1160px, calc(100% - 48px));
        margin: 0 auto;
      }
      .mono {
        font-family: "JetBrains Mono", monospace;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-size: 10px;
      }
      .display {
        font-weight: 800;
        font-stretch: 100%;
        letter-spacing: -0.04em;
        line-height: 1.05;
      }
      .display-xl {
        font-size: clamp(4.5rem, 7.8vw, 7.8rem);
      }
      .display-lg {
        font-size: clamp(2.9rem, 6vw, 6rem);
      }
      .display-md {
        font-size: clamp(2.3rem, 4.2vw, 4.6rem);
      }
      .muted-line {
        color: #918b9b;
      }
      .section {
        padding: 105px 0;
      }
      .eyebrow {
        color: #a3a0ae;
      }
      .lead {
        color: #a6a1b0;
        line-height: 1.65;
        font-size: clamp(15px, 1.4vw, 18px);
      }
      .btn {
        display: inline-flex;
        gap: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 14px 21px;
        font-size: 13px;
        font-weight: 750;
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease;
        border: 1px solid transparent;
        white-space: nowrap;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn-accent {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 12px 32px #7e29e730;
      }
      .btn-accent:hover {
        background: #ad70fb;
        box-shadow: 0 16px 40px #7e29e755;
      }
      .store-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 55px;
        border: 1px solid rgba(255, 255, 255, 0.36);
        background: #0d0d0fe5;
        border-radius: 11px;
        padding: 8px 17px 8px 14px;
        transition:
          border 0.2s ease,
          transform 0.2s ease,
          background 0.2s ease;
        min-width: 169px;
      }
      .store-badge:hover {
        border-color: white;
        transform: translateY(-2px);
        background: #191821;
      }
      .store-badge .store-small {
        font-size: 10px;
        line-height: 1.15;
        font-weight: 450;
        display: block;
      }
      .store-badge .store-large {
        font-size: 19px;
        line-height: 1.1;
        letter-spacing: -0.035em;
        font-weight: 700;
        display: block;
      }
      .store-icon {
        width: 29px;
        height: 31px;
        flex: none;
      }
      .glass-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        transition:
          background 0.3s,
          border 0.3s;
      }
      .glass-nav.is-scrolled {
        position: fixed;
        background: rgba(13, 12, 18, 0.87);
        backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--stroke);
      }
      .nav-inner {
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
      }
      .brand img {
        display: block;
        width: 112px;
        height: auto;
      }
      .mobile-download .brand img {
        width: 79px;
      }
      .nav-links {
        display: flex;
        gap: 31px;
        align-items: center;
        color: #e6e1e9c2;
        font-size: 13px;
      }
      .nav-links a:hover {
        color: white;
      }
      .nav-cta {
        background: #fff;
        color: #111;
        min-height: 36px;
        font-weight: 800;
        padding: 9px 17px;
        border-radius: 999px;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }
      .mobile-toggle {
        border: 1px solid var(--stroke);
        border-radius: 999px;
        padding: 9px 13px;
        display: none;
        background: #18161fa8;
        color: #fff;
      }
      .hero {
        min-height: 760px;
        height: min(900px, 100svh);
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: grid;
        place-items: center;
        text-align: center;
        background: #454047;
      }
      .hero-media,
      .hero-media video,
      .hero-media .hero-poster {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .hero-media {
        z-index: -2;
      }
      .hero-media video,
      .hero-media .hero-poster {
        object-fit: cover;
        object-position: center 38%;
      }
      .hero-media video {
        opacity: 1;
      }
      .hero-shade {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            180deg,
            #0008 0%,
            #0001 27%,
            #0002 52%,
            #0d0c12d0 100%
          ),
          linear-gradient(90deg, #0003, #0001 65%, #0005);
      }
      .hero-copy {
        position: relative;
        padding: 130px 0 95px;
        z-index: 2;
      }
      .hero-kicker {
        text-shadow: 0 1px 8px #0008;
        color: #f0eef3db;
      }
      .hero h1 {
        margin: 20px auto 12px;
        text-shadow: 0 6px 40px #0004;
      }
      .hero-lead {
        font-size: clamp(16px, 2vw, 20px);
        color: #fff;
        max-width: 460px;
        margin: 0 auto;
        text-shadow: 0 2px 12px #0009;
      }
      .hero-sub {
        font-size: 13px;
        color: #f7f0ffcc;
        margin: 10px auto 24px;
        max-width: 480px;
        line-height: 1.6;
      }
      .store-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }
      .store-row.center {
        justify-content: center;
      }

      .hero-down {
        position: absolute;
        bottom: 26px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff8;
        font-size: 12px;
        text-align: center;
      }
      .wall {
        position: relative;
        overflow: hidden;
        margin-top: -40px;
        z-index: 3;
      }
      .wall-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
        max-width: 1600px;
        margin: auto;
        padding: 0 4px;
      }
      .wall-column {
        display: grid;
        grid-template-rows: 190px 190px;
        gap: 5px;
      }
      .wall-column:nth-child(2n) {
        transform: translateY(26px);
      }
      .wall-column:nth-child(3n) {
        transform: translateY(-19px);
      }
      .media-frame {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        background: #22202a;
        isolation: isolate;
        min-width: 0;
      }
      .media-frame img,
      .media-frame video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .media-frame video {
        z-index: 1;
      }
      .media-frame .tint {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(180deg, transparent 65%, #0006);
        pointer-events: none;
      }
      .media-frame .tag {
        position: absolute;
        z-index: 3;
        top: 12px;
        left: 12px;
      }
      .media-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        border: 1px solid #ffffff0d;
        border-radius: inherit;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #121018c9;
        border: 1px solid #fff3;
        border-radius: 5px;
        padding: 7px 9px;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        line-height: 1;
      }
      .tag-purple {
        background: #9b54f7;
        color: #fff;
        border-color: #b776ff;
      }
      .fade-bottom {
        position: absolute;
        inset: auto 0 0;
        height: 160px;
        background: linear-gradient(to bottom, transparent, var(--ink));
        z-index: 3;
        pointer-events: none;
      }
      .showcase-pair {
        padding: 32px;
        border: 1px solid var(--stroke);
        border-radius: 18px;
        background: #121019;
        overflow: hidden;
      }
      .showcase-pair + .showcase-pair {
        margin-top: 20px;
      }
      .pair-heading {
        display: flex;
        justify-content: space-between;
        gap: 25px;
        align-items: flex-end;
        margin-bottom: 24px;
      }
      .pair-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr);
        align-items: center;
        gap: 50px;
      }
      .pair-videos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: start;
      }
      .portrait-video {
        aspect-ratio: 9 / 16;
        max-height: 490px;
      }
      .landscape-video {
        aspect-ratio: 16 / 9;
      }
      .pair-videos.landscape {
        gap: 15px;
      }
      .pair-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }
      .pair-label span {
        font-size: 12px;
        font-weight: 700;
      }
      .pair-label .mono {
        font-size: 9px;
        color: #827c92;
      }
      .pair-tile {
        min-width: 0;
      }
      .pair-rule {
        height: 1px;
        background: var(--stroke);
        margin: 24px 0;
      }
      .round-arrow {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #fff3;
        background: #ffffff0d;
        color: #fff;
        cursor: pointer;
      }
      .round-arrow:hover {
        background: #ffffff20;
      }
      .round-arrow:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      .step-card {
        border-top: 1px solid var(--stroke);
        padding-top: 20px;
      }
      .step-num {
        color: #a966ff;
        font-size: 11px;
      }
      .step-card h3 {
        font-size: 23px;
        letter-spacing: -0.015em;
        font-weight: 750;
        line-height: 1.1;
        margin: 20px 0 10px;
      }
      .step-card p {
        font-size: 14px;
        color: #aaa6b3;
        line-height: 1.65;
        margin: 0;
        max-width: 330px;
      }
      .feature-card {
        background: #16141d;
        border: 1px solid var(--stroke);
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .feature-card .feature-photo {
        aspect-ratio: 5 / 4;
        position: relative;
        overflow: hidden;
        background: #22202b;
      }
      .feature-card .feature-photo img,
      .feature-card .feature-photo video {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        object-fit: cover;
      }
      .feature-card .feature-content {
        padding: 26px;
        flex: 1;
      }
      .feature-card h3 {
        font-size: 24px;
        line-height: 1.1;
        letter-spacing: -0.015em;
        font-weight: 800;
        margin: 8px 0 10px;
      }
      .feature-card p {
        color: #a5a0ae;
        font-size: 14px;
        line-height: 1.6;
        max-width: 300px;
        margin: 0;
      }
      .download-panel {
        position: relative;
        overflow: hidden;
        border: 1px solid #ab75ff42;
        border-radius: 24px;
        background:
          radial-gradient(ellipse at 80% 65%, #8f40ef49, transparent 53%),
          linear-gradient(120deg, #191125 0%, #171020 46%, #251834 100%);
        min-height: 490px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
        padding: 55px 65px;
        gap: 25px;
      }
      .phone {
        width: 225px;
        height: 435px;
        margin-left: auto;
        margin-right: 15%;
        border: 7px solid #292332;
        background: #18151e;
        border-radius: 37px;
        box-shadow:
          0 25px 65px #000b,
          0 0 0 2px #766388 inset;
        position: relative;
        overflow: hidden;
        transform: rotate(7deg) translateY(33px);
      }
      .phone .notch {
        position: absolute;
        z-index: 6;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        background: #100e15;
        width: 74px;
        height: 20px;
        border-radius: 20px;
      }
      .phone .phone-media {
        position: absolute;
        inset: 0;
        background: #443350;
      }
      .phone .phone-media img,
      .phone .phone-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .phone .phone-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 42px 13px 19px;
        background: linear-gradient(transparent, #0b0a0de8);
        z-index: 4;
      }
      .phone .phone-chip {
        display: inline-block;
        background: #aa62ff;
        color: white;
        font-weight: 800;
        border-radius: 99px;
        font-size: 10px;
        padding: 10px 13px;
        margin-top: 12px;
      }
      .faq-item:first-child {
        border-top: 1px solid var(--stroke);
      }
      .faq-item summary::-webkit-details-marker {
        display: none;
      }
      .faq-item p {
        color: #aaa5b2;
        line-height: 1.75;
        font-size: 14px;
        margin: 0 0 22px;
        max-width: 650px;
      }
      .closing {
        position: relative;
        min-height: 560px;
        display: grid;
        place-items: center;
        overflow: hidden;
        text-align: center;
        background: #25202a;
      }
      .closing:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          var(--ink) 0%,
          #15101a88 28%,
          #1710209c 64%,
          #171020 100%
        );
        z-index: 1;
      }
      .closing .closing-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .closing .closing-content {
        position: relative;
        z-index: 2;
        padding: 80px 20px;
      }
      .footer a:hover {
        color: white;
      }
      .footer p,
      .footer-links {
        font-size: 12px;
        color: #8e899b;
      }
      .mobile-download {
        display: none;
      }

      @media (max-width: 1050px) {
        .nav-links {
          gap: 17px;
        }
        .showcase-pair {
          padding: 24px;
        }
        .pair-layout {
          gap: 24px;
        }
        .download-panel {
          padding: 50px 42px;
        }
        .wall-column {
          grid-template-rows: 145px 145px;
        }
      }
      @media (max-width: 760px) {
        .wrap {
          width: min(100% - 34px, 1160px);
        }
        .section {
          padding: 72px 0;
        }
        .display-xl {
          font-size: clamp(4.2rem, 13.5vw, 5.6rem);
        }
        .display-lg {
          font-size: clamp(2.8rem, 9.2vw, 4.5rem);
        }
        .nav-inner {
          height: 65px;
        }
        .nav-links {
          display: none;
          position: absolute;
          top: 65px;
          left: 0;
          right: 0;
          background: #121019eb;
          padding: 20px 22px 24px;
          border-bottom: 1px solid var(--stroke);
          flex-direction: column;
          align-items: flex-start;
          gap: 18px;
        }
        .nav-links.is-open {
          display: flex;
        }
        .nav-cta {
          display: none;
        }
        .mobile-toggle {
          display: block;
        }
        .hero {
          height: 740px;
          min-height: 690px;
          max-height: 900px;
        }
        .hero-copy {
          padding: 150px 0 100px;
        }
        .hero h1 {
          margin-top: 17px;
        }
        .hero-sub {
          max-width: 330px;
        }
        .hero-media video,
        .hero-media .hero-poster {
          object-position: 66% center;
        }
        .hero-shade {
          background:
            linear-gradient(180deg, #0008 0%, #0003 40%, #0d0c12cd 100%),
            linear-gradient(90deg, #0004, #0004);
        }
        .store-row.center {
          gap: 8px;
        }
        .store-badge {
          min-width: 147px;
          min-height: 50px;
          padding: 7px 9px;
        }
        .store-icon {
          width: 25px;
          height: 25px;
        }
        .store-badge .store-large {
          font-size: 16px;
        }
        .store-badge .store-small {
          font-size: 9px;
        }
        .wall {
          margin-top: -20px;
        }
        .wall-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 4px;
        }
        .wall-column {
          grid-template-rows: 150px 150px;
          gap: 4px;
        }
        .wall-column:nth-child(n + 4) {
          display: none;
        }
        .pair-layout {
          display: block;
        }
        .pair-intro {
          margin-bottom: 24px;
        }
        .pair-videos {
          gap: 8px;
        }
        .showcase-pair {
          padding: 18px;
        }
        .pair-heading {
          align-items: flex-start;
          flex-direction: column;
          gap: 10px;
        }
        .portrait-video {
          max-height: none;
        }
        .pair-videos.landscape {
          gap: 7px;
        }
        .pair-label .mono {
          display: none;
        }
        .feature-card .feature-photo {
          aspect-ratio: 16 / 11;
        }
        .download-panel {
          padding: 43px 25px 0;
          min-height: 670px;
          grid-template-columns: 1fr;
          text-align: center;
          gap: 0;
        }
        .download-panel .store-row {
          justify-content: center;
        }
        .phone {
          margin: 30px auto -100px;
          transform: rotate(6deg);
          width: 205px;
          height: 395px;
        }
        .faq-item summary {
          font-size: 15px;
        }
        .closing {
          min-height: 480px;
        }
        .footer {
          padding-bottom: 110px;
        }
        .mobile-download {
          display: flex;
          position: fixed;
          z-index: 60;
          bottom: 0;
          left: 0;
          right: 0;
          align-items: center;
          gap: 12px;
          justify-content: space-between;
          padding: 11px max(17px, env(safe-area-inset-left))
            calc(11px + env(safe-area-inset-bottom));
          background: #121019e8;
          border-top: 1px solid #ffffff24;
          backdrop-filter: blur(20px);
        }
        .mobile-download .btn {
          padding: 11px 19px;
        }
      }
      @media (max-width: 440px) {
        .display-xl {
          font-size: clamp(3rem, 13vw, 4.9rem);
        }
        .hero {
          height: 695px;
          min-height: 670px;
        }
        .hero-kicker {
          font-size: 9px;
        }
        .hero-sub {
          font-size: 12px;
        }
        .wall-column {
          grid-template-rows: 124px 124px;
        }
        .store-badge {
          min-width: 142px;
        }
        .store-badge .store-large {
          font-size: 15px;
        }
        .showcase-pair {
          padding: 16px;
        }
        .feature-card .feature-content {
          padding: 21px;
        }
        .download-panel {
          min-height: 645px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation: none !important;
          transition: none !important;
        }
      }

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }
      h1,
      h2,
      h3 {
        text-wrap: balance;
      }
      [hidden] {
        display: none !important;
      }
      .steps {
        list-style: none;
        padding-left: 0;
      }
      .closing .display {
        font-size: clamp(2.8rem, 8vw, 8.5rem);
      }
      .creative-modes {
        display: grid;
        gap: 22px;
        margin-bottom: 28px;
      }
      .mode-card {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        min-height: 520px;
        border: 1px solid #b07bf036;
        border-radius: 22px;
        background: #21172e;
      }
      .mode-media,
      .mode-media img,
      .mode-media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .mode-motion::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          0deg,
          #210d40 0%,
          #280f47b8 24%,
          #100c1833 64%
        );
        pointer-events: none;
      }
      .mode-label {
        position: absolute;
        z-index: 3;
        top: 25px;
        left: 27px;
        border: 1px solid #ffffff45;
        border-radius: 999px;
        background: #15101c80;
        backdrop-filter: blur(16px);
        padding: 9px 14px;
        font-size: 12px;
        font-weight: 650;
      }
      .video-toggle {
        display: grid;
        place-items: center;
        position: absolute;
        z-index: 4;
        top: 24px;
        right: 25px;
        width: 43px;
        height: 43px;
        border: 1px solid #ffffff55;
        border-radius: 50%;
        color: #fff;
        background: #17101c80;
        cursor: pointer;
        backdrop-filter: blur(16px);
      }
      .video-toggle:hover {
        background: #9b54f7;
      }
      .mode-copy {
        position: relative;
        z-index: 3;
        max-width: 650px;
        padding: 300px 38px 35px;
      }
      .mode-copy h3 {
        margin: 0 0 12px;
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 750;
        letter-spacing: -0.015em;
        line-height: 1.1;
      }
      .mode-copy p {
        max-width: 510px;
        margin: 0 0 20px;
        color: #e2d8ed;
        font-size: 16px;
        line-height: 1.6;
      }
      .mode-link {
        display: inline-flex;
        align-items: center;
        gap: 26px;
        font-size: 14px;
        font-weight: 700;
      }
      .mode-link:hover {
        color: #d3b3ff;
      }
      .motion-reference {
        position: absolute;
        z-index: 2;
        top: 97px;
        right: 27px;
        width: 24%;
        aspect-ratio: 16 / 10;
        border: 1px solid #ffffff60;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 16px 40px #0005;
      }
      .motion-reference img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .motion-reference span,
      .swap-source span,
      .swap-result > span {
        position: absolute;
        bottom: 12px;
        left: 12px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #0d0c12ad;
        color: #fff;
        font-size: 11px;
        font-weight: 650;
        backdrop-filter: blur(10px);
      }
      .mode-swap {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        align-items: center;
        background:
          radial-gradient(ellipse at 45% 90%, #7730ad40, transparent 65%),
          #17121f;
      }
      .mode-swap .mode-copy {
        grid-column: 1;
        grid-row: 1;
        padding: 108px 38px 50px;
      }
      .swap-visual {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        gap: 20px;
        align-items: center;
        padding: 76px 32px 40px 0;
        position: relative;
      }
      .swap-source,
      .swap-result {
        position: relative;
        overflow: hidden;
        border: 1px solid #ffffff38;
        border-radius: 17px;
        box-shadow: 0 18px 50px #0005;
      }
      .swap-source {
        width: 42%;
        aspect-ratio: 9 / 15;
        transform: rotate(-7deg) translateY(15px);
      }
      .swap-result {
        width: 58%;
        aspect-ratio: 9 / 15;
        transform: rotate(5deg);
      }
      .swap-source img,
      .swap-result img,
      .swap-result video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swap-arrow {
        display: grid;
        place-items: center;
        position: absolute;
        left: 37%;
        top: 49%;
        z-index: 2;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 1px solid #ca9cff;
        background: #9b54f7;
        font-size: 24px;
      }
      .pricing-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 30px;
        margin-bottom: 38px;
      }
      .pricing-heading h2 {
        margin-bottom: 0;
        font-size: clamp(2.65rem, 5.5vw, 5rem);
      }
      .billing-switch {
        display: flex;
        gap: 5px;
        background: #19151f;
        border: 1px solid var(--stroke);
        border-radius: 999px;
        padding: 5px;
      }
      .billing-switch button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
        border: 0;
        border-radius: 999px;
        padding: 13px 22px;
        font-size: 13px;
        font-weight: 700;
        background: transparent;
        color: #bcb4c6;
        cursor: pointer;
      }
      .billing-switch button.is-active {
        background: #9b54f7;
        color: white;
        box-shadow: 0 4px 18px #9b54f72b;
      }
      .billing-switch span {
        margin-left: 0;
        padding: 3px 6px;
        border-radius: 5px;
        background: #f071a2;
        color: #170e19;
        font-size: 10px;
        font-weight: 800;
      }
      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .plan-card {
        display: flex;
        flex-direction: column;
        padding: 26px 23px 24px;
        border: 1px solid #ffffff1c;
        border-radius: 20px;
        background: #17131e;
        min-width: 0;
      }
      .plan-featured {
        border-color: #a963ff;
        background:
          radial-gradient(ellipse at top right, #9b54f71a, transparent 65%),
          #1e1529;
        box-shadow: 0 15px 55px #7838cb16;
      }
      .plan-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      .plan-heading h3 {
        font-size: 26px;
        line-height: 1.1;
        margin: 0;
        letter-spacing: -0.01em;
        text-transform: uppercase;
      }
      .plan-badge,
      .plan-discount {
        padding: 5px 7px;
        border-radius: 5px;
        font-size: 9px;
        line-height: 1;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .plan-badge {
        color: #ddc5ff;
        background: #9b54f72b;
      }
      .plan-discount {
        color: #190e18;
        background: #f071a2;
      }
      .plan-description {
        margin: 10px 0 22px;
        color: #b3aabd;
        font-size: 14px;
      }
      .plan-credits {
        padding: 17px 15px;
        border: 1px solid #ffffff12;
        border-radius: 13px;
        background: #ffffff04;
      }
      .plan-credits > p:first-child {
        font-size: 18px;
        margin: 0 0 8px;
      }
      .plan-credits > p:first-child > span {
        color: #bb83ff;
      }
      .plan-credits > span {
        display: block;
        font-size: 13px;
        color: #b4a9c1;
        line-height: 1.65;
      }
      .plan-credits .credit-value {
        color: #7fd4ad;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.6;
        margin: 9px 0 0;
      }
      .plan-price {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        margin-top: 25px;
      }
      .plan-price > strong {
        font-size: 43px;
        letter-spacing: -0.025em;
        line-height: 1.1;
      }
      .plan-price > span {
        flex: 1 0 90px;
        font-size: 12px;
        line-height: 1.5;
        color: #b4a9c1;
      }
      .plan-price > s {
        font-size: 18px;
        font-weight: 700;
        color: #f383af;
      }
      .plan-saving {
        margin: 9px 0 0;
        color: #7fd4ad;
        font-size: 13px;
        font-weight: 650;
      }
      .plan-features {
        list-style: none;
        margin: 25px 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.6;
      }
      .plan-features li {
        display: flex;
        gap: 10px;
        margin: 7px 0;
      }
      .plan-features li::before {
        content: "✓";
        color: #b582ff;
      }
      .plan-card .btn {
        margin-top: auto;
      }
      .btn-outline {
        border-color: #ffffff30;
        background: #ffffff03;
        color: #f5f3f2;
      }
      .btn-outline:hover {
        background: #ffffff0c;
        border-color: #a86aef;
      }
      .business-plan {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        border: 1px dashed #ab7be33d;
        border-radius: 17px;
        padding: 24px 27px;
        margin-top: 18px;
        background: #9b54f707;
      }
      .business-plan h3 {
        font-size: 18px;
        margin: 0 0 6px;
      }
      .business-plan p {
        font-size: 14px;
        color: #aaa1b5;
        margin: 0;
        line-height: 1.5;
      }
      .business-plan a {
        color: #c38fff;
        font-size: 18px;
        font-weight: 700;
      }
      .business-plan a span {
        display: inline-block;
        margin-left: 15px;
      }
      .faq-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
        gap: 64px;
        align-items: start;
      }
      .faq-heading {
        position: sticky;
        top: 110px;
      }
      .faq-heading h2 {
        font-size: clamp(2.5rem, 3.7vw, 3.5rem);
      }
      .faq-list {
        min-width: 0;
      }
      .faq-item {
        border-bottom: 1px solid var(--stroke);
        border: 0;
        border-top: 1px solid var(--stroke);
        transition: background 0.2s ease;
      }

      .faq-item:last-child {
        border-bottom: 1px solid var(--stroke);
      }
      .faq-item summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 23px 18px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.45;
      }

      .faq-item summary::after {
        content: "+";
        font-size: 22px;
        color: #b4aabb;
        font-weight: 300;
        flex-shrink: 0;
        width: 20px;
        text-align: center;
      }

      .faq-item[open] {
        background: #9b54f711;
        border-radius: 12px;
        border-color: #a76bee3d;
      }
      .faq-item[open] summary {
        color: #c79aff;
      }
      .faq-item[open] summary::after {
        content: "−";
        color: #c79aff;
      }

      .faq-answer {
        padding: 0 18px 24px;
      }
      .faq-answer p {
        margin: 0;
        color: #bcb2c7;
        font-size: 15px;
        line-height: 1.8;
      }
      .faq-answer a {
        color: #c79aff;
        text-decoration: underline;
        text-underline-offset: 4px;
      }
      .footer {
        padding: 65px 0 0;
        border-top: 1px solid #ffffff12;
        overflow: hidden;
      }

      .footer-top {
        display: grid;
        grid-template-columns: 1.7fr 1fr 1fr;
        gap: 50px;
        padding-bottom: 58px;
      }
      .footer-brand p {
        margin-top: 18px;
        font-size: 14px;
      }
      .footer-column h2 {
        font-weight: 400;
        color: #a29aaa;
        margin: 0 0 24px;
      }
      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
        color: #bcb5c5;
      }

      .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 16px;
        padding-top: 23px;
        border-top: 1px solid var(--stroke);
      }
      .footer-bottom p,
      .footer-bottom a {
        margin: 0;
        font-size: 11px;
        line-height: 1.7;
        color: #8f869b;
      }
      .footer-wordmark {
        margin: 48px 0 -0.14em;
        font-size: clamp(3.8rem, 17vw, 15rem);
        line-height: 1;
        font-weight: 800;
        font-stretch: 100%;
        letter-spacing: -0.025em;
        color: transparent;
        -webkit-text-stroke: 1px #3d3549;
        text-align: center;
        user-select: none;
      }

      @media (max-width: 1050px) {
        .faq-layout {
          gap: 32px;
          grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
        }
        .faq-heading h2 {
          font-size: 2.55rem;
        }
        .mode-swap .mode-copy {
          padding-left: 28px;
          padding-right: 20px;
        }
        .plan-card {
          padding: 24px 18px;
        }
        .plan-heading h3 {
          font-size: 23px;
        }
      }
      @media (max-width: 760px) {
        .mode-card {
          min-height: 490px;
          border-radius: 18px;
        }
        .mode-label {
          top: 19px;
          left: 20px;
          font-size: 11px;
        }
        .video-toggle {
          top: 18px;
          right: 20px;
          width: 39px;
          height: 39px;
        }
        .mode-copy {
          padding: 285px 24px 28px;
        }
        .mode-copy p {
          font-size: 14px;
        }
        .motion-reference {
          width: 33%;
          top: 83px;
          right: 20px;
        }
        .mode-swap {
          grid-template-columns: 1fr;
        }
        .swap-visual {
          grid-column: 1;
          grid-row: 1;
          width: min(100%, 470px);
          margin: 0 auto;
          padding: 90px 28px 0;
          gap: 18px;
        }
        .swap-result {
          max-height: 310px;
        }
        .swap-source {
          max-height: 245px;
        }
        .swap-arrow {
          left: 40%;
          top: 56%;
        }
        .mode-swap .mode-copy {
          grid-row: 2;
          padding: 38px 24px 30px;
        }
        .pricing-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .pricing-heading {
          gap: 25px;
          margin-bottom: 25px;
        }
        .billing-switch {
          width: 100%;
        }
        .billing-switch button {
          flex: 1;
        }
        .plan-card {
          padding: 27px 24px;
        }
        .plan-heading h3 {
          font-size: 27px;
        }
        .plan-badge,
        .plan-discount {
          font-size: 10px;
        }
        .plan-credits > p:first-child {
          font-size: 20px;
        }
        .business-plan {
          padding: 24px;
        }
        .business-plan a {
          font-size: 17px;
        }
        .faq-layout {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .faq-heading {
          position: static;
        }
        .faq-heading h2 {
          font-size: clamp(2.8rem, 9.2vw, 4.5rem);
        }
        .faq-item summary {
          padding: 20px 12px;
          font-size: 15px;
          gap: 16px;
        }
        .faq-answer {
          padding: 0 12px 22px;
        }
        .faq-answer p {
          font-size: 14px;
        }
        .footer {
          padding-top: 45px;
          padding-bottom: calc(75px + env(safe-area-inset-bottom));
        }
        .footer-top {
          grid-template-columns: 1fr 1fr;
          gap: 32px 20px;
          padding-bottom: 35px;
        }
        .footer-brand {
          grid-column: 1 / -1;
        }
        .footer-links {
          font-size: 12px;
          gap: 15px;
        }
        .footer-wordmark {
          margin-top: 34px;
        }
      }
      @media (max-width: 440px) {
        .pair-label .tag {
          display: none;
        }
      }
      @media (max-width: 360px) {
        .mode-label {
          max-width: 200px;
          font-size: 10px;
        }
        .plan-card {
          padding: 24px 18px;
        }
        .plan-heading {
          gap: 6px;
        }
        .plan-heading h3 {
          font-size: 25px;
        }
        .plan-badge,
        .plan-discount {
          font-size: 9px;
        }
      }

/* Integration: preserve the reference layout; media never participates in sizing. */
.hero { height: 100svh; min-height: 100svh; }
.hero-media video.hero-slide { opacity: 0; transition: opacity 450ms ease; }
.hero-media video.hero-slide.is-active { opacity: 1; }
.hero-media .hero-shade { z-index: 3; pointer-events: none; }
.hero-web-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hero-retry { color: white; border: 1px solid #ffffff66; }
[hidden] { display: none !important; }
.locale-picker select { color: white; background: #18161f; border: 1px solid #ffffff33; border-radius: 6px; padding: 6px; max-width: 70px; }
.nav-links { gap: clamp(10px, 1.7vw, 25px); }
@media (min-width: 761px) and (max-width: 1100px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 9px; font-size: 11px; }
  .nav-inner .brand img { width: 90px; }
  .nav-cta { padding-inline: 12px; }
}
@media (max-height: 650px) {
  .hero-copy { padding-top: 85px; padding-bottom: 80px; }
  .hero .display-xl { font-size: clamp(40px, 9vh, 80px); }
  .hero-sub { margin-bottom: 12px; }
  .hero-web-actions { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hero-media video.hero-slide { transition: none; } }

.hero #hero-title { text-transform: uppercase; }

html[dir="rtl"] body { font-family: "Noto Sans Arabic", "Bricolage Grotesque", sans-serif; }
/* Added auth and locale links use the compact menu on tablets as well. */
@media (max-width: 1050px) {
  .nav-inner { height: 65px; }
  .nav-links { display: none; position: absolute; top: 65px; left: 0; right: 0; background: #121019eb; padding: 20px 22px 24px; border-bottom: 1px solid var(--stroke); flex-direction: column; align-items: flex-start; gap: 18px; font-size: 13px; max-height: calc(100svh - 65px); overflow-y: auto; }
  .nav-links.is-open { display: flex; }
  .nav-cta { display: none; }
  .mobile-toggle { display: block; }
}
/* Longer translated headings and CTAs must fit the same fixed Hero. */
.hero-copy { min-width: 0; }
html:not([lang="en"]) .hero #hero-title { font-size: clamp(32px, 7vw, 100px); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  html:not([lang="en"]) .hero-copy { padding-top: 100px; padding-bottom: 85px; }
  html:not([lang="en"]) .hero #hero-title { font-size: clamp(30px, 8vw, 55px); }
  .mobile-download .btn { max-width: 65%; white-space: normal; text-align: center; }
  .hero-web-actions .btn { max-width: 100%; white-space: normal; }
}
@media (max-width: 760px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; }
}