:root {
        --navy: #0a0f12;
        --blue: #2157f6;
        --ink: #000;
        --white: #fff;
        --muted: rgba(0, 0, 0, 0.62);
        --muted-white: rgba(255, 255, 255, 0.72);
        --shell: #f2f4f5;
        --pink: #f6d9e8;
        --mint: #dff7e8;
        --sky: #dbeeff;
        --type-heading: clamp(38px, 3.25vw, 54px);
        --type-heading-mobile: clamp(28px, 8.4vw, 36px);
        --type-heading-line: 0.96;
        --type-body: 16px;
        --type-body-mobile: 16px;
        --type-body-line: 1.4;
        --type-h3: clamp(24px, 2vw, 32px);
        --type-h3-mobile: 26px;
        --type-button: 14px;
        --type-button-mobile: 14px;
        --type-button-line: 1;
        --type-copy-weight: 300;
        --type-tracking: 0;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        color: var(--ink);
        background: var(--white);
        font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-kerning: normal;
        letter-spacing: var(--type-tracking);
        text-rendering: optimizeLegibility;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .site-header {
        --nav-edge-x: 20px;
        --nav-edge-top: 20px;
        position: fixed;
        inset: var(--nav-edge-top) var(--nav-edge-x) auto;
        z-index: 100;
        isolation: isolate;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        min-height: 48px;
        color: var(--white);
        pointer-events: none;
        transition: color 420ms ease;
      }

      .site-header::before {
        content: "";
        position: absolute;
        top: calc(var(--nav-edge-top) * -1);
        right: calc(var(--nav-edge-x) * -1);
        bottom: -14px;
        left: calc(var(--nav-edge-x) * -1);
        z-index: 0;
        background: linear-gradient(180deg, rgba(5, 12, 14, 0.4), rgba(5, 12, 14, 0.2) 62%, rgba(5, 12, 14, 0));
        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        pointer-events: none;
        transition:
          background 420ms ease,
          backdrop-filter 420ms ease;
      }

      .site-header.light {
        color: var(--ink);
      }

      .site-header.light::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58) 62%, rgba(255, 255, 255, 0));
      }

      .brand,
      .nav-actions {
        position: relative;
        z-index: 1;
        pointer-events: auto;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 58px;
      }

      .brand-logo {
        display: block;
        width: clamp(76px, 6.4vw, 96px);
        height: auto;
        transition: opacity 180ms ease;
      }

      .brand-logo-dark {
        display: none;
      }

      .site-header.light .brand-logo-light {
        display: none;
      }

      .site-header.light .brand-logo-dark {
        display: block;
      }

      .nav-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--white);
        background: var(--blue);
        font-size: var(--type-button);
        font-weight: 400;
        line-height: var(--type-button-line);
        letter-spacing: var(--type-tracking);
        transition:
          transform 180ms ease,
          box-shadow 180ms ease;
      }

      .button:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(33, 87, 246, 0.26);
      }

      .download-modal {
        position: fixed;
        inset: 0;
        z-index: 300;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(10, 15, 18, 0.56);
        backdrop-filter: blur(18px);
      }

      .download-modal[hidden] {
        display: none;
      }

      .download-dialog {
        position: relative;
        width: min(460px, 100%);
        padding: clamp(28px, 5vw, 42px);
        border-radius: 8px;
        color: var(--ink);
        background: var(--white);
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
      }

      .download-dialog h2 {
        max-width: 10ch;
        margin: 0;
        font-size: var(--type-heading);
        font-weight: 400;
        line-height: var(--type-heading-line);
        letter-spacing: var(--type-tracking);
        text-transform: lowercase;
      }

      .download-dialog p {
        margin: 22px 0 28px;
        color: var(--muted);
        font-size: var(--type-body);
        font-weight: var(--type-copy-weight);
        line-height: var(--type-body-line);
        letter-spacing: var(--type-tracking);
      }

      .store-buttons {
        display: grid;
        gap: 12px;
      }

      .store-button {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        border: 1px solid var(--ink);
        border-radius: 8px;
        color: var(--ink);
        background: var(--white);
        font-size: var(--type-button);
        font-weight: 400;
        line-height: var(--type-button-line);
        letter-spacing: var(--type-tracking);
        transition:
          background 180ms ease,
          color 180ms ease,
          transform 180ms ease;
      }

      .store-button:hover {
        color: var(--white);
        background: var(--blue);
        border-color: var(--blue);
        transform: translateY(-2px);
      }

      .modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        color: var(--ink);
        background: transparent;
        cursor: pointer;
        font: inherit;
        font-size: 28px;
        line-height: 1;
        padding-bottom: 4px;
      }

      .modal-close:hover {
        background: rgba(0, 0, 0, 0.06);
      }

      .button.outline {
        border-color: currentColor;
        border-radius: 100px;
        color: inherit;
        background: transparent;
      }

      main {
        background: var(--white);
      }

      .chapter {
        --p: 0;
        --ease: calc(var(--p) * var(--p) * (3 - 2 * var(--p)));
        position: relative;
        min-height: 195svh;
        scroll-margin-top: 84px;
        background: var(--white);
      }

      .chapter.dark {
        color: var(--white);
        background: var(--navy);
      }

      #hero {
        background: var(--navy);
      }

      #hero::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        z-index: 3;
        height: 0;
        background: transparent;
        pointer-events: none;
      }

      .pin {
        position: sticky;
        top: 0;
        min-height: 100svh;
        overflow: hidden;
      }

      .canvas {
        position: relative;
        width: min(100%, 1722px);
        min-height: 100svh;
        margin: 0 auto;
      }

      .copy-left,
      .copy-right {
        position: absolute;
        z-index: 20;
        top: 50%;
        width: min(390px, calc(100vw - 48px));
        transform:
          translateY(-50%)
          translateY(calc((var(--ease) - 0.5) * -54px));
      }

      .copy-left {
        left: clamp(24px, 8.2vw, 141px);
      }

      .copy-right {
        right: clamp(24px, 8.2vw, 141px);
      }

      .copy-left h1,
      .copy-left h2,
      .copy-right h2 {
        margin: 0;
        font-size: var(--type-heading);
        font-weight: 400;
        line-height: var(--type-heading-line);
        letter-spacing: var(--type-tracking);
        text-transform: lowercase;
      }

      .copy-left p,
      .copy-right p,
      .copy-right li {
        margin: 0 0 30px;
        font-size: var(--type-body);
        font-weight: var(--type-copy-weight);
        line-height: var(--type-body-line);
        letter-spacing: var(--type-tracking);
      }

      #hero .copy-right p {
        font-size: 16px;
      }

      .copy-right ul {
        margin: 0 0 30px;
        padding-left: 20px;
      }

      .dark .copy-left p,
      .dark .copy-right p,
      .dark .copy-right li {
        color: var(--muted-white);
      }

      .stage {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        width: min(560px, 80vw);
        height: min(740px, 78svh);
        transform: translate(-50%, -50%);
        perspective: 1200px;
      }

      .phone-shot {
        position: absolute;
        inset: 0;
        width: min(393px, 72vw);
        height: min(736px, 76svh);
        margin: auto;
        overflow: hidden;
        border-radius: 20px 20px 34px 34px;
        background: var(--shell);
        box-shadow: 0 36px 100px rgba(0, 0, 0, 0.32);
        transform:
          translate3d(0, calc((0.5 - var(--ease)) * 80px), 0)
          rotate(calc(-3deg + var(--ease) * 6deg))
          scale(calc(0.94 + var(--ease) * 0.08));
        will-change: transform;
      }

      .phone-shot img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }

      .phone-shot.tall img {
        height: 138%;
        object-position: center calc(var(--ease) * 100%);
      }

      #hero .phone-shot {
        transform: none;
      }

      #hero .phone-shot.tall img {
        height: auto;
        min-height: 100%;
        object-fit: contain;
        object-position: center top;
        transform: translateY(calc(var(--ease) * -58%));
        will-change: transform;
      }

      .phone-shot.screen {
        border-radius: 34px;
      }

      .phone-shot.screen img {
        object-fit: cover;
      }

      .phone-shot video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }

      .listing-checker {
        width: min(560px, 72vw);
        height: min(122px, 16vw);
        overflow: visible;
        margin: 0 auto 44px;
      }

      .listing-checker::before {
        content: none;
      }

      .listing-lottie,
      .listing-lottie > svg,
      .listing-lottie > div,
      .listing-lottie > canvas {
        width: 100% !important;
        height: 100% !important;
      }

      #listing {
        min-height: 210svh;
      }

      #listing .pin {
        display: grid;
        place-items: center;
      }

      #listing .canvas {
        display: grid;
        width: min(100%, 1200px);
        place-items: center;
        padding: 120px 24px;
      }

      .listing-content {
        width: min(650px, 100%);
        text-align: center;
      }

      .listing-content h2 {
        max-width: 13ch;
        margin: 0 auto;
        font-size: var(--type-heading);
        font-weight: 400;
        line-height: var(--type-heading-line);
        letter-spacing: var(--type-tracking);
        text-transform: lowercase;
      }

      .listing-content p {
        max-width: 650px;
        margin: 30px auto 34px;
        font-size: var(--type-body);
        font-weight: var(--type-copy-weight);
        line-height: var(--type-body-line);
        letter-spacing: var(--type-tracking);
      }

      .float-chip {
        position: absolute;
        z-index: 8;
        display: grid;
        place-items: center;
        width: 112px;
        height: 112px;
        border-radius: 32px;
        color: var(--white);
        background: var(--blue);
        font-size: 26px;
        font-weight: 700;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
        will-change: transform;
      }

      .chip-one {
        top: 6%;
        right: 2%;
        transform:
          translate(calc(var(--ease) * -96px), calc(var(--ease) * 120px))
          rotate(calc(var(--ease) * 28deg));
      }

      .chip-two {
        bottom: 9%;
        left: 0;
        color: var(--ink);
        background: var(--pink);
        transform:
          translate(calc(var(--ease) * 110px), calc(var(--ease) * -82px))
          rotate(calc(var(--ease) * -24deg));
      }

      .screen-fan {
        position: absolute;
        inset: 0;
      }

      .fan-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(300px, 58vw);
        height: min(650px, 70svh);
        overflow: hidden;
        border-radius: 34px;
        background: var(--shell);
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.2);
        transform: translate(-50%, -50%);
      }

      .fan-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .fan-card:nth-child(1) {
        transform:
          translate(calc(-50% - var(--ease) * 170px), calc(-50% + var(--ease) * 18px))
          rotate(calc(-8deg - var(--ease) * 8deg));
      }

      .fan-card:nth-child(2) {
        transform:
          translate(-50%, calc(-50% - var(--ease) * 32px))
          rotate(calc(var(--ease) * 3deg));
      }

      .fan-card:nth-child(3) {
        transform:
          translate(calc(-50% + var(--ease) * 170px), calc(-50% + var(--ease) * 18px))
          rotate(calc(8deg + var(--ease) * 8deg));
      }

      .action-stack {
        position: absolute;
        inset: 0;
      }

      .action-stack .fan-card:nth-child(1) {
        transform:
          translate(calc(-50% - var(--ease) * 210px), calc(-50% + var(--ease) * 12px))
          rotate(calc(-10deg - var(--ease) * 6deg));
      }

      .action-stack .fan-card:nth-child(2) {
        transform:
          translate(-50%, calc(-50% - var(--ease) * 54px))
          rotate(calc(1deg + var(--ease) * 3deg));
      }

      .action-stack .fan-card:nth-child(3) {
        transform:
          translate(calc(-50% + var(--ease) * 210px), calc(-50% + var(--ease) * 12px))
          rotate(calc(10deg + var(--ease) * 6deg));
      }

      .risk-stack {
        position: absolute;
        inset: 0;
      }

      .risk-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(300px, 58vw);
        height: min(660px, 72svh);
        overflow: hidden;
        border-radius: 28px;
        background: var(--shell);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
        transform: translate(-50%, -50%);
        will-change: transform;
      }

      .risk-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .risk-card.low {
        z-index: 3;
        transform:
          translate(calc(-50% - var(--ease) * 105px), calc(-50% + var(--ease) * 10px))
          rotate(calc(-5deg - var(--ease) * 4deg));
      }

      .risk-card.medium {
        z-index: 2;
        transform:
          translate(-50%, calc(-50% - var(--ease) * 27px))
          rotate(calc(var(--ease) * 1.5deg));
      }

      .risk-card.high {
        z-index: 1;
        transform:
          translate(calc(-50% + var(--ease) * 105px), calc(-50% + var(--ease) * 10px))
          rotate(calc(5deg + var(--ease) * 4deg));
      }

      .lottie-stage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(390px, 72vw);
        height: min(720px, 76svh);
        overflow: visible;
        border-radius: 38px;
        transform:
          translate(-50%, -50%)
          translateX(calc((var(--ease) - 0.5) * 90px))
          rotate(calc(-5deg + var(--ease) * 10deg))
          scale(calc(0.9 + var(--ease) * 0.1));
        filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.2));
      }

      .lottie-stage > svg,
      .lottie-stage > div,
      .lottie-stage > canvas {
        width: 100% !important;
        height: 100% !important;
      }

      .wide-lottie {
        width: min(760px, 90vw);
        height: min(620px, 72svh);
        transform:
          translate(-50%, -50%)
          translateY(calc((0.5 - var(--ease)) * 80px))
          scale(calc(0.82 + var(--ease) * 0.18));
      }

      .buddy-chat-scene {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(560px, 84vw);
        height: min(680px, 72svh);
        transform:
          translate(-50%, -50%)
          translateY(calc((0.5 - var(--ease)) * 60px))
          rotate(calc(-4deg + var(--ease) * 8deg))
          scale(calc(0.9 + var(--ease) * 0.1));
        filter: drop-shadow(0 34px 80px rgba(0, 0, 0, 0.24));
      }

      .buddy-chat-scene::before {
        content: "";
        position: absolute;
        inset: 12% 5% 6%;
        border-radius: 42px;
        background:
          radial-gradient(circle at 18% 12%, rgba(223, 247, 232, 0.34), transparent 28%),
          linear-gradient(160deg, rgba(10, 15, 18, 0.95), rgba(33, 87, 246, 0.84));
        transform:
          translateX(calc((var(--ease) - 0.5) * -30px))
          rotate(calc(2deg - var(--ease) * 4deg));
      }

      .buddy-thread,
      .buddy-prompt,
      .buddy-check {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: var(--white);
        background: rgba(10, 15, 18, 0.72);
        box-shadow: 0 22px 52px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(16px);
      }

      .buddy-thread {
        left: 50%;
        top: 50%;
        display: flex;
        width: min(390px, 76vw);
        min-height: min(560px, 64svh);
        padding: 18px;
        flex-direction: column;
        gap: 13px;
        border-radius: 32px;
        transform:
          translate(-50%, -50%)
          translateX(calc((0.5 - var(--ease)) * 46px));
      }

      .buddy-thread-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 4px 14px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
      }

      .buddy-thread-header strong {
        display: block;
        color: var(--white);
        font-size: 16px;
      }

      .buddy-status {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        padding: 0 11px;
        border-radius: 999px;
        color: var(--ink);
        background: var(--mint);
        font-size: 12px;
      }

      .chat-bubble {
        max-width: 82%;
        padding: 15px 16px;
        border-radius: 20px;
        font-size: clamp(14px, 1.8vw, 16px);
        line-height: 1.24;
        letter-spacing: 0;
        transform: translateY(calc((1 - var(--ease)) * 24px));
      }

      .chat-bubble > span:first-child {
        display: block;
        margin-bottom: 7px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .chat-bubble.buddy {
        color: var(--ink);
        background: var(--mint);
      }

      .chat-bubble.buddy > span:first-child,
      .chat-bubble.seller > span:first-child {
        color: rgba(0, 0, 0, 0.5);
      }

      .chat-bubble [data-edit-key] {
        display: inline;
        margin: 0;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        text-transform: none;
      }

      .chat-bubble.buyer {
        margin-left: auto;
        background: var(--blue);
      }

      .chat-bubble.seller {
        color: var(--ink);
        background: var(--pink);
      }

      .buddy-prompt,
      .buddy-check {
        width: min(210px, 42vw);
        padding: 16px;
        border-radius: 22px;
        font-size: 14px;
        line-height: 1.18;
        letter-spacing: 0;
      }

      .buddy-prompt strong,
      .buddy-check strong {
        display: block;
        margin-bottom: 8px;
        font-size: 22px;
        font-weight: 700;
        line-height: 0.96;
      }

      .buddy-prompt {
        top: 6%;
        right: 0;
        background: rgba(33, 87, 246, 0.88);
        transform:
          translate(calc((0.5 - var(--ease)) * 92px), calc(var(--ease) * 36px))
          rotate(calc(8deg - var(--ease) * 12deg));
      }

      .buddy-check {
        left: 0;
        bottom: 7%;
        color: var(--ink);
        background: rgba(246, 217, 232, 0.96);
        transform:
          translate(calc((var(--ease) - 0.5) * 82px), calc((0.5 - var(--ease)) * 30px))
          rotate(calc(-10deg + var(--ease) * 8deg));
      }

      .buddy-check small {
        display: block;
        margin-top: 16px;
        color: rgba(0, 0, 0, 0.52);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      .breed-buddy-section {
        --show-1: clamp(0, (var(--p) - 0.08) * 8, 1);
        --show-2: clamp(0, (var(--p) - 0.24) * 8, 1);
        --show-3: clamp(0, (var(--p) - 0.4) * 8, 1);
        min-height: 170svh;
        background: var(--white);
      }

      .breed-buddy-section .copy-left {
        width: min(510px, calc(100vw - 48px));
      }

      .breed-buddy-section .copy-left h2 {
        max-width: 12ch;
        font-size: var(--type-heading);
        line-height: var(--type-heading-line);
      }

      .breed-buddy-section .copy-left p {
        max-width: 390px;
        margin: 30px 0;
        font-size: var(--type-body);
        font-weight: var(--type-copy-weight);
        line-height: var(--type-body-line);
        letter-spacing: var(--type-tracking);
      }

      .breed-buddy-section .button {
        min-height: 62px;
        padding: 0 26px;
        border-radius: 8px;
      }

      .breed-buddy-section .stage {
        left: auto;
        right: clamp(24px, 7.5vw, 140px);
        width: min(760px, 50vw);
        height: min(650px, 72svh);
        transform: translateY(-50%);
        perspective: none;
      }

      .breed-chat-board {
        position: absolute;
        inset: 0;
        transform: translateY(calc((0.5 - var(--ease)) * 28px));
      }

      .breed-lottie {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(780px, 100%);
        height: min(670px, 72svh);
        overflow: visible;
        transform:
          translate(-50%, -50%)
          translateY(calc((0.5 - var(--ease)) * 24px));
        filter: none;
      }

      .breed-lottie > svg,
      .breed-lottie > div,
      .breed-lottie > canvas {
        width: 100% !important;
        height: 100% !important;
      }

      .breed-chat-row {
        --reveal: 1;
        position: absolute;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) 48px;
        gap: 20px;
        align-items: start;
        width: min(620px, 100%);
        opacity: var(--reveal);
        transform: translateY(calc((1 - var(--reveal)) * 34px));
        transition:
          opacity 260ms ease,
          transform 260ms ease;
      }

      .breed-chat-row.buddy-first {
        --reveal: var(--show-1);
        top: 4%;
        left: 0;
      }

      .breed-chat-row.user-question {
        --reveal: var(--show-2);
        top: 31%;
        right: 0;
        grid-template-columns: minmax(0, 1fr) 48px;
        width: min(560px, 92%);
      }

      .breed-chat-row.buddy-answer {
        --reveal: var(--show-3);
        bottom: 2%;
        left: 0;
      }

      .breed-avatar {
        display: grid;
        width: 54px;
        height: 54px;
        place-items: center;
        border-radius: 9px;
        background: var(--blue);
        box-shadow: 0 12px 22px rgba(33, 87, 246, 0.2);
      }

      .breed-avatar::before {
        content: "";
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 62%, var(--white) 0 29%, transparent 31%),
          radial-gradient(circle at 18% 20%, var(--white) 0 16%, transparent 18%),
          radial-gradient(circle at 50% 12%, var(--white) 0 17%, transparent 19%),
          radial-gradient(circle at 80% 26%, var(--white) 0 16%, transparent 18%);
        transform: rotate(18deg);
      }

      .user-avatar {
        width: 48px;
        height: 48px;
        border: 3px solid var(--white);
        border-radius: 50%;
        background:
          linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
          url("/assets/figma-page/hero-rectangle.png") center / 210% auto;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      }

      .breed-label {
        display: block;
        margin: -30px 0 10px;
        color: var(--ink);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .breed-bubble {
        position: relative;
        padding: 28px 34px 26px;
        border-radius: 0 34px 34px;
        color: #23262d;
        background: #dfe7fb;
        font-size: clamp(22px, 1.75vw, 30px);
        line-height: 1.22;
        letter-spacing: 0;
      }

      .user-question .breed-bubble {
        border-radius: 34px 0 34px 34px;
        background: #f3f3f3;
      }

      .breed-time {
        position: absolute;
        right: 24px;
        bottom: 16px;
        color: rgba(35, 38, 45, 0.34);
        font-size: 15px;
        letter-spacing: 0;
      }

      .caption-rail {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 32px;
        display: flex;
        gap: 18px;
        width: max-content;
        color: rgba(255, 255, 255, 0.46);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transform: translateX(calc(var(--ease) * -360px));
      }

      .caption-rail span {
        white-space: nowrap;
      }

      .trust-logo-rail {
        position: absolute;
        left: 50%;
        bottom: 8px;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(24px, 3vw, 44px);
        width: min(1120px, calc(100vw - 48px));
        padding: 56px 0 28px;
        color: rgba(255, 255, 255, 0.5);
        transform: translateX(-50%);
      }

      .trust-logo-rail span {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .trust-logo-rail img {
        display: block;
        width: auto;
        max-width: 124px;
        height: clamp(23px, 1.6vw, 31px);
        object-fit: contain;
        opacity: 0.86;
      }

      .trust-logo-rail img.logo-wide {
        max-width: 148px;
      }

      .section-index {
        position: absolute;
        left: clamp(24px, 8.2vw, 143px);
        bottom: 26px;
        z-index: 8;
        color: inherit;
        opacity: 0.5;
        font-size: 12px;
        text-decoration: underline;
      }

      .footer {
        position: relative;
        min-height: 760px;
        padding: 120px clamp(24px, 8.2vw, 143px);
        color: var(--white);
        background: var(--navy);
      }

      .footer::before {
        content: none;
      }

      .footer > * {
        position: relative;
        z-index: 1;
      }

      .footer h2 {
        max-width: 720px;
        margin: 0 0 96px;
        font-size: var(--type-heading);
        font-weight: 400;
        line-height: var(--type-heading-line);
        letter-spacing: var(--type-tracking);
        text-transform: lowercase;
      }

      .footer h2 span {
        white-space: pre-line;
      }

      .metric-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
        max-width: 1440px;
      }

      .metric {
        display: flex;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--white);
      }

      .metric-feature {
        padding: 0;
      }

      .metric-tile {
        display: grid;
        width: 100%;
        aspect-ratio: 1.05;
        margin: 0 0 24px;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
      }

      .metric-image {
        aspect-ratio: 1.05;
        margin: 0 0 24px;
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
        background: #00edbd;
      }

      .metric-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .metric-tile img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .metric-tile video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 38%;
        pointer-events: none;
      }

      .metric-tile.white {
        border-color: transparent;
        background: var(--white);
      }

      .metric-lottie,
      .metric-lottie > svg,
      .metric-lottie > div,
      .metric-lottie > canvas {
        width: 100% !important;
        height: 100% !important;
      }

      .metric-copy {
        display: block;
        align-self: start;
        padding: 0;
      }

      .metric-copy span {
        margin-top: 16px;
      }

      .metric h3 {
        display: block;
        margin: 0;
        font-size: var(--type-h3);
        font-weight: 400;
        color: var(--white);
        line-height: var(--type-heading-line);
        letter-spacing: var(--type-tracking);
        text-transform: lowercase;
      }

      .metric span {
        display: block;
        margin-top: 18px;
        color: var(--muted-white);
        font-size: var(--type-body);
        font-weight: var(--type-copy-weight);
        line-height: var(--type-body-line);
        letter-spacing: var(--type-tracking);
      }

      .metric .button {
        width: fit-content;
        margin-top: 24px;
      }

      .tile-mark {
        display: grid;
        width: 92px;
        height: 92px;
        place-items: center;
        border-radius: 24px;
        color: var(--ink);
        background: #00edbd;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .tile-mark.welfare {
        color: var(--white);
        background: var(--blue);
      }

      .tile-mark.education {
        background: #f6d9e8;
      }

      .tile-mark.download {
        color: var(--white);
        background: var(--blue);
      }

      @media (min-width: 1051px) and (max-width: 1680px) {
        .copy-left,
        .copy-right {
          width: min(330px, 25vw);
        }

        .copy-left {
          left: clamp(48px, 5vw, 96px);
        }

        .copy-right {
          right: clamp(48px, 5vw, 96px);
        }

        .stage {
          width: clamp(400px, 34vw, 500px);
          height: min(660px, 78svh);
        }

        .phone-shot,
        .phone-shot.tall,
        .risk-card {
          width: min(340px, 27vw);
          height: min(640px, 76svh);
        }

        #hero .phone-shot {
          width: min(300px, 24vw);
          height: min(560px, 66svh);
        }

        .breed-buddy-section .stage {
          right: clamp(48px, 5vw, 96px);
          width: min(560px, 43vw);
        }

        .breed-lottie {
          width: min(620px, 100%);
        }

        .trust-logo-rail {
          width: min(1040px, calc(100vw - 64px));
          padding: 24px 0 20px;
          gap: clamp(18px, 2.2vw, 32px);
          bottom: 8px;
        }

      .trust-logo-rail img {
        max-width: 90px;
        height: clamp(17px, 1.2vw, 23px);
      }

      .trust-logo-rail img.logo-wide {
        max-width: 108px;
      }
      }

      @media (max-width: 1050px) {
        .breed-buddy-section {
          --show-1: 1;
          --show-2: 1;
          --show-3: 1;
        }

        .copy-left,
        .copy-right,
        .listing-content,
        .footer h2,
        .metric-copy,
        .download-dialog {
          text-align: center;
        }

        .copy-left h1,
        .copy-left h2,
        .copy-right h2,
        .listing-content h2,
        .download-dialog h2,
        .footer h2,
        .metric h3,
        .metric span {
          margin-left: auto;
          margin-right: auto;
        }

        .copy-right ul {
          padding-left: 0;
          list-style: none;
        }

        .copy-right li {
          margin-left: auto;
          margin-right: auto;
        }

        .metric .button {
          margin-left: auto;
          margin-right: auto;
        }

        .site-header {
          --nav-edge-x: 18px;
          --nav-edge-top: 14px;
          inset: 14px 18px auto;
          grid-template-columns: 1fr auto;
          min-height: 48px;
        }

        .chapter {
          min-height: auto;
        }

        .pin {
          position: relative;
          min-height: auto;
          padding: 108px 24px 82px;
          overflow: hidden;
        }

        #choose .pin {
          padding-bottom: 24px;
        }

        #check .pin {
          padding-top: 24px;
        }


        .canvas {
          display: grid;
          grid-template-areas:
            "title"
            "stage"
            "copy";
          gap: 28px;
          min-height: auto;
          width: 100%;
        }

        .copy-left,
        .copy-right,
        .stage {
          position: relative;
          inset: auto;
          width: min(560px, 100%);
          margin: 0 auto;
          transform: none;
        }

        .copy-left {
          grid-area: title;
        }

        .copy-right {
          grid-area: copy;
        }

        .copy-left h1,
        .copy-left h2,
        .copy-right h2 {
          max-width: 13ch;
        }

        .copy-left p,
        .copy-right p,
        .copy-right li {
          max-width: 46ch;
        }

        .stage {
          grid-area: stage;
          height: clamp(520px, 72svh, 690px);
          max-width: 560px;
        }

        .breed-buddy-section .copy-left {
          width: min(560px, 100%);
        }

        .breed-buddy-section .copy-left h2 {
          max-width: 12ch;
          font-size: var(--type-heading);
        }

        .breed-buddy-section .stage {
          right: auto;
          width: min(720px, 100%);
          height: 620px;
          max-width: 720px;
          transform: none;
        }

        .breed-chat-board {
          transform: none;
        }

        .breed-lottie {
          width: min(720px, 94vw);
          height: min(620px, 68svh);
          transform: translate(-50%, -50%);
        }

        .fan-card:nth-child(n),
        .action-stack .fan-card:nth-child(n),
        .lottie-stage,
        .wide-lottie,
        .buddy-chat-scene {
          transform: translate(-50%, -50%);
        }

        .phone-shot {
          transform: none;
        }

        .phone-shot,
        .fan-card,
        .risk-card,
        .lottie-stage {
          width: min(340px, 72vw);
          height: min(650px, 70svh);
        }

        .listing-checker {
          width: min(560px, 88vw);
          height: min(118px, 18vw);
        }

        .phone-shot.tall {
          width: min(340px, 76vw);
          height: min(650px, 72svh);
        }

        .wide-lottie {
          width: min(680px, 92vw);
          height: min(560px, 58svh);
        }

        .buddy-chat-scene {
          width: min(540px, 94vw);
          height: min(650px, 66svh);
        }

        .buddy-thread {
          min-height: min(540px, 62svh);
          transform: translate(-50%, -50%);
        }

        .buddy-prompt {
          right: 2%;
          transform: translateY(6px) rotate(-3deg);
        }

        .buddy-check {
          left: 2%;
          transform: translateY(-6px) rotate(-4deg);
        }

        .chip-one,
        .chip-two,
        .caption-rail,
        .section-index {
          display: none;
        }

        .trust-logo-rail {
          position: relative;
          left: auto;
          right: auto;
          bottom: auto;
          grid-area: auto;
          width: min(620px, 100%);
          margin: 28px auto 10px;
          padding: 24px 0;
          justify-content: center;
          flex-wrap: nowrap;
          gap: clamp(18px, 4vw, 32px);
          transform: none;
        }

      .trust-logo-rail img {
        max-width: none;
        height: 19px;
      }

      .trust-logo-rail img.logo-wide {
        max-width: none;
      }

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

        #listing {
          min-height: auto;
        }

        #listing .canvas {
          padding: 0;
        }

        #listing .pin {
          padding-top: 108px;
          padding-bottom: 82px;
        }

        #score .stage {
          height: clamp(560px, 76svh, 720px);
        }

        .risk-card {
          width: min(240px, 46vw);
          height: auto;
          aspect-ratio: 393 / 865;
        }
      }

      @media (max-width: 620px) {
        .chapter,
        .footer {
          scroll-margin-top: 0;
        }

        .site-header {
          --nav-edge-x: 14px;
          --nav-edge-top: 12px;
          inset: 12px 14px auto;
        }

        .site-header::before {
          bottom: -10px;
          backdrop-filter: blur(16px) saturate(145%);
          -webkit-backdrop-filter: blur(16px) saturate(145%);
        }

        .brand {
          min-height: 50px;
        }

        .brand-logo {
          width: 68px;
        }

        .button {
          min-height: 42px;
          padding: 0 13px;
          font-size: var(--type-button-mobile);
          line-height: var(--type-button-line);
        }

        .store-button {
          font-size: var(--type-button-mobile);
          line-height: var(--type-button-line);
        }

        .pin {
          padding: 78px 18px 76px;
        }

        .canvas {
          gap: 20px;
        }

        .copy-left h1,
        .copy-left h2,
        .copy-right h2,
        .listing-content h2,
        .download-dialog h2 {
          max-width: 100%;
          font-size: var(--type-heading-mobile);
          line-height: 1.15;
          padding-bottom: 0.12em;
          margin-top: 20px;
          margin-bottom: 24px;
          overflow-wrap: break-word;
          word-break: normal;
          hyphens: none;
        }

        .copy-left p,
        .copy-right p,
        .copy-right li,
        .listing-content p,
        .download-dialog p {
          font-size: var(--type-body-mobile);
          line-height: var(--type-body-line);
          margin-top: 20px;
        }

        .stage {
          width: 100%;
          height: clamp(430px, 60svh, 540px);
        }

        .phone-shot,
        .phone-shot.tall,
        .fan-card,
        .risk-card,
        .lottie-stage {
          width: min(300px, 70vw);
          height: 100%;
        }

        #listing .canvas {
          padding: 0;
        }

        #listing {
          min-height: auto;
        }

        .listing-content {
          width: 100%;
        }

        .trust-logo-rail {
          display: flex;
          flex-wrap: nowrap;
          gap: 8px;
          align-items: center;
          width: 100%;
          padding: 22px 0;
          bottom: 32px;
          overflow: visible;
        }

        .trust-logo-rail span {
          width: 38px;
          font-size: 7px;
          line-height: 1.05;
          text-align: center;
          letter-spacing: 0.08em;
        }

      .trust-logo-rail img {
        width: auto;
        max-width: none;
        height: 14px;
        flex: 0 1 auto;
      }

      .trust-logo-rail img.logo-wide {
        width: auto;
        max-width: none;
      }

        .breed-buddy-section .copy-left p {
          margin: 30px 0;
          font-size: var(--type-body-mobile);
        }

        .breed-buddy-section .copy-left h2 {
          font-size: var(--type-heading-mobile);
          line-height: var(--type-heading-line);
        }

        .breed-buddy-section .button {
          min-height: 50px;
        }

        .breed-buddy-section .pin {
          padding-left: 0;
          padding-right: 0;
        }

        .breed-buddy-section .copy-left {
          padding-left: 24px;
          padding-right: 24px;
        }

        .breed-buddy-section .stage {
          width: 100%;
          max-width: none;
          height: clamp(360px, 92vw, 520px);
        }

        .breed-lottie {
          width: 100%;
          height: 100%;
        }

        .breed-chat-row {
          grid-template-columns: 44px minmax(0, 1fr) 0;
          gap: 12px;
          width: 100%;
        }

        .breed-chat-row.user-question {
          grid-template-columns: minmax(0, 1fr) 40px;
          width: 100%;
        }

        .breed-avatar {
          width: 44px;
          height: 44px;
          border-radius: 8px;
        }

        .breed-avatar::before {
          width: 23px;
          height: 23px;
        }

        .user-avatar {
          width: 40px;
          height: 40px;
        }

        .breed-label {
          margin: -28px 0 8px;
          font-size: 14px;
        }

        .breed-bubble {
          width: 100%;
          padding: 16px 18px 26px;
          border-radius: 0 22px 22px;
          font-size: 16px;
          letter-spacing: 0;
        }

        .user-question .breed-bubble {
          border-radius: 22px 0 22px 22px;
        }

        .breed-time {
          right: 16px;
          bottom: 10px;
          font-size: 12px;
        }



        .phone-shot,
        .fan-card,
        .risk-card,
        .lottie-stage {
          width: min(300px, 82vw);
          height: min(420px, 50svh);
        }

        .phone-shot.screen {
          width: min(292px, 78vw);
          height: auto;
          aspect-ratio: 393 / 736;
        }

        .phone-shot.screen img,
        .phone-shot.screen video {
          height: 100%;
          object-fit: cover;
          background: var(--shell);
        }

        .risk-card {
          width: min(180px, 50vw);
          height: auto;
          aspect-ratio: 393 / 865;
          border-radius: 24px;
        }

        .risk-card img {
          object-fit: contain;
        }

        .lottie-stage:not(.wide-lottie) {
          width: min(292px, 78vw);
          height: auto;
          aspect-ratio: 390 / 720;
        }

        .listing-checker {
          width: 100%;
          height: min(94px, 20vw);
        }

        .buddy-chat-scene {
          width: min(340px, 94vw);
          height: min(500px, 59svh);
        }

        .buddy-chat-scene::before {
          inset: 8% 0 5%;
          border-radius: 30px;
        }

        .buddy-thread {
          width: min(304px, 86vw);
          min-height: min(486px, 58svh);
          padding: 13px;
          gap: 10px;
          border-radius: 24px;
        }

        .buddy-thread-header {
          padding-bottom: 8px;
          font-size: 12px;
        }

        .buddy-thread-header strong {
          font-size: 14px;
        }

        .buddy-status {
          min-height: 24px;
          padding: 0 9px;
          font-size: 11px;
        }

        .chat-bubble {
          max-width: 88%;
          padding: 11px 12px;
          border-radius: 16px;
          font-size: 13px;
        }

        .chat-bubble > span:first-child {
          margin-bottom: 5px;
          font-size: 10px;
        }

        .buddy-prompt,
        .buddy-check {
          width: min(154px, 42vw);
          padding: 12px;
          border-radius: 17px;
          font-size: 11px;
        }

        .buddy-prompt strong,
        .buddy-check strong {
          font-size: 16px;
        }

        .phone-shot.tall {
          width: min(300px, 84vw);
          height: min(500px, 60svh);
        }

        .fan-card {
          border-radius: 28px;
        }

        .wide-lottie {
          width: min(340px, 92vw);
          height: min(410px, 52svh);
        }

        .copy-right ul {
          padding-left: 18px;
        }

        .footer {
          min-height: auto;
          padding: 68px 18px;
        }

        .footer h2 {
          margin-bottom: 44px;
          font-size: var(--type-heading-mobile);
          line-height: var(--type-heading-line);
        }

        .metric {
          min-height: 0;
          padding: 0;
        }

        .metric-image {
          width: 100%;
          margin: 0 0 20px;
        }

        .metric-image,
        .metric-tile {
          aspect-ratio: 1 / 1;
        }

        .cta-panel .metric-tile img {
          object-fit: contain;
        }

        .metric-copy {
          padding: 0;
        }

        .metric h3 {
          font-size: var(--type-h3-mobile);
          line-height: var(--type-heading-line);
        }

        .metric span {
          font-size: var(--type-body-mobile);
        }

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

      @media (max-width: 380px) {
        .phone-shot,
        .fan-card,
        .risk-card,
        .lottie-stage {
          width: min(276px, 82vw);
          height: min(420px, 54svh);
        }

        .phone-shot.screen,
        .lottie-stage:not(.wide-lottie) {
          width: min(270px, 78vw);
          height: auto;
        }

        .risk-card {
          width: min(206px, 60vw);
          height: auto;
        }

        .listing-checker {
          width: min(340px, 92vw);
          height: min(76px, 20vw);
        }

        .buddy-chat-scene {
          width: min(314px, 94vw);
          height: 520px;
        }

        .buddy-thread {
          width: min(286px, 86vw);
        }

        .phone-shot.tall {
          width: min(276px, 84vw);
          height: min(500px, 64svh);
        }

        .stage {
          height: 468px;
        }

        .breed-buddy-section .stage {
          height: 540px;
        }

        .breed-lottie {
          width: min(340px, 94vw);
          height: 320px;
        }

        .breed-bubble {
          font-size: 16px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 1ms !important;
          transition-duration: 1ms !important;
          scroll-behavior: auto !important;
        }
      }