/*
 * home.css
 * Homepage-only styles: the scroll-driven ".experience" story (stage,
 * backgrounds, ticker, progress bar), hero + hero phone, scene two, the
 * How It Works carousel, showcase, features, testimonials, pricing, FAQ,
 * the in-page footer choreography, the dating-apps-vs-wadaCrush comparison
 * section, and all homepage-only animations/responsive rules.
 */

#stories,
      #faqs,
      #pricing {
        scroll-margin-top: calc(var(--menu-h) + var(--ticker-h) + 18px);
      }

.experience {
        position: relative;
        height: 780vh;
        min-height: 5200px;
      }

.stage {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 620px;
        overflow: hidden;
        isolation: isolate;
        background: var(--cream);
      }

.bg-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

.bg-lavender {
        background: var(--lavender);
        opacity: 0;
      }

.bg-purple {
        background: var(--purple);
        opacity: 0;
      }

/*
     * NOTE: this overlay deliberately does NOT use `mix-blend-mode`.
     *
     * `.stage` sets `isolation: isolate`, so a blended overlay at z-index 30
     * turns every painted thing beneath it — the whole hero — into a single
     * blend group. WebKit then has to reconcile that group with the descendants
     * that are on their own composited layers (the animated headline letters,
     * the purple panel, the floating decor). On iOS it does not always manage
     * it: the layer stays in the tree and keeps its layout box, but it is never
     * painted into the group, so the element goes invisible while everything
     * around it renders normally.
     *
     * At 3.5% opacity over a cream background, `multiply` and `normal` are
     * visually indistinguishable for a greyscale noise texture, so nothing is
     * lost by dropping it. If this ever needs to come back, scope it to
     * non-WebKit engines rather than applying it globally.
     */
.grain {
        z-index: 30;
        opacity: 0.035;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      }

.ticker {
        position: absolute;
        z-index: 35;
        top: var(--menu-h);
        left: 0;
        width: 100%;
        height: var(--ticker-h);
        overflow: hidden;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        color: var(--ink);
        background: var(--cream);
        font-family: var(--body);
        font-size: 8px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: auto;
      }

.ticker--top {
        top: var(--menu-h);
      }

.ticker__track {
        display: flex;
        width: max-content;
        min-width: 200%;
        animation: ticker 30s linear infinite;
        will-change: transform;
      }

.ticker__group {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: max-content;
      }

.ticker span {
        flex: 0 0 auto;
        padding-right: 36px;
      }

.ticker span::before {
        content: "♥";
        padding-right: 12px;
        color: var(--pink);
      }

@keyframes ticker {
        to {
          transform: translateX(-50%);
        }
      }

.progress {
        position: absolute;
        z-index: 70;
        right: 0;
        top: calc(var(--menu-h) + var(--ticker-h));
        width: 3px;
        height: calc(100% - var(--menu-h) - var(--ticker-h));
        background: rgba(22, 11, 29, 0.08);
      }

.progress__fill {
        width: 100%;
        height: 0%;
        background: var(--pink);
        transform-origin: top;
      }

/* ---------- Heart mascot ---------- */
.mascot-svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
        filter: drop-shadow(0 18px 18px rgba(22, 11, 29, 0.22));
      }

/* ---------- Hero ---------- */
.hero {
        position: absolute;
        top: calc(var(--menu-h) + var(--ticker-h));
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
      }

.hero__word {
        position: absolute;
        top: clamp(-18px, -0.8vw, -6px);
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        text-align: center;
        font-family: var(--display);
        font-size: clamp(104px, 18.8vw, 360px);
        line-height: 0.78;
        letter-spacing: -0.02em;
        white-space: nowrap;
        color: var(--ink);
      }

.hero__tagline {
        position: absolute;
        left: 50%;
        width: min(92%, 760px);
        margin: 0;
        transform: translateX(-50%);
        text-align: center;
        color: rgba(22, 11, 29, 0.72);
        font-size: clamp(9px, 0.9vw, 14px);
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none;
        will-change: transform, opacity;
      }

.hero__panels {
        position: absolute;
        left: var(--pad);
        right: var(--pad);
        bottom: clamp(8px, 1.5vh, 18px);
        height: 61%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
      }

.hero-panel {
        position: relative;
        overflow: hidden;
        padding: clamp(22px, 3vw, 52px);
        background: var(--purple);
        color: var(--white);
        border-radius: 24px 24px 8px 8px;
        border: 1px solid rgba(22, 11, 29, 0.7);
      }

.hero-panel:nth-child(2) {
        background: var(--violet);
      }

.micro {
        max-width: 230px;
        font-size: clamp(8px, 0.73vw, 11px);
        line-height: 1.45;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

.hero-panel__cta {
        position: absolute;
        left: clamp(22px, 3vw, 52px);
        top: 50%;
        transform: translateY(-50%);
      }

.hero-panel__footer {
        position: absolute;
        right: clamp(22px, 3vw, 52px);
        bottom: clamp(18px, 2.6vw, 44px);
        max-width: 260px;
        font-size: clamp(8px, 0.7vw, 11px);
        line-height: 1.45;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

.hero-panel .micro {
        position: relative;
        z-index: 4;
      }

.hero-panel__cta,
      .hero-panel__footer {
        z-index: 4;
      }

.heart-rain {
        position: absolute;
        z-index: 2;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }

.heart-rain__heart {
        position: absolute;
        left: var(--x);
        bottom: var(--settle);
        width: var(--size);
        aspect-ratio: 1.08;
        opacity: 1;
        transform: translate(-50%, 0) rotate(var(--rest-rotate));
        transform-origin: 50% 70%;
        filter: drop-shadow(0 8px 2px rgba(22, 11, 29, 0.2));
        will-change: transform, opacity;
      }

.heart-rain__heart svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
      }

.heart-rain__heart .heart-main {
        fill: var(--heart-color, var(--pink));
        stroke: none;
      }

.heart-rain__heart .heart-shine,
      .heart-rain__heart .heart-rim {
        display: none;
      }

/* The two purple hero panels visually collapse into this single media surface. */
.hero-video-card {
        position: absolute;
        z-index: 3;
        left: 50%;
        right: auto;
        bottom: clamp(8px, 1.5vh, 18px);
        width: calc(100% - (var(--pad) * 2));
        height: 56%;
        overflow: hidden;
        border: 0;
        border-radius: 24px 24px 8px 8px;
        background: var(--purple);
        box-shadow: 0 26px 52px rgba(22, 11, 29, 0.16);
        opacity: 0;
        transform: translateX(-50%);
        transform-origin: 50% 100%;
        pointer-events: none;
        /* Same reasoning as .hero__panels: border-radius/width/height cannot be
         composited, so hinting them buys nothing and only pins this large purple
         surface to a permanent layer. */
        will-change: transform, opacity;
      }

.hero-video-card__media {
        position: absolute;
        inset: 0;
        overflow: hidden;
        opacity: 0;
        transform: scale(1.09);
        will-change: transform, opacity;
      }

.hero-video-card__media iframe {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 122%;
        height: 122%;
        transform: translate(-50%, -50%);
        border: 0;
        pointer-events: none;
      }

/* Keep YouTube's pre-play / restart chrome out of sight while the
       API establishes playback. Once the first PLAYING state arrives this
       cover permanently fades away, so pausing later still shows the frame. */
.hero-video-card__clean-cover {
        position: absolute;
        z-index: 2;
        inset: 0;
        background:
          radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.08),
            transparent 35%
          ),
          var(--purple);
        opacity: 1;
        pointer-events: none;
        transition: opacity 0.28s ease;
      }

.hero-video-card.has-player-started .hero-video-card__clean-cover {
        opacity: 0;
      }

.hero-video-card__autoplay-fallback {
        position: absolute;
        z-index: 5;
        inset: 0;
        display: grid;
        place-items: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.2s ease,
          visibility 0s linear 0.2s;
      }

.hero-video-card.is-autoplay-blocked:not(.has-player-started)
        .hero-video-card__autoplay-fallback {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }

.hero-video-card__autoplay-start {
        min-width: clamp(118px, 18vw, 164px);
        min-height: clamp(42px, 5vw, 54px);
        padding: 0 clamp(16px, 2vw, 24px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 1px solid rgba(255, 255, 255, 0.84);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: var(--ink);
        box-shadow: 0 14px 32px rgba(22, 11, 29, 0.24);
        font: 900 clamp(9px, 0.9vw, 12px)/1 var(--body);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        touch-action: manipulation;
      }

.hero-video-card__autoplay-icon {
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid currentColor;
      }

@media (max-width: 520px) {
.hero-video-card__autoplay-start {
          min-width: 112px;
          min-height: 42px;
          padding-inline: 15px;
          font-size: 9px;
        }
}

.hero-video-card__shade {
        position: absolute;
        inset: 0;
        z-index: 2;
        background:
          linear-gradient(
            180deg,
            rgba(22, 11, 29, 0.1),
            rgba(22, 11, 29, 0.34)
          ),
          radial-gradient(
            circle at center,
            transparent 0 28%,
            rgba(22, 11, 29, 0.12) 75%
          );
        pointer-events: none;
      }

.hero-video-card__play {
        position: absolute;
        z-index: 3;
        right: clamp(14px, 1.8vw, 26px);
        bottom: clamp(14px, 1.8vw, 26px);
        left: auto;
        top: auto;
        width: clamp(42px, 4.2vw, 60px);
        aspect-ratio: 1;
        transform: none;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.88);
        color: var(--ink);
        box-shadow: 0 10px 24px rgba(22, 11, 29, 0.22);
        cursor: pointer;
        pointer-events: auto;
        transition:
          transform 0.2s ease,
          background 0.2s ease;
      }

.hero-video-card__play:hover {
        transform: scale(1.06);
        background: var(--yellow);
      }

.hero-video-card__play::before {
        content: "";
        width: 0;
        height: 0;
        margin-left: 7%;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 17px solid currentColor;
      }

.hero-video-card__play.is-playing::before {
        width: 15px;
        height: 19px;
        margin-left: 0;
        border: 0;
        background: linear-gradient(
          90deg,
          currentColor 0 5px,
          transparent 5px 10px,
          currentColor 10px 15px
        );
      }

.hero-video-card__label {
        position: absolute;
        z-index: 3;
        left: clamp(16px, 2vw, 32px);
        bottom: clamp(14px, 2vw, 28px);
        color: var(--white);
        font: 800 clamp(8px, 0.68vw, 11px)/1.25 var(--body);
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

.hero-phone-wrap {
        position: absolute;
        z-index: 12;
        left: 50%;
        /* JavaScript sets the phone's top edge from the stable sticky-stage viewport. */
        top: 0;
        width: clamp(210px, 24vw, 420px);
        transform: translateX(-50%);
        transform-origin: 50% 0%;
      }

.phone {
        position: relative;
        width: 100%;
        aspect-ratio: 0.515;
        padding: clamp(7px, 0.7vw, 12px);
        border-radius: clamp(32px, 3.6vw, 62px);
        background: var(--ink);
        box-shadow:
          0 28px 40px rgba(22, 11, 29, 0.27),
          0 0 0 2px rgba(255, 255, 255, 0.15) inset;
      }

.phone::before {
        content: "";
        position: absolute;
        z-index: 20;
        width: 34%;
        height: 3.2%;
        top: 1.7%;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--ink);
      }

.phone__screen {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: clamp(25px, 3vw, 50px);
        background: var(--yellow);
      }

.hero-screen {
        position: absolute;
        inset: 0;
        padding: 10% 7% 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background:
          radial-gradient(
            circle at 22% 18%,
            rgba(255, 255, 255, 0.32),
            transparent 17%
          ),
          var(--yellow);
      }

.hero-screen__top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: clamp(6px, 0.58vw, 9px);
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

.hero-screen__title {
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translateX(-50%);
        width: 110%;
        text-align: center;
        font-family: var(--display);
        font-size: clamp(42px, 5vw, 88px);
        line-height: 0.85;
        letter-spacing: -0.02em;
        color: var(--pink);
      }

.hero-screen__mascot {
        position: relative;
        z-index: 3;
        width: 84%;
        margin-top: 24%;
      }

.hero-screen__button {
        width: 90%;
        min-height: clamp(28px, 3vw, 46px);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 999px;
        background: var(--pink);
        color: var(--ink);
        font: inherit;
        font-size: clamp(7px, 0.7vw, 11px);
        font-weight: 900;
        text-transform: uppercase;
        cursor: pointer;
        touch-action: manipulation;
      }

.hero-screen__button:focus-visible {
        outline: 3px solid var(--ink);
        outline-offset: 3px;
      }

/* ---------- First-page load choreography ---------- */
.hero__letter {
        display: inline-block;
        transform-origin: 50% 100%;
        will-change: transform, opacity, filter;
      }

.hero__space {
        display: inline-block;
        width: 0.22em;
      }

.hero-panel,
.hero-phone-wrap .phone,
.hero-screen__mascot,
.hero-screen__title,
.hero-screen__top,
.hero-screen__button,
.hero-panel .micro,
.hero-panel__cta,
.hero-panel__footer,
.heart-rain__heart,
.ticker {
        will-change: transform, opacity, clip-path, filter;
      }

/*
     * Every hint above (and on .hero__letter) exists purely for the one-shot
     * entrance animation. Held past that point they pin a permanent composited
     * layer to each element; on iOS/WebKit some of those layers stop painting on
     * high-resolution devices and the element renders blank while keeping its
     * layout box — the "GOT _ CRUSH?" and missing purple panel symptom.
     * `.intro-done` is added by the intro's completion handler.
     */
.intro-done .hero__letter,
.intro-done .hero-panel,
.intro-done .hero-screen__mascot,
.intro-done .hero-screen__title,
.intro-done .hero-screen__top,
.intro-done .hero-screen__button,
.intro-done .hero-panel .micro,
.intro-done .hero-panel__cta,
.intro-done .hero-panel__footer,
.intro-done .ticker {
        will-change: auto;
      }

/* Prevent a fully assembled first frame before the entrance timeline starts. */
.intro-pending .ticker {
        opacity: 0;
      }

.intro-pending .hero__letter {
        opacity: 0;
        transform: translateY(0.78em) scaleY(0.18);
        filter: blur(5px);
      }

.intro-pending .panel-left {
        opacity: 0;
        clip-path: inset(49.4% 0 49.4% 100% round 999px);
      }

.intro-pending .panel-right {
        opacity: 0;
        clip-path: inset(49.4% 100% 49.4% 0 round 999px);
      }

.intro-pending .hero-phone-wrap .phone {
        opacity: 0.12;
        transform: translateY(30vh) scale(0.94);
      }

.intro-pending .hero-screen__mascot {
        opacity: 0;
        transform: translateY(58%) scale(0.92);
      }

.intro-pending .hero-screen__title {
        opacity: 0;
        transform: translate(-50%, 15px);
      }

.intro-pending .hero-screen__top,
      .intro-pending .hero-screen__button,
      .intro-pending .hero-panel .micro,
      .intro-pending .hero-panel__cta,
      .intro-pending .hero-panel__footer,
      .intro-pending .heart-rain__heart {
        opacity: 0;
      }

/* ---------- Intro question scene ---------- */
.scene-two-layer {
        position: absolute;
        z-index: 18;
        top: calc(var(--menu-h) + var(--ticker-h));
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        will-change: transform;
      }

.scene-two-cover {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: var(--cream);
        opacity: 0;
        pointer-events: none;
      }

.question {
        position: absolute;
        z-index: 4;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

.question__rule {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        background: var(--line);
      }

.question__copy {
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        width: min(620px, 82vw);
        text-align: center;
        font-family: var(--display);
        font-size: clamp(52px, 8.2vw, 150px);
        line-height: 0.72;
        letter-spacing: -0.035em;
        text-transform: uppercase;
      }

.question__line {
        display: block;
        transform-origin: center;
      }

.question__line--pink {
        color: var(--yellow);
      }

.question__small {
        position: absolute;
        font: 800 clamp(7px, 0.65vw, 10px)/1.2 var(--body);
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

.question__small--left {
        left: 22%;
        top: 37%;
      }

.question__small--right {
        right: 21%;
        top: 55%;
      }

.question__mascot {
        position: absolute;
        left: 50%;
        top: 52%;
        width: clamp(84px, 10vw, 155px);
        transform: translate(-50%, -50%);
        padding: 10px;
        border-radius: 22px;
        background: var(--yellow);
      }

.scene-two-layer {
        --video-left: 12vw;
        --video-right: 88vw;
        --video-top: 48%;
        --video-bottom: 98%;
        --video-control-gap: 14px;
        --video-control-pad: clamp(12px, 1.5vw, 22px);
      }

.question__cta-left,
      .question__cta-right {
        position: absolute;
        width: auto;
        display: flex;
        align-items: center;
        gap: var(--video-control-gap);
        pointer-events: auto;
        z-index: 5;
      }

/* On larger screens the buttons sit immediately outside the video,
       connected by short rules rather than sticking to viewport edges. */
.question__cta-left {
        left: auto;
        right: calc(100% - var(--video-left) + var(--video-control-gap));
        top: calc(var(--video-top) + var(--video-control-pad));
      }

.question__cta-right {
        left: calc(var(--video-right) + var(--video-control-gap));
        right: auto;
        top: calc(var(--video-bottom) - var(--video-control-pad));
        transform: translateY(-100%);
      }

.question__cta-left .pill,
      .question__cta-right .pill {
        flex: 0 0 auto;
        pointer-events: auto;
        cursor: pointer;
      }

.question__cta-left::after,
      .question__cta-right::before {
        content: "";
        position: absolute;
        top: 50%;
        width: var(--video-control-gap);
        height: 1px;
        background: var(--line);
      }

.question__cta-left::after {
        left: 100%;
      }

.question__cta-right::before {
        right: 100%;
      }

/* ---------- Page-two horizontal How It Works experience ---------- */
.scene-two-pages {
        position: absolute;
        inset: 0;
        width: 200%;
        height: 100%;
        display: flex;
        transform: translateX(0);
        transition: transform 0.92s cubic-bezier(0.76, 0, 0.24, 1);
        will-change: transform;
      }

.scene-two-pages.is-how-open {
        transform: translateX(-50%);
      }

.scene-two-page {
        position: relative;
        flex: 0 0 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
      }

.scene-two-page--main {
        pointer-events: auto;
      }

.scene-two-page--how {
        background:
          radial-gradient(
            circle at 82% 15%,
            rgba(255, 92, 168, 0.13),
            transparent 24%
          ),
          radial-gradient(
            circle at 12% 86%,
            rgba(138, 35, 135, 0.1),
            transparent 26%
          ),
          var(--cream);
        pointer-events: none;
      }

.scene-two-pages.is-how-open .scene-two-page--main {
        pointer-events: none;
      }

.scene-two-pages.is-how-open .scene-two-page--how {
        pointer-events: auto;
      }

.scene-two-layer.is-how-open {
        pointer-events: auto;
      }

.how-panel {
        --how-gap: 24px;
        position: absolute;
        inset: 0;
        height: var(--how-visible-height, 100%);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: clamp(12px, 1.8vh, 22px);
        padding: clamp(16px, 2.3vw, 34px) clamp(18px, 4vw, 64px)
          clamp(14px, 2vw, 28px);
      }

.how-panel__header {
        position: relative;
        z-index: 4;
        display: grid;
        grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
        align-items: center;
        gap: 16px;
      }

.how-panel__back,
      .how-carousel__arrow {
        border: 0;
        color: var(--ink);
        background: transparent;
        font-family: var(--body);
        cursor: pointer;
      }

.how-panel__back {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

.how-panel__back-icon {
        width: 42px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(22, 11, 29, 0.45);
        border-radius: 50%;
        font-size: 18px;
        transition:
          transform 0.25s ease,
          background 0.25s ease;
      }

.how-panel__back:hover .how-panel__back-icon {
        transform: translateX(-4px);
        background: var(--yellow);
      }

.how-panel__heading {
        text-align: center;
        min-width: 0;
      }

.how-panel__eyebrow {
        display: block;
        margin-bottom: 3px;
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.62);
      }

.how-panel__title {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(44px, 5.2vw, 86px);
        font-weight: 400;
        line-height: 0.78;
        letter-spacing: -0.025em;
        text-transform: uppercase;
      }

.how-panel__range {
        justify-self: end;
        min-width: 82px;
        text-align: right;
        font-size: clamp(8px, 0.72vw, 11px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

.how-carousel {
        min-height: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding-block: clamp(6px, 1vh, 12px);
      }

.how-carousel__viewport {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        border-radius: clamp(26px, 2.6vw, 42px);
        touch-action: pan-y;
      }

.how-carousel__track {
        display: flex;
        align-items: center;
        gap: var(--how-gap);
        width: max-content;
        max-height: 100%;
        transform: translateX(0);
        transition: transform 0.72s cubic-bezier(0.72, 0, 0.2, 1);
        will-change: transform;
      }

.how-video-card {
        --poster-a: #8a2387;
        --poster-b: #ff8dc3;
        --poster-c: #f2dd21;
        position: relative;
        flex: 0 0 auto;
        aspect-ratio: 9 / 16;
        max-height: 100%;
        overflow: hidden;
        border: 0;
        border-radius: clamp(26px, 2.5vw, 42px);
        background: var(--purple);
        box-shadow: 0 22px 44px rgba(22, 11, 29, 0.15);
        opacity: 0;
        transform: translateX(82px) rotate(2.4deg) scale(0.955);
        cursor: pointer;
        isolation: isolate;
      }

.scene-two-pages.is-how-open .how-video-card {
        animation: howVideoCardIn 0.76s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: calc(0.26s + (var(--card-index) * 0.075s));
      }

@keyframes howVideoCardIn {
        to {
          opacity: 1;
          transform: translateX(0) rotate(0) scale(1);
        }
      }

.how-video-card__poster,
      .how-video-card__embed,
      .how-video-card__shade {
        position: absolute;
        inset: 0;
      }

.how-video-card__poster {
        z-index: 1;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 28% 24%,
            rgba(255, 255, 255, 0.38),
            transparent 16%
          ),
          radial-gradient(circle at 76% 72%, var(--poster-c), transparent 25%),
          linear-gradient(148deg, var(--poster-a), var(--poster-b));
        transition: opacity 0.35s ease;
      }

.how-video-card__poster::before,
      .how-video-card__poster::after {
        content: "";
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.38);
        border-radius: 50%;
      }

.how-video-card__poster::before {
        width: 76%;
        aspect-ratio: 1;
        left: -24%;
        top: 20%;
      }

.how-video-card__poster::after {
        width: 60%;
        aspect-ratio: 1;
        right: -22%;
        bottom: 10%;
      }

.how-video-card__number {
        position: absolute;
        z-index: 2;
        top: clamp(17px, 1.8vw, 28px);
        left: clamp(17px, 1.8vw, 28px);
        font-family: var(--display);
        font-size: clamp(58px, 6vw, 96px);
        line-height: 0.72;
        letter-spacing: -0.03em;
        color: rgba(255, 255, 255, 0.86);
      }

.how-video-card__heart {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 45%;
        width: 46%;
        transform: translate(-50%, -50%) rotate(-7deg);
        filter: drop-shadow(0 18px 18px rgba(22, 11, 29, 0.18));
      }

.how-video-card__heart path {
        fill: rgba(255, 255, 255, 0.88);
      }

.how-video-card__embed {
        z-index: 2;
        background: var(--ink);
        opacity: 0;
        transition: opacity 0.35s ease;
      }

.how-video-card__embed iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }

.how-video-card.is-playing .how-video-card__poster {
        opacity: 0;
      }

.how-video-card.is-playing .how-video-card__embed {
        opacity: 1;
      }

.how-video-card__shade {
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(22, 11, 29, 0.04) 34%,
          rgba(22, 11, 29, 0.72) 100%
        );
      }

.how-video-card__play {
        position: absolute;
        z-index: 5;
        left: 50%;
        top: 50%;
        width: clamp(44px, 4.6vw, 66px);
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: var(--ink);
        box-shadow: 0 12px 24px rgba(22, 11, 29, 0.2);
        pointer-events: none;
        transition:
          transform 0.25s ease,
          opacity 0.25s ease;
      }

.how-video-card:hover .how-video-card__play {
        transform: translate(-50%, -50%) scale(1.08);
      }

.how-video-card.is-playing .how-video-card__play {
        opacity: 0;
      }

.how-video-card__play::before {
        content: "";
        width: 0;
        height: 0;
        margin-left: 4px;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 14px solid currentColor;
      }

.how-video-card__copy {
        position: absolute;
        z-index: 5;
        left: clamp(16px, 1.8vw, 28px);
        right: clamp(16px, 1.8vw, 28px);
        bottom: clamp(16px, 1.8vw, 28px);
        color: var(--white);
        pointer-events: none;
      }

.how-video-card__kicker {
        display: block;
        margin-bottom: 6px;
        font-size: clamp(6.5px, 0.58vw, 9px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        opacity: 0.76;
      }

.how-video-card__copy h3 {
        margin: 0;
        max-width: 13ch;
        font-family: var(--display);
        font-size: clamp(25px, 2.6vw, 44px);
        font-weight: 400;
        line-height: 0.86;
        letter-spacing: -0.015em;
        text-transform: uppercase;
      }

.how-carousel__controls {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
      }

.how-carousel__hint {
        justify-self: start;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.6);
      }

.how-carousel__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }

.how-carousel__dot {
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(22, 11, 29, 0.22);
        cursor: pointer;
        transition:
          width 0.25s ease,
          background 0.25s ease;
      }

.how-carousel__dot.is-active {
        width: 28px;
        background: var(--pink);
      }

.how-carousel__arrows {
        justify-self: end;
        display: flex;
        gap: 8px;
      }

.how-carousel__arrow {
        width: 44px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(22, 11, 29, 0.38);
        border-radius: 50%;
        font-size: 18px;
        transition:
          background 0.2s ease,
          opacity 0.2s ease,
          transform 0.2s ease;
      }

.how-carousel__arrow:not(:disabled):hover {
        background: var(--yellow);
        transform: scale(1.05);
      }

.how-carousel__arrow:disabled {
        opacity: 0.28;
        cursor: default;
      }

@media (max-width: 1180px) {
.how-panel {
          --how-gap: 18px;
          padding-inline: clamp(18px, 3.2vw, 40px);
        }

.how-panel__header {
          grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr);
        }

.how-panel__title {
          font-size: clamp(38px, 6vw, 66px);
        }

.how-panel__back-label {
          display: none;
        }
}

@media (max-width: 640px) {
.how-panel {
          --how-gap: 14px;
          gap: 10px;
          padding: 12px 14px 11px;
        }

.how-panel__header {
          grid-template-columns: 44px minmax(0, 1fr) 54px;
          gap: 8px;
        }

.how-panel__back-icon {
          width: 38px;
        }

.how-panel__title {
          font-size: clamp(32px, 11vw, 48px);
        }

.how-panel__eyebrow {
          max-width: 30ch;
          margin-inline: auto;
          font-size: 6.5px;
        }

.how-panel__range {
          min-width: 0;
          font-size: 7px;
        }

.how-video-card {
          border-radius: 28px;
        }

.how-carousel__hint {
          display: none;
        }

.how-carousel__controls {
          grid-template-columns: 1fr auto;
        }

.how-carousel__dots {
          justify-self: start;
        }

.how-carousel__arrows {
          justify-self: end;
        }

.how-carousel__arrow {
          width: 40px;
        }

.how-video-card__copy h3 {
          font-size: clamp(28px, 9vw, 40px);
        }
}

@media (max-height: 560px) and (orientation: landscape) {
.how-panel {
          gap: 7px;
          padding-block: 8px;
        }

.how-panel__title {
          font-size: clamp(28px, 6vw, 48px);
        }

.how-panel__eyebrow,
        .how-carousel__hint {
          display: none;
        }

.how-panel__back-icon,
        .how-carousel__arrow {
          width: 34px;
        }

.how-carousel__controls {
          min-height: 34px;
        }
}

@media (prefers-reduced-motion: reduce) {
.scene-two-pages,
        .how-carousel__track {
          transition: none;
        }

.scene-two-pages.is-how-open .how-video-card {
          animation: none;
          opacity: 1;
          transform: none;
        }
}

/* ---------- App showcase scene ---------- */
.page-three-layer {
        position: absolute;
        z-index: 12;
        top: calc(var(--menu-h) + var(--ticker-h));
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        background: var(--cream);
        opacity: 0;
        pointer-events: none;
        will-change: transform, opacity;
      }

.showcase {
        position: absolute;
        z-index: 1;
        top: 0;
        right: var(--pad);
        bottom: 0;
        left: var(--pad);
        opacity: 1;
        pointer-events: none;
      }

.showcase__field {
        position: absolute;
        inset: clamp(10px, 1vw, 18px) 0;
        border-radius: 24px;
        background: #d8d2dc;
        border: 1px solid rgba(22, 11, 29, 0.16);
        overflow: hidden;
      }

.showcase__halo {
        position: absolute;
        width: 52vw;
        aspect-ratio: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 92, 168, 0.28),
          rgba(138, 35, 135, 0.04) 47%,
          transparent 67%
        );
        filter: blur(12px);
      }

.app-phone-wrap {
        position: absolute;
        z-index: 5;
        width: clamp(205px, 20vw, 350px);
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
      }

.app-screen {
        position: absolute;
        inset: 0;
        padding: 12% 7% 6%;
        background: var(--cream);
        opacity: 0;
      }

.app-screen--connections {
        opacity: 1;
      }

.app-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: calc(3% + 30px);
      }

.app-kicker {
        font-size: clamp(6px, 0.52vw, 9px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--purple);
      }

.app-title {
        margin: 1% 0 0;
        font-family: var(--display);
        font-size: clamp(29px, 3vw, 52px);
        line-height: 0.86;
        letter-spacing: -0.03em;
        text-transform: uppercase;
      }

.app-dot {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--ink);
        color: var(--white);
        font-size: 10px;
      }

.connection-track {
        position: absolute;
        left: 7%;
        right: 7%;
        top: 50%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(10px, 1vw, 15px);
        width: auto;
        will-change: transform;
      }

.connection {
        width: clamp(64px, 6.6vw, 106px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(6px, 0.7vw, 10px);
        text-align: center;
        flex: 0 0 auto;
      }

.connection-avatar {
        width: clamp(64px, 6.4vw, 104px);
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid var(--ink);
        background: var(--white);
        box-shadow: 0 10px 24px rgba(22, 11, 29, 0.1);
        isolation: isolate;
      }

.connection-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 24%;
        display: block;
        transform: scale(1.08);
      }

.connection-avatar:has(> :not(img))::before,
      .connection-avatar:not(:has(img))::before {
        content: "PHOTO";
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        color: rgba(22, 11, 29, 0.42);
        font-size: clamp(6px, 0.5vw, 8px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background:
          radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.9),
            transparent 28%
          ),
          var(--lavender);
      }

.connection:nth-child(1) .connection-avatar img {
        object-position: center 22%;
        transform: scale(1.11);
      }

.connection:nth-child(2) .connection-avatar img {
        object-position: center 22%;
        transform: scale(1.09);
      }

.connection:nth-child(3) .connection-avatar img {
        object-position: center 24%;
        transform: scale(1.1);
      }

.connection:nth-child(4) .connection-avatar img {
        object-position: center 22%;
        transform: scale(1.07);
      }

.connection:nth-child(5) .connection-avatar img {
        object-position: center 22%;
        transform: scale(1.1);
      }

.connection-label {
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.05;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        color: var(--ink);
      }

.connection-promise,
      .mutual-promise {
        position: absolute;
        left: 7%;
        right: 7%;
        top: 66%;
        text-align: center;
        opacity: 1;
        transform: none;
      }

.connection-promise h4,
      .mutual-promise h4 {
        margin: 0;
        font-size: clamp(14px, 1.48vw, 24px);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.18;
      }

.connection-promise p,
      .mutual-promise p {
        margin: clamp(6px, 0.58vw, 9px) auto 0;
        max-width: 88%;
        font-size: clamp(7px, 0.6vw, 10px);
        font-weight: 500;
        line-height: 1.4;
        color: rgba(22, 11, 29, 0.86);
      }

.app-tabs {
        position: absolute;
        left: 7%;
        right: 7%;
        bottom: 5%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
      }

.app-tab {
        padding-top: 7px;
        border-top: 2px solid rgba(22, 11, 29, 0.22);
        font-family: var(--display);
        font-size: clamp(15px, 1.5vw, 26px);
        line-height: 0.85;
        text-transform: uppercase;
      }

.app-tab:first-child {
        border-color: var(--ink);
      }

/* The delivered screen represents the Rush step. */
#screenSent .app-tab:first-child,
      #screenMutual .app-tab:first-child {
        border-color: rgba(22, 11, 29, 0.22);
      }

#screenSent .app-tab:nth-child(2) {
        border-color: var(--ink);
      }

#screenMutual .app-tab:nth-child(3) {
        border-color: var(--ink);
      }

#screenMutual .app-dot {
        animation: mutualDotPop 2.4s ease-in-out infinite;
        transform-origin: center;
      }

.send-lock {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 50%;
        width: auto;
        margin: 0;
        text-align: center;
        perspective: 700px;
        transform: translateY(-50%);
      }

/* Notification proportions and hierarchy follow the supplied Scene.json:
       a wide soft-gray rounded card, a dark app icon on the left, and compact
       notification copy. Watermark artwork from the reference is not used. */
.discreet-alert {
        position: relative;
        display: grid;
        grid-template-columns: clamp(26px, 2.8vw, 38px) minmax(0, 1fr);
        align-items: center;
        gap: clamp(7px, 0.8vw, 11px);
        min-height: clamp(70px, 7.2vw, 104px);
        padding: clamp(10px, 1.1vw, 14px) clamp(9px, 1.05vw, 15px);
        overflow: visible;
        border: 1px solid rgba(255, 255, 255, 0.78);
        border-radius: clamp(18px, 2vw, 29px);
        background: rgba(230, 230, 230, 0.92);
        box-shadow:
          0 15px 34px rgba(22, 11, 29, 0.17),
          0 2px 7px rgba(22, 11, 29, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(24px) saturate(145%);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
        opacity: 0;
        transform: translateY(18px) scale(0.6);
        transform-origin: 50% 50%;
        isolation: isolate;
      }

.discreet-alert::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 1px;
        border-radius: inherit;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent 42%),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0)
          );
        pointer-events: none;
      }

.send-lock.is-active .discreet-alert {
        animation: sentBubblePop 0.72s cubic-bezier(0.22, 0.82, 0.24, 1.08) both;
      }

.discreet-alert__app-icon {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        overflow: visible;
        border-radius: 0;
        color: var(--white);
        background: transparent;
        box-shadow: none;
        opacity: 0;
        transform: scale(0.55);
      }

.discreet-alert__app-icon svg {
        width: 100%;
        height: auto;
        overflow: visible;
        filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18));
      }

.discreet-alert__app-icon .heart-lock {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: clamp(8px, 0.82vw, 13px);
        line-height: 1;
        filter: drop-shadow(0 2px 1px rgba(22, 11, 29, 0.22));
        animation: sentLockSettle 0.72s cubic-bezier(0.18, 0.86, 0.24, 1.2)
          0.18s both;
      }

.send-lock.is-active .discreet-alert__app-icon {
        animation: sentIconPop 0.58s cubic-bezier(0.2, 0.84, 0.22, 1.18) 0.08s
          both;
      }

.discreet-alert__content {
        min-width: 0;
        padding-right: 0;
        text-align: left;
      }

.discreet-alert__topline {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: clamp(5px, 0.5vw, 8px);
        opacity: 0;
        transform: translateY(12px);
      }

.discreet-alert__app-name {
        min-width: 0;
        overflow: hidden;
        color: rgba(22, 11, 29, 0.92);
        font-size: clamp(6px, 0.56vw, 9px);
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.045em;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.discreet-alert__time {
        flex: 0 0 auto;
        color: rgba(22, 11, 29, 0.48);
        font-size: clamp(5.4px, 0.48vw, 7.5px);
        font-weight: 700;
        line-height: 1;
        margin-left: auto;
        text-align: right;
      }

.discreet-alert__title {
        margin: 0;
        color: rgba(22, 11, 29, 0.96);
        font-size: clamp(7.2px, 0.7vw, 10.8px);
        font-weight: 900;
        line-height: 1.18;
        opacity: 0;
        transform: translateY(12px);
      }

.discreet-alert__message {
        display: block;
        overflow: visible;
        margin: clamp(3px, 0.38vw, 6px) 0 0;
        color: rgba(22, 11, 29, 0.72);
        font-size: clamp(6px, 0.54vw, 8.6px);
        font-weight: 500;
        line-height: 1.28;
        -webkit-box-orient: initial;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        opacity: 0;
        transform: translateY(12px);
      }

.send-lock.is-active .discreet-alert__topline {
        animation: sentCopyIn 0.38s ease 0.2s both;
      }

.send-lock.is-active .discreet-alert__title {
        animation: sentCopyIn 0.38s ease 0.27s both;
      }

.send-lock.is-active .discreet-alert__message {
        animation: sentCopyIn 0.38s ease 0.34s both;
      }

/* The anchor moves the existing v66 3D heart-and-lock badge to the
       notification's top-right corner without changing its animation. */
.discreet-alert__badge-anchor {
        position: absolute;
        z-index: 5;
        top: 0;
        right: clamp(6px, 0.55vw, 10px);
        width: clamp(28px, 3.1vw, 48px);
        height: 0;
        pointer-events: none;
      }

.discreet-alert__badge {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 0;
        width: 100%;
        aspect-ratio: 1.08;
        opacity: 0;
        transform: translate(-50%, -68%) translateY(-20px) scale(0.435)
          rotate(-7deg);
        transform-origin: 50% 68%;
        filter: drop-shadow(0 10px 9px rgba(22, 11, 29, 0.24));
      }

.send-lock.is-active .discreet-alert__badge {
        animation: sentBadgePop 0.88s cubic-bezier(0.16, 0.88, 0.24, 1.22) 0.18s
          both;
      }

.discreet-alert__badge-inner {
        position: relative;
        width: 100%;
        height: 100%;
      }

.send-lock.is-active .discreet-alert__badge-inner {
        animation: sentBadgeFloat 2.8s ease-in-out 1.05s infinite;
      }

.heart-3d {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
      }

.heart-lock {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 49%;
        transform: translate(-50%, -50%);
        font-size: clamp(10.5px, 1.11vw, 18px);
        line-height: 1;
        filter: drop-shadow(0 3px 2px rgba(22, 11, 29, 0.24));
      }

.send-lock.is-active .heart-lock {
        animation: sentLockSettle 0.72s cubic-bezier(0.18, 0.86, 0.24, 1.2)
          0.62s both;
      }

.send-lock__promise {
        display: none !important;
      }

@keyframes mutualDotPop {
        0%,
        100% {
          transform: scale(1) rotate(0deg);
        }
        18% {
          transform: scale(1.12) rotate(-6deg);
        }
        32% {
          transform: scale(0.96) rotate(4deg);
        }
        46% {
          transform: scale(1.04) rotate(0deg);
        }
        60% {
          transform: scale(1) rotate(0deg);
        }
      }

@keyframes sentBubblePop {
        0% {
          opacity: 0;
          transform: translateY(18px) scale(0.6);
        }
        58% {
          opacity: 1;
          transform: translateY(-2px) scale(1.04);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

@keyframes sentIconPop {
        0% {
          opacity: 0;
          transform: scale(0.55);
        }
        68% {
          opacity: 1;
          transform: scale(1.08);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }

@keyframes sentCopyIn {
        from {
          opacity: 0;
          transform: translateY(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

@keyframes sentPromiseIn {
        from {
          opacity: 0;
          transform: translateY(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

@keyframes sentBadgePop {
        0% {
          opacity: 0;
          transform: translate(-50%, -68%) translateY(-20px) scale(0.58)
            rotate(-7deg);
        }
        62% {
          opacity: 1;
          transform: translate(-50%, -68%) translateY(-24px) scale(1.08)
            rotate(3deg);
        }
        82% {
          transform: translate(-50%, -68%) translateY(-19px) scale(0.96)
            rotate(-1deg);
        }
        100% {
          opacity: 1;
          transform: translate(-50%, -68%) translateY(-20px) scale(1) rotate(0);
        }
      }

@keyframes sentBadgeFloat {
        0%,
        100% {
          transform: translateY(0) rotate(0);
        }
        50% {
          transform: translateY(-4px) rotate(1.5deg);
        }
      }

@keyframes sentLockSettle {
        0% {
          transform: translate(-50%, -72%) scale(0.72) rotate(-10deg);
        }
        62% {
          transform: translate(-50%, -46%) scale(1.12) rotate(5deg);
        }
        100% {
          transform: translate(-50%, -50%) scale(1) rotate(0);
        }
      }

@media (prefers-reduced-motion: reduce) {
.send-lock.is-active .discreet-alert,
        .send-lock.is-active .discreet-alert__app-icon,
        .send-lock.is-active .discreet-alert__topline,
        .send-lock.is-active .discreet-alert__title,
        .send-lock.is-active .discreet-alert__message,
        .send-lock.is-active .discreet-alert__badge,
        .send-lock.is-active .discreet-alert__badge-inner,
        .send-lock.is-active .heart-lock,
        .send-lock.is-active .send-lock__promise {
          animation: none;
        }

.send-lock.is-active .discreet-alert,
        .send-lock.is-active .discreet-alert__app-icon,
        .send-lock.is-active .discreet-alert__topline,
        .send-lock.is-active .discreet-alert__title,
        .send-lock.is-active .discreet-alert__message,
        .send-lock.is-active .send-lock__promise {
          opacity: 1;
          transform: none;
        }

.send-lock.is-active .discreet-alert__badge {
          opacity: 1;
          transform: translate(-50%, -68%) translateY(-20px);
        }
}

.mutual-card {
        position: absolute;
        inset: 0;
        padding: 12% 7% 6%;
        background: var(--cream);
      }

#screenMutual .app-head {
        margin-top: calc(3% + 30px);
      }

.mutual-faces {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 76%;
        height: 27%;
        transform: translate(-50%, calc(-50% + 25px));
      }

.face {
        position: absolute;
        width: 44%;
        aspect-ratio: 1;
        border: 2px solid var(--ink);
        border-radius: 50%;
        background: var(--pink);
        box-shadow: 0 10px 24px rgba(22, 11, 29, 0.1);
        overflow: hidden;
        isolation: isolate;
      }

.face:first-child {
        left: 6%;
        top: 12%;
      }

.face:last-child {
        right: 6%;
        top: 12%;
        background: var(--purple);
      }

.face img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 24%;
        display: block;
        transform: scale(1.08);
      }

.face:has(> :not(img))::before,
      .face:not(:has(img))::before,
      .face:empty::before {
        content: "PHOTO";
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        color: rgba(22, 11, 29, 0.42);
        font-size: clamp(7px, 0.56vw, 9px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background:
          radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.88),
            transparent 28%
          ),
          rgba(255, 255, 255, 0.72);
      }

.face.face--purple:empty::before,
      .face.face--purple:not(:has(img))::before,
      .face.face--purple:has(> :not(img))::before {
        color: rgba(255, 255, 255, 0.72);
        background:
          radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.28),
            transparent 28%
          ),
          rgba(138, 35, 135, 0.88);
      }

.mutual-heart {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 8%;
        transform: translateX(-50%);
        font-size: clamp(28px, 3vw, 52px);
        color: var(--pink);
        text-shadow: 0 3px 0 var(--ink);
      }

/* ---------- Feature cards ---------- */
.features {
        position: absolute;
        z-index: 2;
        left: var(--pad);
        right: var(--pad);
        bottom: 24px;
        height: 31%;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        will-change: transform;
      }

.features__track {
        height: 100%;
      }

.features__group {
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(5px, 0.6vw, 10px);
      }

.features__group--clone {
        display: none;
      }

.feature {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: clamp(16px, 2vw, 30px);
        border: 0;
        border-radius: clamp(22px, 2.2vw, 36px);
        background: #e4e2e5;
        color: var(--ink);
        transform-origin: 50% 100%;
        will-change: transform, border-radius;
      }

.feature__number {
        font-family: var(--display);
        font-size: clamp(46px, 5.4vw, 100px);
        line-height: 0.76;
        letter-spacing: -0.035em;
      }

.feature h3 {
        margin: auto 0 7px;
        max-width: 27ch;
        font-size: clamp(13px, 1.15vw, 20px);
        line-height: 1.02;
        letter-spacing: -0.025em;
      }

.feature p {
        margin: 0;
        max-width: 39ch;
        font-size: clamp(8px, 0.68vw, 12px);
        line-height: 1.4;
        color: rgba(22, 11, 29, 0.72);
      }

@keyframes featureCarousel {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(calc(-50% - 5px));
        }
      }

/* ---------- Responsive ---------- */
@media (max-width: 1180px),
        (orientation: portrait) and (max-width: 1366px) {
.hero__word {
          top: clamp(-12px, -0.4vh, -3px);
          width: calc(100% - 18px);
          font-size: clamp(64px, 15vw, 176px);
          letter-spacing: -0.022em;
        }

.hero__tagline {
          width: calc(100% - 34px);
          font-size: clamp(8px, 1.15vw, 12px);
        }
}

@media (max-width: 980px) {
.question__cta-left,
        .question__cta-right {
          z-index: 6;
          gap: 0;
        }

.question__cta-left {
          left: calc(var(--video-left) + var(--video-control-pad));
          right: auto;
          top: calc(var(--video-top) + var(--video-control-pad));
        }

.question__cta-right {
          left: auto;
          right: calc(100% - var(--video-right) + var(--video-control-pad));
          top: calc(var(--video-bottom) - var(--video-control-pad));
          transform: translateY(-100%);
        }

.question__cta-left::after,
        .question__cta-right::before {
          display: none;
        }
}

@media (max-width: 860px) {
.hero__word {
          top: clamp(-9px, -0.25vh, -2px);
          width: calc(100% - 16px);
          font-size: clamp(60px, 15.2vw, 132px);
        }

.hero__tagline {
          font-size: clamp(7.5px, 1.25vw, 10px);
        }

.hero__panels {
          grid-template-columns: 1fr 1fr;
          height: 57%;
        }

.hero-phone-wrap {
          width: min(56vw, 300px);
        }

.hero-panel__footer {
          right: clamp(14px, 2.2vw, 28px);
          bottom: clamp(14px, 2.2vw, 26px);
          max-width: min(28vw, 220px);
          font-size: clamp(7px, 0.9vw, 10px);
        }

.question__copy {
          font-size: 14vw;
          width: 94vw;
        }

.question__small--left {
          left: 8%;
          top: 32%;
        }

.question__small--right {
          right: 8%;
          top: 63%;
        }

.showcase {
          left: 10px;
          right: 10px;
        }

.app-phone-wrap {
          width: min(55vw, 290px);
          top: 42%;
        }

.features {
          height: 38%;
          overflow: hidden;
        }

.features__track {
          width: max-content;
          display: flex;
          gap: 8px;
          animation: featureCarousel 20s linear infinite;
          will-change: transform;
        }

.features__group {
          display: flex;
          flex: 0 0 auto;
          gap: 8px;
        }

.features__group--clone {
          display: flex;
        }

.feature {
          flex: 0 0 min(78vw, 360px);
          min-height: 120px;
          height: 100%;
          padding: clamp(20px, 4.5vw, 28px);
          text-align: left;
        }

.feature__number {
          float: none;
          margin: 0;
          font-size: clamp(38px, 9vw, 74px);
          line-height: 0.76;
        }

.feature h3 {
          width: 100%;
          margin: clamp(9px, 1.8vh, 14px) 0 6px;
          font-size: clamp(14px, 3.2vw, 20px);
          line-height: 1.04;
          text-align: left;
        }

.feature p {
          width: 100%;
          margin: 0;
          max-width: 34ch;
          font-size: clamp(9.5px, 2.4vw, 13px);
          line-height: 1.38;
          text-align: left;
        }
}

@media (max-width: 640px) {
.stage {
          min-height: 560px;
        }

.ticker {
          display: none;
        }

.hero__word {
          top: clamp(-6px, -0.15vh, -1px);
          width: calc(100% - 12px);
          font-size: clamp(52px, 15.4vw, 96px);
          letter-spacing: -0.024em;
        }

.hero__tagline {
          width: calc(100% - 28px);
          font-size: clamp(7px, 2vw, 9px);
          letter-spacing: 0.12em;
        }

.question__copy {
          top: 49%;
          width: 96vw;
          font-size: clamp(46px, 13.5vw, 82px);
        }

.hero,
.scene-two-layer,
.page-three-layer {
          top: var(--menu-h);
          bottom: 0;
        }

.progress {
          top: var(--menu-h);
          height: calc(100% - var(--menu-h));
        }

.hero__panels {
          left: 8px;
          right: 8px;
          bottom: 8px;
          height: 59%;
        }

.hero-video-card {
          bottom: 0;
          border: 0 !important;
          box-shadow: none;
        }

.hero-phone-wrap {
          width: min(64vw, 280px);
        }

.hero-panel {
          padding: 20px;
        }

.question__cta-left,
        .question__cta-right {
          top: clamp(10px, 2vh, 18px);
          transform: none;
          z-index: 8;
        }

.question__cta-left {
          left: 10px;
          right: auto;
        }

.question__cta-right {
          left: auto;
          right: 10px;
        }

.question__cta-left .pill,
        .question__cta-right .pill {
          min-height: clamp(28px, 8vw, 34px);
          padding-inline: clamp(9px, 3vw, 13px);
          font-size: clamp(7px, 2.2vw, 9px);
        }

.showcase__field {
          inset: 8px 0;
        }

.features {
          left: 8px;
          right: 8px;
          bottom: 0;
        }
}

@media (max-width: 390px) {
.feature {
          flex-basis: min(84vw, 330px);
          padding: 18px;
        }

.feature__number {
          font-size: clamp(36px, 11vw, 52px);
        }

.feature h3 {
          margin: 8px 0 5px;
          font-size: clamp(13px, 4vw, 16px);
        }

.feature p {
          font-size: clamp(9px, 3vw, 11px);
          line-height: 1.36;
        }

.hero__word {
          width: calc(100% - 8px);
          font-size: clamp(48px, 15vw, 62px);
        }
}

@media (prefers-reduced-motion: reduce) {
.experience {
          height: auto;
          min-height: 100svh;
        }

.stage {
          position: relative;
        }

.ticker__track {
          animation: none;
        }

.heart-rain__heart {
          opacity: 1 !important;
        }

.question,
        .page-three-layer {
          display: none;
        }
}

/* ---------- Tablet / intermediate page-three cards ---------- */
@media (min-width: 641px) and (max-width: 1180px),
        (min-width: 1181px) and (max-width: 1366px) and (min-height: 900px) {
.page-three-layer .features {
          left: clamp(14px, 2vw, 28px);
          right: clamp(14px, 2vw, 28px);
          bottom: clamp(14px, 2vh, 24px);
          height: clamp(230px, 28vh, 340px);
          overflow: hidden;
        }

/* Tablets show the complete 1–2–3 row, like desktop.
         The automatic carousel remains exclusive to mobile screens. */
.page-three-layer .features__track {
          display: block;
          width: 100%;
          height: 100%;
          transform: none !important;
          animation: none;
        }

.page-three-layer .features__group {
          display: grid;
          width: 100%;
          height: 100%;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: clamp(8px, 1vw, 14px);
        }

.page-three-layer .features__group--clone {
          display: none;
        }

.page-three-layer .feature {
          width: auto;
          min-width: 0;
          min-height: 0;
          height: 100%;
          flex: initial;
          justify-content: flex-start;
          padding: clamp(22px, 2.6vw, 34px);
          border-radius: clamp(24px, 2.5vw, 34px);
          text-align: left;
        }

.page-three-layer .feature__number {
          margin: 0;
          font-size: clamp(52px, 6vw, 84px);
          line-height: 0.76;
          letter-spacing: -0.035em;
        }

.page-three-layer .feature h3 {
          width: 100%;
          max-width: 25ch;
          margin: clamp(14px, 1.8vh, 22px) 0 8px;
          font-size: clamp(15px, 1.65vw, 22px);
          line-height: 1.04;
          letter-spacing: -0.025em;
          text-align: left;
        }

.page-three-layer .feature p {
          width: 100%;
          max-width: 36ch;
          margin: 0;
          font-size: clamp(10px, 1.02vw, 13px);
          line-height: 1.42;
          text-align: left;
        }
}

/* ---------- Page-two centered CTA stack: medium and small only ---------- */
@media (max-width: 1180px),
        (orientation: portrait) and (max-width: 1366px) {
.scene-two-layer {
          --question-cta-top: clamp(12px, 2vh, 22px);
          --question-cta-step: clamp(42px, 5.5vh, 60px);
        }

.question__cta-left,
        .question__cta-right {
          left: 50%;
          right: auto;
          width: auto;
          justify-content: center;
          gap: 0;
          transform: translateX(-50%);
          z-index: 8;
        }

.question__cta-left {
          top: var(--question-cta-top);
        }

.question__cta-right {
          top: calc(var(--question-cta-top) + var(--question-cta-step));
        }

.question__cta-left::after,
        .question__cta-right::before {
          display: none;
        }
}

/* Portrait-only adjustment requested for vertical screens. */
@media (orientation: portrait) {
.question__copy {
          top: calc(49% - clamp(105px, 13vh, 140px));
        }
}

/* ---------- Desktop-sized page-two buttons on medium/tablet screens ---------- */
@media (min-width: 641px) and (max-width: 1180px),
        (min-width: 641px) and (max-width: 1366px) and (orientation: portrait) {
.question__cta-left .pill,
        .question__cta-right .pill {
          min-height: 48px;
          max-height: 48px;
          padding-inline: 24px;
          font-size: 12px;
          letter-spacing: 0.04em;
        }

.scene-two-layer {
          --question-cta-step: 62px;
        }
}

.scroll-hint {
        position: absolute;
        z-index: 55;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--white);
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        white-space: nowrap;
        text-shadow: 0 1px 8px rgba(22, 11, 29, 0.22);
        pointer-events: none;
        opacity: 1;
        will-change: opacity, transform;
      }

.scroll-hint__text {
        display: inline-block;
      }

.scroll-hint__mouse {
        width: 19px;
        height: 30px;
        flex: 0 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        position: relative;
        box-shadow: 0 1px 8px rgba(22, 11, 29, 0.18);
      }

.scroll-hint__mouse::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 6px;
        width: 3px;
        height: 6px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--yellow);
        animation: wheel 1.6s infinite;
      }

@keyframes wheel {
        0% {
          transform: translate(-50%, 0);
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        100% {
          transform: translate(-50%, 10px);
          opacity: 0;
        }
      }

@media (max-width: 520px) {
.scroll-hint {
          display: flex;
          gap: 5px;
          max-width: 66px;
          font-size: 6px;
          line-height: 1.12;
          letter-spacing: 0.08em;
          white-space: normal;
        }

.scroll-hint__mouse {
          width: 16px;
          height: 25px;
          border-radius: 10px;
        }

.scroll-hint__mouse::after {
          top: 5px;
          width: 2px;
          height: 5px;
        }
}

@media (prefers-reduced-motion: reduce) {
.scroll-hint__mouse::after,
        .hero-mutual-mark::before,
        .hero-mutual-mark::after {
          animation: none;
        }
}

/* ---------- Unified hero panel and scroll reveal ---------- */
.hero__panels {
        display: block;
        grid-template-columns: none;
        gap: 0;
        overflow: hidden;
        transform-origin: 50% 100%;
        /* Only transform and opacity can be composited. Hinting width/height/bottom/
         border-radius/box-shadow gives WebKit no useful optimisation, but it does
         force this large surface onto its own layer for the lifetime of the page,
         which is one of the layers iOS drops. */
        will-change: transform, opacity;
      }

.hero-panel.panel-unified {
        width: 100%;
        height: 100%;
        padding: 0;
        background: var(--purple);
        border-radius: 24px 24px 8px 8px;
      }

.hero-reveal-content {
        position: absolute;
        z-index: 6;
        left: 50%;
        top: 53%;
        width: min(620px, 74%);
        transform: translate(-50%, -50%) translateY(18px);
        opacity: 0;
        text-align: center;
        pointer-events: none;
        will-change: transform, opacity;
      }

.hero-reveal__eyebrow {
        margin: 0 0 clamp(8px, 1vw, 14px);
        font-size: clamp(8px, 0.75vw, 11px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.72);
      }

.hero-reveal-content h2 {
        margin: 0 auto clamp(9px, 1.25vw, 16px);
        max-width: 18ch;
        font-family: var(--display);
        font-size: clamp(34px, 4.7vw, 82px);
        font-weight: 400;
        line-height: 0.92;
        letter-spacing: -0.025em;
        text-transform: uppercase;
        color: var(--white);
      }

.hero-reveal__body {
        margin: 0 auto clamp(16px, 2vw, 26px);
        max-width: 48ch;
        font-size: clamp(9px, 0.82vw, 13px);
        line-height: 1.45;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.84);
      }

.hero-reveal__button {
        display: none;
      }

.hero-daisy {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        aspect-ratio: 1;
        transform: translate(-50%, -50%) rotate(var(--rotate));
        transform-origin: 50% 50%;
        filter: drop-shadow(0 8px 4px rgba(22, 11, 29, 0.18));
        will-change: transform, opacity;
      }

.hero-daisy svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
      }

.hero-petal {
        position: absolute;
        z-index: 3;
        top: -14%;
        left: var(--x);
        width: var(--size);
        height: calc(var(--size) * 2.05);
        border-radius: 85% 18% 78% 24%;
        background: linear-gradient(
          115deg,
          #fff 0 55%,
          rgba(255, 255, 255, 0.68) 100%
        );
        box-shadow:
          inset -2px -3px 4px rgba(185, 165, 190, 0.18),
          0 5px 4px rgba(22, 11, 29, 0.12);
        opacity: 0;
        transform-origin: 50% 50%;
        animation: heroPetalFloat var(--duration) var(--delay) linear infinite;
        will-change: transform, opacity;
      }

.hero-float-heart {
        position: absolute;
        z-index: 3;
        top: -14%;
        left: var(--x);
        width: var(--size);
        aspect-ratio: 1.08;
        opacity: 0;
        transform-origin: 50% 55%;
        animation: heroHeartFloat var(--duration) var(--delay) linear infinite;
        filter: none;
        will-change: transform, opacity;
      }

.hero-float-heart svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
      }

@keyframes heroHeartFloat {
        0% {
          opacity: 0;
          transform: translate(0, -25px) rotate(0deg);
        }
        8% {
          opacity: 0.9;
        }
        24% {
          transform: translate(var(--drift-a), 14vh) rotate(72deg);
        }
        48% {
          opacity: 0.82;
          transform: translate(var(--drift-b), 29vh) rotate(156deg);
        }
        72% {
          transform: translate(var(--drift-c), 44vh) rotate(242deg);
        }
        92% {
          opacity: 0.7;
        }
        100% {
          opacity: 0;
          transform: translate(var(--drift-d), 65vh) rotate(360deg);
        }
      }

@keyframes heroPetalFloat {
        0% {
          opacity: 0;
          transform: translate3d(0, -25px, 0) rotate(0deg) rotateX(0deg);
        }
        8% {
          opacity: 0.9;
        }
        24% {
          transform: translate3d(var(--drift-a), 14vh, 0) rotate(78deg)
            rotateX(35deg);
        }
        48% {
          opacity: 0.82;
          transform: translate3d(var(--drift-b), 29vh, 0) rotate(166deg)
            rotateX(88deg);
        }
        72% {
          transform: translate3d(var(--drift-c), 44vh, 0) rotate(254deg)
            rotateX(135deg);
        }
        92% {
          opacity: 0.7;
        }
        100% {
          opacity: 0;
          transform: translate3d(var(--drift-d), 65vh, 0) rotate(372deg)
            rotateX(185deg);
        }
      }

.intro-pending .panel-unified {
        opacity: 0;
        clip-path: inset(49.4% 50% 49.4% 50% round 999px);
      }

.intro-pending .hero-petal,
      .intro-pending .hero-float-heart {
        visibility: hidden;
      }

@media (max-width: 860px) {
.hero-reveal-content {
          top: 54%;
          width: min(680px, 80%);
        }

.hero-reveal-content h2 {
          font-size: clamp(30px, 6vw, 58px);
        }

.hero-reveal__body {
          font-size: clamp(8px, 1.25vw, 11px);
        }
}

@media (max-width: 640px) {
.hero-panel.panel-unified {
          border-radius: 20px 20px 6px 6px;
        }

.hero-reveal-content {
          top: 56%;
          width: 82%;
        }

.hero-reveal__eyebrow {
          font-size: 7px;
        }

.hero-reveal-content h2 {
          font-size: clamp(27px, 8.8vw, 44px);
        }

.hero-reveal__body {
          max-width: 34ch;
          font-size: clamp(7px, 2.2vw, 9px);
        }

.hero-reveal__button {
          min-width: 128px;
        }
}

@media (prefers-reduced-motion: reduce) {
.hero-petal,
        .hero-float-heart {
          display: none;
        }
}

/* ==============================================================
       Testimonials — editorial stories carousel
       ============================================================== */
.testimonials-section {
        position: relative;
        z-index: 80;
        margin: clamp(54px, 5vw, 68px) var(--pad) 0;
        overflow: hidden;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: clamp(28px, 3.6vw, 58px);
        color: var(--ink);
        background:
          radial-gradient(
            circle at 86% 10%,
            rgba(255, 92, 168, 0.18),
            transparent 27%
          ),
          radial-gradient(
            circle at 9% 88%,
            rgba(138, 35, 135, 0.1),
            transparent 24%
          ),
          linear-gradient(135deg, var(--cream) 0%, var(--lavender) 100%);
        isolation: isolate;
      }

.testimonials-section::before {
        content: "REAL VIBES";
        position: absolute;
        z-index: -1;
        right: -0.04em;
        top: -0.08em;
        color: rgba(138, 35, 135, 0.045);
        font-family: var(--display);
        font-size: clamp(116px, 20vw, 390px);
        line-height: 0.8;
        letter-spacing: -0.04em;
        white-space: nowrap;
        pointer-events: none;
      }

.testimonials-section__inner {
        padding: clamp(42px, 6.5vw, 104px) clamp(22px, 5.5vw, 90px)
          clamp(34px, 5vw, 78px);
      }

.testimonials-section__header {
        display: grid;
        grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
        align-items: end;
        gap: clamp(36px, 7vw, 126px);
        margin-bottom: clamp(34px, 5vw, 76px);
      }

.testimonials-section__eyebrow,
      .pricing-section__eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 clamp(18px, 2vw, 30px);
        font-size: clamp(8px, 0.7vw, 11px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

.testimonials-section__eyebrow {
        color: rgba(22, 11, 29, 0.56);
      }

.testimonials-section__eyebrow::before,
      .pricing-section__eyebrow::before {
        content: "";
        width: 38px;
        height: 1px;
      }

.testimonials-section__eyebrow::before {
        background: var(--purple);
      }

.testimonials-section__title,
      .pricing-section__title {
        margin: 0;
        font-family: var(--display);
        font-weight: 400;
        line-height: 0.73;
        letter-spacing: -0.035em;
        text-transform: uppercase;
      }

.testimonials-section__title {
        font-size: clamp(70px, 9.5vw, 172px);
      }

.testimonials-section__title span,
      .pricing-section__title span {
        display: block;
      }

.testimonials-section__title span:last-child {
        color: var(--purple);
      }

.testimonials-section__intro-copy {
        align-self: end;
        max-width: 62ch;
      }

.testimonials-section__note {
        margin: 0;
        color: rgba(22, 11, 29, 0.7);
        font-size: clamp(12px, 1.05vw, 17px);
        line-height: 1.62;
      }

.testimonials-section__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: clamp(24px, 3vw, 42px);
        padding-top: clamp(18px, 2vw, 28px);
        border-top: 1px solid rgba(22, 11, 29, 0.14);
        color: rgba(22, 11, 29, 0.52);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

.testimonials-carousel {
        position: relative;
      }

.testimonials-carousel__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        touch-action: pan-y;
        cursor: grab;
      }

.testimonials-carousel__viewport.is-dragging,
      .testimonials-carousel__viewport.is-resetting {
        scroll-behavior: auto;
        scroll-snap-type: none;
      }

.testimonials-carousel__viewport.is-dragging {
        cursor: grabbing;
        user-select: none;
      }

.testimonials-carousel__viewport::-webkit-scrollbar {
        display: none;
      }

.testimonials-carousel__track {
        width: 100%;
        display: flex;
        gap: 24px;
      }

.testimonial-card {
        position: relative;
        flex: 0 0 calc((100% - 48px) / 3);
        min-height: clamp(390px, 38vw, 545px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: clamp(24px, 3vw, 42px);
        overflow: hidden;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: clamp(25px, 2.8vw, 44px);
        scroll-snap-align: start;
        isolation: isolate;
        opacity: 0;
        transform: translateY(34px) rotate(1.5deg);
        transition:
          opacity 0.72s ease,
          transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.25s ease;
        box-shadow: 0 18px 42px rgba(22, 11, 29, 0.08);
        transition-delay: calc(var(--testimonial-index) * 70ms);
      }

.testimonials-section.is-visible .testimonial-card {
        opacity: 1;
        transform: translateY(0) rotate(0);
      }

.testimonial-card:hover {
        box-shadow: 0 28px 58px rgba(22, 11, 29, 0.14);
      }

.testimonial-card::after {
        content: "“";
        position: absolute;
        z-index: -1;
        right: 0.04em;
        bottom: -0.32em;
        color: rgba(255, 255, 255, 0.13);
        font-family: Georgia, serif;
        font-size: clamp(180px, 19vw, 330px);
        line-height: 1;
        pointer-events: none;
      }

.testimonial-card--purple {
        color: var(--white);
        border-color: rgba(22, 11, 29, 0.22);
        background:
          radial-gradient(
            circle at 82% 15%,
            rgba(255, 92, 168, 0.26),
            transparent 24%
          ),
          linear-gradient(150deg, var(--purple), var(--violet));
      }

.testimonial-card--yellow {
        color: var(--ink);
        border-color: rgba(22, 11, 29, 0.16);
        background:
          radial-gradient(
            circle at 76% 18%,
            rgba(255, 255, 255, 0.7),
            transparent 20%
          ),
          linear-gradient(
            145deg,
            rgba(242, 221, 33, 0.62),
            rgba(255, 248, 242, 0.96)
          );
      }

.testimonial-card--yellow::after,
      .testimonial-card--pink::after,
      .testimonial-card--lavender::after {
        color: rgba(22, 11, 29, 0.1);
      }

.testimonial-card--pink {
        color: var(--ink);
        border-color: rgba(22, 11, 29, 0.16);
        background:
          radial-gradient(
            circle at 16% 18%,
            rgba(255, 255, 255, 0.68),
            transparent 20%
          ),
          linear-gradient(
            145deg,
            rgba(255, 92, 168, 0.42),
            rgba(255, 248, 242, 0.95)
          );
      }

.testimonial-card--lavender {
        color: var(--ink);
        border-color: rgba(22, 11, 29, 0.14);
        background:
          radial-gradient(
            circle at 80% 14%,
            rgba(138, 35, 135, 0.13),
            transparent 24%
          ),
          linear-gradient(145deg, var(--lavender), var(--cream));
      }

.testimonial-card__top {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
      }

.testimonial-card__number {
        font-family: var(--display);
        font-size: clamp(56px, 5.7vw, 96px);
        line-height: 0.72;
        letter-spacing: -0.03em;
        opacity: 0.75;
      }

.testimonial-card__stars {
        padding: 8px 11px;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: clamp(8px, 0.72vw, 11px);
        letter-spacing: 0.08em;
        white-space: nowrap;
        opacity: 0.82;
      }

.testimonial-card__body {
        position: relative;
        z-index: 2;
        margin: clamp(36px, 5vw, 76px) 0;
      }

.testimonial-card__body h3 {
        max-width: 10ch;
        margin: 0 0 clamp(18px, 2vw, 28px);
        font-family: var(--display);
        font-size: clamp(38px, 4.1vw, 72px);
        font-weight: 400;
        line-height: 0.82;
        letter-spacing: -0.025em;
        text-transform: uppercase;
      }

.testimonial-card__body p {
        max-width: 39ch;
        margin: 0;
        font-size: clamp(12px, 1vw, 16px);
        font-weight: 700;
        line-height: 1.55;
        opacity: 0.84;
      }

.testimonial-card__footer {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 18px;
        border-top: 1px solid currentColor;
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.72;
      }

.testimonials-carousel__footer {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 18px;
        margin-top: clamp(24px, 3vw, 42px);
      }

.testimonials-carousel__hint,
      .testimonials-carousel__range {
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.52);
      }

.testimonials-carousel__range {
        justify-self: center;
      }

.testimonials-carousel__arrows {
        justify-self: end;
        display: flex;
        gap: 9px;
      }

.testimonials-carousel__arrow {
        width: clamp(42px, 4vw, 56px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(22, 11, 29, 0.36);
        border-radius: 50%;
        color: var(--ink);
        background: transparent;
        font-family: var(--body);
        font-size: 18px;
        cursor: pointer;
        transition:
          color 0.2s ease,
          background 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease,
          opacity 0.2s ease;
      }

.testimonials-carousel__arrow:not(:disabled):hover,
      .testimonials-carousel__arrow:not(:disabled):focus-visible {
        color: var(--ink);
        border-color: var(--yellow);
        background: var(--yellow);
        transform: scale(1.05);
      }

.testimonials-carousel__arrow:disabled {
        opacity: 0.25;
        cursor: default;
      }

/* ==============================================================
       Pricing — flexible credit plans
       ============================================================== */
.pricing-section {
        position: relative;
        z-index: 80;
        margin: clamp(54px, 5vw, 68px) var(--pad) 0;
        overflow: hidden;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: clamp(28px, 3.6vw, 58px);
        color: var(--ink);
        background:
          radial-gradient(
            circle at 88% 10%,
            rgba(255, 92, 168, 0.18),
            transparent 24%
          ),
          radial-gradient(
            circle at 8% 86%,
            rgba(138, 35, 135, 0.1),
            transparent 28%
          ),
          var(--cream);
        isolation: isolate;
      }

/* Real Vibes and Pricing lift out from beneath the preceding section as they enter view. */
.testimonials-section,
      .pricing-section {
        opacity: 0;
        transform: translateY(clamp(72px, 10vh, 132px)) scale(0.985);
        transform-origin: 50% 0;
        clip-path: inset(13% 0 0 round clamp(28px, 3.6vw, 58px));
        transition:
          opacity 0.82s ease,
          transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
          clip-path 1.05s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.9s ease;
        box-shadow: 0 10px 26px rgba(22, 11, 29, 0);
        will-change: opacity, transform, clip-path;
      }

.testimonials-section.is-visible,
      .pricing-section.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        clip-path: inset(0 0 0 round clamp(28px, 3.6vw, 58px));
        box-shadow: 0 30px 70px rgba(22, 11, 29, 0.1);
      }

.pricing-section::before {
        content: "PRICING";
        position: absolute;
        z-index: -1;
        left: -0.03em;
        top: -0.12em;
        color: rgba(138, 35, 135, 0.045);
        font-family: var(--display);
        font-size: clamp(130px, 21vw, 410px);
        line-height: 0.8;
        letter-spacing: -0.04em;
        white-space: nowrap;
        pointer-events: none;
      }

.pricing-section__inner {
        padding: clamp(42px, 7vw, 110px) clamp(22px, 5.5vw, 90px)
          clamp(34px, 5vw, 80px);
      }

.pricing-section__header {
        display: grid;
        grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1.08fr);
        align-items: end;
        gap: clamp(36px, 7vw, 126px);
        margin-bottom: clamp(38px, 5vw, 78px);
      }

.pricing-section__eyebrow {
        color: rgba(22, 11, 29, 0.52);
      }

.pricing-section__eyebrow::before {
        background: var(--purple);
      }

.pricing-section__title {
        font-size: clamp(68px, 9vw, 164px);
      }

.pricing-section__title span:last-child {
        color: var(--purple);
      }

.pricing-section__intro-copy {
        align-self: end;
      }

.pricing-section__note {
        max-width: 55ch;
        margin: 0;
        color: rgba(22, 11, 29, 0.68);
        font-size: clamp(12px, 1.05vw, 17px);
        line-height: 1.62;
      }

.pricing-section__promise {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: clamp(22px, 2.6vw, 36px);
        padding: 10px 14px;
        border: 1px solid rgba(22, 11, 29, 0.18);
        border-radius: 999px;
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

.pricing-section__promise::before {
        content: "♥";
        color: var(--pink);
      }

.pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(14px, 2vw, 28px);
        align-items: stretch;
      }

.pricing-card {
        position: relative;
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding: clamp(24px, 3vw, 42px);
        overflow: hidden;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: clamp(25px, 2.8vw, 44px);
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.88),
          rgba(244, 239, 246, 0.88)
        );
        box-shadow: 0 18px 44px rgba(22, 11, 29, 0.045);
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity 0.72s ease,
          transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.25s ease;
        transition-delay: calc(var(--pricing-index) * 90ms);
      }

.pricing-section.is-visible .pricing-card {
        opacity: 1;
        transform: translateY(0);
      }

.pricing-card:hover {
        box-shadow: 0 28px 64px rgba(22, 11, 29, 0.12);
      }

.pricing-card--featured {
        color: var(--white);
        border-color: rgba(75, 48, 82, 0.42);
        background:
          radial-gradient(
            circle at 82% 10%,
            rgba(255, 255, 255, 0.1),
            transparent 28%
          ),
          linear-gradient(155deg, #92578f, #684368);
        transform: none;
      }

.pricing-section.is-visible .pricing-card--featured {
        transform: none;
      }

.pricing-card--soon {
        background:
          radial-gradient(
            circle at 80% 12%,
            rgba(255, 255, 255, 0.48),
            transparent 24%
          ),
          #f7ed9f;
      }

.pricing-card__top {
        display: grid;
        align-content: start;
        justify-items: start;
        gap: 14px;
      }

.pricing-card__name {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(29px, 3vw, 52px);
        font-weight: 400;
        line-height: 0.86;
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }

.pricing-card__badge {
        flex: 0 0 auto;
        padding: 8px 11px;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: clamp(6.5px, 0.55vw, 9px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.75;
      }

.pricing-card__price {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        margin: clamp(42px, 5vw, 78px) 0 clamp(26px, 3vw, 44px);
        padding-bottom: clamp(24px, 2.8vw, 38px);
        border-bottom: 1px solid currentColor;
      }

.pricing-card__amount {
        font-family: var(--display);
        font-size: clamp(74px, 8vw, 138px);
        line-height: 0.68;
        letter-spacing: -0.04em;
      }

.pricing-card__unit {
        max-width: 10ch;
        padding-bottom: 4px;
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        opacity: 0.62;
      }

/* The longer annual price needs a little more breathing room for its right-side unit. */
.pricing-card--soon .pricing-card__amount {
        font-size: clamp(64px, 6.2vw, 108px);
      }

.pricing-card--soon .pricing-card__unit {
        max-width: none;
        margin-left: auto;
        text-align: right;
        white-space: nowrap;
      }

.pricing-card__features {
        display: grid;
        gap: 12px;
        margin: 0 0 clamp(30px, 4vw, 58px);
        padding: 0;
        list-style: none;
      }

.pricing-card__features li {
        position: relative;
        padding-left: 22px;
        font-size: clamp(10.5px, 0.9vw, 14px);
        font-weight: 700;
        line-height: 1.46;
        opacity: 0.78;
      }

.pricing-card__features li::before {
        content: "♥";
        position: absolute;
        left: 0;
        top: 0.06em;
        color: var(--pink);
        font-size: 0.86em;
      }

.pricing-card--featured .pricing-card__features li::before {
        color: var(--yellow);
      }

.pricing-card--soon .pricing-card__features li::before {
        color: var(--purple);
      }

.pricing-card__cta {
        width: 100%;
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: auto;
        padding: 0 22px;
        border: 1px solid var(--ink);
        border-radius: 999px;
        color: var(--white);
        background: var(--ink);
        font-family: var(--body);
        font-size: clamp(8px, 0.7vw, 11px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.11em;
        text-decoration: none;
        text-transform: uppercase;
        transition:
          color 0.22s ease,
          background 0.22s ease,
          border-color 0.22s ease,
          transform 0.22s ease;
      }

.pricing-card__cta:hover,
      .pricing-card__cta:focus-visible {
        color: var(--ink);
        border-color: var(--yellow);
        background: var(--yellow);
        transform: translateY(-2px);
      }

.pricing-card--featured .pricing-card__cta {
        color: var(--ink);
        border-color: var(--yellow);
        background: var(--yellow);
      }

.pricing-card--featured .pricing-card__cta:hover,
      .pricing-card--featured .pricing-card__cta:focus-visible {
        color: var(--ink);
        border-color: var(--pink);
        background: var(--pink);
      }

.pricing-card__cta--disabled {
        color: rgba(22, 11, 29, 0.55);
        border-color: rgba(22, 11, 29, 0.18);
        background: rgba(255, 255, 255, 0.52);
        cursor: default;
      }

.pricing-card__cta--disabled:hover,
      .pricing-card__cta--disabled:focus-visible {
        color: rgba(22, 11, 29, 0.55);
        border-color: rgba(22, 11, 29, 0.18);
        background: rgba(255, 255, 255, 0.52);
        transform: none;
      }

.pricing-section__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        margin-top: clamp(30px, 4vw, 58px);
        padding-top: clamp(20px, 2.4vw, 34px);
        border-top: 1px solid rgba(22, 11, 29, 0.14);
        color: rgba(22, 11, 29, 0.52);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.4;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

.pricing-section__footer strong {
        color: rgba(22, 11, 29, 0.82);
      }

@media (max-width: 1180px) {
.testimonials-carousel__track {
          gap: 18px;
        }

.testimonial-card {
          flex-basis: calc((100% - 18px) / 2);
        }

.pricing-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

.pricing-card--soon {
          grid-column: 1 / -1;
        }
}

@media (max-width: 980px) {
.testimonials-section__header,
        .pricing-section__header {
          grid-template-columns: 1fr;
          align-items: start;
          gap: 32px;
        }

.testimonials-section__title,
        .pricing-section__title {
          font-size: clamp(62px, 13.5vw, 118px);
        }

.testimonials-section__intro-copy,
        .pricing-section__intro-copy {
          max-width: 58ch;
        }
}

@media (max-width: 860px) {
.testimonials-section,
        .pricing-section {
          margin-inline: 10px;
        }
}

@media (max-width: 640px) {
.testimonials-section,
        .pricing-section {
          margin-inline: 8px;
          border-radius: 28px;
        }

.testimonials-section__inner,
        .pricing-section__inner {
          padding: 40px 20px 28px;
        }

.testimonials-section__title,
        .pricing-section__title {
          font-size: clamp(54px, 17vw, 82px);
        }

.testimonials-section__note,
        .pricing-section__note {
          font-size: 11px;
        }

.testimonials-section__meta {
          align-items: flex-start;
          flex-direction: column;
          gap: 9px;
        }

.testimonials-carousel__track {
          gap: 14px;
        }

.testimonial-card {
          flex-basis: 100%;
          min-height: 430px;
          border-radius: 28px;
        }

.testimonial-card__body h3 {
          font-size: clamp(39px, 13vw, 58px);
        }

.testimonials-carousel__footer {
          grid-template-columns: 1fr auto;
        }

.testimonials-carousel__hint {
          display: none;
        }

.testimonials-carousel__range {
          justify-self: start;
        }

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

.pricing-card--soon {
          grid-column: auto;
        }

.pricing-card--featured,
        .pricing-section.is-visible .pricing-card--featured {
          transform: translateY(0) rotate(0);
        }

.pricing-section__footer {
          align-items: flex-start;
          flex-direction: column;
          gap: 10px;
        }
}

@media (prefers-reduced-motion: reduce) {
.testimonials-section,
        .pricing-section,
        .testimonial-card,
        .pricing-card,
        .testimonials-carousel__viewport {
          transition: none;
          scroll-behavior: auto;
        }

.testimonials-section,
        .pricing-section,
        .testimonial-card,
        .pricing-card,
        .pricing-card--featured {
          opacity: 1;
          transform: none;
          clip-path: none;
        }
}

/* ---------- Editorial FAQ section ---------- */
.faq-section {
        position: relative;
        z-index: 80;
        margin: clamp(54px, 5vw, 68px) var(--pad) 0;
        overflow: hidden;
        border-radius: clamp(28px, 3.6vw, 58px);
        color: var(--ink);
        background:
          radial-gradient(
            circle at 10% 14%,
            rgba(138, 35, 135, 0.1),
            transparent 28%
          ),
          radial-gradient(
            circle at 88% 90%,
            rgba(242, 221, 33, 0.1),
            transparent 22%
          ),
          linear-gradient(180deg, #f4eef7 0%, #efe7f4 100%);
        isolation: isolate;
      }

.faq-section::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: clamp(260px, 32vw, 460px);
        aspect-ratio: 1;
        right: clamp(-154px, -7.5vw, -64px);
        top: clamp(-102px, -5.5vw, -36px);
        background: url("data:image/png;base64,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")
          center / contain no-repeat;
        opacity: 0.13;
        filter: saturate(0.95);
        transform: rotate(-10deg);
        pointer-events: none;
      }

.faq-section__inner {
        min-height: min(960px, 100svh);
        display: grid;
        grid-template-columns: minmax(280px, 0.84fr) minmax(420px, 1.16fr);
        gap: clamp(48px, 8vw, 150px);
        padding: clamp(42px, 7vw, 118px) clamp(24px, 6vw, 104px)
          clamp(34px, 5vw, 82px);
      }

.faq-section__intro {
        align-self: start;
        position: sticky;
        top: clamp(88px, 10vh, 132px);
        max-width: 760px;
      }

.faq-section__eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 clamp(20px, 2.2vw, 34px);
        font-size: clamp(8px, 0.7vw, 11px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.52);
      }

.faq-section__eyebrow::before {
        content: "";
        width: 38px;
        height: 1px;
        background: var(--purple);
      }

.faq-section__title {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(58.5px, 7.8vw, 139.5px);
        font-weight: 400;
        line-height: 0.73;
        letter-spacing: -0.035em;
        text-transform: uppercase;
      }

.faq-section__title span {
        display: block;
      }

.faq-section__title span:last-child {
        color: var(--purple);
      }

.faq-section__note {
        max-width: 42ch;
        margin: clamp(26px, 3vw, 46px) 0 0;
        font-size: clamp(11px, 0.92vw, 15px);
        line-height: 1.55;
        color: rgba(22, 11, 29, 0.68);
      }

.faq-section__contact {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        margin-top: clamp(28px, 3vw, 48px);
        color: var(--ink);
        font-size: clamp(9px, 0.78vw, 12px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-decoration: none;
        text-transform: uppercase;
      }

.faq-section__contact-arrow {
        width: 42px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: var(--ink);
        background: var(--yellow);
        transition:
          transform 0.25s ease,
          background 0.25s ease;
      }

.faq-section__contact:hover .faq-section__contact-arrow {
        transform: translate(4px, -4px);
        background: var(--purple);
      }

.faq-list {
        align-self: center;
        border-top: 1px solid rgba(22, 11, 29, 0.12);
      }

.faq-item {
        border-bottom: 1px solid rgba(22, 11, 29, 0.12);
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.62s ease,
          transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
        transition-delay: calc(var(--faq-index) * 55ms);
      }

.faq-section.is-visible .faq-item {
        opacity: 1;
        transform: translateY(0);
      }

.faq-item__button {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(11px, 1.35vw, 20px);
        padding: clamp(14px, 1.7vw, 24px) 0;
        border: 0;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

.faq-item__number {
        align-self: center;
        padding-top: 0;
        font-size: clamp(8px, 0.65vw, 10px);
        font-weight: 900;
        letter-spacing: 0.12em;
        color: rgba(22, 11, 29, 0.38);
      }

.faq-item__question {
        font-family: var(--display);
        font-size: clamp(12.5px, 1.35vw, 24px);
        color: rgba(75, 48, 82, 0.78);
        font-weight: 400;
        line-height: 0.94;
        letter-spacing: -0.012em;
        text-transform: uppercase;
        transition:
          color 0.25s ease,
          transform 0.25s ease;
      }

.faq-item__button:hover .faq-item__question,
      .faq-item.is-open .faq-item__question {
        color: var(--purple);
        transform: translateX(6px);
      }

.faq-item__icon {
        position: relative;
        width: clamp(28px, 2.35vw, 38px);
        aspect-ratio: 1;
        flex: 0 0 auto;
        border: 1px solid rgba(22, 11, 29, 0.22);
        border-radius: 50%;
        transition:
          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
          border-color 0.25s ease,
          background 0.25s ease;
      }

.faq-item__icon::before,
      .faq-item__icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 11px;
        height: 1px;
        background: currentColor;
        transform: translate(-50%, -50%);
        transition: transform 0.35s ease;
      }

.faq-item__icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

.faq-item.is-open .faq-item__icon {
        transform: rotate(180deg);
        color: var(--ink);
        border-color: var(--yellow);
        background: var(--yellow);
      }

.faq-item.is-open .faq-item__icon::after {
        transform: translate(-50%, -50%) rotate(0);
      }

.faq-item__answer {
        display: grid;
        grid-template-rows: 0fr;
        transition:
          grid-template-rows 0.48s cubic-bezier(0.2, 0.8, 0.2, 1),
          opacity 0.34s ease;
        opacity: 0;
      }

.faq-item.is-open .faq-item__button {
        padding-bottom: clamp(5px, 0.65vw, 9px);
      }

.faq-item.is-open .faq-item__answer {
        grid-template-rows: 1fr;
        opacity: 1;
      }

.faq-item__answer-inner {
        overflow: hidden;
      }

.faq-item__answer p {
        max-width: 64ch;
        margin: 0 clamp(42px, 5.4vw, 82px) clamp(17px, 1.8vw, 28px)
          clamp(29px, 3.6vw, 58px);
        font-size: clamp(11px, 0.92vw, 15px);
        line-height: 1.62;
        color: rgba(22, 11, 29, 0.72);
      }

.faq-section__footer {
        grid-column: 1 / -1;
        align-self: end;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
        padding-top: clamp(18px, 2vw, 30px);
        border-top: 1px solid rgba(22, 11, 29, 0.1);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.48);
      }

.faq-section__footer strong {
        max-width: 27ch;
        color: rgba(22, 11, 29, 0.82);
      }

@media (max-width: 980px) {
.faq-section__inner {
          min-height: auto;
          grid-template-columns: 1fr;
          gap: clamp(44px, 7vw, 72px);
        }

.faq-section__intro {
          position: relative;
          top: auto;
        }

.faq-section__title {
          font-size: clamp(57px, 13.5vw, 112.5px);
        }

.faq-section__note {
          max-width: 54ch;
        }

.faq-list {
          align-self: auto;
        }

.faq-section__footer {
          grid-column: auto;
        }
}

@media (max-width: 860px) {
.faq-section {
          margin-inline: 10px;
        }
}

@media (max-width: 640px) {
.faq-section {
          margin-inline: 8px;
          border-radius: 28px;
        }

.faq-section__inner {
          gap: 36px;
          padding: 40px 20px 28px;
        }

.faq-section__title {
          font-size: clamp(48px, 16.5vw, 75px);
        }

.faq-section__note {
          font-size: 11px;
        }

.faq-item__button {
          grid-template-columns: 22px minmax(0, 1fr) 30px;
          gap: 8px;
          padding: 14px 0;
        }

.faq-item.is-open .faq-item__button {
          padding-bottom: 5px;
        }

.faq-item__question {
          font-size: clamp(11.5px, 3.75vw, 17px);
        }

.faq-item__answer p {
          margin: 0 0 17px 30px;
          font-size: 10.5px;
        }

.faq-section__footer {
          align-items: flex-start;
          flex-direction: column;
          gap: 12px;
        }
}

@media (prefers-reduced-motion: reduce) {
.faq-item,
        .faq-item__answer,
        .faq-item__icon,
        .faq-item__question {
          transition: none;
        }

.faq-item {
          opacity: 1;
          transform: none;
        }
}

@media (max-width: 980px) {
.self-help__intro {
          grid-template-columns: 1fr;
          align-items: start;
        }

.self-help__actions {
          justify-self: start;
          justify-content: flex-start;
          margin-bottom: 0;
        }
}

@media (max-width: 640px) {
.ticker {
          display: none;
        }

.self-help {
          padding: calc(76px + clamp(46px, 11vw, 72px)) 12px 72px;
        }

.self-help h1 {
          font-size: clamp(66px, 22vw, 105px);
        }

.self-help__actions {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
        }

.self-help__action {
          min-width: 0;
          min-height: 44px;
          padding-inline: 13px;
        }

.help-panel__tools {
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 18px;
        }

.help-panel__count {
          justify-self: start;
        }

.help-item__button {
          grid-template-columns: 27px minmax(0, 1fr) 31px;
          gap: 9px;
          padding: 17px 17px;
        }

.help-item__question {
          font-size: clamp(12px, 4.2vw, 17px);
        }

.help-item__icon {
          width: 31px;
        }

.help-item__copy {
          padding: 0 20px 24px 53px;
          font-size: 12px;
        }

.help-item__preview-text {
          font-size: 12px;
        }
}

@media (prefers-reduced-motion: reduce) {
.ticker__track {
          animation: none;
        }

.help-item__answer,
        .help-item__icon {
          transition: none;
        }
}

/* ---------- Consistent page-three numbered-card typography ---------- */
/* Card dimensions are inherited from the original desktop, tablet, and
       mobile rules. Only the v78 text treatment is retained here. */
.page-three-layer .feature h3 {
        width: 100%;
        max-width: none;
        font-size: 15px;
        line-height: 1;
        white-space: nowrap;
        letter-spacing: -0.025em;
      }

.page-three-layer .feature p {
        width: 100%;
        margin-bottom: 0;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
      }

/* ==============================================================
       v3 retained — borderless Real Vibes reveal + seamless card loop
       ============================================================== */
/* The third scroll experience stays above the opening edge of Real Vibes,
       so the next section appears to rise from underneath it. */
.experience {
        z-index: 90;
      }

/* Remove the outer card/container treatment while retaining the v3 content. */
.testimonials-section {
        z-index: 70;
        margin: calc(clamp(28px, 4.5vw, 72px) * -1) 0 0;
        padding-top: clamp(76px, 9vw, 142px);
        overflow: clip;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        transform: translateY(clamp(88px, 12vh, 168px)) scale(0.992);
        transform-origin: 50% 0%;
        clip-path: inset(16% 0 0 0);
        transition:
          opacity 0.46s ease-out,
          transform 0.92s cubic-bezier(0.12, 0.92, 0.18, 1.04),
          clip-path 0.92s cubic-bezier(0.12, 0.92, 0.18, 1.04);
      }

.testimonials-section.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        clip-path: inset(0 0 0 0);
        box-shadow: none;
      }

.testimonials-section__inner {
        padding-inline: max(var(--pad), clamp(22px, 5.5vw, 90px));
      }

/* Keep the scrolling surface on one composited layer and clip cleanly. */
.testimonials-carousel__viewport {
        contain: paint;
        isolation: isolate;
        overflow-anchor: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }

.testimonials-carousel__track {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }

/* Cards accelerate in from the right once per logical testimonial.
       All loop copies are revealed together, preventing repeat-cycle flashes. */
.testimonial-card {
        opacity: 0;
        filter: blur(7px) saturate(0.82);
        transform: translateX(clamp(112px, 16vw, 250px)) translateY(10px)
          scale(0.94);
        transform-origin: 100% 50%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transition:
          opacity 0.3s ease-out,
          filter 0.38s ease-out,
          transform 0.68s cubic-bezier(0.12, 0.94, 0.18, 1.16),
          box-shadow 0.25s ease;
        transition-delay: 0ms;
        will-change: opacity, filter, transform;
      }

.testimonials-section.is-visible .testimonial-card {
        opacity: 0;
        filter: blur(7px) saturate(0.82);
        transform: translateX(clamp(112px, 16vw, 250px)) translateY(10px)
          scale(0.94);
      }

.testimonials-section.is-visible .testimonial-card.is-card-visible {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translateX(0) translateY(0) scale(1);
        transition-delay: var(--card-enter-delay, 0ms);
      }

.testimonial-card:nth-child(3n + 1) {
        --card-enter-delay: 0ms;
      }

.testimonial-card:nth-child(3n + 2) {
        --card-enter-delay: 42ms;
      }

.testimonial-card:nth-child(3n) {
        --card-enter-delay: 84ms;
      }

@media (max-width: 640px) {
.testimonials-section {
          margin-top: -24px;
          padding-top: 64px;
        }
}

@media (prefers-reduced-motion: reduce) {
.testimonials-section,
        .testimonials-section.is-visible,
        .testimonial-card,
        .testimonials-section.is-visible .testimonial-card,
        .testimonials-section.is-visible .testimonial-card.is-card-visible {
          opacity: 1;
          filter: none;
          transform: none;
          clip-path: none;
          transition: none;
        }
}

/* ==============================================================
       Real Vibes refinement — flat cards + true scroll underlay
       ============================================================== */
/* Section three remains the foreground layer during its exit. */
.experience {
        position: relative;
        z-index: 90;
      }

/*
       Real Vibes begins one viewport beneath section three. Its content is
       counter-translated during the final viewport of the scroll experience,
       holding it behind the outgoing stage while that stage uncovers it.
    */
.testimonials-section,
      .testimonials-section.is-visible {
        position: relative;
        z-index: 60;
        margin: -100svh 0 0;
        padding: 0 0 100svh;
        overflow: clip;
        border: 0;
        border-radius: 0;
        background: var(--cream);
        box-shadow: none;
        opacity: 1;
        transform: none;
        transform-origin: initial;
        clip-path: none;
        transition: none;
        isolation: isolate;
      }

/* Remove the oversized REAL VIBES background watermark. */
.testimonials-section::before {
        content: none;
        display: none;
      }

.testimonials-section__inner {
        position: relative;
        z-index: 1;
        padding-top: clamp(54px, 7vw, 112px);
        transform: translate3d(0, var(--vibes-underlay-shift, 0px), 0);
        will-change: transform;
      }

/* Preserve the accelerated card entrance until the outgoing stage has
       uncovered the carousel area. This prevents it finishing out of sight. */
.testimonials-section.is-visible:not(.is-underlay-revealing)
        .testimonial-card,
      .testimonials-section.is-visible:not(.is-underlay-revealing)
        .testimonial-card.is-card-visible {
        opacity: 0;
        filter: blur(7px) saturate(0.82);
        transform: translateX(clamp(112px, 16vw, 250px)) translateY(10px)
          scale(0.94);
        transition-delay: 0ms;
      }

.testimonials-section.is-visible.is-underlay-revealing
        .testimonial-card.is-card-visible {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translateX(0) translateY(0) scale(1);
        transition-delay: var(--card-enter-delay, 0ms);
      }

/* Flat brand-color surfaces: no radial or linear gradients. */
.testimonial-card--purple {
        background: var(--purple);
      }

.testimonial-card--yellow {
        background: var(--yellow);
      }

.testimonial-card--pink {
        background: var(--pink);
      }

.testimonial-card--lavender {
        background: var(--lavender);
      }

@media (max-width: 640px) {
.testimonials-section,
        .testimonials-section.is-visible {
          margin-top: -100svh;
          padding-top: 0;
          padding-bottom: 100svh;
        }

.testimonials-section__inner {
          padding-top: clamp(48px, 9vw, 72px);
        }
}

@media (prefers-reduced-motion: reduce) {
.testimonials-section__inner {
          transform: translate3d(0, 100svh, 0);
          will-change: auto;
        }

.testimonials-section.is-visible:not(.is-underlay-revealing)
          .testimonial-card,
        .testimonials-section.is-visible:not(.is-underlay-revealing)
          .testimonial-card.is-card-visible,
        .testimonials-section.is-visible.is-underlay-revealing
          .testimonial-card.is-card-visible {
          opacity: 1;
          filter: none;
          transform: none;
          transition: none;
        }
}

/* ==============================================================
       Final requested refinements — clean Real Vibes + Pricing underlay
       ============================================================== */
/* The light curved areas highlighted in review were the card shadows.
       Remove both those halos and every background image/layer belonging to
       Real Vibes so the cards sit directly on the page surface. */
.testimonials-section,
      .testimonials-section.is-visible {
        background: transparent;
        background-color: transparent;
        background-image: none;
      }

.testimonials-carousel,
      .testimonials-carousel__viewport,
      .testimonials-carousel__track {
        background: transparent;
        background-image: none;
      }

.testimonial-card,
      .testimonial-card:hover {
        box-shadow: none;
      }

/* FAQ stays above Pricing during the final viewport of its exit, so the
       Pricing panel is genuinely uncovered from underneath rather than merely
       fading into the normal document flow. */
.faq-section {
        position: relative;
        z-index: 90;
      }

.pricing-section,
      .pricing-section.is-visible {
        position: relative;
        z-index: 60;
        margin: -100svh var(--pad) 0;
        padding: 0 0 100svh;
        opacity: 1;
        transform: none;
        transform-origin: initial;
        clip-path: none;
        transition: box-shadow 0.72s ease;
        box-shadow: none;
        isolation: isolate;
      }

.pricing-section__inner {
        position: relative;
        z-index: 1;
        transform: translate3d(0, var(--pricing-underlay-shift, 0px), 0);
        will-change: transform;
      }

.pricing-section.is-underlay-revealing {
        box-shadow: 0 30px 70px rgba(22, 11, 29, 0.1);
      }

/* Keep the existing staggered card animation, but start it only when the
       pricing cards are actually being uncovered by the outgoing FAQ panel. */
.pricing-section.is-visible:not(.is-underlay-revealing) .pricing-card {
        opacity: 0;
        transform: translateY(36px);
        transition-delay: 0ms;
      }

.pricing-section.is-visible:not(.is-underlay-revealing)
        .pricing-card--featured {
        transform: none;
      }

.pricing-section.is-visible.is-underlay-revealing .pricing-card {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--pricing-index) * 90ms);
      }

.pricing-section.is-visible.is-underlay-revealing
        .pricing-card--featured {
        transform: none;
      }

/* Match Subscription's annual unit to the Free Credits price treatment:
       it sits immediately beside the amount, left aligned, on two short lines. */
.pricing-card--soon .pricing-card__unit,
      .pricing-card__unit--annual {
        width: 5.5ch;
        max-width: 5.5ch;
        flex: 0 0 5.5ch;
        margin-left: 0;
        text-align: left;
        white-space: normal;
      }

.pricing-card__unit--annual span {
        display: block;
      }

@media (max-width: 640px) {
.pricing-section,
        .pricing-section.is-visible {
          margin-top: -100svh;
          margin-right: 8px;
          margin-left: 8px;
          padding-bottom: 100svh;
        }

.pricing-section.is-visible:not(.is-underlay-revealing)
          .pricing-card--featured,
        .pricing-section.is-visible.is-underlay-revealing
          .pricing-card--featured {
          transform: translateY(0) rotate(0);
        }
}

@media (prefers-reduced-motion: reduce) {
.pricing-section,
        .pricing-section.is-visible {
          margin-top: clamp(54px, 5vw, 68px);
          padding-bottom: 0;
          box-shadow: 0 30px 70px rgba(22, 11, 29, 0.1);
        }

.pricing-section__inner,
        .pricing-section.is-visible:not(.is-underlay-revealing) .pricing-card,
        .pricing-section.is-visible:not(.is-underlay-revealing)
          .pricing-card--featured,
        .pricing-section.is-visible.is-underlay-revealing .pricing-card,
        .pricing-section.is-visible.is-underlay-revealing
          .pricing-card--featured {
          opacity: 1;
          transform: none;
          transition: none;
        }
}

/* ==============================================================
       Pricing card entrance choreography
       ============================================================== */
.pricing-card {
        --pricing-enter-x: 0px;
        --pricing-enter-rotate: 0deg;
        opacity: 0;
        filter: blur(9px);
        transform: translate3d(var(--pricing-enter-x), 68px, 0) scale(0.925)
          rotate(var(--pricing-enter-rotate));
        transition:
          opacity 0.62s ease-out,
          filter 0.82s ease-out,
          transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.25s ease;
        transition-delay: calc(80ms + (var(--pricing-index) * 145ms));
        will-change: opacity, filter, transform;
        backface-visibility: hidden;
      }

.pricing-card:nth-child(1) {
        --pricing-enter-x: -72px;
        --pricing-enter-rotate: -1.5deg;
      }

.pricing-card--featured {
        --pricing-enter-x: 0px;
        --pricing-enter-rotate: 0deg;
      }

.pricing-card:nth-child(3) {
        --pricing-enter-x: 72px;
        --pricing-enter-rotate: 1.5deg;
      }

.pricing-section.is-visible:not(.is-underlay-revealing) .pricing-card {
        opacity: 0;
        filter: blur(9px);
        transform: translate3d(var(--pricing-enter-x), 68px, 0) scale(0.925)
          rotate(var(--pricing-enter-rotate));
        transition-delay: 0ms;
      }

.pricing-section.is-visible.is-underlay-revealing .pricing-card {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        transition-delay: calc(80ms + (var(--pricing-index) * 145ms));
      }

.pricing-section.is-visible.is-underlay-revealing
        .pricing-card--featured {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
      }

/* Give the content a small secondary settle after each card arrives. */
.pricing-card > * {
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.48s ease-out,
          transform 0.68s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(210ms + (var(--pricing-index) * 145ms));
      }

.pricing-section.is-visible.is-underlay-revealing .pricing-card > * {
        opacity: 1;
        transform: translateY(0);
      }

@media (max-width: 640px) {
.pricing-card,
        .pricing-card:nth-child(1),
        .pricing-card--featured,
        .pricing-card:nth-child(3),
        .pricing-section.is-visible:not(.is-underlay-revealing) .pricing-card {
          --pricing-enter-x: 0px;
          --pricing-enter-rotate: 0deg;
          transform: translate3d(0, 54px, 0) scale(0.95);
        }

.pricing-section.is-visible.is-underlay-revealing .pricing-card,
        .pricing-section.is-visible.is-underlay-revealing
          .pricing-card--featured {
          transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        }
}

@media (prefers-reduced-motion: reduce) {
.pricing-card,
        .pricing-card > *,
        .pricing-section.is-visible:not(.is-underlay-revealing) .pricing-card,
        .pricing-section.is-visible.is-underlay-revealing .pricing-card,
        .pricing-section.is-visible.is-underlay-revealing
          .pricing-card--featured {
          opacity: 1;
          filter: none;
          transform: none;
          transition: none;
        }
}

/* ==============================================================
       Hero hook refresh: intrigue first, product story second
       ============================================================== */
.hero__word {
        font-size: clamp(92px, 14.8vw, 290px);
        letter-spacing: -0.026em;
      }

.hero__tagline {
        letter-spacing: 0.11em;
      }

.hero-screen {
        justify-content: flex-start;
        background:
          radial-gradient(
            circle at 82% 14%,
            rgba(255, 92, 168, 0.14),
            transparent 26%
          ),
          radial-gradient(
            circle at 12% 76%,
            rgba(138, 35, 135, 0.1),
            transparent 30%
          ),
          var(--cream);
        color: var(--ink);
      }

.hero-screen__top {
        position: relative;
        z-index: 8;
        color: rgba(22, 11, 29, 0.62);
      }

.hero-phone-story {
        position: absolute;
        z-index: 4;
        left: 7%;
        right: 7%;
        top: 14%;
        bottom: 5.5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transform-origin: 50% 50%;
        will-change: opacity, transform;
      }

.hero-phone-story--primary {
        opacity: 1;
      }

.hero-phone-story--secondary {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
        pointer-events: none;
      }

.intro-pending .hero-screen__title {
        transform: translateY(15px);
      }

.hero-screen__title {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
        margin: 0;
        color: var(--purple);
        font-size: clamp(36px, 4.35vw, 76px);
        line-height: 0.82;
        letter-spacing: -0.025em;
      }

.hero-screen__mascot {
        position: relative;
        z-index: 3;
        width: 100%;
        margin: clamp(18px, 2.4vw, 34px) 0 0;
      }

.hero-logo-animation {
        position: relative;
        width: min(82%, 230px);
        aspect-ratio: 1.35 / 1;
        margin: clamp(10px, 1.4vw, 18px) auto 0;
        display: grid;
        place-items: center;
        overflow: hidden;
      }

.hero-logo-animation__fallback-logo {
        display: block;
        width: clamp(82px, 8.4vw, 128px);
        height: auto;
        object-fit: contain;
      }

/* When the hosted JSON animation is enabled, hide the static logo. */
.hero-logo-animation.is-animated .hero-logo-animation__fallback-logo {
        display: none;
      }

/* Scroll cue now sits directly below the logo inside the phone.
       As a phone child, it automatically follows the phone's upward motion
       and opacity fade instead of running on a separate scroll timeline. */
.hero-phone-story .scroll-hint {
        position: relative;
        z-index: 5;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        max-width: none;
        margin: clamp(4px, 0.6vw, 8px) auto 0;
        transform: none;
        color: rgba(22, 11, 29, 0.62);
        font-size: clamp(6px, 0.56vw, 8px);
        line-height: 1;
        letter-spacing: 0.11em;
        white-space: nowrap;
        text-shadow: none;
        opacity: 1;
      }

.hero-phone-story .scroll-hint__mouse {
        width: 16px;
        height: 25px;
        border-color: rgba(138, 35, 135, 0.68);
        box-shadow: none;
      }

.hero-phone-story .scroll-hint__mouse::after {
        top: 5px;
        width: 2px;
        height: 5px;
        background: var(--pink);
      }

.hero-mutual-mark {
        position: relative;
        width: clamp(118px, 12vw, 180px);
        aspect-ratio: 1;
        margin: 0 auto;
        display: grid;
        place-items: center;
      }

.hero-mutual-mark::before,
      .hero-mutual-mark::after {
        content: "";
        position: absolute;
        inset: 8%;
        border: 1px solid rgba(138, 35, 135, 0.2);
        border-radius: 50%;
        animation: heroMutualPulse 2.6s ease-out infinite;
      }

.hero-mutual-mark::after {
        inset: -4%;
        opacity: 0.55;
        animation-delay: 0.65s;
      }

.hero-mutual-mark__heart {
        position: relative;
        z-index: 2;
        color: var(--pink);
        font-family: Arial, sans-serif;
        font-size: clamp(86px, 9.4vw, 142px);
        font-weight: 400;
        line-height: 1;
        filter: drop-shadow(0 12px 20px rgba(255, 92, 168, 0.13));
      }

.hero-mutual-mark__question {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        color: var(--ink);
        font-family: var(--display);
        font-size: clamp(38px, 4.2vw, 64px);
        line-height: 1;
      }

@keyframes heroMutualPulse {
        0% {
          transform: scale(0.82);
          opacity: 0;
        }
        28% {
          opacity: 0.75;
        }
        100% {
          transform: scale(1.08);
          opacity: 0;
        }
      }

.hero-connection-row {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(7px, 0.95vw, 13px);
      }

.hero-connection {
        width: 29%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(5px, 0.55vw, 8px);
        color: rgba(22, 11, 29, 0.68);
        font-size: clamp(6px, 0.55vw, 8.5px);
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }

.hero-connection--side {
        margin-top: 8%;
        transform: scale(0.88);
        opacity: 0.76;
      }

.hero-connection__photo {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        border: 2px solid var(--ink);
        border-radius: 50%;
        background: var(--lavender);
        box-shadow: 0 10px 22px rgba(22, 11, 29, 0.12);
      }

.hero-connection--focus .hero-connection__photo {
        border-color: var(--purple);
        box-shadow:
          0 0 0 5px rgba(138, 35, 135, 0.11),
          0 14px 26px rgba(22, 11, 29, 0.15);
      }

.hero-connection__photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 22%;
      }

.hero-screen__prompt {
        margin: clamp(12px, 1.6vw, 22px) auto 0;
        font-size: clamp(7px, 0.68vw, 10px);
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.68);
      }

.hero-screen__button {
        width: 100%;
        min-height: clamp(30px, 3vw, 46px);
        margin-top: auto;
        border-radius: 999px;
        background: var(--purple);
        color: var(--white);
        box-shadow: 0 10px 22px rgba(138, 35, 135, 0.18);
        letter-spacing: 0.08em;
      }

.hero-phone-story__kicker {
        margin: 0 0 clamp(9px, 1.2vw, 16px);
        font-size: clamp(6.5px, 0.58vw, 9px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.58);
      }

.hero-phone-story__secondary-title {
        font-family: var(--display);
        font-size: clamp(38px, 4.65vw, 80px);
        font-weight: 400;
        line-height: 0.82;
        letter-spacing: -0.025em;
        color: var(--purple);
      }

.hero-private-signal {
        width: 100%;
        margin: clamp(22px, 2.8vw, 38px) 0 0;
        display: grid;
        grid-template-columns: 62px minmax(34px, 1fr) 62px;
        align-items: center;
        justify-content: center;
      }

.hero-private-signal__person {
        width: clamp(44px, 5vw, 64px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 2px solid var(--ink);
        border-radius: 50%;
        background: var(--ink);
        color: var(--white);
        font-family: var(--display);
        font-size: clamp(23px, 2.8vw, 42px);
        box-shadow: 0 10px 22px rgba(22, 11, 29, 0.12);
      }

.hero-private-signal__person--crush {
        justify-self: end;
        background: var(--lavender);
        border-color: var(--purple);
      }

.hero-private-signal__person img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center 22%;
      }

.hero-private-signal__path {
        position: relative;
        height: 1px;
        background: rgba(22, 11, 29, 0.28);
      }

.hero-private-signal__path::after {
        content: "";
        position: absolute;
        right: -1px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-top: 1px solid rgba(22, 11, 29, 0.5);
        border-right: 1px solid rgba(22, 11, 29, 0.5);
        transform: translateY(-50%) rotate(45deg);
      }

.hero-private-signal__path span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: clamp(27px, 2.8vw, 38px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--pink);
        color: var(--white);
        font-size: clamp(11px, 1.2vw, 16px);
        box-shadow: 0 7px 16px rgba(255, 92, 168, 0.25);
      }

.hero-private-signal__labels {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 7px;
        padding: 0 4px;
        font-size: clamp(6px, 0.55vw, 8px);
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.56);
      }

.hero-private-card {
        width: min(100%, 240px);
        margin: clamp(20px, 2.5vw, 34px) auto 0;
        padding: clamp(16px, 1.8vw, 24px) 14px;
        display: grid;
        justify-items: center;
        gap: 5px;
        border: 1px solid rgba(22, 11, 29, 0.14);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 14px 30px rgba(22, 11, 29, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

.hero-private-card__icon {
        width: clamp(42px, 4.6vw, 58px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        margin-bottom: 4px;
        border-radius: 50%;
        background: var(--pink);
        color: var(--white);
        font-size: clamp(18px, 2vw, 27px);
        box-shadow: 0 9px 20px rgba(255, 92, 168, 0.22);
      }

.hero-private-card strong {
        font-size: clamp(7px, 0.68vw, 10px);
        font-weight: 900;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }

.hero-private-card span {
        color: rgba(22, 11, 29, 0.55);
        font-size: clamp(6px, 0.55vw, 8px);
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

.hero-phone-story__privacy {
        width: 100%;
        min-height: clamp(30px, 3vw, 46px);
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 10px;
        border: 1px solid rgba(22, 11, 29, 0.17);
        border-radius: 999px;
        background: var(--yellow);
        color: var(--ink);
        font-size: clamp(6.5px, 0.62vw, 9px);
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

.hero-reveal-content {
        width: min(760px, 80%);
      }

.hero-reveal__eyebrow {
        margin-bottom: clamp(7px, 0.8vw, 11px);
      }

.hero-reveal-content h2 {
        max-width: 20ch;
        margin-bottom: clamp(8px, 1vw, 13px);
        font-size: clamp(38px, 5.2vw, 90px);
        line-height: 0.88;
      }

.hero-reveal__body {
        max-width: 42ch;
        margin-bottom: clamp(14px, 1.7vw, 22px);
        font-size: clamp(8.5px, 0.78vw, 12px);
      }

.hero-reveal__button {
        display: inline-flex;
        pointer-events: auto;
        background: var(--yellow);
        color: var(--ink);
      }

@media (max-width: 1180px) {
.hero__word {
          font-size: clamp(62px, 12.7vw, 150px);
        }
}

@media (max-width: 860px) {
.hero__word {
          font-size: clamp(54px, 12.5vw, 108px);
        }

.hero-screen__title {
          font-size: clamp(33px, 8.8vw, 58px);
        }
}

@media (max-width: 640px) {
.hero__word {
          top: 2px;
          width: calc(100% - 10px);
          font-size: clamp(43px, 12vw, 74px);
        }

.hero__tagline {
          font-size: clamp(6.8px, 1.95vw, 8.8px);
          letter-spacing: 0.085em;
        }

.hero-phone-story {
          top: 14%;
          bottom: 5%;
        }

.hero-connection-row {
          gap: 5px;
        }

.hero-private-signal {
          grid-template-columns: 48px minmax(26px, 1fr) 48px;
        }

.hero-reveal-content {
          width: min(92%, 520px);
        }

.hero-reveal-content h2 {
          max-width: 18ch;
          font-size: clamp(31px, 9vw, 52px);
        }

.hero-reveal__body {
          max-width: 34ch;
          font-size: clamp(8px, 2.2vw, 10px);
        }
}

@media (max-width: 390px) {
.hero__word {
          font-size: clamp(39px, 11.6vw, 52px);
        }
}

/* Portrait-only hero sizing: headline + tagline use a centered 75vw block.
       Landscape/tablet-landscape/desktop typography remains unchanged. */
@media (orientation: portrait) {
.hero__word {
          width: 75vw;
          font-size: clamp(48px, 15vw, 205px);
        }

.hero__tagline {
          width: 75vw;
          font-size: clamp(7px, 1.9vw, 14px);
        }
}

/* ==============================================================
       Tablet portrait pass — iPad-class viewports (e.g. 1024 × 1366)
       Keep phone and desktop layouts untouched outside this range.
       ============================================================== */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1100px) {
/* Page 1: the desktop 24vw rule made the hero phone ~246px at 1024px.
         Scale it to a more intentional tablet size while still fitting vertically. */
.hero-phone-wrap {
          width: clamp(360px, 38vw, 400px);
        }

/* Page 3: the desktop 20vw rule made the product phone ~205px at 1024px.
         Give the app demo enough visual weight and keep it just above the feature row. */
.app-phone-wrap {
          width: clamp(330px, 34vw, 360px);
          top: 45%;
        }

/* Reviews / Pricing: 1024px previously missed the <=980 structural breakpoint,
         leaving the headers squeezed into desktop-style two-column layouts. */
.testimonials-section__header,
        .pricing-section__header {
          grid-template-columns: 1fr;
          align-items: start;
          gap: clamp(24px, 3.2vw, 34px);
        }

.testimonials-section__intro-copy,
        .pricing-section__intro-copy {
          max-width: 66ch;
        }

.testimonials-section__title,
        .pricing-section__title {
          font-size: clamp(78px, 10.5vw, 112px);
        }

/* FAQ: use the tablet reading pattern instead of forcing the desktop
         sticky two-column layout into a 1024px portrait viewport. */
.faq-section__inner {
          min-height: auto;
          grid-template-columns: 1fr;
          gap: clamp(42px, 5vw, 58px);
          padding: clamp(54px, 6vw, 72px) clamp(34px, 5vw, 56px)
            clamp(38px, 4.5vw, 54px);
        }

.faq-section__intro {
          position: relative;
          top: auto;
          max-width: 760px;
        }

.faq-section__title {
          font-size: clamp(76px, 10.8vw, 112px);
        }

.faq-section__note {
          max-width: 58ch;
          font-size: 13px;
        }

.faq-list {
          align-self: auto;
        }

.faq-item__question {
          font-size: clamp(15px, 1.8vw, 19px);
        }

.faq-item__answer p {
          font-size: 13px;
        }

.faq-section__footer {
          grid-column: auto;
        }

/* Keep Pricing useful on tablet: two comfortably sized cards followed
         by the full-width subscription card. */
.pricing-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

.pricing-card--soon {
          grid-column: 1 / -1;
        }
}

/* ==============================================================
       Tablet portrait section-flow refinement (853–1100px portrait)
       Remove the desktop underlay dead-zone and keep Reviews → FAQ →
       Pricing as a deliberate, premium editorial stack.
       ============================================================== */
/* The oversized PRICING watermark should never render. */
.pricing-section::before {
        content: none !important;
        display: none !important;
      }

@media (orientation: portrait) and (min-width: 768px) and (max-width: 1100px) {
/* Reviews: leave the sticky story cleanly, then enter normal document flow.
         This removes the extra 100svh spacer that was exposing Pricing below. */
.testimonials-section,
        .testimonials-section.is-visible {
          position: relative;
          z-index: 1;
          margin: clamp(34px, 4.5vw, 52px) 0 0;
          padding: 0;
          overflow: hidden;
          background: var(--cream);
          background-image: none;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          opacity: 1;
          transform: none;
          clip-path: none;
        }

.testimonials-section__inner {
          width: 100%;
          padding: clamp(54px, 6vw, 70px) clamp(36px, 5vw, 54px)
            clamp(42px, 5vw, 58px);
          transform: none !important;
          will-change: auto;
        }

.testimonials-section__header {
          gap: clamp(20px, 2.8vw, 30px);
          margin-bottom: clamp(30px, 4vw, 44px);
        }

.testimonials-section__title {
          font-size: clamp(76px, 10.4vw, 108px);
          line-height: 0.76;
        }

.testimonials-section__note {
          max-width: 60ch;
          font-size: clamp(12px, 1.45vw, 14px);
        }

.testimonials-section__meta {
          margin-top: clamp(18px, 2.4vw, 26px);
          padding-top: clamp(14px, 2vw, 20px);
        }

.testimonials-carousel__track {
          gap: 16px;
        }

.testimonial-card {
          flex-basis: calc((100% - 16px) / 2);
          min-height: clamp(350px, 43vw, 430px);
          border-radius: 28px;
        }

/* Do not make users watch an underlay-specific hidden state on tablets.
         The horizontal carousel interaction already supplies motion. */
.testimonial-card,
        .testimonials-section.is-visible .testimonial-card,
        .testimonials-section.is-visible:not(.is-underlay-revealing)
          .testimonial-card,
        .testimonials-section.is-visible:not(.is-underlay-revealing)
          .testimonial-card.is-card-visible,
        .testimonials-section.is-visible.is-underlay-revealing
          .testimonial-card.is-card-visible {
          opacity: 1;
          filter: none;
          transform: none;
          transition: box-shadow 0.22s ease;
        }

/* FAQ becomes the intentional lavender chapter between Reviews/Pricing. */
.faq-section {
          position: relative;
          z-index: 1;
          margin: clamp(26px, 3.5vw, 38px) clamp(18px, 2.5vw, 26px) 0;
          border: 1px solid rgba(22, 11, 29, 0.08);
          border-radius: clamp(30px, 4vw, 40px);
          box-shadow: 0 18px 55px rgba(22, 11, 29, 0.045);
        }

.faq-section::before {
          width: clamp(220px, 28vw, 300px);
          right: -74px;
          top: -58px;
          opacity: 0.085;
        }

.faq-section__inner {
          gap: clamp(30px, 4vw, 42px);
          padding: clamp(52px, 6vw, 68px) clamp(36px, 5vw, 54px)
            clamp(40px, 5vw, 54px);
        }

.faq-section__title {
          font-size: clamp(74px, 10.3vw, 106px);
          line-height: 0.76;
        }

.faq-section__note {
          margin-top: clamp(20px, 2.7vw, 30px);
        }

.faq-item__button {
          padding: clamp(16px, 2vw, 21px) 0;
        }

/* Pricing: normal flow on portrait tablets. No negative viewport overlap,
         no 100svh tail, no hidden/blurred cards waiting behind FAQ. */
.pricing-section,
        .pricing-section.is-visible {
          position: relative;
          z-index: 1;
          margin: clamp(26px, 3.5vw, 38px) clamp(18px, 2.5vw, 26px) 0;
          padding: 0;
          overflow: hidden;
          border: 1px solid rgba(22, 11, 29, 0.1);
          border-radius: clamp(30px, 4vw, 40px);
          background: var(--cream);
          background-image: none;
          box-shadow: 0 18px 55px rgba(22, 11, 29, 0.045);
          opacity: 1;
          transform: none;
          clip-path: none;
        }

.pricing-section__inner {
          padding: clamp(54px, 6vw, 70px) clamp(34px, 4.7vw, 50px)
            clamp(42px, 5vw, 56px);
          transform: none !important;
          will-change: auto;
        }

.pricing-section__header {
          gap: clamp(20px, 2.8vw, 30px);
          margin-bottom: clamp(30px, 4vw, 44px);
        }

.pricing-section__title {
          font-size: clamp(74px, 10.2vw, 104px);
          line-height: 0.76;
        }

.pricing-section__note {
          max-width: 60ch;
          font-size: clamp(12px, 1.45vw, 14px);
        }

.pricing-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: clamp(14px, 2.2vw, 20px);
        }

.pricing-card--soon {
          grid-column: 1 / -1;
        }

.pricing-card,
        .pricing-card > *,
        .pricing-section.is-visible:not(.is-underlay-revealing) .pricing-card,
        .pricing-section.is-visible:not(.is-underlay-revealing)
          .pricing-card--featured,
        .pricing-section.is-visible.is-underlay-revealing .pricing-card,
        .pricing-section.is-visible.is-underlay-revealing
          .pricing-card--featured,
        .pricing-section.is-visible.is-underlay-revealing .pricing-card > * {
          opacity: 1;
          filter: none;
          transform: none !important;
        }

.pricing-card {
          border-radius: 28px;
          transition:
            box-shadow 0.22s ease,
            transform 0.22s ease;
        }

.pricing-card--featured {
          transform: none !important;
        }

.pricing-section.is-underlay-revealing {
          box-shadow: 0 18px 55px rgba(22, 11, 29, 0.045);
        }

.pricing-section__footer {
          margin-top: clamp(26px, 3.5vw, 38px);
        }
}

/* ==============================================================
       vNext — homepage scroll cue + symmetrical Page 2 side panels
       ============================================================== */
/* Match the How It Works hero's "Scroll to reveal" treatment. */
.hero-scroll-reveal {
        position: absolute;
        z-index: 12;
        right: clamp(18px, 3vw, 52px);
        bottom: clamp(18px, 2.6vw, 44px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: 0;
        color: var(--cream);
        background: transparent;
        font-family: var(--body);
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        pointer-events: auto;
        text-shadow: 0 1px 8px rgba(22, 11, 29, 0.22);
        will-change: opacity, transform;
      }

.hero-scroll-reveal__icon {
        width: 42px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 248, 242, 0.45);
        border-radius: 50%;
        font-size: 17px;
        animation: heroScrollRevealPulse 1.8s ease-in-out infinite;
      }

@keyframes heroScrollRevealPulse {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(5px);
        }
      }

.hero-scroll-reveal:hover .hero-scroll-reveal__icon,
      .hero-scroll-reveal:focus-visible .hero-scroll-reveal__icon {
        border-color: var(--yellow);
        background: rgba(242, 221, 33, 0.12);
      }

.hero-scroll-reveal:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: 6px;
        border-radius: 999px;
      }

/* Three pages: Start Crushing on the left, question in the center,
       How It Works on the right. */
.scene-two-pages {
        width: 300%;
        transform: translateX(-33.333333%);
      }

.scene-two-pages.is-start-open {
        transform: translateX(0);
      }

.scene-two-pages.is-how-open {
        transform: translateX(-66.666667%);
      }

.scene-two-page {
        flex: 0 0 33.333333%;
        width: 33.333333%;
      }

.scene-two-page--start {
        background:
          radial-gradient(
            circle at 14% 18%,
            rgba(242, 221, 33, 0.19),
            transparent 24%
          ),
          radial-gradient(
            circle at 84% 82%,
            rgba(255, 92, 168, 0.13),
            transparent 28%
          ),
          var(--cream);
        pointer-events: none;
      }

.scene-two-pages.is-start-open .scene-two-page--main,
      .scene-two-pages.is-how-open .scene-two-page--main {
        pointer-events: none;
      }

.scene-two-pages.is-start-open .scene-two-page--start {
        pointer-events: auto;
      }

.scene-two-pages.is-how-open .scene-two-page--how {
        pointer-events: auto;
      }

.scene-two-layer.is-start-open,
      .scene-two-layer.is-how-open {
        pointer-events: auto;
      }

.start-panel {
        position: absolute;
        inset: 0;
        height: var(--how-visible-height, 100%);
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 1.6vh, 18px);
        padding: clamp(14px, 2vh, 28px) clamp(18px, 4vw, 64px)
          clamp(16px, 2.2vh, 30px);
        overflow: hidden;
      }

.start-panel__header {
        position: relative;
        z-index: 4;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: minmax(104px, 1fr) auto minmax(104px, 1fr);
        align-items: center;
        gap: 16px;
      }

.start-panel__heading {
        min-width: 0;
        text-align: center;
      }

.start-panel__eyebrow,
      .start-qr-card__eyebrow {
        display: block;
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(22, 11, 29, 0.58);
      }

.start-panel__title {
        margin: 3px 0 0;
        font-family: var(--display);
        font-size: clamp(40px, 5vw, 78px);
        font-weight: 400;
        line-height: 0.82;
        letter-spacing: -0.025em;
        text-transform: uppercase;
        color: var(--purple);
      }

.start-panel__back {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: 0;
        color: var(--ink);
        background: transparent;
        font-family: var(--body);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        cursor: pointer;
      }

.start-panel__back-icon {
        width: 42px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(22, 11, 29, 0.45);
        border-radius: 50%;
        font-size: 18px;
        transition:
          transform 0.25s ease,
          background 0.25s ease;
      }

.start-panel__back:hover .start-panel__back-icon,
      .start-panel__back:focus-visible .start-panel__back-icon {
        transform: translateX(4px);
        background: var(--yellow);
      }

.start-panel__tagline {
        flex: 0 0 auto;
        width: min(620px, 88%);
        margin: 0 auto;
        color: rgba(22, 11, 29, 0.66);
        font-size: clamp(11px, 0.88vw, 14px);
        font-weight: 700;
        line-height: 1.42;
        text-align: center;
      }

.start-panel__body {
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
        display: grid;
        place-items: center;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding: clamp(2px, 0.8vh, 10px) 0;
      }

.start-download-stack {
        width: min(560px, 100%);
        min-width: 0;
        display: grid;
        justify-items: center;
        gap: clamp(10px, 1.35vh, 16px);
        margin: auto;
      }

/* Lavender container deliberately contains only scan guidance,
       QR artwork and the three scan steps. */
.start-qr-card {
        width: min(520px, 100%);
        min-width: 0;
        padding: clamp(16px, 2vh, 24px) clamp(16px, 2.2vw, 28px)
          clamp(15px, 1.8vh, 22px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(9px, 1.15vh, 14px);
        border: 1px solid rgba(22, 11, 29, 0.14);
        border-radius: clamp(22px, 2.4vw, 34px);
        background: rgba(233, 226, 239, 0.76);
        box-shadow: 0 18px 44px rgba(22, 11, 29, 0.06);
      }

.start-qr-placeholder {
        width: clamp(168px, 28vmin, 280px);
        max-width: 100%;
        aspect-ratio: 1;
        flex: 0 0 auto;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 7px;
        padding: 16px;
        border: 1px dashed rgba(22, 11, 29, 0.3);
        border-radius: clamp(17px, 1.8vw, 24px);
        color: rgba(22, 11, 29, 0.58);
        background: rgba(255, 255, 255, 0.9);
        text-align: center;
      }

.start-qr-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: inherit;
      }

.start-qr-placeholder__fallback {
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 7px;
      }

.start-qr-placeholder.has-qr-image {
        padding: clamp(8px, 0.8vw, 12px);
        border-style: solid;
        border-color: rgba(22, 11, 29, 0.12);
        background: var(--white);
      }

.start-qr-placeholder.has-qr-image .start-qr-placeholder__fallback {
        display: none;
      }

.start-qr-placeholder__icon {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(22, 11, 29, 0.22);
        border-radius: 50%;
        color: var(--purple);
        background: var(--cream);
        font-size: 22px;
        line-height: 1;
      }

.start-qr-placeholder strong {
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

.start-qr-placeholder small {
        font-size: 9px;
        font-weight: 700;
        opacity: 0.72;
      }

.start-qr-steps {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(7px, 1vw, 11px);
      }

.start-qr-steps span {
        min-width: 0;
        padding-top: 9px;
        border-top: 1px solid rgba(22, 11, 29, 0.16);
        font-size: clamp(7px, 0.62vw, 9px);
        font-weight: 800;
        line-height: 1.32;
        text-align: center;
        text-transform: uppercase;
      }

.start-qr-steps b {
        display: block;
        margin-bottom: 4px;
        color: var(--purple);
        font-size: 8px;
        letter-spacing: 0.08em;
      }

.start-store-actions {
        width: min(460px, 100%);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
      }

.start-store-action {
        min-width: 0;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 11px;
        padding: 0 17px;
        border: 1px solid rgba(22, 11, 29, 0.17);
        border-radius: 17px;
        color: var(--ink);
        background: rgba(255, 248, 242, 0.94);
        text-decoration: none;
        box-shadow: 0 8px 22px rgba(22, 11, 29, 0.04);
        transition:
          transform 0.22s ease,
          color 0.22s ease,
          background 0.22s ease,
          border-color 0.22s ease;
      }

.start-store-action:hover,
      .start-store-action:focus-visible {
        color: var(--cream);
        border-color: var(--purple);
        background: var(--purple);
        transform: translateY(-2px);
      }

.start-store-action__icon {
        width: 27px;
        height: 27px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: var(--ink);
        background: var(--yellow);
        font-size: 16px;
        font-weight: 900;
      }

.start-store-action > span:last-child {
        min-width: 0;
        display: grid;
        gap: 2px;
        text-align: left;
      }

.start-store-action small {
        font-size: 7px;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.66;
      }

.start-store-action strong {
        font-size: 12px;
        font-weight: 900;
      }

.start-panel__curious-link {
        width: fit-content;
        max-width: 100%;
        margin: 0;
        color: var(--purple);
        font-size: 9px;
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: 0.08em;
        text-align: center;
        text-transform: uppercase;
        text-underline-offset: 4px;
      }

@media (max-width: 900px) {
.start-panel {
          padding-inline: clamp(16px, 4vw, 34px);
        }

.start-panel__header {
          grid-template-columns: 46px minmax(0, 1fr) 46px;
          gap: 10px;
        }

.start-panel__back-label,
        .start-panel__header-spacer {
          display: none;
        }

.start-panel__title {
          font-size: clamp(38px, 7vw, 60px);
        }

.start-panel__tagline {
          width: min(560px, 92%);
        }

.start-download-stack {
          width: min(540px, 100%);
        }
}

@media (max-width: 640px) {
.hero-scroll-reveal {
          right: 16px;
          bottom: 18px;
          gap: 8px;
          font-size: 7px;
        }

.hero-scroll-reveal__icon {
          width: 38px;
          font-size: 15px;
        }

.start-panel {
          gap: 8px;
          padding: 10px 14px 14px;
        }

.start-panel__header {
          grid-template-columns: 38px minmax(0, 1fr) 38px;
          gap: 7px;
        }

.start-panel__title {
          font-size: clamp(32px, 10vw, 44px);
          line-height: 0.84;
        }

.start-panel__eyebrow,
        .start-qr-card__eyebrow {
          font-size: 6.5px;
        }

.start-panel__back-icon {
          width: 36px;
          font-size: 16px;
        }

.start-panel__tagline {
          width: min(430px, 96%);
          font-size: 10px;
          line-height: 1.36;
        }

.start-panel__body {
          place-items: start center;
          padding-top: 3px;
        }

.start-download-stack {
          gap: 9px;
        }

.start-qr-card {
          width: 100%;
          padding: 14px;
          gap: 8px;
          border-radius: 22px;
        }

.start-qr-placeholder {
          width: min(58vw, 205px);
          min-width: 156px;
          padding: 12px;
          border-radius: 18px;
        }

.start-qr-steps {
          gap: 6px;
        }

.start-qr-steps span {
          padding-top: 7px;
          font-size: 6.5px;
        }

.start-store-actions {
          width: 100%;
          gap: 8px;
        }

.start-store-action {
          min-height: 48px;
          gap: 8px;
          padding: 0 11px;
          border-radius: 14px;
        }

.start-store-action__icon {
          width: 24px;
          height: 24px;
          font-size: 14px;
        }

.start-store-action small {
          font-size: 5.8px;
          letter-spacing: 0.07em;
        }

.start-store-action strong {
          font-size: 10px;
        }

.start-panel__curious-link {
          font-size: 7.5px;
        }
}

@media (max-width: 430px) {
.start-store-actions {
          grid-template-columns: 1fr;
        }

.start-store-action {
          width: min(100%, 320px);
          justify-self: center;
        }

.start-qr-steps {
          grid-template-columns: 1fr;
        }

.start-qr-steps span {
          display: grid;
          grid-template-columns: 26px minmax(0, 1fr);
          align-items: center;
          gap: 8px;
          text-align: left;
        }

.start-qr-steps b {
          margin: 0;
        }
}

@media (max-height: 760px) {
.start-panel {
          gap: 7px;
          padding-top: 10px;
          padding-bottom: 10px;
        }

.start-panel__title {
          font-size: clamp(34px, 4.4vw, 58px);
        }

.start-panel__tagline {
          font-size: 10px;
        }

.start-download-stack {
          gap: 8px;
        }

.start-qr-card {
          padding-block: 12px;
          gap: 7px;
        }

.start-qr-placeholder {
          width: clamp(148px, 25vmin, 210px);
        }

.start-store-action {
          min-height: 46px;
        }
}

@media (max-height: 620px) and (orientation: landscape) {
.start-panel__body {
          place-items: start center;
        }

.start-panel__tagline {
          display: none;
        }

.start-qr-card {
          width: min(480px, 100%);
        }

.start-qr-placeholder {
          width: 142px;
        }
}

/* ---------- Download panel: centered responsive header + editorial spacing ---------- */
.start-panel {
        gap: 0;
        padding: clamp(24px, 3.2vh, 44px) clamp(20px, 4.6vw, 76px)
          clamp(26px, 3.4vh, 48px);
      }

.start-panel__header {
        position: relative;
        display: block;
        width: 100%;
        min-height: 52px;
        padding-inline: clamp(52px, 7vw, 96px);
        text-align: center;
      }

.start-panel__header-spacer {
        display: none;
      }

.start-panel__heading {
        width: min(100%, 940px);
        margin-inline: auto;
        text-align: center;
      }

.start-panel__eyebrow {
        margin-bottom: clamp(5px, 0.7vh, 9px);
        text-align: center;
      }

.start-panel__title {
        width: 100%;
        margin: 0;
        font-size: clamp(44px, 5.5vw, 88px);
        line-height: 0.84;
        text-align: center;
        text-wrap: balance;
      }

.start-panel__back {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
      }

.start-panel__tagline {
        width: min(720px, 90%);
        margin: clamp(14px, 1.8vh, 24px) auto 0;
        font-size: clamp(12px, 0.95vw, 15px);
        line-height: 1.5;
        text-align: center;
      }

.start-panel__body {
        place-items: start center;
        padding: clamp(24px, 3.4vh, 42px) 0 clamp(14px, 2vh, 28px);
      }

.start-download-stack {
        width: min(680px, 100%);
        gap: clamp(18px, 2.4vh, 28px);
        margin: 0 auto;
      }

.start-qr-card {
        width: min(640px, 100%);
        padding: clamp(24px, 3vh, 38px) clamp(22px, 3.4vw, 42px)
          clamp(24px, 3vh, 36px);
        gap: clamp(14px, 1.8vh, 20px);
        border-radius: clamp(26px, 2.8vw, 40px);
      }

.start-qr-card__eyebrow {
        margin-bottom: 1px;
        text-align: center;
      }

.start-qr-placeholder {
        width: clamp(176px, 25vmin, 252px);
      }

.start-qr-steps {
        gap: clamp(11px, 1.5vw, 18px);
        margin-top: 2px;
      }

.start-qr-steps span {
        padding-top: 12px;
        line-height: 1.4;
      }

.start-store-actions {
        width: min(500px, 100%);
        gap: 14px;
      }

.start-store-action {
        min-height: 56px;
        padding-inline: 19px;
      }

.start-panel__curious-link {
        margin-top: 1px;
        padding: 3px 0;
      }

@media (max-width: 900px) {
.start-panel {
          padding: clamp(22px, 2.8vh, 34px) clamp(18px, 4vw, 36px)
            clamp(24px, 3vh, 38px);
        }

.start-panel__header {
          display: block;
          grid-template-columns: none;
          padding-inline: 54px;
        }

.start-panel__title {
          font-size: clamp(40px, 7.5vw, 66px);
        }

.start-panel__tagline {
          width: min(650px, 92%);
          margin-top: 14px;
        }

.start-panel__body {
          padding-top: clamp(22px, 3vh, 34px);
        }

.start-download-stack {
          width: min(620px, 100%);
          gap: clamp(17px, 2.2vh, 24px);
        }

.start-qr-card {
          width: min(600px, 100%);
        }
}

@media (max-width: 640px) {
.start-panel {
          gap: 0;
          padding: 18px 16px 24px;
        }

.start-panel__header {
          min-height: 48px;
          padding-inline: 46px;
        }

.start-panel__heading {
          width: 100%;
        }

.start-panel__eyebrow {
          margin-bottom: 5px;
          font-size: 6.8px;
        }

.start-panel__title {
          font-size: clamp(36px, 11vw, 50px);
          line-height: 0.86;
        }

.start-panel__back {
          right: 0;
        }

.start-panel__tagline {
          width: min(440px, 94%);
          margin-top: 13px;
          font-size: clamp(10px, 2.8vw, 12px);
          line-height: 1.48;
        }

.start-panel__body {
          place-items: start center;
          padding: 24px 0 18px;
        }

.start-download-stack {
          gap: 18px;
        }

.start-qr-card {
          padding: 20px 18px 22px;
          gap: 13px;
          border-radius: 26px;
        }

.start-qr-card__eyebrow {
          font-size: 6.8px;
        }

.start-qr-placeholder {
          width: min(54vw, 190px);
          min-width: 150px;
        }

.start-qr-steps {
          gap: 8px;
        }

.start-qr-steps span {
          padding-top: 10px;
        }

.start-store-actions {
          gap: 10px;
        }

.start-store-action {
          min-height: 52px;
        }

.start-panel__curious-link {
          font-size: 8px;
        }
}

@media (max-width: 430px) {
.start-panel__header {
          padding-inline: 42px;
        }

.start-panel__title {
          font-size: clamp(34px, 10.6vw, 44px);
        }

.start-panel__body {
          padding-top: 22px;
        }

.start-download-stack {
          gap: 17px;
        }

.start-qr-card {
          padding: 20px 17px 22px;
        }

.start-store-actions {
          gap: 10px;
        }
}

@media (max-height: 760px) {
.start-panel {
          padding-top: 16px;
          padding-bottom: 18px;
        }

.start-panel__title {
          font-size: clamp(36px, 4.8vw, 64px);
        }

.start-panel__tagline {
          margin-top: 10px;
        }

.start-panel__body {
          padding-top: 18px;
        }

.start-download-stack {
          gap: 14px;
        }

.start-qr-card {
          padding-block: 18px;
          gap: 11px;
        }

.start-qr-placeholder {
          width: clamp(145px, 23vmin, 190px);
        }

.start-store-action {
          min-height: 48px;
        }
}

@media (max-height: 620px) and (orientation: landscape) {
.start-panel__tagline {
          display: block;
          max-width: 620px;
          font-size: 9px;
        }

.start-panel__body {
          padding-top: 12px;
        }

.start-download-stack {
          gap: 11px;
        }
}

/* ---------- Side-panel motion targets ----------
       The actual enter/exit choreography is driven by JavaScript so it
       begins while each page is visibly sliding into the viewport and
       can play fully in reverse before the page slides back. */
.start-panel,
      .start-panel__header,
      .start-panel__tagline,
      .start-qr-card,
      .start-store-actions,
      .start-panel__curious-link,
      .how-panel,
      .how-panel__header,
      .how-carousel,
      .how-carousel__controls {
        will-change: opacity, transform, filter;
      }

/* Neutralize the older CSS-only Download reveal. Its timing happened
       mostly while the page was still off-screen, so motion was invisible. */
.start-panel,
      .start-panel__header,
      .start-panel__tagline,
      .start-qr-card,
      .start-store-actions,
      .start-panel__curious-link,
      .scene-two-pages.is-start-open .start-panel,
      .scene-two-pages.is-start-open .start-panel__header,
      .scene-two-pages.is-start-open .start-panel__tagline,
      .scene-two-pages.is-start-open .start-qr-card,
      .scene-two-pages.is-start-open .start-store-actions,
      .scene-two-pages.is-start-open .start-panel__curious-link {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
      }

/* Keep Back controls above animated/carousel content on every reopen. */
.scene-two-pages.is-start-open .start-panel__back,
      .scene-two-pages.is-how-open .how-panel__back {
        position: relative;
        z-index: 80;
        pointer-events: auto !important;
        isolation: isolate;
      }

@media (prefers-reduced-motion: reduce) {
.hero-scroll-reveal__icon {
          animation: none;
        }
}

/* ---------- Final side-panel interaction refinements ---------- */
/* Keep the How It Works content fully rendered while its page simply
       slides back. This removes the card/content disappearance on Back. */
.scene-two-pages.is-how-leaving .how-panel,
      .scene-two-pages.is-how-leaving .how-panel__header,
      .scene-two-pages.is-how-leaving .how-carousel,
      .scene-two-pages.is-how-leaving .how-carousel__controls,
      .scene-two-pages.is-how-leaving .how-video-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
      }

.scene-two-pages.is-how-leaving .scene-two-page--how {
        pointer-events: none;
      }

/* The Download Back control belongs to the panel, not to the centered
       title row. Pinning it to the panel corner keeps the heading perfectly
       centered and gives the control a stable position at every viewport. */
.start-panel__header {
        position: relative;
        display: block;
        padding-inline: clamp(72px, 8vw, 118px);
        text-align: center;
      }

.start-panel__heading {
        width: min(100%, 940px);
        margin-inline: auto;
        text-align: center;
      }

.start-panel__back {
        position: absolute !important;
        z-index: 90 !important;
        top: clamp(16px, 2vh, 28px) !important;
        right: clamp(18px, 4vw, 64px) !important;
        left: auto !important;
        transform: none !important;
        pointer-events: auto !important;
      }

@media (max-width: 900px) {
.start-panel__header {
          padding-inline: 56px;
        }

.start-panel__back {
          top: clamp(14px, 1.8vh, 22px) !important;
          right: clamp(16px, 3.5vw, 30px) !important;
        }
}

@media (max-width: 640px) {
.start-panel__header {
          min-height: 0;
          padding-inline: 44px;
        }

.start-panel__back {
          top: 14px !important;
          right: 14px !important;
        }
}

/* ==============================================================
       Page 3 product phone — mid-width responsive scaling
       540px–1032px laptops/tablets can render a much larger phone than
       the original desktop clamps anticipated. Scale the UI from the
       phone container itself so its content keeps the same visual weight.
       ============================================================== */
@media (min-width: 540px) and (max-width: 1032px) {
.app-phone-wrap {
          container-type: inline-size;
          width: min(clamp(285px, 34vw, 360px), 43svh);
          top: 45%;
        }

.app-kicker {
          font-size: clamp(8px, 3cqw, 11px);
          letter-spacing: 0.11em;
        }

.app-title {
          margin-top: 1.2cqw;
          font-size: clamp(38px, 14.2cqw, 52px);
          line-height: 0.84;
        }

.app-dot {
          width: clamp(27px, 9cqw, 33px);
          height: clamp(27px, 9cqw, 33px);
          font-size: clamp(11px, 3.7cqw, 14px);
        }

.connection-track {
          gap: clamp(10px, 4cqw, 15px);
        }

.connection {
          width: clamp(70px, 27.5cqw, 98px);
          gap: clamp(7px, 2.6cqw, 10px);
        }

.connection-avatar {
          width: clamp(70px, 27cqw, 96px);
          border-width: clamp(2px, 0.7cqw, 3px);
        }

.connection-label {
          font-size: clamp(8px, 3cqw, 11px);
          line-height: 1.02;
        }

.app-tabs {
          gap: clamp(3px, 1cqw, 5px);
        }

.app-tab {
          padding-top: clamp(7px, 2.5cqw, 10px);
          font-size: clamp(19px, 7.8cqw, 28px);
        }

.send-lock {
          left: 6%;
          right: 6%;
        }

.discreet-alert {
          grid-template-columns: clamp(34px, 12cqw, 43px) minmax(0, 1fr);
          gap: clamp(9px, 3cqw, 12px);
          min-height: clamp(82px, 28cqw, 102px);
          padding: clamp(12px, 4cqw, 15px) clamp(11px, 3.6cqw, 14px);
          border-radius: clamp(20px, 7cqw, 27px);
        }

.discreet-alert__app-icon .heart-lock {
          font-size: clamp(10px, 3.8cqw, 14px);
        }

.discreet-alert__topline {
          margin-bottom: clamp(6px, 2cqw, 8px);
        }

.discreet-alert__app-name {
          font-size: clamp(8px, 2.8cqw, 10px);
        }

.discreet-alert__time {
          font-size: clamp(7px, 2.3cqw, 8.5px);
        }

.discreet-alert__message {
          margin-top: clamp(4px, 1.4cqw, 6px);
          font-size: clamp(8px, 2.8cqw, 10px);
          line-height: 1.3;
        }

.mutual-faces {
          width: 82%;
          height: 30%;
          transform: translate(-50%, calc(-50% + 25px));
        }

.mutual-heart {
          font-size: clamp(34px, 14cqw, 50px);
        }
}

/* ==============================================================
       Final polish: Page 2 video, readable mobile copy, FAQ + footer
       ============================================================== */
/* The iframe itself is sized to a 16:9 cover box in JS while the card morphs.
       This slot keeps the animated card geometry stable when the media is moved
       into the expanded full-page viewer. */
.hero-video-card__media-slot {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

.hero-video-card__media {
        inset: 0;
        transform-origin: center;
      }

.hero-video-card__media iframe {
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

.hero-video-card__controls {
        position: absolute;
        z-index: 5;
        right: clamp(14px, 1.8vw, 26px);
        bottom: clamp(14px, 1.8vw, 26px);
        display: flex;
        align-items: center;
        gap: clamp(8px, 0.8vw, 12px);
        pointer-events: auto;
      }

.hero-video-card__play,
      .hero-video-card__expand {
        position: relative;
        inset: auto;
        right: auto;
        bottom: auto;
        width: clamp(42px, 4.2vw, 60px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: var(--ink);
        box-shadow: 0 10px 24px rgba(22, 11, 29, 0.22);
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        transition:
          transform 0.2s ease,
          background 0.2s ease;
      }

.hero-video-card__play:hover,
      .hero-video-card__expand:hover,
      .hero-video-card__play:focus-visible,
      .hero-video-card__expand:focus-visible {
        transform: scale(1.06);
        background: var(--yellow);
      }

.hero-video-card__expand span {
        display: block;
        font-size: clamp(20px, 2.1vw, 28px);
        line-height: 1;
        transform: translateY(-1px);
      }

/* Move the question block into the intentionally empty upper part of Page 2. */
.question__copy {
        top: 29%;
      }

@media (orientation: portrait) {
.question__copy {
          top: 27%;
        }
}

/* Custom expanded viewer — keeps the SAME YouTube iframe in place.
       Nothing is re-parented, so playback time is preserved during expansion. */
.hero-video-modal {
        position: fixed;
        z-index: 10020;
        inset: 0;
        overflow: hidden;
        background: transparent;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.28s ease,
          visibility 0s linear 0.28s;
      }

.hero-video-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }

.hero-video-modal__viewport {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: transparent;
        pointer-events: none;
      }

/* During expansion, promote the existing Page 2 scene instead of moving the iframe.
       This avoids Safari/WebKit reloading the cross-origin iframe and pausing it. */
html.video-expanded-open #sceneTwoLayer {
        position: fixed !important;
        z-index: 10010 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: visible !important;
        background: #080509 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        will-change: auto !important;
        pointer-events: none !important;
      }

html.video-expanded-open #sceneTwoPages {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
      }

html.video-expanded-open .scene-two-page--start,
      html.video-expanded-open .scene-two-page--how {
        display: none !important;
      }

html.video-expanded-open .scene-two-page--main {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: visible !important;
        background: #080509 !important;
        pointer-events: none !important;
      }

html.video-expanded-open #sceneTwoCover,
      html.video-expanded-open #question,
      html.video-expanded-open #heroVideoCard .hero-video-card__shade,
      html.video-expanded-open #heroVideoCard .hero-video-card__controls,
      html.video-expanded-open #heroVideoCard .hero-video-card__label {
        display: none !important;
      }

html.video-expanded-open #heroVideoCard {
        position: fixed !important;
        z-index: 2 !important;
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        opacity: 1 !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #080509 !important;
        overflow: hidden !important;
        pointer-events: none !important;
      }

/* The visible fullscreen video remains a responsive 16:9 contain box.
       The YouTube iframe itself is overscanned *inside* that clipped box so
       YouTube's title/avatar at the top and logo at the bottom edge stay
       outside the visible crop without distorting the video. */
html.video-expanded-open #heroVideoMediaSlot {
        position: absolute !important;
        inset: auto !important;
        left: 50% !important;
        top: 50% !important;
        width: min(100vw, calc(100dvh * 16 / 9)) !important;
        height: min(100dvh, calc(100vw * 9 / 16)) !important;
        transform: translate(-50%, -50%) !important;
        opacity: 1 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #080509 !important;
      }

html.video-expanded-open #heroVideoMedia {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #080509 !important;
      }

html.video-expanded-open #heroVideoFrame {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 118% !important;
        height: 118% !important;
        transform: translate(-50%, -50%) !important;
        border: 0 !important;
        pointer-events: none !important;
      }

html.video-expanded-open #heroVideoCleanCover,
      html.video-expanded-open #heroVideoAutoplayFallback {
        border-radius: 0 !important;
      }

.hero-video-modal__headline {
        position: absolute;
        z-index: 5;
        top: max(clamp(18px, 3vw, 44px), env(safe-area-inset-top));
        left: max(clamp(18px, 3vw, 44px), env(safe-area-inset-left));
        max-width: calc(100vw - clamp(36px, 6vw, 88px));
        display: flex;
        align-items: baseline;
        gap: 0.22em;
        color: var(--white);
        font-family: var(--display);
        font-size: clamp(14px, 3.15vw, 56px);
        font-weight: 400;
        line-height: 0.9;
        letter-spacing: -0.018em;
        text-transform: uppercase;
        white-space: nowrap;
        transform-origin: top left;
        opacity: 0;
        pointer-events: none;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.62),
          0 2px 8px rgba(255, 255, 255, 0.22);
      }

.hero-video-modal__headline-accent {
        color: var(--yellow);
        text-shadow: 0 1px 2px rgba(22, 11, 29, 0.35);
      }

.hero-video-modal.is-open .hero-video-modal__headline {
        animation: heroVideoHeadlineToCorner 0.72s
          cubic-bezier(0.2, 0.8, 0.2, 1) 0.04s both;
      }

@keyframes heroVideoHeadlineToCorner {
        0% {
          opacity: 0;
          transform: translate(16vw, 22vh) scale(1.42);
        }
        36% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
      }

.hero-video-modal__controls {
        position: absolute;
        z-index: 6;
        right: max(clamp(14px, 2.2vw, 28px), env(safe-area-inset-right));
        bottom: max(clamp(14px, 2.2vw, 28px), env(safe-area-inset-bottom));
        display: flex;
        gap: clamp(8px, 1vw, 12px);
      }

.hero-video-modal__control {
        position: relative;
        width: clamp(46px, 4.4vw, 62px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.78);
        border-radius: 50%;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
        cursor: pointer;
        touch-action: manipulation;
        transition:
          transform 0.2s ease,
          background 0.2s ease;
      }

.hero-video-modal__control:hover,
      .hero-video-modal__control:focus-visible {
        transform: scale(1.06);
        background: var(--yellow);
      }

.hero-video-modal__pause::before {
        content: "";
        width: 15px;
        height: 19px;
        background: linear-gradient(
          90deg,
          currentColor 0 5px,
          transparent 5px 10px,
          currentColor 10px 15px
        );
      }

.hero-video-modal__pause:not(.is-playing)::before {
        width: 0;
        height: 0;
        margin-left: 4px;
        background: none;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 16px solid currentColor;
      }

.hero-video-modal__close span {
        font-size: clamp(28px, 2.7vw, 38px);
        font-weight: 400;
        line-height: 0.8;
      }

.hero-video-modal__label {
        display: none;
        position: absolute;
        z-index: 4;
        left: max(clamp(14px, 2.2vw, 28px), env(safe-area-inset-left));
        bottom: max(clamp(14px, 2.2vw, 28px), env(safe-area-inset-bottom));
        color: rgba(255, 255, 255, 0.92);
        font-size: clamp(9px, 0.8vw, 12px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        pointer-events: none;
      }

@media (max-width: 520px) {
.hero-video-modal__headline {
          top: max(14px, env(safe-area-inset-top));
          left: max(12px, env(safe-area-inset-left));
          max-width: calc(100vw - 24px);
          gap: 0.15em;
          font-size: clamp(11px, 3.72vw, 17px);
        }

.hero-video-modal__control {
          width: clamp(48px, 13vw, 58px);
        }

@keyframes heroVideoHeadlineToCorner {
          0% {
            opacity: 0;
            transform: translate(7vw, 18vh) scale(1.28);
          }
          36% {
            opacity: 1;
          }
          100% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
          }
        }
}

@media (max-height: 560px) and (orientation: landscape) {
.hero-video-modal__headline {
          top: max(10px, env(safe-area-inset-top));
          left: max(12px, env(safe-area-inset-left));
          font-size: clamp(11px, 2.7vw, 24px);
        }

.hero-video-modal__control {
          width: 44px;
        }
}

@media (prefers-reduced-motion: reduce) {
.hero-video-modal.is-open .hero-video-modal__headline {
          animation: none;
          opacity: 1;
          transform: none;
        }
}

html.video-expanded-open,
      body.video-expanded-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
      }

/* The purple hero card carries the same meaning with one compact support line
       rather than small running copy both above and below the headline. */
.hero-reveal__eyebrow {
        font-weight: 900;
      }

/* Mobile running text: preserve the editorial body style, just at a readable
       floor size and weight. */
@media (max-width: 640px) {
.hero-reveal__eyebrow {
          margin-bottom: 10px;
          font-size: 10px;
          line-height: 1.35;
          letter-spacing: 0.1em;
        }

.question__small {
          font-size: 9px;
          font-weight: 900;
        }

.page-three-layer .feature p {
          font-size: 11.5px;
          font-weight: 650;
          line-height: 1.45;
          -webkit-line-clamp: 3;
          line-clamp: 3;
        }

.testimonials-section__note {
          font-size: 13px;
          font-weight: 600;
          line-height: 1.58;
        }

.testimonials-section__meta {
          font-size: 9.5px;
          font-weight: 800;
          line-height: 1.4;
        }

.testimonial-card__body p {
          font-size: 13px;
          font-weight: 700;
          line-height: 1.55;
        }

.testimonial-card__footer {
          font-size: 9px;
          line-height: 1.4;
        }

.pricing-section__note {
          font-size: 13px;
          font-weight: 600;
          line-height: 1.58;
        }

.pricing-section__promise,
        .pricing-card__badge,
        .pricing-card__unit {
          font-size: 9px;
          font-weight: 900;
          line-height: 1.3;
        }

.pricing-card__features li {
          font-size: 12px;
          font-weight: 700;
          line-height: 1.5;
        }

.pricing-section__footer {
          font-size: 9.5px;
          font-weight: 800;
          line-height: 1.45;
        }

.faq-section__note {
          font-size: 13px;
          font-weight: 600;
          line-height: 1.58;
        }

.faq-item__number {
          font-size: 9px;
        }

.faq-item__question {
          font-size: clamp(15px, 4.45vw, 19px);
          line-height: 1.04;
        }

.faq-item__answer p {
          margin-left: 30px;
          font-size: 12.5px;
          font-weight: 600;
          line-height: 1.58;
        }

.faq-section__footer {
          font-size: 9px;
          line-height: 1.45;
        }

/* Make the SMS-style notification legible without enlarging the entire phone. */
.discreet-alert {
          grid-template-columns: 38px minmax(0, 1fr);
          gap: 10px;
          min-height: 94px;
          padding: 12px 11px;
          border-radius: 22px;
        }

.discreet-alert__topline {
          margin-bottom: 6px;
        }

.discreet-alert__app-name {
          font-size: 9px;
          font-weight: 700;
        }

.discreet-alert__time {
          font-size: 8px;
          font-weight: 800;
        }

.discreet-alert__title {
          font-size: 11.5px;
          font-weight: 900;
          line-height: 1.2;
        }

.discreet-alert__message {
          margin-top: 4px;
          font-size: 10.5px;
          font-weight: 650;
          line-height: 1.34;
        }

.hero-video-card__controls {
          right: 12px;
          bottom: 12px;
          gap: 8px;
        }

.hero-video-card__play,
        .hero-video-card__expand {
          width: 44px;
        }
}

/* ==============================================================
       Page 2 final geometry: centered 4:3 mobile video + bottom CTA row
       ============================================================== */
/* These controls are always the last visual row on Page 2. Keeping both
       wrappers anchored from the same center line prevents breakpoint-specific
       corner/stack layouts from taking over. */
.scene-two-layer {
        --page2-action-half-gap: clamp(4px, 0.5vw, 7px);
        --page2-action-bottom: max(12px, env(safe-area-inset-bottom));
        --page2-action-width: clamp(122px, 15vw, 180px);
      }

.question__cta-left,
      .question__cta-right {
        top: auto;
        right: auto;
        bottom: var(--page2-action-bottom);
        width: var(--page2-action-width);
        gap: 0;
        z-index: 8;
      }

.question__cta-left {
        left: calc(50% - var(--page2-action-half-gap));
        transform: translateX(-100%);
      }

.question__cta-right {
        left: calc(50% + var(--page2-action-half-gap));
        transform: none;
      }

.question__cta-left::after,
      .question__cta-right::before {
        display: none;
      }

.question__cta-left .pill,
      .question__cta-right .pill {
        width: 100%;
        min-height: clamp(38px, 4vw, 48px);
        max-height: 48px;
        padding-inline: clamp(10px, 1.4vw, 20px);
        font-size: clamp(8px, 0.78vw, 12px);
        letter-spacing: 0.04em;
      }

@media (max-width: 760px) {
/* JS supplies the exact 4:3 dimensions. These CSS rules preserve the
         centered-card presentation through the final handoff and override the
         older full-bleed mobile treatment. */
.hero-video-card__media-slot,
        .hero-video-card__media {
          border-radius: inherit;
        }

.scene-two-layer {
          --page2-action-width: clamp(118px, 38vw, 154px);
          --page2-action-bottom: max(10px, env(safe-area-inset-bottom));
        }

.question__cta-left .pill,
        .question__cta-right .pill {
          min-height: 38px;
          padding-inline: 9px;
          font-size: clamp(8px, 2.25vw, 9.5px);
        }
}

@media (max-width: 340px) {
.scene-two-layer {
          --page2-action-width: 116px;
          --page2-action-half-gap: 3px;
        }

.question__cta-left .pill,
        .question__cta-right .pill {
          font-size: 8px;
          padding-inline: 7px;
        }
}

/* ==============================================================
       Final readability + editorial pass — Real Vibes / FAQ / SMS
       ============================================================== */
/* Real Vibes: clean editorial cards with no numbered/color-block treatment. */
.testimonial-card,
      .testimonial-card--purple,
      .testimonial-card--yellow,
      .testimonial-card--pink,
      .testimonial-card--lavender {
        color: var(--ink) !important;
        background: transparent !important;
        border-color: rgba(22, 11, 29, 0.16) !important;
      }

.testimonial-card::after,
      .testimonial-card--purple::after,
      .testimonial-card--yellow::after,
      .testimonial-card--pink::after,
      .testimonial-card--lavender::after {
        z-index: 0;
        color: rgba(22, 11, 29, 0.055) !important;
      }

.testimonial-card__top {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: clamp(10px, 1.15vw, 16px);
      }

.testimonial-card__title {
        max-width: 11ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(38px, 4.1vw, 72px);
        font-weight: 400;
        line-height: 0.82;
        letter-spacing: -0.025em;
        text-transform: uppercase;
        color: var(--ink);
      }

.testimonial-card__stars {
        align-self: flex-start;
        color: var(--ink);
        opacity: 0.82;
      }

.testimonial-card__body {
        margin: clamp(36px, 5vw, 76px) 0;
      }

.testimonial-card__body p {
        color: var(--ink);
        opacity: 0.8;
      }

/* FAQ: the questions are primary reading text, not micro-copy. */
.faq-item__question,
      .faq-item__button:hover .faq-item__question,
      .faq-item.is-open .faq-item__question {
        color: var(--ink);
        font-size: clamp(18px, 1.65vw, 30px);
        line-height: 0.98;
      }

.faq-item__answer p {
        font-size: clamp(13px, 1vw, 17px);
        font-weight: 700;
        line-height: 1.62;
        color: rgba(22, 11, 29, 0.82);
      }

/* Match the purple-panel CTA to the Page 2 pill proportions. */
.hero-reveal__button {
        min-width: clamp(150px, 15vw, 180px);
        min-height: clamp(38px, 4vw, 48px);
        max-height: 48px;
        padding-inline: clamp(10px, 1.4vw, 20px);
        justify-content: center;
        font-size: clamp(8px, 0.78vw, 12px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

/* The Rush notification intentionally breaks beyond the phone so the SMS is
       readable as a storytelling object rather than tiny in-device UI copy. */
.app-phone-wrap.is-sent-screen .phone__screen {
        overflow: visible;
      }

.app-phone-wrap.is-sent-screen #screenSent {
        overflow: visible;
        z-index: 30;
      }

.app-phone-wrap.is-sent-screen .send-lock {
        z-index: 40;
        left: 50%;
        right: auto;
        width: min(142%, 480px);
        transform: translate(-50%, -50%);
      }

.app-phone-wrap.is-sent-screen .discreet-alert {
        grid-template-columns: clamp(38px, 3.3vw, 52px) minmax(0, 1fr);
        gap: clamp(10px, 1vw, 14px);
        min-height: clamp(92px, 8vw, 122px);
        padding: clamp(13px, 1.2vw, 17px) clamp(14px, 1.3vw, 18px);
        border-radius: clamp(22px, 2.15vw, 32px);
        box-shadow:
          0 24px 52px rgba(22, 11, 29, 0.24),
          0 5px 14px rgba(22, 11, 29, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

.app-phone-wrap.is-sent-screen .discreet-alert__app-name {
        font-size: clamp(9px, 0.72vw, 11px);
        font-weight: 800;
      }

.app-phone-wrap.is-sent-screen .discreet-alert__time {
        font-size: clamp(8px, 0.62vw, 9.5px);
        font-weight: 800;
      }

.app-phone-wrap.is-sent-screen .discreet-alert__message {
        margin-top: clamp(5px, 0.45vw, 7px);
        font-size: clamp(10.5px, 0.9vw, 14px);
        font-weight: 700;
        line-height: 1.36;
        color: rgba(22, 11, 29, 0.82);
      }

@media (orientation: portrait) and (min-width: 768px) and (max-width: 1100px) {
.faq-item__question,
        .faq-item__button:hover .faq-item__question,
        .faq-item.is-open .faq-item__question {
          font-size: clamp(20px, 2.35vw, 26px);
        }

.faq-item__answer p {
          font-size: clamp(13.5px, 1.5vw, 16px);
        }
}

@media (max-width: 760px) {
.testimonial-card__title {
          max-width: 12ch;
          font-size: clamp(34px, 10vw, 48px);
        }

.testimonial-card__stars {
          font-size: clamp(10px, 2.8vw, 12px);
        }

.faq-item__question,
        .faq-item__button:hover .faq-item__question,
        .faq-item.is-open .faq-item__question {
          font-size: clamp(17px, 4.9vw, 22px);
          line-height: 1.02;
        }

.faq-item__answer p {
          margin-left: 30px;
          font-size: clamp(12.5px, 3.55vw, 14px);
          font-weight: 700;
        }

.hero-reveal__button {
          min-width: 154px;
          min-height: 38px;
          padding-inline: 9px;
          font-size: clamp(8px, 2.25vw, 9.5px);
        }

.app-phone-wrap.is-sent-screen .send-lock {
          width: 148%;
        }

.app-phone-wrap.is-sent-screen .discreet-alert {
          grid-template-columns: 42px minmax(0, 1fr);
          min-height: 100px;
          padding: 13px 14px;
        }

.app-phone-wrap.is-sent-screen .discreet-alert__app-name {
          font-size: 10px;
        }

.app-phone-wrap.is-sent-screen .discreet-alert__time {
          font-size: 8.5px;
        }

.app-phone-wrap.is-sent-screen .discreet-alert__message {
          font-size: 11.5px;
          line-height: 1.34;
        }
}

/* ==============================================================
       Final refinement pass — download spacing / Page 2 CTAs /
       iOS-style floating SMS / Real Vibes gradients / pricing values
       ============================================================== */
/* Download the App: give the QR + store area more editorial breathing room. */
.start-panel {
        gap: clamp(12px, 1.7vh, 22px);
      }

.start-panel__body {
        padding-block: clamp(8px, 1.4vh, 18px);
      }

.start-download-stack {
        width: min(680px, 100%);
        gap: clamp(14px, 1.8vh, 22px);
      }

.start-qr-card {
        width: min(620px, 100%);
        padding: clamp(20px, 2.6vh, 30px) clamp(20px, 2.8vw, 34px)
          clamp(18px, 2.3vh, 28px);
        gap: clamp(12px, 1.5vh, 18px);
      }

.start-store-actions {
        width: min(520px, 100%);
        gap: clamp(10px, 1vw, 14px);
      }

.start-panel__curious-link {
        margin-top: 2px;
      }

/* Page 2: keep both actions side-by-side, but attach the row visually to
       the video rather than to the bottom edge of the viewport. --video-bottom
       is updated by the scroll-story geometry on every render. */
.scene-two-layer {
        --page2-video-action-gap: clamp(16px, 2vh, 24px);
      }

.question__cta-left,
      .question__cta-right {
        top: calc(var(--video-bottom) + var(--page2-video-action-gap));
        bottom: auto;
      }

/* Real Vibes: retain the clean cards, but give each one a subtle blended
       wash so the carousel has depth without returning to flat color blocks. */
.testimonial-card,
      .testimonial-card:hover {
        box-shadow: 0 18px 42px rgba(22, 11, 29, 0.065);
        background:
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 248, 242, 0.42)
          ),
          radial-gradient(
            circle at 12% 8%,
            rgba(138, 35, 135, 0.14),
            transparent 48%
          ),
          radial-gradient(
            circle at 90% 94%,
            rgba(255, 92, 168, 0.1),
            transparent 45%
          ) !important;
      }

.testimonial-card--yellow,
      .testimonial-card--yellow:hover {
        background:
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 248, 242, 0.42)
          ),
          radial-gradient(
            circle at 12% 8%,
            rgba(242, 221, 33, 0.2),
            transparent 48%
          ),
          radial-gradient(
            circle at 90% 94%,
            rgba(255, 92, 168, 0.09),
            transparent 45%
          ) !important;
      }

.testimonial-card--pink,
      .testimonial-card--pink:hover {
        background:
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 248, 242, 0.42)
          ),
          radial-gradient(
            circle at 12% 8%,
            rgba(255, 92, 168, 0.18),
            transparent 48%
          ),
          radial-gradient(
            circle at 90% 94%,
            rgba(138, 35, 135, 0.09),
            transparent 45%
          ) !important;
      }

.testimonial-card--lavender,
      .testimonial-card--lavender:hover {
        background:
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.84),
            rgba(255, 248, 242, 0.42)
          ),
          radial-gradient(
            circle at 12% 8%,
            rgba(183, 77, 179, 0.15),
            transparent 48%
          ),
          radial-gradient(
            circle at 90% 94%,
            rgba(233, 226, 239, 0.68),
            transparent 46%
          ) !important;
      }

/* Pricing: use one responsive scale for all three dollar amounts. */
.pricing-card__amount,
      .pricing-card--soon .pricing-card__amount {
        font-size: clamp(64px, 6.35vw, 112px);
      }

/* Restore the actual phone clipping. Only the separate SMS artifact below
       is allowed to escape the device. */
.app-phone-wrap.is-sent-screen .phone__screen,
      .app-phone-wrap.is-sent-screen #screenSent {
        overflow: hidden;
      }

.app-phone-wrap.is-sent-screen .send-lock {
        left: 5%;
        right: 5%;
        width: auto;
        transform: translateY(-50%);
      }

/* Hide the small in-phone notification while the larger storytelling copy
       is visible outside the phone. The promise beneath it stays unchanged. */
.app-phone-wrap.is-sent-screen #sentNotification > .discreet-alert {
        visibility: hidden;
        animation: none !important;
      }

/* iOS-inspired notification that is a sibling of the phone, not a child of
       .phone__screen. This is what lets only the SMS pop outside the bezel. */
.sent-sms-float {
        position: absolute;
        z-index: 70;
        left: 50%;
        top: 50%;
        width: min(148%, 470px);
        min-height: clamp(92px, 8vw, 118px);
        display: grid;
        grid-template-columns: clamp(42px, 3.5vw, 54px) minmax(0, 1fr);
        align-items: center;
        gap: clamp(11px, 1vw, 15px);
        padding: clamp(14px, 1.25vw, 18px) clamp(15px, 1.4vw, 20px);
        border: 1px solid rgba(255, 255, 255, 0.84);
        border-radius: clamp(22px, 2.1vw, 30px);
        background: linear-gradient(
          155deg,
          rgba(255, 255, 255, 0.92),
          rgba(239, 239, 241, 0.86)
        );
        box-shadow:
          0 26px 58px rgba(22, 11, 29, 0.22),
          0 6px 16px rgba(22, 11, 29, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(26px) saturate(150%);
        -webkit-backdrop-filter: blur(26px) saturate(150%);
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px) scale(0.94);
        transform-origin: center;
        pointer-events: none;
      }

.sent-sms-float__icon {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background:
          radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.6),
            transparent 26%
          ),
          linear-gradient(145deg, #ff86bd, #ff4d9b 58%, #c71145);
        color: #fff;
        box-shadow: 0 8px 18px rgba(199, 17, 69, 0.24);
        font-size: clamp(22px, 2vw, 31px);
        line-height: 1;
      }

.sent-sms-float__icon-lock {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: clamp(17px, 1.45vw, 22px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 2px solid rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        background: var(--ink);
        font-size: clamp(8px, 0.72vw, 11px);
        box-shadow: 0 3px 8px rgba(22, 11, 29, 0.2);
      }

.sent-sms-float__content {
        min-width: 0;
        text-align: left;
      }

.sent-sms-float__topline {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: clamp(7px, 0.7vw, 10px);
      }

.sent-sms-float__app {
        color: rgba(22, 11, 29, 0.93);
        font-size: clamp(10px, 0.78vw, 12px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.01em;
      }

.sent-sms-float__time {
        color: rgba(22, 11, 29, 0.48);
        font-size: clamp(8.5px, 0.66vw, 10px);
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
      }

.sent-sms-float__message {
        margin: 0;
        color: rgba(22, 11, 29, 0.9);
        font-size: clamp(12px, 1vw, 15px);
        font-weight: 600;
        line-height: 1.36;
        letter-spacing: -0.01em;
      }

@media (max-width: 760px) {
.start-panel {
          gap: 11px;
        }

.start-panel__body {
          padding-block: 6px 12px;
        }

.start-download-stack {
          width: 100%;
          gap: 12px;
        }

.start-qr-card {
          width: 100%;
          padding: 16px;
          gap: 10px;
        }

.scene-two-layer {
          --page2-video-action-gap: 17px;
        }

.sent-sms-float {
          width: 150%;
          min-height: 96px;
          grid-template-columns: 44px minmax(0, 1fr);
          padding: 13px 14px;
          border-radius: 24px;
        }

.sent-sms-float__app {
          font-size: 10px;
        }

.sent-sms-float__time {
          font-size: 8.5px;
        }

.sent-sms-float__message {
          font-size: 11.5px;
          line-height: 1.35;
        }

.pricing-card__amount,
        .pricing-card--soon .pricing-card__amount {
          font-size: clamp(68px, 20vw, 104px);
        }
}

@media (max-width: 430px) {
.start-store-actions {
          gap: 10px;
        }

.sent-sms-float {
          width: 154%;
        }
}

/* ==============================================================
       Page 2 authoritative action-row layout
       One centered flex row directly below the settled video. This
       intentionally overrides all historical per-button positioning rules.
       ============================================================== */
.scene-two-page--main .question__actions {
        position: absolute;
        z-index: 12;
        left: 50%;
        top: calc(var(--video-bottom) + clamp(16px, 2vh, 24px));
        width: max-content;
        max-width: calc(100% - 24px);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 1.15vw, 16px);
        transform: translateX(-50%);
        pointer-events: auto;
      }

.scene-two-page--main .question__actions .question__cta-left,
      .scene-two-page--main .question__actions .question__cta-right {
        position: static;
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        transform: none;
        pointer-events: auto;
      }

.scene-two-page--main .question__actions .question__cta-left::after,
      .scene-two-page--main .question__actions .question__cta-right::before {
        display: none;
      }

.scene-two-page--main .question__actions .pill {
        width: clamp(132px, 15vw, 180px);
        min-width: 0;
        min-height: clamp(40px, 4vw, 48px);
        max-height: 48px;
        padding-inline: clamp(12px, 1.4vw, 20px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(8.5px, 0.78vw, 12px);
        letter-spacing: 0.04em;
        white-space: nowrap;
        pointer-events: auto;
      }

@media (max-width: 760px) {
.scene-two-page--main .question__actions {
          top: calc(var(--video-bottom) + 17px);
          gap: clamp(8px, 2.6vw, 12px);
          max-width: calc(100% - 18px);
        }

.scene-two-page--main .question__actions .pill {
          width: clamp(118px, 39vw, 154px);
          min-height: 38px;
          padding-inline: 9px;
          font-size: clamp(8px, 2.25vw, 9.5px);
        }
}

@media (max-width: 340px) {
.scene-two-page--main .question__actions {
          gap: 7px;
        }

.scene-two-page--main .question__actions .pill {
          width: 116px;
          padding-inline: 7px;
          font-size: 8px;
        }
}

/* ==============================================================
       How It Works — sequential Lottie storyboard
       ==============================================================
       Resting cards are intentionally NOT thumbnails. Each card uses a
       wadaCrush theme gradient, vertically centered copy, and a play cue.
       The Lottie surface is revealed only while that step is actively playing.
    */
.how-video-card {
        background: var(--purple);
        cursor: pointer;
        isolation: isolate;
      }

.how-video-card__rest {
        position: absolute;
        z-index: 4;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: clamp(24px, 3vw, 42px);
        overflow: hidden;
        color: var(--white);
        background:
          radial-gradient(
            circle at 82% 18%,
            rgba(242, 221, 33, 0.22),
            transparent 28%
          ),
          radial-gradient(
            circle at 18% 82%,
            rgba(255, 92, 168, 0.22),
            transparent 30%
          ),
          linear-gradient(
            145deg,
            var(--poster-a),
            var(--poster-b) 68%,
            var(--poster-c)
          );
        opacity: 1;
        transition:
          opacity 0.28s ease,
          transform 0.35s ease;
        pointer-events: none;
      }

.how-video-card__rest::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            180deg,
            rgba(22, 11, 29, 0.05),
            rgba(22, 11, 29, 0.28)
          ),
          radial-gradient(
            circle at 30% 28%,
            rgba(255, 255, 255, 0.16),
            transparent 24%
          );
        pointer-events: none;
      }

.how-video-card__rest-copy {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        row-gap: clamp(16px, 1.8vw, 24px);
        align-items: stretch;
        text-align: left;
      }

.how-video-card__rest-center {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: center;
        justify-self: stretch;
        text-align: left;
      }

.how-video-card__kicker {
        display: block;
        margin-bottom: clamp(8px, 1vw, 12px);
        color: rgba(255, 255, 255, 0.78);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

.how-video-card__rest h3 {
        margin: 0;
        width: 100%;
        max-width: 100%;
        color: var(--white);
        font-family: var(--display);
        font-size: clamp(32px, 3.35vw, 56px);
        font-weight: 400;
        line-height: 0.9;
        letter-spacing: -0.018em;
        text-transform: uppercase;
        text-wrap: balance;
      }

.how-video-card__rest-play {
        position: relative;
        z-index: 2;
        margin-top: 0;
        align-self: end;
        justify-self: start;
        min-height: 40px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1px solid rgba(255, 255, 255, 0.62);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: var(--ink);
        font-size: clamp(8px, 0.7vw, 10px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        box-shadow: 0 12px 26px rgba(22, 11, 29, 0.18);
      }

.how-video-card__rest-play::before {
        content: "";
        width: 0;
        height: 0;
        margin-left: 2px;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid currentColor;
      }

.how-video-card__lottie {
        position: absolute;
        z-index: 3;
        inset: 0;
        overflow: hidden;
        opacity: 0;
        background: var(--cream);
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

.how-video-card__lottie svg {
        display: block;
        width: 100% !important;
        height: 100% !important;
      }

.how-video-card.has-lottie.is-sequence-active .how-video-card__lottie {
        opacity: 1;
      }

.how-video-card.is-sequence-active .how-video-card__rest {
        opacity: 0;
        transform: scale(0.985);
      }

.how-video-card.is-sequence-active {
        box-shadow:
          0 24px 48px rgba(22, 11, 29, 0.18),
          0 0 0 2px rgba(242, 221, 33, 0.95);
      }

.how-video-card.is-sequence-active::after {
        content: "";
        position: absolute;
        z-index: 6;
        top: clamp(12px, 1.2vw, 18px);
        right: clamp(12px, 1.2vw, 18px);
        width: clamp(8px, 0.75vw, 11px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--yellow);
        box-shadow: 0 0 0 5px rgba(242, 221, 33, 0.18);
        pointer-events: none;
      }

.how-video-card.has-lottie-error .how-video-card__rest {
        opacity: 1;
        transform: none;
      }

@media (hover: hover) and (pointer: fine) {
.how-video-card:not(.is-sequence-active):hover .how-video-card__rest {
          transform: scale(1.015);
        }

.how-video-card:not(.is-sequence-active):hover
          .how-video-card__rest-play {
          background: var(--yellow);
          border-color: var(--yellow);
        }
}

@media (max-width: 640px) {
.how-video-card__rest {
          padding: 26px 24px;
        }

.how-video-card__rest-copy {
          row-gap: 14px;
        }

.how-video-card__rest h3 {
          font-size: clamp(34px, 10vw, 46px);
        }

.how-video-card__rest-play {
          min-height: 42px;
          padding-inline: 15px;
          font-size: 8px;
        }
}

@media (prefers-reduced-motion: reduce) {
.how-video-card__lottie,
        .how-video-card__rest {
          transition: none;
        }
}


/* ---------- "Dating apps vs. wadaCrush" comparison section ---------- */
/* ==============================================================
     SWIPES VS. VIBES
     Uses the same editorial spacing/typography language as Real Vibes.
     ============================================================== */
.dating-compare {
        --compare-ink: var(--ink, #160b1d);
        --compare-purple: var(--purple, #8a2387);
        --compare-violet: var(--violet, #b74db3);
        --compare-pink: var(--pink, #ff5ca8);
        --compare-yellow: var(--yellow, #f2dd21);
        --compare-cream: var(--cream, #fff8f2);
        --compare-lavender: var(--lavender, #e9e2ef);
        --compare-split: 50%;
        position: relative;
        z-index: 70;
        color: var(--compare-ink);
        background: var(--compare-cream);
      }

/* ---------- Intro: intentionally mirrors Real Vibes ---------- */
.dating-compare__intro {
        position: relative;
        margin: clamp(54px, 5vw, 68px) var(--pad) 0;
        padding: clamp(42px, 6.5vw, 104px) clamp(22px, 5.5vw, 90px)
          clamp(34px, 5vw, 78px);
        display: grid;
        grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
        align-items: end;
        gap: clamp(36px, 7vw, 126px);
        overflow: hidden;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-bottom: 0;
        border-radius: clamp(28px, 3.6vw, 58px) clamp(28px, 3.6vw, 58px) 0 0;
        background:
          radial-gradient(
            circle at 86% 10%,
            rgba(255, 92, 168, 0.18),
            transparent 27%
          ),
          radial-gradient(
            circle at 9% 88%,
            rgba(138, 35, 135, 0.1),
            transparent 24%
          ),
          linear-gradient(
            135deg,
            var(--compare-cream) 0%,
            var(--compare-lavender) 100%
          );
        isolation: isolate;
      }

.dating-compare__intro::before {
        content: "SWIPES VS VIBES";
        position: absolute;
        z-index: -1;
        right: -0.04em;
        top: -0.08em;
        color: rgba(138, 35, 135, 0.045);
        font-family: var(--display);
        font-size: clamp(108px, 18vw, 340px);
        line-height: 0.8;
        letter-spacing: -0.04em;
        white-space: nowrap;
        pointer-events: none;
      }

.dating-compare__eyebrow,
      .dating-compare__side-label,
      .dating-compare__moment-kicker,
      .dating-compare__progress-label,
      .dating-compare__outro-eyebrow {
        margin: 0;
        font-family: var(--body);
        font-size: clamp(8px, 0.7vw, 11px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

.dating-compare__eyebrow,
      .dating-compare__outro-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: clamp(18px, 2vw, 30px);
        color: rgba(22, 11, 29, 0.56);
      }

.dating-compare__eyebrow::before,
      .dating-compare__outro-eyebrow::before {
        content: "";
        width: 38px;
        height: 1px;
        flex: 0 0 38px;
        background: var(--compare-purple);
      }

.dating-compare__title {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(70px, 9.5vw, 172px);
        font-weight: 400;
        line-height: 0.73;
        letter-spacing: -0.035em;
        text-transform: uppercase;
      }

.dating-compare__title-line {
        display: block;
      }

.dating-compare__title-signals {
        color: var(--compare-purple);
      }

.dating-compare__title-vs {
        display: inline-block;
        margin-inline: 0.1em;
        color: var(--compare-pink);
        font-size: 0.3em;
        line-height: 1;
        vertical-align: 0.46em;
        letter-spacing: 0.01em;
      }

.dating-compare__intro-copy {
        align-self: end;
        max-width: 62ch;
      }

.dating-compare__intro-copy p {
        margin: 0;
        color: rgba(22, 11, 29, 0.7);
        font-size: clamp(12px, 1.05vw, 17px);
        font-weight: 400;
        line-height: 1.62;
        letter-spacing: 0;
      }

.dating-compare__intro-copy strong {
        color: var(--compare-purple);
        font-weight: 900;
      }

.dating-compare__intro-note {
        display: block;
        margin-top: clamp(24px, 3vw, 42px);
        padding-top: clamp(18px, 2vw, 28px);
        border-top: 1px solid rgba(22, 11, 29, 0.14);
        color: rgba(22, 11, 29, 0.52);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 900;
        line-height: 1.4;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

/* ---------- Interactive comparison ---------- */
.dating-compare__scroll {
        position: relative;
        height: 520svh;
        min-height: 3200px;
        margin: 0 var(--pad);
      }

.dating-compare__sticky {
        position: sticky;
        top: clamp(14px, 1.6vw, 24px);
        height: calc(100svh - clamp(28px, 3.2vw, 48px));
        min-height: 620px;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: 0 0 clamp(28px, 3.6vw, 58px) clamp(28px, 3.6vw, 58px);
        background: #ebe6e2;
      }

.dating-compare__world {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

.dating-compare__world--traditional {
        z-index: 1;
        color: var(--compare-ink);
        background:
          radial-gradient(
            circle at 10% 88%,
            rgba(138, 35, 135, 0.065),
            transparent 25%
          ),
          linear-gradient(135deg, #fffaf6, #e9e5e2);
      }

.dating-compare__world--signal {
        z-index: 2;
        color: #fff;
        background:
          radial-gradient(
            circle at 84% 16%,
            rgba(242, 221, 33, 0.25),
            transparent 25%
          ),
          radial-gradient(
            circle at 18% 84%,
            rgba(255, 92, 168, 0.27),
            transparent 28%
          ),
          linear-gradient(135deg, #3b123f 0%, #8a2387 50%, #b74db3 100%);
        clip-path: inset(0 0 0 var(--compare-split));
        will-change: clip-path;
      }

.dating-compare__sticky.is-vertical .dating-compare__world--signal {
        clip-path: inset(var(--compare-split) 0 0 0);
      }

.dating-compare__world::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.028;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
      }

/* Side headings share the same x/y grid and exact typographic treatment. */
.dating-compare__side-head {
        position: absolute;
        z-index: 6;
        top: clamp(28px, 3vw, 44px);
        width: min(38vw, 560px);
      }

.dating-compare__world--traditional .dating-compare__side-head {
        left: max(var(--pad), 5vw);
      }

.dating-compare__world--signal .dating-compare__side-head {
        right: max(var(--pad), 5vw);
        text-align: right;
      }

.dating-compare__side-label {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(22, 11, 29, 0.56);
      }

.dating-compare__world--signal .dating-compare__side-label {
        justify-content: flex-end;
        color: rgba(255, 255, 255, 0.74);
      }

.dating-compare__side-label::before {
        content: "";
        width: 28px;
        height: 1px;
        flex: 0 0 28px;
        background: currentColor;
      }

.dating-compare__brand-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: clamp(22px, 2.4vw, 34px);
        margin-left: 0;
        min-height: 34px;
      }

.dating-compare__world--signal .dating-compare__brand-row {
        justify-content: flex-end;
        margin-left: 0;
        margin-right: 0;
      }

.dating-compare__brand-icon {
        width: 34px;
        height: 34px;
        display: inline-grid;
        place-items: center;
        overflow: hidden;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(22, 11, 29, 0.1);
        box-shadow: 0 5px 12px rgba(22, 11, 29, 0.08);
        color: var(--compare-ink);
        font: 900 10px/1 var(--body);
        letter-spacing: -0.02em;
      }

.dating-compare__brand-icon svg {
        width: 20px;
        height: 20px;
        display: block;
      }

.dating-compare__brand-icon--tinder {
        background: linear-gradient(145deg, #ff7854, #fd267a);
        border-color: transparent;
      }

.dating-compare__brand-icon--tinder path {
        fill: #fff;
      }

.dating-compare__brand-icon--bumble {
        background: #ffc629;
        border-color: transparent;
      }

.dating-compare__brand-icon--bumble svg * {
        stroke: #160b1d;
      }

.dating-compare__brand-icon--hinge {
        background: #fff;
        font-size: 13px;
        font-weight: 900;
      }

.dating-compare__brand-icon--okc {
        background: #3260ff;
        color: #fff;
        border-color: transparent;
        font-size: 7px;
      }

.dating-compare__brand-icon--cmb {
        background: #f16b4f;
        color: #fff;
        border-color: transparent;
        font-size: 6px;
      }

.dating-compare__brand-icon--more {
        border-radius: 50%;
        background: rgba(22, 11, 29, 0.06);
        color: rgba(22, 11, 29, 0.48);
        box-shadow: none;
        font-size: 13px;
      }

.dating-compare__world--signal .dating-compare__brand-icon {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: none;
      }

.dating-compare__brand-icon--wada {
        width: 38px;
        height: 38px;
        padding: 2px;
        background: rgba(255, 255, 255, 0.94) !important;
        border-radius: 8px;
      }

.dating-compare__brand-icon--wada img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

.dating-compare__moments {
        position: absolute;
        inset: 0;
      }

.dating-compare__moment {
        position: absolute;
        z-index: 4;
        top: clamp(158px, 18vh, 204px);
        width: min(38vw, 560px);
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.42s ease,
          transform 0.58s cubic-bezier(0.2, 0.75, 0.25, 1);
        pointer-events: none;
        text-align: left;
      }

.dating-compare__world--traditional .dating-compare__moment {
        left: max(var(--pad), 5vw);
      }

.dating-compare__world--signal .dating-compare__moment {
        right: max(var(--pad), 5vw);
        text-align: right;
      }

.dating-compare__moment.is-active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

.dating-compare__moment-kicker {
        margin-bottom: clamp(14px, 1.6vw, 22px);
        color: rgba(22, 11, 29, 0.54);
      }

.dating-compare__world--signal .dating-compare__moment-kicker {
        color: rgba(255, 255, 255, 0.72);
      }

.dating-compare__moment h3 {
        margin: 0;
        max-width: 11ch;
        font-family: var(--display);
        font-size: clamp(44px, 4.7vw, 82px);
        font-weight: 400;
        line-height: 0.79;
        letter-spacing: -0.03em;
        text-transform: uppercase;
      }

.dating-compare__moment h3 > span {
        display: block;
      }

.dating-compare__world--signal .dating-compare__moment h3 {
        margin-left: auto;
        color: var(--compare-yellow);
      }

.dating-compare__moment-copy {
        max-width: 36ch;
        margin: clamp(18px, 2vw, 28px) 0 0;
        color: rgba(22, 11, 29, 0.67);
        font-size: clamp(12px, 1.05vw, 17px);
        font-weight: 400;
        line-height: 1.58;
      }

.dating-compare__world--signal .dating-compare__moment-copy {
        margin-left: auto;
        color: rgba(255, 255, 255, 0.82);
      }

.dating-compare__world--signal .dating-compare__art {
        margin-left: auto;
      }

.dating-compare__art {
        width: clamp(110px, 10vw, 168px);
        height: clamp(82px, 7.8vw, 130px);
        margin-top: clamp(22px, 2.5vw, 34px);
        position: relative;
      }

.dating-compare__art--cards span {
        position: absolute;
        width: 66%;
        height: 86%;
        left: 16%;
        top: 7%;
        border: 1px solid rgba(22, 11, 29, 0.2);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 12px 26px rgba(22, 11, 29, 0.08);
      }

.dating-compare__art--cards span:nth-child(1) {
        transform: translateX(-25%) rotate(-10deg);
        opacity: 0.62;
      }

.dating-compare__art--cards span:nth-child(2) {
        transform: translateX(25%) rotate(10deg);
        opacity: 0.62;
      }

.dating-compare__art--cards span:nth-child(3) {
        transform: none;
      }

.dating-compare__art--cards span:nth-child(3)::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 21%;
        width: 30%;
        aspect-ratio: 1;
        border-radius: 50%;
        transform: translateX(-50%);
        background: rgba(22, 11, 29, 0.18);
      }

.dating-compare__art--cards span:nth-child(3)::after {
        content: "";
        position: absolute;
        left: 17%;
        right: 17%;
        bottom: 17%;
        height: 7%;
        border-radius: 999px;
        background: rgba(22, 11, 29, 0.14);
        box-shadow: 0 -14px 0 rgba(22, 11, 29, 0.09);
      }

.dating-compare__art--signal {
        display: grid;
        place-items: center;
      }

.dating-compare__signal-ring,
      .dating-compare__signal-ring::before,
      .dating-compare__signal-ring::after {
        position: absolute;
        inset: 50% auto auto 50%;
        width: 78%;
        aspect-ratio: 1;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        content: "";
      }

.dating-compare__signal-ring::before {
        width: 72%;
      }

.dating-compare__signal-ring::after {
        width: 42%;
      }

.dating-compare__signal-heart {
        position: relative;
        z-index: 2;
        width: 48%;
        filter: drop-shadow(0 12px 18px rgba(22, 11, 29, 0.25));
      }

.dating-compare__signal-heart path:first-child {
        fill: var(--compare-pink);
      }

.dating-compare__signal-heart .compare-keyhole {
        fill: var(--compare-ink);
      }

/* ---------- Slider ---------- */
.dating-compare__divider {
        position: absolute;
        z-index: 8;
        top: 0;
        bottom: 0;
        left: var(--compare-split);
        width: 2px;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 0 1px rgba(22, 11, 29, 0.07);
        pointer-events: none;
      }

.dating-compare__divider-handle {
        position: absolute;
        z-index: 9;
        top: 50%;
        left: var(--compare-split);
        width: clamp(58px, 4.6vw, 70px);
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: 50%;
        background: var(--compare-yellow);
        color: var(--compare-ink);
        box-shadow: 0 16px 36px rgba(22, 11, 29, 0.22);
        cursor: ew-resize;
        touch-action: none;
        user-select: none;
      }

.dating-compare__slider-arrows {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font: 900 clamp(19px, 1.7vw, 25px)/1 var(--body);
        letter-spacing: -0.08em;
      }

.dating-compare__slider-arrows::before {
        content: "<";
      }

.dating-compare__slider-arrows::after {
        content: ">";
      }

.dating-compare__sticky.is-vertical .dating-compare__divider {
        top: var(--compare-split);
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
      }

.dating-compare__sticky.is-vertical .dating-compare__divider-handle {
        top: var(--compare-split);
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: ns-resize;
      }

.dating-compare__sticky.is-vertical .dating-compare__slider-arrows {
        flex-direction: column;
        gap: 0;
        letter-spacing: 0;
        line-height: 0.82;
      }

.dating-compare__sticky.is-vertical
        .dating-compare__slider-arrows::before {
        content: "⌃";
      }

.dating-compare__sticky.is-vertical
        .dating-compare__slider-arrows::after {
        content: "⌄";
      }

.dating-compare__progress {
        position: absolute;
        z-index: 10;
        left: 50%;
        bottom: clamp(18px, 2.2vw, 30px);
        transform: translateX(-50%);
        min-width: min(430px, calc(100% - 40px));
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 16px;
        padding: 10px 12px 10px 16px;
        border: 1px solid rgba(22, 11, 29, 0.14);
        border-radius: 999px;
        background: rgba(255, 248, 242, 0.93);
        color: var(--compare-ink);
        box-shadow: 0 10px 28px rgba(22, 11, 29, 0.1);
      }

.dating-compare__progress-label {
        white-space: nowrap;
      }

.dating-compare__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
      }

.dating-compare__dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(22, 11, 29, 0.2);
        cursor: pointer;
        transition:
          width 0.2s ease,
          background 0.2s ease;
      }

.dating-compare__dot.is-active {
        width: 26px;
        border-radius: 999px;
        background: var(--compare-pink);
      }

.dating-compare__range {
        min-width: 52px;
        text-align: right;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
      }

/* ---------- Outro: same editorial header pattern as Real Vibes ---------- */
.dating-compare__outro {
        position: relative;
        margin: clamp(54px, 5vw, 68px) var(--pad) 0;
        padding: clamp(42px, 6.5vw, 104px) clamp(22px, 5.5vw, 90px)
          clamp(34px, 5vw, 78px);
        overflow: hidden;
        border: 1px solid rgba(22, 11, 29, 0.16);
        border-radius: clamp(28px, 3.6vw, 58px);
        color: #fff;
        background:
          radial-gradient(
            circle at 15% 25%,
            rgba(255, 92, 168, 0.3),
            transparent 24%
          ),
          radial-gradient(
            circle at 82% 68%,
            rgba(242, 221, 33, 0.19),
            transparent 28%
          ),
          linear-gradient(135deg, #3b123f, #8a2387 56%, #b74db3);
      }

.dating-compare__outro-inner {
        display: block;
      }

.dating-compare__outro-eyebrow {
        color: rgba(255, 255, 255, 0.68);
      }

.dating-compare__outro-eyebrow::before {
        background: var(--compare-yellow);
      }

.dating-compare__outro h3 {
        margin: 0;
        max-width: 100%;
        font-family: var(--display);
        font-size: clamp(68px, 8.3vw, 150px);
        font-weight: 400;
        line-height: 0.76;
        letter-spacing: -0.035em;
        text-transform: uppercase;
      }

.dating-compare__outro h3 span {
        display: block;
        max-width: 100%;
        color: var(--compare-yellow);
      }

.dating-compare__outro-copy {
        width: 100%;
        margin-top: clamp(30px, 4vw, 58px);
        padding-top: clamp(20px, 2.4vw, 32px);
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: clamp(24px, 5vw, 80px);
        border-top: 1px solid rgba(255, 255, 255, 0.22);
      }

.dating-compare__outro-copy p {
        margin: 0;
        max-width: 62ch;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(12px, 1.05vw, 17px);
        font-weight: 400;
        line-height: 1.62;
      }

.dating-compare__outro .hero-reveal__button {
        position: relative;
        z-index: 12;
        margin-top: 0;
        flex: 0 0 auto;
        display: inline-flex;
        min-width: clamp(150px, 15vw, 180px);
        min-height: clamp(38px, 4vw, 48px);
        max-height: 48px;
        padding-inline: clamp(10px, 1.4vw, 20px);
        align-items: center;
        justify-content: center;
        background: var(--compare-yellow);
        color: var(--compare-ink);
        text-decoration: none;
        pointer-events: auto !important;
        cursor: pointer;
        touch-action: manipulation;
        isolation: isolate;
      }

.dating-compare__outro-copy {
        position: relative;
        z-index: 6;
      }

@media (max-width: 980px) {
.dating-compare__intro {
          grid-template-columns: 1fr;
          align-items: start;
          gap: clamp(24px, 3.2vw, 34px);
        }

.dating-compare__title,
        .dating-compare__outro h3 {
          font-size: clamp(76px, 10.5vw, 112px);
          line-height: 0.76;
        }

.dating-compare__intro-copy {
          max-width: 66ch;
        }

.dating-compare__outro-copy {
          align-items: flex-start;
          flex-direction: column;
        }
}

@media (orientation: portrait) and (max-width: 980px) {
.dating-compare__scroll {
          height: 500svh;
          min-height: 3000px;
        }

.dating-compare__sticky {
          min-height: 640px;
        }

.dating-compare__side-head {
          width: calc(100% - 40px);
          left: 20px !important;
          right: 20px !important;
          top: 20px;
        }

.dating-compare__world--signal .dating-compare__side-head {
          top: calc(var(--compare-split) + 18px);
        }

.dating-compare__moment {
          width: min(82vw, 390px);
          top: 138px;
        }

.dating-compare__world--traditional .dating-compare__moment {
          left: 20px !important;
          right: auto !important;
        }

.dating-compare__world--signal .dating-compare__moment {
          left: auto !important;
          right: 20px !important;
        }

.dating-compare__world--signal .dating-compare__moment {
          top: calc(var(--compare-split) + 138px);
        }

.dating-compare__moment h3 {
          font-size: clamp(38px, 9.8vw, 58px);
          max-width: 10ch;
        }

.dating-compare__moment-copy {
          max-width: 32ch;
          font-size: 12px;
        }

.dating-compare__art {
          width: 92px;
          height: 72px;
          margin-top: 16px;
        }

.dating-compare__progress {
          bottom: 14px;
          width: calc(100% - 24px);
          min-width: 0;
          grid-template-columns: 1fr;
          justify-items: center;
          gap: 7px;
          padding: 10px 12px;
          border-radius: 24px;
        }

.dating-compare__range {
          text-align: center;
        }
}

@media (max-width: 640px) {
.dating-compare__intro,
        .dating-compare__outro {
          margin-left: 12px;
          margin-right: 12px;
          padding: 48px 22px 42px;
        }

.dating-compare__intro {
          border-radius: 30px 30px 0 0;
        }

.dating-compare__outro {
          border-radius: 30px;
        }

.dating-compare__title {
          font-size: clamp(66px, 20vw, 98px);
          line-height: 0.75;
        }

.dating-compare__outro h3 {
          font-size: clamp(50px, 15vw, 62px);
          line-height: 0.8;
          letter-spacing: -0.03em;
        }

.dating-compare__outro h3 span {
          font-size: 0.92em;
          letter-spacing: -0.045em;
        }

.dating-compare__eyebrow,
        .dating-compare__outro-eyebrow {
          margin-bottom: 18px;
          font-size: 8px;
        }

.dating-compare__intro-copy p,
        .dating-compare__outro-copy p {
          font-size: 13px;
          line-height: 1.58;
        }

.dating-compare__scroll {
          margin-left: 12px;
          margin-right: 12px;
        }

.dating-compare__sticky {
          border-radius: 0 0 30px 30px;
        }

.dating-compare__side-label,
        .dating-compare__moment-kicker {
          font-size: 8px;
        }

.dating-compare__brand-row {
          margin-top: 18px;
          margin-left: 0;
          gap: 7px;
        }

.dating-compare__world--signal .dating-compare__brand-row {
          margin-left: 0;
          margin-right: 0;
        }

.dating-compare__brand-icon {
          width: 31px;
          height: 31px;
        }

.dating-compare__brand-icon--wada {
          width: 35px;
          height: 35px;
        }

.dating-compare__divider-handle {
          width: 58px;
        }
}

@media (prefers-reduced-motion: reduce) {
.dating-compare__moment {
          transition: none;
        }
}


/*
 * ---------- In-story finale scene (homepage-only) ----------
 * These bare, unscoped .finale*/.finale__* selectors style the
 * scroll-story's own "finale" chapter, absolutely positioned and
 * pinned to the .experience/.stage viewport as the user scrolls
 * through it. They target the exact same <footer class="finale">
 * markup that partials/footer.ejs renders, but they must never win
 * against the real, shared, in-document-flow footer styling below
 * global.css's ".site-footer .finale*" (which they don't, since
 * that scoped selector has higher specificity) — this file is where
 * they belong architecturally, since they only ever apply on the
 * homepage's scroll-story.
 */
/* ---------- Finale ---------- */
.finale {
        position: absolute;
        z-index: 8;
        top: calc(var(--menu-h) + var(--ticker-h));
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        opacity: 1;
        transform: translateY(100%);
        pointer-events: auto;
        color: var(--ink);
        background: var(--cream);
        will-change: transform;
      }

.finale__grid {
        position: absolute;
        z-index: 4;
        left: var(--pad);
        right: var(--pad);
        top: clamp(20px, 4vh, 44px);
        bottom: 31%;
        display: grid;
        grid-template-columns: minmax(180px, 0.72fr) minmax(320px, 1.28fr);
        gap: clamp(36px, 9vw, 150px);
        font-family: var(--body);
        font-size: clamp(8px, 0.68vw, 11px);
        line-height: 1.4;
        letter-spacing: 0.055em;
        text-transform: uppercase;
      }

.finale__grid strong {
        display: block;
        margin-bottom: 10px;
        color: var(--purple);
        font-size: 0.82em;
        letter-spacing: 0.14em;
      }

.finale__links,
      .finale__socials {
        display: grid;
        justify-items: start;
        gap: 4px;
      }

.finale__socials {
        margin-top: clamp(18px, 3.5vh, 36px);
      }

.finale a {
        color: inherit;
        text-decoration: none;
        pointer-events: auto;
      }

.finale a:hover,
      .finale a:focus-visible {
        color: var(--purple);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

.finale__story {
        display: grid;
        grid-template-columns: minmax(190px, 1.1fr) minmax(150px, 0.9fr);
        align-content: start;
        gap: clamp(22px, 4vw, 72px);
      }

.finale__story p {
        margin: 0 0 clamp(18px, 3vh, 32px);
        max-width: 58ch;
      }

.finale__contact {
        display: grid;
        align-content: start;
        gap: clamp(18px, 3vh, 34px);
      }

.finale__email {
        display: inline-block;
        width: fit-content;
        border-bottom: 1px solid currentColor;
        text-transform: none;
        letter-spacing: 0.02em;
      }

.finale__copyright {
        color: rgba(22, 11, 29, 0.68);
      }

.finale__badge-row {
        /*position: absolute;*/
        z-index: 5;
        left: 0;
        right: 0;
        bottom: 35%;
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 var(--pad);
      }

.finale__badges {
        display: flex;
        justify-content: center;
        width: 100%;
      }

.finale__badges a {
        display: inline-flex;
        justify-content: center;
        width: min(100%, 175px);
      }

.finale__badges img {
        display: block;
        width: clamp(58px, 9vw, 72px);
        max-width: 100%;
        height: auto;
      }

.finale__tag {
        position: absolute;
        z-index: 4;
        left: 50%;
        bottom: 28%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 1.4vw, 16px);
        font-size: clamp(9px, 0.8vw, 13px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
      }

.finale__tag::before,
      .finale__tag::after {
        content: "";
        width: clamp(34px, 7vw, 130px);
        height: 1px;
        background: currentColor;
      }

.finale__word {
        position: absolute;
        z-index: 1;
        left: 50%;
        bottom: 5%;
        width: 100%;
        transform: translateX(-50%);
        transform-origin: 50% 100%;
        clip-path: none;
        text-align: center;
        font-family: var(--display);
        font-size: clamp(100px, 18vw, 340px);
        line-height: 0.75;
        letter-spacing: -0.018em;
        white-space: nowrap;
        color: var(--purple);
        will-change: auto;
      }

.finale__legal {
        position: absolute;
        z-index: 7;
        right: var(--pad);
        bottom: 7px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(12px, 1.4vw, 22px);
        padding: 5px 0 0;
        border: 0;
        border-top: 1px solid rgba(22, 11, 29, 0.35);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--ink);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;
      }

.finale__legal a {
        position: relative;
        color: var(--ink);
        text-decoration: none;
      }

.finale__legal a:hover,
      .finale__legal a:focus-visible {
        color: var(--purple);
        text-decoration: none;
      }

.finale__legal a + a::before {
        content: "·";
        position: absolute;
        left: calc(clamp(12px, 1.4vw, 22px) / -2);
        transform: translateX(-50%);
        color: rgba(22, 11, 29, 0.55);
      }

@media (max-width: 860px) {
.finale__grid {
          top: clamp(16px, 3.5vh, 34px);
          bottom: 31%;
          grid-template-columns: 0.72fr 1.28fr;
          gap: clamp(22px, 5vw, 56px);
          font-size: clamp(7px, 1vw, 10px);
        }

.finale__story {
          grid-template-columns: 1fr 0.8fr;
          gap: clamp(18px, 3vw, 34px);
        }

.finale__word {
          bottom: 5%;
          font-size: clamp(100px, 18vw, 300px);
        }

.finale__tag {
          left: 50%;
          bottom: 27%;
          transform: translateX(-50%);
        }

.finale__badge-row {
          bottom: 34%;
        }
}

@media (max-width: 640px) {
:root {
          --ticker-h: 0px;
        }

.finale {
          top: var(--menu-h);
          bottom: 0;
        }

.finale__grid {
          left: 12px;
          right: 12px;
          top: 10px;
          bottom: auto;
          height: 62%;
          grid-template-columns: minmax(104px, 0.82fr) minmax(165px, 1.18fr);
          align-content: start;
          gap: 12px;
          font-size: clamp(6.4px, 1.75vw, 8.2px);
          line-height: 1.24;
          letter-spacing: 0.035em;
        }

.finale__grid strong {
          margin-bottom: 4px;
          letter-spacing: 0.1em;
        }

.finale__navigation {
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-content: start;
          gap: 9px;
        }

.finale__links,
        .finale__socials {
          gap: 1px;
        }

.finale__socials {
          margin-top: 0;
        }

.finale__story {
          grid-template-columns: 1fr;
          align-content: start;
          gap: 5px;
        }

.finale__story p {
          margin-bottom: 6px;
          line-height: 1.28;
        }

.finale__contact {
          grid-template-columns: 1fr 1fr;
          align-content: start;
          gap: 5px 8px;
        }

.finale__copyright {
          grid-column: 1 / -1;
        }

.finale__badge-row {
          left: 12px;
          right: 12px;
          bottom: 29%;
          padding: 0;
        }

.finale__badges img {
          width: clamp(54px, 18vw, 64px);
        }

.finale__word {
          bottom: 3.5%;
          font-size: clamp(82px, 22vw, 176px);
        }

.finale__tag {
          left: 50%;
          bottom: 21%;
          transform: translateX(-50%);
          gap: 6px;
          font-size: clamp(6.5px, 1.8vw, 7.5px);
        }

.finale__tag::before,
        .finale__tag::after {
          width: clamp(18px, 7vw, 38px);
        }

.finale__legal {
          right: 8px;
          bottom: 5px;
          gap: 8px;
          padding: 4px 0 0;
          font-size: 6.2px;
          box-shadow: none;
        }
}

@media (max-width: 640px) and (max-height: 700px) {
.finale__grid {
          top: 7px;
          height: 64%;
          font-size: 6.2px;
          line-height: 1.18;
        }

.finale__story p {
          margin-bottom: 4px;
        }

.finale__badge-row {
          bottom: 27.5%;
        }

.finale__tag {
          bottom: 20%;
        }

.finale__word {
          font-size: clamp(78px, 22vw, 160px);
        }
}


/* ==============================================================
       v61 footer base + standalone overrides
       ============================================================== */
.finale__grid strong {
        display: block;
        margin-bottom: 10px;
        color: var(--purple);
        font-size: 0.82em;
        letter-spacing: 0.14em;
      }

.finale__links,
      .finale__socials,
      .finale__safety {
        display: grid;
        justify-items: start;
        gap: 4px;
      }

.finale a {
        color: inherit;
        text-decoration: none;
        pointer-events: auto;
      }

.finale a:hover,
      .finale a:focus-visible {
        color: var(--purple);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

.finale__email {
        display: inline-block;
        width: fit-content;
        border-bottom: 1px solid currentColor;
        text-transform: none;
        letter-spacing: 0.02em;
      }

.finale__tag {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 1.4vw, 16px);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
      }

.finale__tag::before,
      .finale__tag::after {
        content: "";
        width: clamp(34px, 7vw, 130px);
        height: 1px;
        background: currentColor;
      }

.finale__word {
        color: var(--purple);
        font-family: var(--display);
      }

.finale__legal {
        color: var(--ink);
        font-size: clamp(7px, 0.62vw, 10px);
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;
      }

.finale__legal a {
        position: relative;
        color: var(--ink);
        text-decoration: none;
      }

.finale__legal a:hover,
      .finale__legal a:focus-visible {
        color: var(--purple);
        text-decoration: none;
      }