/* OURDREAM Design System 2.0 — Figma variable export. Edit upstream in Figma. */
/*
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

: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 */
  --border-border-brand: var(--brand-pink-new-500); /* @kind color */
  --border-border-tertiary-white: var(--white-alpha-white-alpha-10); /* @kind color */
  --border-close-friends: var(--colors-green-100); /* @kind color */
  --border-primary: var(--grey-color-grey-1000); /* @kind color */
  --border-subtler: var(--colors-gray-30); /* @kind color */
  --brand-pink-new-500: rgb(253,95,194); /* @kind color */
  --brand-pink: rgb(253,95,194); /* @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 */
  --colors-gray-30: rgb(219,223,228); /* @kind color */
  --colors-gray-80: rgb(37,41,46); /* @kind color */
  --colors-gray-gray-3: rgb(219,219,219); /* @kind color */
  --colors-green-100: rgb(0,218,0); /* @kind color */
  --colour-bg-active: var(--gray-700); /* @kind color */
  --colour-bg-caution: var(--caution-700); /* @kind color */
  --colour-bg-disabled: var(--gray-900); /* @kind color */
  --colour-bg-error: var(--error-700); /* @kind color */
  --colour-bg-hover: var(--gray-750); /* @kind color */
  --colour-bg-info: var(--info-50); /* @kind color */
  --colour-bg-inverse: var(--white); /* @kind color */
  --colour-bg-page: var(--gray-950); /* @kind color */
  --colour-bg-subtle: var(--gray-700); /* @kind color */
  --colour-bg-success: var(--success-50); /* @kind color */
  --colour-bg-surface-raised: var(--gray-750); /* @kind color */
  --colour-bg-surface: var(--gray-800); /* @kind color */
  --colour-border-default: var(--gray-800); /* @kind color */
  --colour-border-disabled: var(--gray-850); /* @kind color */
  --colour-border-focus: var(--white); /* @kind color */
  --colour-border-inverse: var(--white); /* @kind color */
  --colour-border-strong: var(--gray-700); /* @kind color */
  --colour-border-subtle: var(--gray-850); /* @kind color */
  --colour-focus-ring: var(--white); /* @kind color */
  --colour-icon-disabled: var(--gray-700); /* @kind color */
  --colour-icon-inverse: var(--gray-950); /* @kind color */
  --colour-icon-primary: var(--white); /* @kind color */
  --colour-icon-secondary: var(--gray-500); /* @kind color */
  --colour-icon-tertiary: var(--gray-400); /* @kind color */
  --colour-interactive-accent-content-disabled: var(--gray-500); /* @kind color */
  --colour-interactive-accent-content: var(--white); /* @kind color */
  --colour-interactive-accent-surface-active: var(--pink-700); /* @kind color */
  --colour-interactive-accent-surface-disabled: var(--gray-700); /* @kind color */
  --colour-interactive-accent-surface-hover: var(--pink-400); /* @kind color */
  --colour-interactive-accent-surface: var(--pink-500); /* @kind color */
  --colour-interactive-primary-content-disabled: var(--gray-500); /* @kind color */
  --colour-interactive-primary-content: var(--gray-950); /* @kind color */
  --colour-interactive-primary-surface-active: var(--gray-200); /* @kind color */
  --colour-interactive-primary-surface-disabled: var(--gray-700); /* @kind color */
  --colour-interactive-primary-surface-hover: var(--gray-50); /* @kind color */
  --colour-interactive-primary-surface: var(--white); /* @kind color */
  --colour-interactive-secondary-content-disabled: var(--gray-700); /* @kind color */
  --colour-interactive-secondary-content: var(--white); /* @kind color */
  --colour-interactive-secondary-surface-active: var(--gray-700); /* @kind color */
  --colour-interactive-secondary-surface-disabled: var(--gray-900); /* @kind color */
  --colour-interactive-secondary-surface-hover: var(--gray-750); /* @kind color */
  --colour-interactive-secondary-surface: var(--gray-800); /* @kind color */
  --colour-overlay-default-white: rgba(255,255,255,0.6); /* @kind color */
  --colour-overlay-default: rgba(0,0,0,0.6); /* @kind color */
  --colour-overlay-strong-white: rgba(255,255,255,0.8); /* @kind color */
  --colour-overlay-strong: rgba(0,0,0,0.8); /* @kind color */
  --colour-overlay-subtle-white: rgba(255,255,255,0.3); /* @kind color */
  --colour-overlay-subtle: rgba(0,0,0,0.3); /* @kind color */
  --colour-text-caution: var(--caution-300); /* @kind color */
  --colour-text-disabled: var(--gray-700); /* @kind color */
  --colour-text-error: var(--error-400); /* @kind color */
  --colour-text-info: var(--info-400); /* @kind color */
  --colour-text-inverse: var(--gray-950); /* @kind color */
  --colour-text-on-inverse: var(--gray-950); /* @kind color */
  --colour-text-placeholder: var(--gray-500); /* @kind color */
  --colour-text-primary: var(--white); /* @kind color */
  --colour-text-secondary: var(--gray-500); /* @kind color */
  --colour-text-success: var(--success-400); /* @kind color */
  --colour-text-tertiary: var(--gray-400); /* @kind color */
  --component-fill: rgb(245,245,245); /* @kind color */
  --component-stroke: var(--accents-indigo); /* @kind color */
  --content-content-brand: var(--brand-pink-new-500); /* @kind color */
  --content-content-disabled-strong: var(--neutral-neutral-400); /* @kind color */
  --content-content-disabled-subtle: var(--neutral-neutral-500); /* @kind color */
  --content-content-interactive-click: var(--black-alpha-black-alpha-25); /* @kind color */
  --content-content-interactive-hover: var(--black-alpha-black-alpha-10); /* @kind color */
  --content-content-interactive: var(--neutral-neutral-0); /* @kind color */
  --content-content-inverse: var(--neutral-neutral-900); /* @kind color */
  --content-content-placeholder: var(--neutral-neutral-400); /* @kind color */
  --content-content-primary: var(--neutral-neutral-0); /* @kind color */
  --content-content-secondary: var(--neutral-neutral-400); /* @kind color */
  --content-content-tertiary: var(--neutral-neutral-500); /* @kind color */
  --content-primary-2: var(--grey-color-grey-1000); /* @kind color */
  --content-primary: var(--grey-color-grey-1000); /* @kind color */
  --depth-025: 1; /* @kind other */
  --depth-0: 0; /* @kind other */
  --depth-100: 4; /* @kind other */
  --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 */
  --fills-primary: rgba(120,120,120,0.2); /* @kind color */
  --gray-100: rgb(237,236,234); /* @kind color */
  --gray-150: rgb(232,231,229); /* @kind color */
  --gray-200: rgb(219,218,216); /* @kind color */
  --gray-400: rgb(114,113,112); /* @kind color */
  --gray-500: rgb(170,170,170); /* @kind color */
  --gray-50: rgb(245,244,242); /* @kind color */
  --gray-700: rgb(53,53,54); /* @kind color */
  --gray-750: rgb(46,46,46); /* @kind color */
  --gray-800: rgb(36,36,36); /* @kind color */
  --gray-850: rgb(29,29,29); /* @kind color */
  --gray-900: rgb(18,18,18); /* @kind color */
  --gray-950: rgb(13,13,13); /* @kind color */
  --grey-color-grey-1000: rgb(25,25,25); /* @kind color */
  --grey-color-white: rgb(255,255,255); /* @kind color */
  --icon-2xl: 32; /* @kind spacing */
  --icon-md: 16; /* @kind spacing */
  --icon-style-size-container-width: 472;
  --icon-style-size-icon: 16;
  --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 */
  --ink: rgb(26,26,26); /* @kind color */
  --labels-quaternary: rgba(60,60,67,0.18); /* @kind color */
  --labels-secondary: rgba(60,60,67,0.6); /* @kind color */
  --miscellaneous-keyboard-accessory-bar-selection: rgb(235,237,240); /* @kind color */
  --miscellaneous-sidebar-fill-selected: rgb(255,255,255); /* @kind color */
  --neutral-neutral-0: rgb(255,255,255); /* @kind color */
  --neutral-neutral-400: rgb(170,170,170); /* @kind color */
  --neutral-neutral-500: rgb(115,115,115); /* @kind color */
  --neutral-neutral-600: rgb(80,79,79); /* @kind color */
  --neutral-neutral-700: rgb(46,46,46); /* @kind color */
  --neutral-neutral-800: rgb(28,28,28); /* @kind color */
  --neutral-neutral-900: rgb(13,13,13); /* @kind color */
  --overlay-overlay-background-subtle: var(--black-alpha-black-alpha-40); /* @kind color */
  --overlay-overlay-background: var(--black-alpha-black-alpha-70); /* @kind color */
  --overlay-overlay-hover-white: var(--white-alpha-white-alpha-10); /* @kind color */
  --pink-100: rgb(252,222,237); /* @kind color */
  --pink-200: rgb(249,196,222); /* @kind color */
  --pink-300: rgb(245,163,204); /* @kind color */
  --pink-400: rgb(241,123,182); /* @kind color */
  --pink-500: rgb(236,72,153); /* @kind color */
  --pink-50: rgb(253,240,247); /* @kind color */
  --pink-600: rgb(203,62,132); /* @kind color */
  --pink-700: rgb(170,52,110); /* @kind color */
  --pink-800: rgb(137,42,89); /* @kind color */
  --pink-900: rgb(106,32,69); /* @kind color */
  --primary: 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;
  --sage: rgb(125,140,110); /* @kind color */
  --screen-size-width: 1536;
  --separators-vibrant: rgb(230,230,230); /* @kind color */
  --space-0-2: 0;
  --space-0-5: 2;
  --space-0: 0;
  --space-10: 40;
  --space-12: 48;
  --space-14: 56;
  --space-15: 60;
  --space-16: 64;
  --space-1: 4;
  --space-2-5: 10;
  --space-200: 8;
  --space-20: 80;
  --space-24: 96;
  --space-2: 8;
  --space-3-5: 14;
  --space-300: 12;
  --space-3: 12;
  --space-4-5: 18;
  --space-4: 16;
  --space-5: 20;
  --space-6: 24;
  --space-7: 28;
  --space-8: 32;
  --space-9: 36;
  --space-px: 1;
  --spacing-0px-2: 0;
  --spacing-0px: 0;
  --spacing-10: 40;
  --spacing-16: 64;
  --spacing-1: 4;
  --spacing-2-5: 10;
  --spacing-2: 8;
  --spacing-3: 12;
  --spacing-48px: 48;
  --spacing-4: 16;
  --spacing-4px: 4;
  --spacing-4x: 24;
  --spacing-5: 20;
  --spacing-6: 24;
  --spacing-8: 32;
  --stroke-border: 1;
  --stroke-default: var(--colors-gray-gray-3); /* @kind color */
  --stroke-hairline: 1;
  --stroke-lg: 3;
  --stroke-md: 2;
  --stroke-none: 0;
  --stroke-sm: 1.5;
  --subcomponent-fill: rgb(170,170,170); /* @kind color */
  --subcomponent-stroke: rgba(0,0,0,0.4); /* @kind color */
  --success-100: rgb(172,252,199); /* @kind color */
  --success-300: rgb(73,229,125); /* @kind color */
  --success-400: rgb(30,212,90); /* @kind color */
  --success-50: rgb(217,255,230); /* @kind color */
  --success-600: rgb(0,150,50); /* @kind color */
  --success-700: rgb(0,69,23); /* @kind color */
  --surface-surface-disabled: var(--neutral-neutral-600); /* @kind color */
  --surface-surface-interactive-click-inverse: var(--white-alpha-white-alpha-20); /* @kind color */
  --surface-surface-interactive-click: var(--black-alpha-black-alpha-25); /* @kind color */
  --surface-surface-interactive-hover-inverse: var(--white-alpha-white-alpha-10); /* @kind color */
  --surface-surface-interactive-hover: var(--black-alpha-black-alpha-10); /* @kind color */
  --surface-surface-inverse: var(--neutral-neutral-0); /* @kind color */
  --surface-surface-primary: var(--neutral-neutral-900); /* @kind color */
  --surface-surface-secondary: var(--neutral-neutral-800); /* @kind color */
  --surface-surface-tertiary: var(--neutral-neutral-700); /* @kind color */
  --white-alpha-white-alpha-10: rgba(255,255,255,0.1); /* @kind color */
  --white-alpha-white-alpha-20: rgba(255,255,255,0.2); /* @kind color */
  --white: rgb(255,255,255); /* @kind color */
}

:root[data-mode="base"] {
  --icon-style-size-container-width: 504;
  --icon-style-size-icon: 20;
}

:root[data-mode="medium"] {
  --icon-style-size-container-width: 536;
  --icon-style-size-icon: 24;
}

:root[data-mode="large"] {
  --icon-style-size-container-width: 600;
  --icon-style-size-icon: 32;
}

:root[data-theme="dark"], .dark {
  --accents-blue: rgb(0,145,255); /* @kind color */
  --accents-blue: rgb(92,184,255); /* @kind color */
  --accents-indigo: rgb(109,124,255); /* @kind color */
  --accents-indigo: rgb(167,170,255); /* @kind color */
  --border-close-friends: var(--colors-green-100); /* @kind color */
  --border-subtler: var(--colors-gray-80); /* @kind color */
  --fills-primary: rgba(120,120,128,0.36); /* @kind color */
  --fills-primary: rgba(120,120,128,0.44); /* @kind color */
  --labels-quaternary: rgba(235,235,245,0.16); /* @kind color */
  --labels-quaternary: rgba(235,235,245,0.4); /* @kind color */
  --labels-secondary: rgba(235,235,245,0.7); /* @kind color */
  --labels-secondary: rgba(235,235,245,0.7); /* @kind color */
  --miscellaneous-keyboard-accessory-bar-selection: rgb(115,115,115); /* @kind color */
  --miscellaneous-keyboard-accessory-bar-selection: rgb(115,115,115); /* @kind color */
  --miscellaneous-keyboard-accessory-bar-selection: rgb(86,84,85); /* @kind color */
  --miscellaneous-keyboard-accessory-bar-selection: rgb(86,84,85); /* @kind color */
  --miscellaneous-sidebar-fill-selected: rgba(142,142,147,0.25); /* @kind color */
  --miscellaneous-sidebar-fill-selected: rgba(142,142,147,0.25); /* @kind color */
  --miscellaneous-sidebar-fill-selected: rgba(144,144,153,0.3); /* @kind color */
  --miscellaneous-sidebar-fill-selected: rgba(144,144,153,0.3); /* @kind color */
  --separators-vibrant: rgb(26,26,26); /* @kind color */
  --separators-vibrant: rgb(26,26,26); /* @kind color */
}

:root[data-theme="light"], .light {
  --accents-blue: rgb(30,110,244); /* @kind color */
  --accents-indigo: rgb(86,74,222); /* @kind color */
  --border-primary: var(--grey-color-white); /* @kind color */
  --content-primary-2: var(--grey-color-white); /* @kind color */
  --content-primary: var(--grey-color-white); /* @kind color */
  --fills-primary: rgba(120,120,120,0.28); /* @kind color */
  --labels-quaternary: rgba(60,60,67,0.55); /* @kind color */
  --labels-secondary: rgba(60,60,67,0.8); /* @kind color */
  --miscellaneous-keyboard-accessory-bar-selection: rgb(235,237,240); /* @kind color */
  --miscellaneous-sidebar-fill-selected: rgb(255,255,255); /* @kind color */
  --separators-vibrant: rgb(230,230,230); /* @kind color */
}

:root[data-mode="desktop-l"] {
  --screen-size-width: 1280;
}

:root[data-mode="tablet"] {
  --screen-size-width: 768;
}

:root[data-mode="mobile"] {
  --screen-size-width: 393;
}

/* ============================================================
   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 — Base + semantic aliases
   Convenience tokens (px lengths, brand gradients) 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 (dark-first) */
  --od-page: var(--gray-950);          /* #0d0d0d */
  --od-surface: var(--gray-800);       /* #242424 */
  --od-surface-raised: var(--gray-750);/* #2e2e2e */
  --od-surface-subtle: var(--gray-700);/* #353536 */
  --od-headline-bar: var(--gray-800);

  /* text */
  --od-text-primary: var(--white);
  --od-text-secondary: var(--gray-500);/* #aaaaaa */
  --od-text-tertiary: var(--gray-400); /* #727170 */

  /* borders */
  --od-border-subtle: rgba(255,255,255,0.1);
  --od-border-strong: var(--gray-700);

  /* brand */
  --od-pink: var(--pink-500);          /* #ec4899 */
  --od-pink-soft: var(--brand-pink);   /* #fd5fc2 */
  --od-gradient-pink: linear-gradient(0deg, #ff1cac 0%, #fd5fc2 50%, #ff79d1 100%); /* @kind color */
  --od-gradient-border: linear-gradient(0deg, #ec4899 0%, #fd4dbc 50%, #fe98db 100%); /* @kind color */

  /* overlays */
  --od-overlay: rgba(0,0,0,0.6);
  --od-overlay-strong: rgba(0,0,0,0.8);

  /* elevation */
  --od-shadow-card: 0 8px 24px rgba(0,0,0,0.4);
  --od-shadow-pop: 0 12px 40px rgba(0,0,0,0.55);

  /* 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-400)}

/*
   OURDREAM — Typography scale
   Display / Titles / Labels use the condensed display face (Oswald ← Owners
   Narrow), always UPPERCASE with tight (1:1) leading. Body + UI use the
   grotesk (Inter ← Neue Haas Grotesk). Values transcribed from the Figma
   "Typography" spec — do not snap to a grid.
   ============================================================ */

:root {
  /* font sizes */
  --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;

  /* weights */
  --weight-regular: 450;
  --weight-medium: 500;
  --weight-bold: 700;
}

/* ---- Display (Oswald, uppercase, 1:1 leading) ---- */
.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}

/* sentence-case title variants (same face, mixed case) */
.od-title-1.is-sentence,.od-title-2.is-sentence,.od-title-3.is-sentence,.od-title-4.is-sentence{text-transform:none}

/* ---- Labels (Oswald, uppercase) ---- */
.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}

/* ---- Body (Inter) ---- */
.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}

/* ---- UI text (Inter medium — buttons, chips, tabs) ---- */
.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}

/* ============================================================
   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%}
@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}
.od-h1{font-size:clamp(40px,6.2vw,76px);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:rgba(255,255,255,.65);text-wrap:pretty}
.od-note{font-size:13px;color:rgba(255,255,255,.42)}

/* ---------- 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:none;background:var(--white);color:var(--gray-950);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-50);color:var(--gray-950)}
.od-btn:active{background:var(--gray-200)}
.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(--gray-700);color:var(--white)}
.od-btn.is-secondary:hover{background:var(--gray-750);color:var(--white)}
.od-btn.is-secondary:active{background:#3f3f3f}
.od-btn.is-tertiary{background:transparent;color:var(--white)}
.od-btn.is-tertiary:hover{background:rgba(255,255,255,.08);color:var(--white)}
.od-btn.is-tertiary:active{background:rgba(255,255,255,.14)}
.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.08)}
.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,.18);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(--white)}
.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(--gray-750);color:var(--white);font-family:var(--font-body);font-weight:500;font-size:12px;line-height:1;letter-spacing:.01em;white-space:nowrap}
.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)}
.od-badge__dot{width:6px;height:6px;border-radius:50%;background:var(--gray-500);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(--gray-750);color:var(--white);font-family:var(--font-body);font-weight:500;font-size:12px;line-height:12px;white-space:nowrap}
.od-chip i{font-size:14px}

/* ---------- 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:rgba(36,36,36,.9);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.od-prompt__text{padding:12px 10px 6px;font-weight:450;font-size:16px;line-height:1.35;letter-spacing:.01em;color:rgba(255,255,255,.75)}
.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(13,13,13,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.08)}
.od-header nav{display:flex;align-items:center;gap:28px}
.od-header nav a{font-size:14px;font-weight:500;color:rgba(255,255,255,.72)}

/* ---------- cards ---------- */
.od-card{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:16px;background:#1a1a1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.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(--gray-750);font-family:var(--font-display);font-weight:700;font-size:15px;color:rgba(255,255,255,.85)}
.od-card__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:21px}
.od-card__desc{font-size:14px;line-height:22px;color:rgba(255,255,255,.58)}
.od-tag{padding:4px 9px;border-radius:var(--od-radius-pill);background:var(--gray-750);font-size:11px;font-weight:500;color:rgba(255,255,255,.7)}
.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:rgba(255,255,255,.75)}
.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(26,26,26,.9);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.od-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--od-radius-pill);background:rgba(46,46,46,.9);font-size:12px;font-weight:500}
.od-pill i{font-size:14px;color:var(--od-pink-soft)}
.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:rgba(255,255,255,.82)}
.od-feat i{color:var(--od-pink-soft);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:#161616 center/cover no-repeat}
.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}
.od-rail__tag{font-size:11px;color:rgba(255,255,255,.62)}

/* ---------- FAQ (native details/summary) ---------- */
.od-faq{padding:22px 24px;border-radius:14px;background:#161616;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.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}
.od-faq>summary::-webkit-details-marker{display:none}
.od-faq>summary::after{content:"\ea13";font-family:'remixicon';font-size:20px;line-height:1;color:rgba(255,255,255,.5);flex-shrink:0}
.od-faq[open]>summary::after{content:"\f1af"}
.od-faq p{margin:12px 0 0;font-size:15px;line-height:24px;color:rgba(255,255,255,.62);max-width:660px}

/* ---------- 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%}
}