:root {
        --accents-blue: rgb(0, 136, 255);
        /* @kind color */
        --accents-indigo: rgb(97, 85, 245);
        /* @kind color */
        --black-100: rgba(12, 12, 13, 0.05);
        /* @kind color */
        --black-200: rgba(12, 12, 13, 0.1);
        /* @kind color */
        --black-alpha-black-alpha-10: rgba(13, 13, 13, 0.1);
        /* @kind color */
        --black-alpha-black-alpha-25: rgba(13, 13, 13, 0.25);
        /* @kind color */
        --black-alpha-black-alpha-40: rgba(13, 13, 13, 0.4);
        /* @kind color */
        --black-alpha-black-alpha-70: rgba(13, 13, 13, 0.7);
        /* @kind color */
        --black: rgb(0, 0, 0);
        /* @kind color */
        --brand-pink-new-500: rgb(230, 45, 155);
        /* @kind color */
        --brand-pink: rgb(230, 45, 155);
        /* @kind color */
        --caution-100: rgb(255, 212, 156);
        /* @kind color */
        --caution-300: rgb(255, 169, 56);
        /* @kind color */
        --caution-500: rgb(212, 120, 0);
        /* @kind color */
        --caution-50: rgb(254, 244, 230);
        /* @kind color */
        --caution-600: rgb(156, 88, 0);
        /* @kind color */
        --caution-700: rgb(102, 58, 0);
        /* @kind color */
        --error-100: rgb(254, 213, 213);
        /* @kind color */
        --error-300: rgb(255, 140, 140);
        /* @kind color */
        --error-400: rgb(255, 99, 99);
        /* @kind color */
        --error-500: rgb(176, 12, 12);
        /* @kind color */
        --error-50: rgb(254, 236, 236);
        /* @kind color */
        --error-700: rgb(115, 3, 3);
        /* @kind color */
        --gray-50: rgb(250, 249, 247);
        /* @kind color */
        --gray-80: rgb(247, 246, 243);
        /* @kind color */
        --gray-100: rgb(242, 240, 237);
        /* @kind color */
        --gray-150: rgb(236, 234, 230);
        /* @kind color */
        --gray-200: rgb(227, 224, 219);
        /* @kind color */
        --gray-300: rgb(211, 208, 201);
        /* @kind color */
        --gray-400: rgb(150, 147, 140);
        /* @kind color */
        --gray-500: rgb(112, 109, 103);
        /* @kind color */
        --gray-600: rgb(84, 82, 78);
        /* @kind color */
        --gray-700: rgb(60, 58, 55);
        /* @kind color */
        --gray-750: rgb(45, 44, 41);
        /* @kind color */
        --gray-800: rgb(32, 31, 29);
        /* @kind color */
        --gray-850: rgb(24, 23, 21);
        /* @kind color */
        --gray-900: rgb(16, 16, 15);
        /* @kind color */
        --gray-950: rgb(10, 10, 9);
        /* @kind color */
        --info-100: rgb(201, 222, 254);
        /* @kind color */
        --info-300: rgb(158, 197, 255);
        /* @kind color */
        --info-400: rgb(79, 149, 255);
        /* @kind color */
        --info-500: rgb(26, 117, 255);
        /* @kind color */
        --info-50: rgb(234, 242, 254);
        /* @kind color */
        --info-700: rgb(0, 84, 209);
        /* @kind color */
        --pink-50: rgb(253, 238, 247);
        /* @kind color */
        --pink-100: rgb(250, 218, 236);
        /* @kind color */
        --pink-200: rgb(246, 188, 222);
        /* @kind color */
        --pink-300: rgb(240, 148, 201);
        /* @kind color */
        --pink-400: rgb(233, 98, 175);
        /* @kind color */
        --pink-500: rgb(214, 42, 145);
        /* @kind color */
        --pink-600: rgb(180, 30, 120);
        /* @kind color */
        --pink-700: rgb(146, 22, 97);
        /* @kind color */
        --pink-800: rgb(112, 16, 74);
        /* @kind color */
        --pink-900: rgb(80, 12, 53);
        /* @kind color */
        --sage: rgb(103, 120, 88);
        /* @kind color */
        --success-50: rgb(217, 255, 230);
        /* @kind color */
        --success-100: rgb(172, 252, 199);
        /* @kind color */
        --success-300: rgb(30, 170, 80);
        /* @kind color */
        --success-400: rgb(0, 140, 60);
        /* @kind color */
        --success-600: rgb(0, 110, 45);
        /* @kind color */
        --success-700: rgb(0, 69, 23);
        /* @kind color */
        --white: rgb(255, 255, 255);
        /* @kind color */

        --radius-0px: 0;
        --radius-100px: 100;
        --radius-200: 8;
        --radius-2xl-2: 20;
        --radius-2xl: 32;
        --radius-2xs: 2;
        --radius-3xl: 24;
        --radius-4xl: 28;
        --radius-circle: 100;
        --radius-full: 99;
        --radius-lg-2: 16;
        --radius-lg: 12;
        --radius-md-2: 12;
        --radius-md: 8;
        --radius-none: 0;
        --radius-pill: 9999;
        --radius-sm: 8;
        --radius-xl-2: 24;
        --radius-xl: 16;
        --radius-xs: 4;

        --space-1: 4;
        --space-2: 8;
        --space-3: 12;
        --space-4: 16;
        --space-5: 20;
        --space-6: 24;
        --space-8: 32;
        --space-10: 40;
        --space-12: 48;
        --space-15: 60;
    }

    /* ============================================================
    OURDREAM — Typefaces
    The licensed faces load from the Adobe Typekit kit above:
    owners-narrow (400/700/800) for display, neue-haas-grotesk-text
    (400/500/700) for body + UI.
    ============================================================ */
    :root {
        --font-display: "owners-narrow", "Arial Narrow", sans-serif;
        --font-body: "neue-haas-grotesk-text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        --font-ui: var(--font-body);
        --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    }

    /*
    OURDREAM — Light-mode semantic tokens
    Warm off-white base (not stark white) so photos and pink accents keep
    contrast without glare. Convenience tokens layered on top of the
    Figma-generated variables, plus global element defaults.
    ============================================================ */

    :root {
        /* radii (px) */
        --od-radius-xs: 4px;
        --od-radius-sm: 8px;
        --od-radius-md: 12px;
        --od-radius-lg: 16px;
        --od-radius-xl: 24px;
        --od-radius-2xl: 32px;
        --od-radius-pill: 9999px;

        /* spacing (px) */
        --od-space-1: 4px;
        --od-space-2: 8px;
        --od-space-3: 12px;
        --od-space-4: 16px;
        --od-space-5: 20px;
        --od-space-6: 24px;
        --od-space-8: 32px;
        --od-space-10: 40px;
        --od-space-12: 48px;
        --od-space-15: 60px;

        /* surfaces (light-first) */
        --od-page: var(--gray-50);
        /* #faf9f7 warm off-white */
        --od-surface: var(--white);
        /* #ffffff card surface */
        --od-surface-raised: var(--gray-100);
        /* #f2f0ed */
        --od-surface-subtle: var(--gray-150);
        /* #ece8e6 */
        --od-headline-bar: var(--gray-100);

        /* text */
        --od-text-primary: var(--gray-950);
        /* near-black */
        --od-text-secondary: var(--gray-600);
        /* mid grey */
        --od-text-tertiary: var(--gray-500);

        /* borders */
        --od-border-subtle: rgba(16, 16, 15, 0.09);
        --od-border-strong: var(--gray-300);

        /* brand */
        --od-pink: var(--pink-500);
        /* #d62a91 */
        --od-pink-soft: var(--brand-pink);
        /* #e62d9b */
        --od-gradient-pink: linear-gradient(0deg, #e6197e 0%, #ea3a9d 50%, #f26fbd 100%);
        /* @kind color */
        --od-gradient-border: linear-gradient(0deg, #d62a91 0%, #e64ba8 50%, #f28fcf 100%);
        /* @kind color */

        /* overlays (kept dark — sit over photography, not page background) */
        --od-overlay: rgba(10, 10, 9, 0.55);
        --od-overlay-strong: rgba(10, 10, 9, 0.78);

        /* elevation — soft, warm shadows instead of pure black */
        --od-shadow-card: 0 8px 24px rgba(30, 26, 20, 0.10);
        --od-shadow-pop: 0 16px 40px rgba(30, 26, 20, 0.14);

        /* motion */
        --od-ease: cubic-bezier(0.2, 0, 0, 1);
        /* @kind other */
        --od-dur: 160ms;
        /* @kind other */
    }

    a {
        color: var(--od-pink);
        text-decoration: none;
        transition: color var(--od-dur) var(--od-ease)
    }

    a:hover {
        color: var(--pink-600)
    }

    /*
    OURDREAM — Typography scale
    ============================================================ */

    :root {
        --text-display-1: 80px;
        --text-display-2: 64px;
        --text-title-1: 48px;
        --text-title-2: 32px;
        --text-title-3: 24px;
        --text-title-4: 18px;
        --text-body-lg: 18px;
        --text-body-md: 16px;
        --text-body-sm: 14px;
        --text-micro: 12px;
        --text-label-lg: 16px;
        --text-label-sm: 14px;
        --text-label-micro: 12px;

        --weight-regular: 450;
        --weight-medium: 500;
        --weight-bold: 700;
    }

    .od-display-1,
    .od-display-2,
    .od-title-1,
    .od-title-2,
    .od-title-3,
    .od-title-4,
    .od-label-lg,
    .od-label-sm,
    .od-label-micro {
        font-family: var(--font-display);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
    }

    .od-display-1 {
        font-size: 80px;
        line-height: 80px;
        letter-spacing: -0.01em
    }

    .od-display-2 {
        font-size: 64px;
        line-height: 64px;
        letter-spacing: -0.01em
    }

    .od-title-1 {
        font-size: 48px;
        line-height: 48px
    }

    .od-title-2 {
        font-size: 32px;
        line-height: 32px
    }

    .od-title-3 {
        font-size: 24px;
        line-height: 24px
    }

    .od-title-4 {
        font-size: 18px;
        line-height: 18px
    }

    .od-title-1.is-sentence,
    .od-title-2.is-sentence,
    .od-title-3.is-sentence,
    .od-title-4.is-sentence {
        text-transform: none
    }

    .od-label-lg {
        font-size: 16px;
        line-height: 16px
    }

    .od-label-sm {
        font-size: 14px;
        line-height: 14px
    }

    .od-label-micro {
        font-size: 12px;
        line-height: 12px
    }

    .od-label-lg.is-italic,
    .od-label-sm.is-italic,
    .od-label-micro.is-italic {
        font-style: italic
    }

    .od-body-lg,
    .od-body-md,
    .od-body-sm,
    .od-micro {
        font-family: var(--font-body);
        font-weight: 450;
        margin: 0
    }

    .od-body-lg {
        font-size: 18px;
        line-height: 26px
    }

    .od-body-md {
        font-size: 16px;
        line-height: 24px
    }

    .od-body-sm {
        font-size: 14px;
        line-height: 18px
    }

    .od-micro {
        font-size: 12px;
        line-height: 16px
    }

    .od-ui-md {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        margin: 0
    }

    .od-ui-sm {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.02em;
        margin: 0
    }
    .od-fusion {
        margin: 2% 6%;
        grid-template-columns:.62fr auto 1fr;
    }
    /* ============================================================
    Remix Icon v4.5.0 (Apache-2.0) — subset to the glyphs this page uses.
    ============================================================ */
    @font-face {
        font-family: "remixicon";
        src: url("assets/remixicon.woff2") format("woff2");
        font-display: swap
    }

    [class^="ri-"],
    [class*=" ri-"] {
        font-family: 'remixicon' !important;
        font-style: normal;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .ri-add-line:before {
        content: "\ea13"
    }

    .ri-arrow-up-line:before {
        content: "\ea76"
    }

    .ri-bank-card-line:before {
        content: "\ea92"
    }

    .ri-brain-line:before {
        content: "\f2f7"
    }

    .ri-chat-3-line:before {
        content: "\eb51"
    }

    .ri-chat-smile-2-line:before {
        content: "\eb6f"
    }

    .ri-checkbox-circle-fill:before {
        content: "\eb80"
    }

    .ri-copper-diamond-fill:before {
        content: "\ebdd"
    }

    .ri-copper-diamond-line:before {
        content: "\ebde"
    }

    .ri-flashlight-line:before {
        content: "\ed3d"
    }

    .ri-fullscreen-line:before {
        content: "\ed9c"
    }

    .ri-image-2-line:before {
        content: "\ee45"
    }

    .ri-image-add-line:before {
        content: "\ee47"
    }

    .ri-mic-line:before {
        content: "\ef50"
    }

    .ri-phone-line:before {
        content: "\efec"
    }

    .ri-play-fill:before {
        content: "\f00a"
    }

    .ri-refresh-line:before {
        content: "\f064"
    }

    .ri-shield-check-line:before {
        content: "\f100"
    }

    .ri-sparkling-2-fill:before {
        content: "\f36a"
    }

    .ri-user-follow-line:before {
        content: "\f261"
    }

    .ri-user-star-line:before {
        content: "\f276"
    }

    .ri-volume-up-line:before {
        content: "\f2a2"
    }

    .ri-subtract-line:before {
        content: "\f1af"
    }

    .ri-seedling-line:before {
        content: "\f0d5"
    }

    .ri-moon-clear-line:before {
        content: "\ef6f"
    }

    .ri-vip-crown-line:before {
        content: "\f28e"
    }

    .ri-play-circle-line:before {
        content: "\f009"
    }

    .ri-arrow-right-line:before {
        content: "\ea6c"
    }

    .ri-time-line:before {
        content: "\f20f"
    }

    .ri-hd-line:before {
        content: "\ee02"
    }

    .ri-money-dollar-circle-line:before {
        content: "\ef65"
    }

    .ri-image-line:before {
        content: "\ee4b"
    }

    .ri-aspect-ratio-line:before {
        content: "\ea80"
    }

    .ri-attachment-2:before {
        content: "\ea84"
    }

    /* ============================================================
    Page chrome
    ============================================================ */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth
    }

    body {
        background: var(--od-page);
        color: var(--od-text-primary);
        font-family: var(--font-body);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden
    }

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

    a:hover {
        color: var(--od-pink-soft)
    }

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

    :focus-visible {
        outline: 2px solid var(--od-pink);
        outline-offset: 2px
    }

    @keyframes od-rail {
        from {
            transform: translateX(0)
        }

        to {
            transform: translateX(-50%)
        }
    }

    @keyframes od-blink {

        0%,
        100% {
            opacity: .25
        }

        50% {
            opacity: 1
        }
    }

    @keyframes od-shimmer {
        to {
            background-position: 200% 0
        }
    }

    @media (prefers-reduced-motion:reduce) {
        html {
            scroll-behavior: auto
        }

        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important
        }
    }

    /* ---------- layout primitives ---------- */
    .od-sec {
        padding: 130px 40px 0
    }

    .od-wrap {
        max-width: 1200px;
        margin: 0 auto
    }

    .od-split {
        display: grid;
        grid-template-columns: var(--cols, 1fr 1fr);
        gap: 64px;
        align-items: center
    }

    .od-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px
    }

    .od-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px
    }

    .od-stack {
        display: flex;
        flex-direction: column
    }

    .od-col-start {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px
    }

    /* ---------- headings (display face, uppercase, tight leading) ---------- */
    .od-h1,
    .od-h2,
    .od-h3 {
        font-family: var(--font-display);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
        color: var(--od-text-primary)
    }

    .od-h1 {
        font-size: clamp(40px, 6.2vw, 56px);
        line-height: .95;
        letter-spacing: -.01em;
        text-wrap: balance
    }

    .od-h2 {
        font-size: clamp(30px, 4.4vw, 52px);
        line-height: .96
    }

    .od-h2.is-sm {
        font-size: clamp(28px, 3.6vw, 44px);
        line-height: 1
    }

    .od-h2.is-lg {
        font-size: clamp(34px, 4.8vw, 56px)
    }

    .od-h2.is-xl {
        font-size: clamp(36px, 5.2vw, 64px);
        line-height: .94
    }

    .od-h3 {
        font-size: 24px;
        line-height: 24px
    }

    .od-lede {
        font-size: 17px;
        line-height: 27px;
        color: var(--od-text-secondary);
        text-wrap: pretty
    }

    .od-note {
        font-size: 13px;
        color: var(--od-text-tertiary)
    }

    /* ---------- DS: Button ---------- */
    .od-btn {
        position: relative;
        display: inline-flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 40px;
        padding: 12px 16px;
        border-radius: var(--od-radius-pill);
        border: 1px solid transparent;
        background: var(--gray-950);
        color: var(--white);
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: .02em;
        text-transform: capitalize;
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--od-dur) var(--od-ease), filter var(--od-dur) var(--od-ease)
    }

    .od-btn:hover {
        background: var(--gray-800);
        color: var(--white)
    }

    .od-btn:active {
        background: var(--gray-700)
    }

    .od-btn i {
        font-size: 16px;
        width: 16px;
        height: 16px
    }

    .od-btn.is-sm {
        height: 36px;
        padding: 10px 16px;
        font-size: 14px;
        line-height: 14px;
        letter-spacing: normal
    }

    .od-btn.is-sm i {
        font-size: 18px;
        width: 18px;
        height: 18px
    }

    .od-btn.is-secondary {
        background: var(--od-surface-raised);
        color: var(--od-text-primary);
        box-shadow: inset 0 0 0 1px var(--od-border-strong)
    }

    .od-btn.is-secondary:hover {
        background: var(--gray-150);
        color: var(--od-text-primary)
    }

    .od-btn.is-secondary:active {
        background: var(--gray-200)
    }

    .od-btn.is-tertiary {
        background: transparent;
        color: var(--od-text-primary)
    }

    .od-btn.is-tertiary:hover {
        background: rgba(16, 16, 15, .06);
        color: var(--od-text-primary)
    }

    .od-btn.is-tertiary:active {
        background: rgba(16, 16, 15, .1)
    }

    .od-btn.is-accent {
        background: var(--od-gradient-pink);
        color: var(--white);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: normal
    }

    .od-btn.is-accent:hover {
        color: var(--white);
        filter: brightness(1.06)
    }

    .od-btn.is-accent i {
        font-size: 18px;
        width: 18px;
        height: 18px
    }

    .od-btn__cost {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 6px;
        border-radius: var(--od-radius-pill);
        background: rgba(255, 255, 255, .24);
        font-size: 11px;
        font-weight: 600
    }

    .od-btn__cost i {
        font-size: 11px;
        width: 11px;
        height: 11px
    }

    /* ---------- DS: IconButton ---------- */
    .od-iconbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--od-radius-pill);
        background: transparent;
        color: var(--od-text-secondary)
    }

    .od-iconbtn i {
        font-size: 18px
    }

    /* ---------- DS: Badge ---------- */
    .od-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 22px;
        padding: 0 8px;
        box-sizing: border-box;
        border-radius: var(--od-radius-pill);
        background: var(--od-surface-raised);
        color: var(--od-text-primary);
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 12px;
        line-height: 1;
        letter-spacing: .01em;
        white-space: nowrap;
        box-shadow: inset 0 0 0 1px var(--od-border-subtle)
    }

    .od-badge.is-sm {
        gap: 4px;
        height: 18px;
        padding: 0 6px;
        font-size: 10px
    }

    .od-badge.is-caps {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase
    }

    .od-badge.is-brand {
        background: var(--od-pink-soft);
        color: var(--white);
        box-shadow: none
    }

    .od-badge__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gray-400);
        flex-shrink: 0
    }

    /* ---------- DS: Chip (static/informational here — no click target) ---------- */
    .od-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 36px;
        padding: 12px;
        box-sizing: border-box;
        border-radius: var(--od-radius-pill);
        background: var(--od-surface-raised);
        color: var(--od-text-primary);
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 12px;
        line-height: 12px;
        white-space: nowrap;
        box-shadow: inset 0 0 0 1px var(--od-border-subtle)
    }

    .od-chip i {
        font-size: 14px;
        color: var(--od-pink)
    }

    /* ---------- DS: PromptBox (static mock; the CTAs inside are the real links) ---------- */
    .od-prompt {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 800px;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 32px;
        background: var(--od-surface);
        box-shadow: inset 0 0 0 1px var(--od-border-subtle), var(--od-shadow-card)
    }

    .od-prompt__text {
        padding: 12px 10px 6px;
        font-weight: 450;
        font-size: 16px;
        line-height: 1.35;
        letter-spacing: .01em;
        color: var(--od-text-secondary)
    }

    .od-prompt__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px
    }

    .od-prompt__tools {
        display: flex;
        align-items: center;
        gap: 8px
    }

    /* ---------- header ---------- */
    .od-header {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 14px 40px;
        background: rgba(250, 249, 247, .82);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--od-border-subtle)
    }

    .od-header nav {
        display: flex;
        align-items: center;
        gap: 28px
    }

    .od-header nav a {
        font-size: 14px;
        font-weight: 500;
        color: var(--od-text-secondary)
    }

    .od-header nav a:hover {
        color: var(--od-text-primary)
    }

    .od-header img {
        filter: invert(1) grayscale(1) brightness(0.15)
    }

    /* ---------- cards ---------- */
    .od-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 22px;
        border-radius: 16px;
        background: var(--od-surface);
        box-shadow: inset 0 0 0 1px var(--od-border-subtle), var(--od-shadow-card)
    }

    .od-card__head {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap
    }

    .od-card__initial {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--od-surface-raised);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 15px;
        color: var(--od-text-primary)
    }

    .od-card__name {
        font-family: var(--font-display);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 21px;
        line-height: 21px;
        color: var(--od-text-primary)
    }

    .od-card__desc {
        font-size: 14px;
        line-height: 22px;
        color: var(--od-text-secondary)
    }

    .od-tag {
        padding: 4px 9px;
        border-radius: var(--od-radius-pill);
        background: var(--od-surface-raised);
        font-size: 11px;
        font-weight: 500;
        color: var(--od-text-secondary)
    }

    .od-tag.is-new {
        padding: 4px 10px;
        background: var(--od-pink);
        font-family: var(--font-display);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #fff
    }

    .od-tag.is-cost {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--od-text-secondary)
    }

    .od-tag.is-cost i {
        font-size: 11px;
        color: var(--od-pink)
    }

    .od-tier-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 22px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(20px);
        box-shadow: inset 0 0 0 1px var(--od-border-subtle), var(--od-shadow-card)
    }

    .od-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: var(--od-radius-pill);
        background: rgba(255, 255, 255, .85);
        font-size: 12px;
        font-weight: 500;
        color: var(--od-text-primary);
        box-shadow: inset 0 0 0 1px var(--od-border-subtle)
    }

    .od-pill i {
        font-size: 14px;
        color: var(--od-pink)
    }

    .od-feat {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none
    }

    .od-feat li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        font-size: 15px;
        line-height: 23px;
        color: var(--od-text-primary)
    }

    .od-feat i {
        color: var(--od-pink);
        font-size: 18px;
        margin-top: 2px
    }

    /* ---------- character rail ---------- */
    .od-rail {
        position: relative;
        overflow: hidden;
        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
    }

    .od-rail__track {
        display: flex;
        gap: 14px;
        width: max-content;
        animation: od-rail 60s linear infinite
    }

    .od-rail__card {
        position: relative;
        width: 230px;
        aspect-ratio: 172/214;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--od-surface-raised) center/cover no-repeat;
        box-shadow: inset 0 0 0 1px var(--od-border-subtle)
    }

    .od-rail__card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 55%)
    }

    .od-rail__meta {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .od-rail__name {
        font-family: var(--font-display);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 18px;
        line-height: 18px;
        color: #fff
    }

    .od-rail__tag {
        font-size: 11px;
        color: rgba(255, 255, 255, .75)
    }

    /* ---------- FAQ (native details/summary) ---------- */
    .od-faq {
        padding: 22px 24px;
        border-radius: 14px;
        background: var(--od-surface);
        box-shadow: inset 0 0 0 1px var(--od-border-subtle), var(--od-shadow-card)
    }

    .od-faq>summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        cursor: pointer;
        list-style: none;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: var(--od-text-primary)
    }

    .od-faq>summary::-webkit-details-marker {
        display: none
    }

    .od-faq>summary::after {
        content: "\ea13";
        font-family: 'remixicon';
        font-size: 20px;
        line-height: 1;
        color: var(--od-text-tertiary);
        flex-shrink: 0
    }

    .od-faq[open]>summary::after {
        content: "\f1af"
    }

    .od-faq p {
        margin: 12px 0 0;
        font-size: 15px;
        line-height: 24px;
        color: var(--od-text-secondary);
        max-width: 660px
    }

    /* ---------- chat mock (dark surface intentionally kept for contrast/realism) ---------- */
    .od-chatcard {
        border-radius: 24px;
        background: var(--gray-950);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--od-shadow-pop);
        overflow: hidden;
        color: #fff
    }

    .od-chatcard__head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        background: var(--gray-900)
    }

    .od-chatcard__foot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: var(--gray-900)
    }

    /* ---------- responsive ---------- */
    @media (max-width:1024px) {
        .od-sec {
            padding: 88px 24px 0
        }

        .od-split {
            grid-template-columns: 1fr !important;
            gap: 36px
        }

        .od-grid-4 {
            grid-template-columns: repeat(2, 1fr)
        }

        .od-header nav {
            display: none
        }
    }

    @media (max-width:720px) {
        .od-sec {
            padding: 64px 20px 0
        }

        .od-header {
            padding: 12px 20px
        }

        .od-grid-3,
        .od-grid-4 {
            grid-template-columns: 1fr
        }

        .od-rail__card {
            width: 168px
        }

        .od-fusion {
            grid-template-columns: 1fr
        }

        .od-prompt__bar,
        .od-prompt__tools {
            flex-wrap: wrap
        }

        .od-prompt__bar>.od-btn.is-accent {
            width: 100%
        }
    }