/* glomi marketing site - the whole stylesheet.
 * Generated by build/build.mjs. Do not edit by hand: rebuild instead.
 */
/* --- design system: tokens/fig-tokens.css --- */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --accent-lavender-strong: var(--color-palette-lavender-lavender-500); /* @kind color */
  --accent-lavender-text: var(--color-palette-lavender-lavender-600); /* @kind color */
  --accent-lavender: var(--color-palette-lavender-lavender-400); /* @kind color */
  --accent-primary: var(--color-palette-primary-primary-500); /* @kind color */
  --action-primary-bg-disabled: var(--color-palette-neutral-neutral-300); /* @kind color */
  --action-primary-bg-hover: var(--color-palette-primary-primary-900); /* @kind color */
  --action-primary-bg-pressed: var(--color-palette-primary-primary-800); /* @kind color */
  --action-primary-bg: var(--color-palette-primary-primary-500); /* @kind color */
  --action-primary-text-disabled: var(--color-palette-neutral-neutral-600); /* @kind color */
  --action-primary-text: var(--color-palette-base-white); /* @kind color */
  --action-secondary-bg-disabled: var(--color-palette-neutral-neutral-100); /* @kind color */
  --action-secondary-bg-hover: var(--color-palette-primary-primary-100); /* @kind color */
  --action-secondary-bg: var(--color-palette-base-white); /* @kind color */
  --action-secondary-border-disabled: var(--color-palette-neutral-neutral-400); /* @kind color */
  --action-secondary-border: var(--color-palette-primary-primary-500); /* @kind color */
  --action-secondary-text-disabled: var(--color-palette-neutral-neutral-600); /* @kind color */
  --action-secondary-text-hover: var(--color-palette-primary-primary-900); /* @kind color */
  --action-secondary-text: var(--color-palette-primary-primary-500); /* @kind color */
  --badge-pad-x: 12;
  --badge-pad-y: 4;
  --bg-primary: rgb(255,255,255); /* @kind color */
  --border-brand-subtle: var(--color-palette-primary-primary-100); /* @kind color */
  --border-brand: var(--color-palette-primary-primary-500); /* @kind color */
  --border-error: var(--color-palette-error-error-800); /* @kind color */
  --border-gold-subtle: var(--color-palette-gold-gold-300); /* @kind color */
  --border-hairline-2: var(--g-200); /* @kind color */
  --border-hairline: var(--color-palette-neutral-neutral-300); /* @kind color */
  --border-on-inverse-subtle: var(--opacity-white-20); /* @kind color */
  --border-on-inverse: var(--color-palette-base-white); /* @kind color */
  --border-strong-2: var(--g-500); /* @kind color */
  --border-strong: var(--color-palette-neutral-neutral-600); /* @kind color */
  --border-subtle: var(--color-palette-neutral-neutral-200); /* @kind color */
  --border-success: var(--color-palette-success-success-800); /* @kind color */
  --border-warning: var(--color-palette-warning-warning-800); /* @kind color */
  --border-width-strong: var(--stroke-2);
  --border-width: var(--stroke-1);
  --breakpoint-min: 1024; /* @kind spacing */
  --color-gold-2: rgb(220,195,141); /* @kind color */
  --color-gold-dark: rgb(176,156,112); /* @kind color */
  --color-gold-darker: rgb(88,78,56); /* @kind color */
  --color-gold-darkest: rgb(66,58,42); /* @kind color */
  --color-gold-light: rgb(230,213,175); /* @kind color */
  --color-gold-lighter: rgb(248,243,232); /* @kind color */
  --color-gold-lightest-2: rgb(251,249,243); /* @kind color */
  --color-gold-lightest: rgb(251,249,243); /* @kind color */
  --color-gold: rgb(220,195,141); /* @kind color */
  --color-grey-92: rgb(239,232,238); /* @kind color */
  --color-lavander-dark: rgb(147,143,174); /* @kind color */
  --color-lavander-darker: rgb(73,71,87); /* @kind color */
  --color-lavander-darkest-2: rgb(55,53,65); /* @kind color */
  --color-lavander-darkest: rgb(55,53,65); /* @kind color */
  --color-lavander-light: rgb(205,201,229); /* @kind color */
  --color-lavander-lighter-2: rgb(240,239,247); /* @kind color */
  --color-lavander-lighter: rgb(240,239,247); /* @kind color */
  --color-lavander-lightest: rgb(247,247,251); /* @kind color */
  --color-lavander: rgb(184,179,218); /* @kind color */
  --color-main-2: rgb(138,47,54); /* @kind color */
  --color-main-dark: rgb(110,37,43); /* @kind color */
  --color-main-darker: rgb(55,18,21); /* @kind color */
  --color-main-darkest: rgb(41,14,16); /* @kind color */
  --color-main-light: rgb(173,109,114); /* @kind color */
  --color-main-lighter: rgb(231,213,214); /* @kind color */
  --color-main-lightest: rgb(243,234,234); /* @kind color */
  --color-main: rgb(138,47,54); /* @kind color */
  --color-neutral-darker: rgb(31,27,28); /* @kind color */
  --color-neutral-darkest-2: rgb(7,2,3); /* @kind color */
  --color-neutral-darkest: rgb(7,2,3); /* @kind color */
  --color-neutral-light: rgb(180,179,179); /* @kind color */
  --color-neutral-lighter: rgb(217,217,217); /* @kind color */
  --color-neutral-lightest: rgb(242,242,242); /* @kind color */
  --color-neutral: rgb(131,128,129); /* @kind color */
  --color-orange-56-2: rgb(224,138,60); /* @kind color */
  --color-palette-base-black: rgb(0,0,0); /* @kind color */
  --color-palette-base-cream: rgb(248,235,229); /* @kind color */
  --color-palette-base-ink: rgb(7,2,3); /* @kind color */
  --color-palette-base-white: rgb(255,255,255); /* @kind color */
  --color-palette-error-error-100: rgb(254,243,242); /* @kind color */
  --color-palette-error-error-200: rgb(254,228,226); /* @kind color */
  --color-palette-error-error-300: rgb(254,205,202); /* @kind color */
  --color-palette-error-error-400: rgb(253,162,155); /* @kind color */
  --color-palette-error-error-500: rgb(249,112,102); /* @kind color */
  --color-palette-error-error-600: rgb(240,68,56); /* @kind color */
  --color-palette-error-error-700: rgb(217,45,32); /* @kind color */
  --color-palette-error-error-800: rgb(201,42,28); /* @kind color */
  --color-palette-error-error-900: rgb(122,39,26); /* @kind color */
  --color-palette-gold-gold-100: rgb(251,249,243); /* @kind color */
  --color-palette-gold-gold-200: rgb(248,243,232); /* @kind color */
  --color-palette-gold-gold-300: rgb(241,231,208); /* @kind color */
  --color-palette-gold-gold-400: rgb(230,213,175); /* @kind color */
  --color-palette-gold-gold-500: rgb(220,195,141); /* @kind color */
  --color-palette-gold-gold-600: rgb(196,173,124); /* @kind color */
  --color-palette-gold-gold-700: rgb(176,156,112); /* @kind color */
  --color-palette-gold-gold-800: rgb(88,78,56); /* @kind color */
  --color-palette-gold-gold-900: rgb(66,58,42); /* @kind color */
  --color-palette-lavender-lavender-100: rgb(247,247,251); /* @kind color */
  --color-palette-lavender-lavender-200: rgb(240,239,247); /* @kind color */
  --color-palette-lavender-lavender-300: rgb(205,201,229); /* @kind color */
  --color-palette-lavender-lavender-400: rgb(184,179,218); /* @kind color */
  --color-palette-lavender-lavender-500: rgb(147,143,174); /* @kind color */
  --color-palette-lavender-lavender-600: rgb(73,71,87); /* @kind color */
  --color-palette-lavender-lavender-700: rgb(55,53,65); /* @kind color */
  --color-palette-lavender-lavender-800: rgb(42,40,50); /* @kind color */
  --color-palette-lavender-lavender-900: rgb(28,27,34); /* @kind color */
  --color-palette-neutral-neutral-100-2: rgb(242,242,242); /* @kind color */
  --color-palette-neutral-neutral-100: rgb(248,248,248); /* @kind color */
  --color-palette-neutral-neutral-200-2: rgb(217,217,217); /* @kind color */
  --color-palette-neutral-neutral-200: rgb(242,242,242); /* @kind color */
  --color-palette-neutral-neutral-300: rgb(217,217,217); /* @kind color */
  --color-palette-neutral-neutral-400: rgb(180,179,179); /* @kind color */
  --color-palette-neutral-neutral-500: rgb(168,166,167); /* @kind color */
  --color-palette-neutral-neutral-600-2: rgb(31,27,28); /* @kind color */
  --color-palette-neutral-neutral-600-3: rgb(31,27,28); /* @kind color */
  --color-palette-neutral-neutral-600: rgb(148,148,148); /* @kind color */
  --color-palette-neutral-neutral-700: rgb(131,128,129); /* @kind color */
  --color-palette-neutral-neutral-800: rgb(118,115,116); /* @kind color */
  --color-palette-neutral-neutral-900: rgb(31,27,28); /* @kind color */
  --color-palette-neutral-white-50-2: rgb(255,255,255); /* @kind color */
  --color-palette-neutral-white-50: rgb(255,255,255); /* @kind color */
  --color-palette-primary-main-main-400-baseline: rgb(138,47,54); /* @kind color */
  --color-palette-primary-primary-100: rgb(243,234,234); /* @kind color */
  --color-palette-primary-primary-200: rgb(220,193,195); /* @kind color */
  --color-palette-primary-primary-300: rgb(197,151,155); /* @kind color */
  --color-palette-primary-primary-400: rgb(150,68,74); /* @kind color */
  --color-palette-primary-primary-500: rgb(139,47,54); /* @kind color */
  --color-palette-primary-primary-600: rgb(126,42,49); /* @kind color */
  --color-palette-primary-primary-700: rgb(114,38,44); /* @kind color */
  --color-palette-primary-primary-800: rgb(101,34,39); /* @kind color */
  --color-palette-primary-primary-900: rgb(92,31,36); /* @kind color */
  --color-palette-success-success-100: rgb(236,253,243); /* @kind color */
  --color-palette-success-success-200: rgb(209,250,223); /* @kind color */
  --color-palette-success-success-300: rgb(166,244,197); /* @kind color */
  --color-palette-success-success-400: rgb(108,233,166); /* @kind color */
  --color-palette-success-success-500: rgb(50,213,131); /* @kind color */
  --color-palette-success-success-600: rgb(18,183,106); /* @kind color */
  --color-palette-success-success-700: rgb(3,152,85); /* @kind color */
  --color-palette-success-success-800: rgb(6,118,71); /* @kind color */
  --color-palette-success-success-900: rgb(4,90,53); /* @kind color */
  --color-palette-warning-warning-100: rgb(255,250,235); /* @kind color */
  --color-palette-warning-warning-200: rgb(254,240,199); /* @kind color */
  --color-palette-warning-warning-300: rgb(254,223,137); /* @kind color */
  --color-palette-warning-warning-400: rgb(254,200,75); /* @kind color */
  --color-palette-warning-warning-500: rgb(253,176,34); /* @kind color */
  --color-palette-warning-warning-600: rgb(247,144,9); /* @kind color */
  --color-palette-warning-warning-700: rgb(220,104,3); /* @kind color */
  --color-palette-warning-warning-800: rgb(181,71,8); /* @kind color */
  --color-palette-warning-warning-900: rgb(147,55,13); /* @kind color */
  --color-rose-62: rgb(230,87,125); /* @kind color */
  --color-scheme-1-background: var(--color-white-2); /* @kind color */
  --color-scheme-1-foreground-2: var(--color-white-2); /* @kind color */
  --color-scheme-1-foreground: var(--color-white); /* @kind color */
  --color-scheme-1-text-2: var(--color-neutral-darkest-2); /* @kind color */
  --color-scheme-1-text: var(--color-neutral-darkest); /* @kind color */
  --color-scheme-3-background: var(--color-secondary-light); /* @kind color */
  --color-scheme-4-background: var(--color-neutral-darkest-2); /* @kind color */
  --color-scheme-4-border: var(--opacity-white-20-2); /* @kind color */
  --color-scheme-4-text: var(--color-white); /* @kind color */
  --color-secondary-dark: rgb(198,188,183); /* @kind color */
  --color-secondary-darker: rgb(99,94,91); /* @kind color */
  --color-secondary-darkest-2: rgb(74,70,68); /* @kind color */
  --color-secondary-darkest: rgb(74,70,68); /* @kind color */
  --color-secondary-light-2: rgb(250,241,236); /* @kind color */
  --color-secondary-light: rgb(250,241,236); /* @kind color */
  --color-secondary-lighter: rgb(253,251,249); /* @kind color */
  --color-secondary-lightest: rgb(254,253,252); /* @kind color */
  --color-secondary: rgb(248,235,229); /* @kind color */
  --color-spring-green-46: rgb(63,174,122); /* @kind color */
  --color-violet-17: rgb(43,36,49); /* @kind color */
  --color-violet-42: rgb(109,77,139); /* @kind color */
  --color-violet-55: rgb(154,106,176); /* @kind color */
  --color-white-2: rgb(255,255,255); /* @kind color */
  --color-white-solid: rgb(255,255,255); /* @kind color */
  --color-white: rgb(255,255,255); /* @kind color */
  --container-container-large: 1280; /* @kind spacing */
  --corner-radius-16: 16;
  --corner-radius-22: 22;
  --feedback-error-bg: var(--color-palette-error-error-100); /* @kind color */
  --feedback-error-border: var(--color-palette-error-error-800); /* @kind color */
  --feedback-error-fg: var(--color-palette-error-error-800); /* @kind color */
  --feedback-success-bg: var(--color-palette-success-success-100); /* @kind color */
  --feedback-success-border: var(--color-palette-success-success-800); /* @kind color */
  --feedback-success-fg: var(--color-palette-success-success-800); /* @kind color */
  --feedback-warning-bg: var(--color-palette-warning-warning-100); /* @kind color */
  --feedback-warning-border: var(--color-palette-warning-warning-800); /* @kind color */
  --feedback-warning-fg: var(--color-palette-warning-warning-800); /* @kind color */
  --focus-offset: var(--space-2);
  --focus-ring-2: var(--p-500); /* @kind color */
  --focus-ring-on-inverse: var(--color-palette-lavender-lavender-400); /* @kind color */
  --focus-ring: var(--color-palette-primary-primary-500); /* @kind color */
  --focus-width: var(--stroke-2);
  --font-family-body-2: "Glomi Body";
  --font-family-body: "Glomi Body";
  --font-family-display-2: "Glomi Display";
  --font-family-display: "Glomi Display";
  --font-family-font-4: "Roboto";
  --font-family: "Glomi";
  --font-size-16: 16;
  --font-size-18: 18;
  --font-style-bold: "Bold"; /* @kind other */
  --font-style-medium: "Medium"; /* @kind other */
  --font-style-regular: "Regular"; /* @kind other */
  --font-style-semibold: "SemiBold"; /* @kind other */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-700: 700;
  --g-100: rgb(255,255,255); /* @kind color */
  --g-150: rgb(242,242,242); /* @kind color */
  --g-200: rgb(217,217,217); /* @kind color */
  --g-400: rgb(168,166,167); /* @kind color */
  --g-500: rgb(148,148,148); /* @kind color */
  --g-600: rgb(131,128,129); /* @kind color */
  --g-700: rgb(118,115,116); /* @kind color */
  --g-750: rgb(81,77,78); /* @kind color */
  --g-800: rgb(31,27,28); /* @kind color */
  --g-900: rgb(7,2,3); /* @kind color */
  --icon-accent: var(--text-lavender); /* @kind color */
  --icon-brand: var(--text-brand); /* @kind color */
  --icon-disabled: var(--text-muted); /* @kind color */
  --icon-gold: var(--color-palette-gold-gold-500); /* @kind color */
  --rating-star: rgb(214,164,58); /* @kind color */
  --icon-inverse: var(--text-on-inverse); /* @kind color */
  --icon-primary: var(--text-primary); /* @kind color */
  --icon-secondary: var(--text-secondary); /* @kind color */
  --indicator-inactive: var(--color-palette-primary-primary-200); /* @kind color */
  --item-spacing-14: 14;
  --item-spacing-18: 18;
  --item-spacing-26: 26;
  --layout-columns: 12; /* @kind other */
  --layout-content-max: 1200; /* @kind spacing */
  --legacy-brand-lavender: rgb(184,179,218); /* @kind color */
  --legacy-brand-maroon: rgb(139,47,54); /* @kind color */
  --legacy-neutral-neutral-750: rgb(81,77,78); /* @kind color */
  --legacy-neutral-neutral-white: rgb(255,255,255); /* @kind color */
  --line-height-20: 20;
  --line-height-24: 24;
  --line-height-27: 27;
  --max-width-max-width-small: 480; /* @kind spacing */
  --opacity-100: 100; /* @kind other */
  --opacity-neutral-darkest-15-2: rgba(7,2,3,0.15); /* @kind color */
  --opacity-neutral-darkest-15-3: rgba(7,2,3,0.15); /* @kind color */
  --opacity-neutral-darkest-15: rgba(7,2,3,0.15); /* @kind color */
  --opacity-neutral-darkest-25: rgba(7,2,3,0.25); /* @kind color */
  --opacity-neutral-darkest-40: rgba(0,0,0,0.4); /* @kind color */
  --opacity-neutral-darkest-60: rgba(7,2,3,0.6); /* @kind color */
  --opacity-neutral-darkest-72: rgba(7,2,3,0.72); /* @kind color */
  --opacity-neutral-light-15: rgba(229,226,221,0.15); /* @kind color */
  --opacity-transparent-2: rgba(255,255,255,0); /* @kind color */
  --opacity-transparent: rgba(255,255,255,0); /* @kind color */
  --opacity-white-20-2: rgba(255,255,255,0.2); /* @kind color */
  --opacity-white-20-3: rgba(255,255,255,0.2); /* @kind color */
  --opacity-white-20: rgba(255,255,255,0.2); /* @kind color */
  --opacity-white-60-2: rgba(255,255,255,0.6); /* @kind color */
  --opacity-white-60-3: rgba(255,255,255,0.6); /* @kind color */
  --opacity-white-60: rgba(255,255,255,0.6); /* @kind color */
  --overlay-black-25: rgba(7,2,3,0.251); /* @kind color */
  --overlay-black-72: rgba(7,2,3,0.7216); /* @kind color */
  --overlay-map: var(--opacity-white-20); /* @kind color */
  --overlay-media: var(--opacity-neutral-light-15); /* @kind color */
  --overlay-readability: var(--opacity-neutral-darkest-72); /* @kind color */
  --overlay-s-0: rgba(220,195,141,0); /* @kind color */
  --overlay-s-28: rgba(220,195,141,0.2784); /* @kind color */
  --p-500: rgb(138,47,54); /* @kind color */
  --page-padding-padding-global: 64;
  --radius-12: 12;
  --radius-14: 14;
  --radius-16: 16;
  --radius-24-2: 24;
  --radius-24: 24;
  --radius-6: 6;
  --radius-8-2: 8;
  --radius-8: 8;
  --radius-999-2: 999;
  --radius-999: 999;
  --radius-control: var(--radius-8-2);
  --radius-pill: var(--radius-999-2);
  --radius-small: 8;
  --s-100: rgb(248,243,232); /* @kind color */
  --section-padding-padding-section-medium: 80;
  --section-padding-padding-section-small: 48;
  --size-120: 120;
  --size-12: 12;
  --size-14: 14;
  --size-16-2: 16;
  --size-16: 16;
  --size-20: 20;
  --size-22: 22;
  --size-24: 24;
  --size-26: 26;
  --size-32: 32;
  --size-36: 36;
  --size-40: 40;
  --size-44: 44;
  --size-48: 48;
  --size-52: 52;
  --size-56: 56;
  --size-64: 64;
  --size-80: 80;
  --size-96: 96;
  --size-control-min: var(--size-44);
  --size-cta-h: var(--size-48);
  --size-field-h: var(--size-56);
  --size-icon-target: var(--size-44);
  --size-icon: var(--size-24);
  --space-112: 112;
  --space-12-2: 12;
  --space-120: 120;
  --space-12: 12;
  --space-16-2: 16;
  --space-16: 16;
  --space-2-2: 2;
  --space-20-2: 20;
  --space-20: 20;
  --space-24-2: 24;
  --space-24: 24;
  --space-2: 2;
  --space-32-2: 32;
  --space-32: 32;
  --space-4-2: 4;
  --space-40-2: 40;
  --space-40: 40;
  --space-48-2: 48;
  --space-48: 48;
  --space-4: 4;
  --space-64-2: 64;
  --space-64: 64;
  --space-8-2: 8;
  --space-80-2: 80;
  --space-80: 80;
  --space-8: 8;
  --space-96: 96;
  --space-card-pad: var(--space-24);
  --space-control-pad-x-2: var(--space-24-2);
  --space-control-pad-x-sm: var(--space-12);
  --space-control-pad-x: var(--space-24);
  --space-gutter: var(--space-24);
  --space-section: var(--space-96);
  --space-stack-lg: var(--space-32);
  --space-stack-sm-2: var(--space-8-2);
  --space-stack-sm: var(--space-8);
  --space-stack: var(--space-16);
  --state-floating-surface: var(--opacity-white-60); /* @kind color */
  --state-floating-surface-hover: rgba(255,255,255,0.82); /* @kind color */
  --state-floating-surface-pressed: rgba(255,255,255,0.92); /* @kind color */
  --state-floating-surface-disabled: rgba(255,255,255,0.34); /* @kind color */
  --state-floating-fg: var(--color-palette-base-ink); /* @kind color */
  --state-floating-fg-disabled: rgba(31,27,28,0.38); /* @kind color */
  --state-on-color-hover: var(--opacity-white-20); /* @kind color */
  --state-overlay-default: var(--opacity-neutral-darkest-25); /* @kind color */
  --state-overlay-disabled: var(--opacity-neutral-darkest-15); /* @kind color */
  --state-overlay-hover: var(--opacity-neutral-darkest-40); /* @kind color */
  --stroke-1: 1;
  --stroke-2: 2;
  --stroke-divider-width: 1;
  --stroke-weight-0-75: 0.75;
  --stroke-weight-0-77: 0.772;
  --stroke-weight-1-54: 1.545;
  --stroke-weight-1-5: 1.5;
  --stroke-weight-1: 1;
  --surface-accent-wash: var(--color-palette-lavender-lavender-100); /* @kind color */
  --surface-brand-strong: var(--color-palette-primary-primary-900); /* @kind color */
  --surface-brand-wash: var(--color-palette-primary-primary-100); /* @kind color */
  --surface-brand: var(--color-palette-primary-primary-500); /* @kind color */
  --surface-canvas: var(--color-palette-neutral-neutral-100); /* @kind color */
  --surface-card: var(--color-palette-base-white); /* @kind color */
  --surface-cream: var(--color-palette-base-cream); /* @kind color */
  --surface-featured: var(--color-palette-gold-gold-300); /* @kind color */
  --surface-gold-wash: var(--color-palette-gold-gold-200); /* @kind color */
  --surface-inverse: var(--color-palette-base-ink); /* @kind color */
  --surface-page: var(--g-100); /* @kind color */
  --surface-sunken-2: var(--g-150); /* @kind color */
  --surface-sunken: var(--color-palette-neutral-neutral-200); /* @kind color */
  --state-hover-surface: var(--color-palette-neutral-neutral-200); /* @kind color */
  --state-pressed-surface: var(--color-palette-neutral-neutral-300); /* @kind color */
  --state-brand-wash: var(--color-palette-primary-primary-100); /* @kind color */
  --surface-quiet: var(--color-palette-neutral-neutral-100); /* @kind color */
  --surface-transparent: var(--opacity-transparent); /* @kind color */
  --text-brand: var(--color-palette-primary-primary-500); /* @kind color */
  --text-error: var(--color-palette-error-error-800); /* @kind color */
  --text-gold: var(--color-palette-gold-gold-800); /* @kind color */
  --text-lavender: var(--color-palette-lavender-lavender-600); /* @kind color */
  --text-muted-2: var(--g-400); /* @kind color */
  --text-muted: var(--color-palette-neutral-neutral-700); /* @kind color */
  --text-on-accent: var(--color-palette-neutral-neutral-900); /* @kind color */
  --text-on-brand: var(--color-palette-base-white); /* @kind color */
  --text-on-inverse-muted: var(--opacity-white-60); /* @kind color */
  --text-on-inverse-subtle: var(--color-palette-neutral-neutral-300); /* @kind color */
  --text-on-inverse: var(--color-palette-base-white); /* @kind color */
  --text-on-media-gold: var(--color-palette-gold-gold-300); /* @kind color */
  --text-primary-2: var(--g-800); /* @kind color */
  --text-primary: var(--color-palette-neutral-neutral-900); /* @kind color */
  --text-secondary-2: var(--g-700); /* @kind color */
  --text-secondary: var(--color-palette-neutral-neutral-800); /* @kind color */
  --text-sizes-heading-1: 84;
  --text-sizes-text-large: 26;
  --text-sizes-text-medium-2: 20;
  --text-sizes-text-medium: 20;
  --text-sizes-text-regular-2: 18;
  --text-sizes-text-regular: 18;
  --text-sizes-text-small-2: 16;
  --text-sizes-text-small: 16;
  --text-sizes-text-tiny-2: 12;
  --text-sizes-text-tiny: 12;
  --text-success: var(--color-palette-success-success-800); /* @kind color */
  --text-warning: var(--color-palette-warning-warning-800); /* @kind color */
  --type-body-lg-family: var(--font-family-body);
  --type-body-lg-line: var(--type-line-28);
  --type-body-lg-size: var(--type-size-20);
  --type-body-lg-style: var(--font-style-regular);
  --type-body-md-family: var(--font-family-body);
  --type-body-md-line: var(--type-line-21);
  --type-body-md-size: var(--type-size-16);
  --type-body-md-style: var(--font-style-regular);
  --type-body-size: var(--size-16-2);
  --type-body-sm-family: var(--font-family-body);
  --type-body-sm-line: var(--type-line-20);
  --type-body-sm-size-2: var(--size-14);
  --type-body-sm-size: var(--type-size-14);
  --type-body-sm-style: var(--font-style-regular);
  --type-caption-family: var(--font-family-body);
  --type-caption-line: var(--type-line-16);
  --type-caption-size: var(--type-size-12);
  --type-caption-style: var(--font-style-regular);
  --type-display-hero-family: var(--font-family-display);
  --type-display-hero-line: var(--type-line-72);
  --type-display-hero-size: var(--type-size-60);
  --type-display-hero-style: var(--font-style-semibold);
  --type-display-section-family: var(--font-family-display);
  --type-display-section-line: var(--type-line-48);
  --type-display-section-size: var(--type-size-40);
  --type-display-section-style: var(--font-style-semibold);
  --type-heading-h1-family: var(--font-family-body);
  --type-heading-h1-line: var(--type-line-48);
  --type-heading-h1-size: var(--type-size-40);
  --type-heading-h1-style: var(--font-style-semibold);
  --type-heading-h2-family: var(--font-family-body);
  --type-heading-h2-line: var(--type-line-34);
  --type-heading-h2-size: var(--type-size-26);
  --type-heading-h2-style: var(--font-style-semibold);
  --type-heading-h3-family: var(--font-family-body);
  --type-heading-h3-line: var(--type-line-28);
  --type-heading-h3-size: var(--type-size-20);
  --type-heading-h3-style: var(--font-style-semibold);
  --type-heading-h4-family: var(--font-family-body);
  --type-heading-h4-line: var(--type-line-25);
  --type-heading-h4-size: var(--type-size-18);
  --type-heading-h4-style: var(--font-style-semibold);
  --type-label-button-family: var(--font-family-body);
  --type-label-button-line: var(--type-line-21);
  --type-label-button-size: var(--type-size-16);
  --type-label-button-style: var(--font-style-semibold);
  --type-label-control-family: var(--font-family-body);
  --type-label-control-line: var(--type-line-18);
  --type-label-control-size: var(--type-size-14);
  --type-label-control-style: var(--font-style-medium);
  --type-line-13: 13;
  --type-line-14: 14;
  --type-line-16: 16;
  --type-line-17: 17;
  --type-line-18: 18;
  --type-line-20: 20;
  --type-line-21: 21;
  --type-line-25: 25;
  --type-line-28: 28;
  --type-line-31: 31;
  --type-line-34: 34;
  --type-line-40: 40;
  --type-line-43: 43;
  --type-line-48: 48;
  --type-line-53: 53;
  --type-line-72: 72;
  --type-micro-family: var(--font-family-body);
  --type-micro-line: var(--type-line-13);
  --type-micro-size: var(--type-size-10);
  --type-micro-style: var(--font-style-medium);
  --type-section-heading-size-2: var(--size-36);
  --type-section-heading-size: var(--type-size-36);
  --type-size-10: 10;
  --type-size-11: 11;
  --type-size-12: 12;
  --type-size-13: 13;
  --type-size-14: 14;
  --type-size-16: 16;
  --type-size-18: 18;
  --type-size-20: 20;
  --type-size-22: 22;
  --type-size-24: 24;
  --type-size-26: 26;
  --type-size-32: 32;
  --type-size-36: 36;
  --type-size-40: 40;
  --type-size-44: 44;
  --type-size-60: 60;
}

:root[data-mode="mobile"] {
  --accent-lavender-strong: var(--color-palette-lavender-lavender-500); /* @kind color */
  --accent-lavender-text: var(--color-palette-lavender-lavender-600); /* @kind color */
  --accent-lavender: var(--color-palette-lavender-lavender-400); /* @kind color */
  --accent-primary: var(--color-palette-primary-primary-500); /* @kind color */
  --action-primary-bg-disabled: var(--color-palette-neutral-neutral-300); /* @kind color */
  --action-primary-bg-hover: var(--color-palette-primary-primary-900); /* @kind color */
  --action-primary-bg-pressed: var(--color-palette-primary-primary-800); /* @kind color */
  --action-primary-bg: var(--color-palette-primary-primary-500); /* @kind color */
  --action-primary-text-disabled: var(--color-palette-neutral-neutral-600); /* @kind color */
  --action-primary-text: var(--color-palette-base-white); /* @kind color */
  --action-secondary-bg-disabled: var(--color-palette-neutral-neutral-100); /* @kind color */
  --action-secondary-bg-hover: var(--color-palette-primary-primary-100); /* @kind color */
  --action-secondary-bg: var(--color-palette-base-white); /* @kind color */
  --action-secondary-border-disabled: var(--color-palette-neutral-neutral-400); /* @kind color */
  --action-secondary-border: var(--color-palette-primary-primary-500); /* @kind color */
  --action-secondary-text-disabled: var(--color-palette-neutral-neutral-600); /* @kind color */
  --action-secondary-text-hover: var(--color-palette-primary-primary-900); /* @kind color */
  --action-secondary-text: var(--color-palette-primary-primary-500); /* @kind color */
  --border-brand-subtle: var(--color-palette-primary-primary-100); /* @kind color */
  --border-brand: var(--color-palette-primary-primary-500); /* @kind color */
  --border-error: var(--color-palette-error-error-800); /* @kind color */
  --border-gold-subtle: var(--color-palette-gold-gold-300); /* @kind color */
  --border-hairline-2: var(--g-200); /* @kind color */
  --border-hairline: var(--color-palette-neutral-neutral-300); /* @kind color */
  --border-on-inverse-subtle: var(--opacity-white-20); /* @kind color */
  --border-on-inverse: var(--color-palette-base-white); /* @kind color */
  --border-strong-2: var(--g-500); /* @kind color */
  --border-strong: var(--color-palette-neutral-neutral-600); /* @kind color */
  --border-subtle: var(--color-palette-neutral-neutral-200); /* @kind color */
  --border-success: var(--color-palette-success-success-800); /* @kind color */
  --border-warning: var(--color-palette-warning-warning-800); /* @kind color */
  --border-width-strong: var(--stroke-2);
  --border-width: var(--stroke-1);
  --breakpoint-min: 0; /* @kind spacing */
  --container-container-large: 1280; /* @kind spacing */
  --feedback-error-bg: var(--color-palette-error-error-100); /* @kind color */
  --feedback-error-border: var(--color-palette-error-error-800); /* @kind color */
  --feedback-error-fg: var(--color-palette-error-error-800); /* @kind color */
  --feedback-success-bg: var(--color-palette-success-success-100); /* @kind color */
  --feedback-success-border: var(--color-palette-success-success-800); /* @kind color */
  --feedback-success-fg: var(--color-palette-success-success-800); /* @kind color */
  --feedback-warning-bg: var(--color-palette-warning-warning-100); /* @kind color */
  --feedback-warning-border: var(--color-palette-warning-warning-800); /* @kind color */
  --feedback-warning-fg: var(--color-palette-warning-warning-800); /* @kind color */
  --focus-offset: var(--space-2);
  --focus-ring-2: var(--p-500); /* @kind color */
  --focus-ring-on-inverse: var(--color-palette-lavender-lavender-400); /* @kind color */
  --focus-ring: var(--color-palette-primary-primary-500); /* @kind color */
  --focus-width: var(--stroke-2);
  --icon-gold: var(--color-palette-gold-gold-500); /* @kind color */
  --rating-star: rgb(214,164,58); /* @kind color */
  --indicator-inactive: var(--color-palette-primary-primary-200); /* @kind color */
  --layout-columns: 4; /* @kind other */
  --layout-content-max: 343; /* @kind spacing */
  --max-width-max-width-small: 480; /* @kind spacing */
  --overlay-map: var(--opacity-white-20); /* @kind color */
  --overlay-media: var(--opacity-neutral-light-15); /* @kind color */
  --overlay-readability: var(--opacity-neutral-darkest-72); /* @kind color */
  --page-padding-padding-global: 20;
  --radius-control: var(--radius-8-2);
  --radius-pill: var(--radius-999-2);
  --section-padding-padding-section-medium: 48;
  --section-padding-padding-section-small: 32;
  --size-control-min: var(--size-44);
  --size-cta-h: var(--size-48);
  --size-field-h: var(--size-56);
  --size-icon-target: var(--size-44);
  --size-icon: var(--size-24);
  --space-card-pad: var(--space-16);
  --space-control-pad-x-2: var(--space-20-2);
  --space-control-pad-x-sm: var(--space-12);
  --space-control-pad-x: var(--space-20);
  --space-gutter: var(--space-16);
  --space-section: var(--space-64);
  --space-stack-lg: var(--space-24);
  --space-stack-sm-2: var(--space-8-2);
  --space-stack-sm: var(--space-8);
  --space-stack: var(--space-16);
  --state-floating-surface: var(--opacity-white-60); /* @kind color */
  --state-floating-surface-hover: rgba(255,255,255,0.82); /* @kind color */
  --state-floating-surface-pressed: rgba(255,255,255,0.92); /* @kind color */
  --state-floating-surface-disabled: rgba(255,255,255,0.34); /* @kind color */
  --state-floating-fg: var(--color-palette-base-ink); /* @kind color */
  --state-floating-fg-disabled: rgba(31,27,28,0.38); /* @kind color */
  --state-on-color-hover: var(--opacity-white-20); /* @kind color */
  --state-overlay-default: var(--opacity-neutral-darkest-25); /* @kind color */
  --state-overlay-disabled: var(--opacity-neutral-darkest-15); /* @kind color */
  --state-overlay-hover: var(--opacity-neutral-darkest-40); /* @kind color */
  --surface-accent-wash: var(--color-palette-lavender-lavender-100); /* @kind color */
  --surface-brand-strong: var(--color-palette-primary-primary-900); /* @kind color */
  --surface-brand-wash: var(--color-palette-primary-primary-100); /* @kind color */
  --surface-brand: var(--color-palette-primary-primary-500); /* @kind color */
  --surface-canvas: var(--color-palette-neutral-neutral-100); /* @kind color */
  --surface-card: var(--color-palette-base-white); /* @kind color */
  --surface-cream: var(--color-palette-base-cream); /* @kind color */
  --surface-featured: var(--color-palette-gold-gold-300); /* @kind color */
  --surface-gold-wash: var(--color-palette-gold-gold-200); /* @kind color */
  --surface-inverse: var(--color-palette-base-ink); /* @kind color */
  --surface-page: var(--g-100); /* @kind color */
  --surface-sunken-2: var(--g-150); /* @kind color */
  --surface-sunken: var(--color-palette-neutral-neutral-200); /* @kind color */
  --state-hover-surface: var(--color-palette-neutral-neutral-200); /* @kind color */
  --state-pressed-surface: var(--color-palette-neutral-neutral-300); /* @kind color */
  --state-brand-wash: var(--color-palette-primary-primary-100); /* @kind color */
  --surface-quiet: var(--color-palette-neutral-neutral-100); /* @kind color */
  --surface-transparent: var(--opacity-transparent); /* @kind color */
  --text-brand: var(--color-palette-primary-primary-500); /* @kind color */
  --text-error: var(--color-palette-error-error-800); /* @kind color */
  --text-gold: var(--color-palette-gold-gold-800); /* @kind color */
  --text-lavender: var(--color-palette-lavender-lavender-600); /* @kind color */
  --text-muted-2: var(--g-400); /* @kind color */
  --text-muted: var(--color-palette-neutral-neutral-700); /* @kind color */
  --text-on-accent: var(--color-palette-neutral-neutral-900); /* @kind color */
  --text-on-brand: var(--color-palette-base-white); /* @kind color */
  --text-on-inverse-muted: var(--opacity-white-60); /* @kind color */
  --text-on-inverse-subtle: var(--color-palette-neutral-neutral-300); /* @kind color */
  --text-on-inverse: var(--color-palette-base-white); /* @kind color */
  --text-on-media-gold: var(--color-palette-gold-gold-300); /* @kind color */
  --text-primary-2: var(--g-800); /* @kind color */
  --text-primary: var(--color-palette-neutral-neutral-900); /* @kind color */
  --text-secondary-2: var(--g-700); /* @kind color */
  --text-secondary: var(--color-palette-neutral-neutral-800); /* @kind color */
  --text-sizes-heading-1: 48;
  --text-sizes-text-large: 18;
  --text-sizes-text-medium-2: 16;
  --text-sizes-text-medium: 16;
  --text-sizes-text-regular-2: 14;
  --text-sizes-text-regular: 14;
  --text-sizes-text-small-2: 12;
  --text-sizes-text-small: 12;
  --text-sizes-text-tiny-2: 10;
  --text-sizes-text-tiny: 10;
  --text-success: var(--color-palette-success-success-800); /* @kind color */
  --text-warning: var(--color-palette-warning-warning-800); /* @kind color */
  --type-body-lg-family: var(--font-family-body);
  --type-body-lg-line: var(--type-line-25);
  --type-body-lg-size: var(--type-size-18);
  --type-body-lg-style: var(--font-style-regular);
  --type-body-md-family: var(--font-family-body);
  --type-body-md-line: var(--type-line-21);
  --type-body-md-size: var(--type-size-16);
  --type-body-md-style: var(--font-style-regular);
  --type-body-size: var(--size-16-2);
  --type-body-sm-family: var(--font-family-body);
  --type-body-sm-line: var(--type-line-20);
  --type-body-sm-size-2: var(--size-14);
  --type-body-sm-size: var(--type-size-14);
  --type-body-sm-style: var(--font-style-regular);
  --type-caption-family: var(--font-family-body);
  --type-caption-line: var(--type-line-16);
  --type-caption-size: var(--type-size-12);
  --type-caption-style: var(--font-style-regular);
  --type-display-hero-family: var(--font-family-display);
  --type-display-hero-line: var(--type-line-40);
  --type-display-hero-size: var(--type-size-32);
  --type-display-hero-style: var(--font-style-semibold);
  --type-display-section-family: var(--font-family-display);
  --type-display-section-line: var(--type-line-40);
  --type-display-section-size: var(--type-size-32);
  --type-display-section-style: var(--font-style-semibold);
  --type-heading-h1-family: var(--font-family-body);
  --type-heading-h1-line: var(--type-line-34);
  --type-heading-h1-size: var(--type-size-26);
  --type-heading-h1-style: var(--font-style-semibold);
  --type-heading-h2-family: var(--font-family-body);
  --type-heading-h2-line: var(--type-line-31);
  --type-heading-h2-size: var(--type-size-22);
  --type-heading-h2-style: var(--font-style-semibold);
  --type-heading-h3-family: var(--font-family-body);
  --type-heading-h3-line: var(--type-line-28);
  --type-heading-h3-size: var(--type-size-20);
  --type-heading-h3-style: var(--font-style-semibold);
  --type-heading-h4-family: var(--font-family-body);
  --type-heading-h4-line: var(--type-line-25);
  --type-heading-h4-size: var(--type-size-18);
  --type-heading-h4-style: var(--font-style-semibold);
  --type-label-button-family: var(--font-family-body);
  --type-label-button-line: var(--type-line-21);
  --type-label-button-size: var(--type-size-16);
  --type-label-button-style: var(--font-style-semibold);
  --type-label-control-family: var(--font-family-body);
  --type-label-control-line: var(--type-line-18);
  --type-label-control-size: var(--type-size-14);
  --type-label-control-style: var(--font-style-medium);
  --type-micro-family: var(--font-family-body);
  --type-micro-line: var(--type-line-13);
  --type-micro-size: var(--type-size-10);
  --type-micro-style: var(--font-style-medium);
  --type-section-heading-size-2: var(--size-26);
  --type-section-heading-size: var(--type-size-26);
}

:root[data-mode="wireframe"] {
}

:root[data-mode="sm"] {
  --badge-pad-x: 8;
  --badge-pad-y: 2;
}

:root[data-mode="lg"] {
  --badge-pad-x: 14;
  --badge-pad-y: 6;
}

/* --- design system: tokens/theme.css --- */
/* Glomi Core DS — theme layer.
 *
 * Light is the default and lives in fig-tokens.css :root — extracted from the
 * Figma file. Dark is AUTHORED, not extracted: the source file defines no Glomi
 * dark theme. Every value below is a re-point onto an existing Glomi ramp step
 * (or a color-mix of one), so dark introduces no new colours to the system.
 *
 * Because tier 2 is aliases over tier 1, dark mode changes NO component code.
 *
 * Rules applied:
 *   Surfaces      canvas = base-ink, card lifts to neutral-900, sunken drops to black.
 *   Text          light ramp steps invert: 900->100, 800->300, 700->500.
 *   Brand         fills hold primary-500 so brand identity survives; brand TEXT
 *                 lifts to primary-300 (6.7:1 on card) because 500 fails on dark.
 *   State travel  light: hover darkens. dark: hover LIGHTENS (primary-400) and
 *                 pressed darkens (primary-600) — both keep white text >= 6:1.
 *   Semantics     -800 text becomes -400; -800 borders become -500; -100 washes
 *                 become a 16% color-mix over the card.
 *   Borders       flat neutrals become white alphas so they read on any surface.
 *
 * Scoped to [data-theme] rather than :root[data-theme] so a nested container can
 * be themed independently (dark hero on a light page, side-by-side specimens).
 */

[data-theme="dark"], .dark {
  --bg-primary: var(--color-palette-base-ink);
  --surface-page: var(--color-palette-base-ink);
  --surface-canvas: var(--color-palette-base-ink);
  --surface-card: var(--color-palette-neutral-neutral-900);
  --surface-sunken: var(--color-palette-base-black);
  --state-hover-surface: rgba(255,255,255,0.08);
  --state-pressed-surface: rgba(255,255,255,0.14);
  --state-brand-wash: rgba(255,255,255,0.16);
  --surface-quiet: rgba(255,255,255,0.10);
  --surface-sunken-2: var(--color-palette-base-black);
  --surface-inverse: var(--color-palette-neutral-neutral-100);
  --surface-cream: color-mix(in oklab, var(--color-palette-base-cream) 12%, var(--surface-card));
  --surface-featured: color-mix(in oklab, var(--color-palette-gold-gold-500) 22%, var(--surface-card));
  --surface-brand: var(--color-palette-primary-primary-500);
  --surface-brand-strong: var(--color-palette-primary-primary-400);
  --surface-brand-wash: color-mix(in oklab, var(--color-palette-primary-primary-500) 18%, var(--surface-card));
  --surface-accent-wash: color-mix(in oklab, var(--color-palette-lavender-lavender-400) 16%, var(--surface-card));
  --surface-gold-wash: color-mix(in oklab, var(--color-palette-gold-gold-500) 14%, var(--surface-card));
  --text-primary: var(--color-palette-neutral-neutral-100);
  --text-primary-2: var(--color-palette-neutral-neutral-100);
  --text-secondary: var(--color-palette-neutral-neutral-300);
  --text-secondary-2: var(--color-palette-neutral-neutral-300);
  --text-muted: var(--color-palette-neutral-neutral-500);
  --text-muted-2: var(--color-palette-neutral-neutral-500);
  --text-brand: var(--color-palette-primary-primary-300);
  --text-gold: var(--color-palette-gold-gold-400);
  --text-lavender: var(--color-palette-lavender-lavender-300);
  --text-error: var(--color-palette-error-error-400);
  --text-success: var(--color-palette-success-success-400);
  --text-warning: var(--color-palette-warning-warning-400);
  --text-on-accent: var(--color-palette-neutral-neutral-100);
  --text-on-inverse: var(--color-palette-neutral-neutral-900);
  --text-on-inverse-subtle: var(--color-palette-neutral-neutral-700);
  --text-on-inverse-muted: rgba(7,2,3,0.6);
  --border-subtle: rgba(255,255,255,0.12);
  --border-hairline: rgba(255,255,255,0.16);
  --border-hairline-2: rgba(255,255,255,0.16);
  --border-strong: var(--color-palette-neutral-neutral-600);
  --border-strong-2: var(--color-palette-neutral-neutral-600);
  --border-brand: var(--color-palette-primary-primary-400);
  --border-brand-subtle: color-mix(in oklab, var(--color-palette-primary-primary-400) 35%, var(--surface-card));
  --border-gold-subtle: color-mix(in oklab, var(--color-palette-gold-gold-500) 30%, var(--surface-card));
  --border-on-inverse: var(--color-palette-neutral-neutral-900);
  --border-on-inverse-subtle: rgba(7,2,3,0.2);
  --border-error: var(--color-palette-error-error-500);
  --border-success: var(--color-palette-success-success-500);
  --border-warning: var(--color-palette-warning-warning-500);
  --action-primary-bg: var(--color-palette-primary-primary-500);
  --action-primary-bg-hover: var(--color-palette-primary-primary-400);
  --action-primary-bg-pressed: var(--color-palette-primary-primary-600);
  --action-primary-bg-disabled: rgba(255,255,255,0.10);
  --action-primary-text: var(--color-palette-base-white);
  --action-primary-text-disabled: var(--color-palette-neutral-neutral-600);
  --action-secondary-bg: var(--color-palette-neutral-neutral-900);
  --action-secondary-bg-hover: color-mix(in oklab, var(--color-palette-primary-primary-500) 22%, var(--surface-card));
  --action-secondary-bg-disabled: rgba(255,255,255,0.06);
  --action-secondary-border: var(--color-palette-primary-primary-400);
  --action-secondary-border-disabled: rgba(255,255,255,0.16);
  --action-secondary-text: var(--color-palette-primary-primary-300);
  --action-secondary-text-hover: var(--color-palette-primary-primary-200);
  --action-secondary-text-disabled: var(--color-palette-neutral-neutral-700);
  --accent-primary: var(--color-palette-primary-primary-400);
  --accent-lavender-strong: var(--color-palette-lavender-lavender-300);
  --accent-lavender-text: var(--color-palette-lavender-lavender-300);
  --icon-gold: var(--color-palette-gold-gold-400);
  --rating-star: rgb(240,196,90);
  --feedback-error-bg: color-mix(in oklab, var(--color-palette-error-error-500) 16%, var(--surface-card));
  --feedback-error-border: var(--color-palette-error-error-500);
  --feedback-error-fg: var(--color-palette-error-error-400);
  --feedback-success-bg: color-mix(in oklab, var(--color-palette-success-success-500) 16%, var(--surface-card));
  --feedback-success-border: var(--color-palette-success-success-500);
  --feedback-success-fg: var(--color-palette-success-success-400);
  --feedback-warning-bg: color-mix(in oklab, var(--color-palette-warning-warning-500) 16%, var(--surface-card));
  --feedback-warning-border: var(--color-palette-warning-warning-500);
  --feedback-warning-fg: var(--color-palette-warning-warning-400);
  --focus-ring: var(--color-palette-primary-primary-300);
  --focus-ring-2: var(--color-palette-primary-primary-300);
  --focus-ring-on-inverse: var(--color-palette-lavender-lavender-600);
  --indicator-inactive: rgba(255,255,255,0.24);
  --state-overlay-default: rgba(0,0,0,0.45);
  --state-overlay-hover: rgba(0,0,0,0.60);
  --state-overlay-disabled: rgba(0,0,0,0.35);
  --state-floating-surface: rgba(31,27,28,0.72);
  --state-floating-surface-hover: rgba(31,27,28,0.84);
  --state-floating-surface-pressed: rgba(31,27,28,0.93);
  --state-floating-surface-disabled: rgba(31,27,28,0.40);
  --state-floating-fg: var(--color-palette-base-white);
  --state-floating-fg-disabled: rgba(255,255,255,0.45);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"], .theme-auto {
    --bg-primary: var(--color-palette-base-ink);
    --surface-page: var(--color-palette-base-ink);
    --surface-canvas: var(--color-palette-base-ink);
    --surface-card: var(--color-palette-neutral-neutral-900);
    --surface-sunken: var(--color-palette-base-black);
    --state-hover-surface: rgba(255,255,255,0.08);
    --state-pressed-surface: rgba(255,255,255,0.14);
    --state-brand-wash: rgba(255,255,255,0.16);
    --surface-quiet: rgba(255,255,255,0.10);
    --surface-sunken-2: var(--color-palette-base-black);
    --surface-inverse: var(--color-palette-neutral-neutral-100);
    --surface-cream: color-mix(in oklab, var(--color-palette-base-cream) 12%, var(--surface-card));
    --surface-featured: color-mix(in oklab, var(--color-palette-gold-gold-500) 22%, var(--surface-card));
    --surface-brand: var(--color-palette-primary-primary-500);
    --surface-brand-strong: var(--color-palette-primary-primary-400);
    --surface-brand-wash: color-mix(in oklab, var(--color-palette-primary-primary-500) 18%, var(--surface-card));
    --surface-accent-wash: color-mix(in oklab, var(--color-palette-lavender-lavender-400) 16%, var(--surface-card));
    --surface-gold-wash: color-mix(in oklab, var(--color-palette-gold-gold-500) 14%, var(--surface-card));
    --text-primary: var(--color-palette-neutral-neutral-100);
    --text-primary-2: var(--color-palette-neutral-neutral-100);
    --text-secondary: var(--color-palette-neutral-neutral-300);
    --text-secondary-2: var(--color-palette-neutral-neutral-300);
    --text-muted: var(--color-palette-neutral-neutral-500);
    --text-muted-2: var(--color-palette-neutral-neutral-500);
    --text-brand: var(--color-palette-primary-primary-300);
    --text-gold: var(--color-palette-gold-gold-400);
    --text-lavender: var(--color-palette-lavender-lavender-300);
    --text-error: var(--color-palette-error-error-400);
    --text-success: var(--color-palette-success-success-400);
    --text-warning: var(--color-palette-warning-warning-400);
    --text-on-accent: var(--color-palette-neutral-neutral-100);
    --text-on-inverse: var(--color-palette-neutral-neutral-900);
    --text-on-inverse-subtle: var(--color-palette-neutral-neutral-700);
    --text-on-inverse-muted: rgba(7,2,3,0.6);
    --border-subtle: rgba(255,255,255,0.12);
    --border-hairline: rgba(255,255,255,0.16);
    --border-hairline-2: rgba(255,255,255,0.16);
    --border-strong: var(--color-palette-neutral-neutral-600);
    --border-strong-2: var(--color-palette-neutral-neutral-600);
    --border-brand: var(--color-palette-primary-primary-400);
    --border-brand-subtle: color-mix(in oklab, var(--color-palette-primary-primary-400) 35%, var(--surface-card));
    --border-gold-subtle: color-mix(in oklab, var(--color-palette-gold-gold-500) 30%, var(--surface-card));
    --border-on-inverse: var(--color-palette-neutral-neutral-900);
    --border-on-inverse-subtle: rgba(7,2,3,0.2);
    --border-error: var(--color-palette-error-error-500);
    --border-success: var(--color-palette-success-success-500);
    --border-warning: var(--color-palette-warning-warning-500);
    --action-primary-bg: var(--color-palette-primary-primary-500);
    --action-primary-bg-hover: var(--color-palette-primary-primary-400);
    --action-primary-bg-pressed: var(--color-palette-primary-primary-600);
    --action-primary-bg-disabled: rgba(255,255,255,0.10);
    --action-primary-text: var(--color-palette-base-white);
    --action-primary-text-disabled: var(--color-palette-neutral-neutral-600);
    --action-secondary-bg: var(--color-palette-neutral-neutral-900);
    --action-secondary-bg-hover: color-mix(in oklab, var(--color-palette-primary-primary-500) 22%, var(--surface-card));
    --action-secondary-bg-disabled: rgba(255,255,255,0.06);
    --action-secondary-border: var(--color-palette-primary-primary-400);
    --action-secondary-border-disabled: rgba(255,255,255,0.16);
    --action-secondary-text: var(--color-palette-primary-primary-300);
    --action-secondary-text-hover: var(--color-palette-primary-primary-200);
    --action-secondary-text-disabled: var(--color-palette-neutral-neutral-700);
    --accent-primary: var(--color-palette-primary-primary-400);
    --accent-lavender-strong: var(--color-palette-lavender-lavender-300);
    --accent-lavender-text: var(--color-palette-lavender-lavender-300);
    --icon-gold: var(--color-palette-gold-gold-400);
    --rating-star: rgb(240,196,90);
    --feedback-error-bg: color-mix(in oklab, var(--color-palette-error-error-500) 16%, var(--surface-card));
    --feedback-error-border: var(--color-palette-error-error-500);
    --feedback-error-fg: var(--color-palette-error-error-400);
    --feedback-success-bg: color-mix(in oklab, var(--color-palette-success-success-500) 16%, var(--surface-card));
    --feedback-success-border: var(--color-palette-success-success-500);
    --feedback-success-fg: var(--color-palette-success-success-400);
    --feedback-warning-bg: color-mix(in oklab, var(--color-palette-warning-warning-500) 16%, var(--surface-card));
    --feedback-warning-border: var(--color-palette-warning-warning-500);
    --feedback-warning-fg: var(--color-palette-warning-warning-400);
    --focus-ring: var(--color-palette-primary-primary-300);
    --focus-ring-2: var(--color-palette-primary-primary-300);
    --focus-ring-on-inverse: var(--color-palette-lavender-lavender-600);
    --indicator-inactive: rgba(255,255,255,0.24);
    --state-overlay-default: rgba(0,0,0,0.45);
    --state-overlay-hover: rgba(0,0,0,0.60);
    --state-overlay-disabled: rgba(0,0,0,0.35);
    --state-floating-surface: rgba(31,27,28,0.72);
    --state-floating-surface-hover: rgba(31,27,28,0.84);
    --state-floating-surface-pressed: rgba(31,27,28,0.93);
    --state-floating-surface-disabled: rgba(31,27,28,0.40);
    --state-floating-fg: var(--color-palette-base-white);
    --state-floating-fg-disabled: rgba(255,255,255,0.45);
  }
}

/* --- design system: tokens/dimensions.css --- */
/* Glomi Core DS — px-resolved convenience aliases.
 * fig-tokens.css emits FLOAT variables unitless (e.g. --space-16: 16) because
 * Figma Variables are numbers. These aliases wrap the ones you reach for in
 * plain CSS so you can write `padding: var(--px-space-16)` directly.
 * Colour tokens need no wrapper — use them as-is. */
:root {
  --px-space-2: calc(var(--space-2) * 1px);
  --px-space-4: calc(var(--space-4) * 1px);
  --px-space-8: calc(var(--space-8) * 1px);
  --px-space-12: calc(var(--space-12) * 1px);
  --px-space-16: calc(var(--space-16) * 1px);
  --px-space-20: calc(var(--space-20) * 1px);
  --px-space-24: calc(var(--space-24) * 1px);
  --px-space-32: calc(var(--space-32) * 1px);
  --px-space-40: calc(var(--space-40) * 1px);
  --px-space-48: calc(var(--space-48) * 1px);
  --px-space-64: calc(var(--space-64) * 1px);
  --px-space-80: calc(var(--space-80) * 1px);
  --px-space-96: calc(var(--space-96) * 1px);
  --px-space-112: calc(var(--space-112) * 1px);
  --px-space-120: calc(var(--space-120) * 1px);

  --px-gutter: calc(var(--space-gutter) * 1px);
  --px-card-pad: calc(var(--space-card-pad) * 1px);
  --px-section: calc(var(--space-section) * 1px);
  --px-stack: calc(var(--space-stack) * 1px);
  --px-stack-sm: calc(var(--space-stack-sm) * 1px);
  --px-stack-lg: calc(var(--space-stack-lg) * 1px);
  --px-page-pad: calc(var(--page-padding-padding-global) * 1px);
  --px-content-max: calc(var(--layout-content-max) * 1px);

  --px-radius-6: calc(var(--radius-6) * 1px);
  --px-radius-8: calc(var(--radius-8) * 1px);
  --px-radius-12: calc(var(--radius-12) * 1px);
  --px-radius-14: calc(var(--radius-14) * 1px);
  --px-radius-16: calc(var(--radius-16) * 1px);
  --px-radius-24: calc(var(--radius-24) * 1px);
  --px-radius-control: calc(var(--radius-control) * 1px);
  --px-radius-pill: calc(var(--radius-pill) * 1px);

  --px-stroke-1: calc(var(--stroke-1) * 1px);
  --px-stroke-2: calc(var(--stroke-2) * 1px);

  --px-control-min: calc(var(--size-control-min) * 1px);
  --px-cta-h: calc(var(--size-cta-h) * 1px);
  --px-field-h: calc(var(--size-field-h) * 1px);
  --px-icon: calc(var(--size-icon) * 1px);
  --px-icon-target: calc(var(--size-icon-target) * 1px);
}

/* --- design system: tokens/fonts.css --- */
/* Glomi Core DS — webfonts.
 *
 * The 8 proprietary Glomi TTFs ship in the Core handoff archive
 * (Glomi-Core-DS-Claude-01-Core-Documentation/fonts/) and are installed at
 * assets/fonts/. See that archive's FONT-NOTICE.md: technical identity only,
 * no redistribution rights implied — confirm licensing before sharing.
 *
 * The .fig names three families: "Glomi Display", "Glomi Body" and a bare
 * "Glomi". The handoff ships Display and Body binaries only, so bare "Glomi"
 * is bound to the Body cut (its usage in the file is body-scale text).
 *
 * Arabic (Cairo) and the annotation UI (Inter) are real, public families.
 */


@font-face{font-family:"Glomi Body";src:url("/assets/fonts/Glomi-Body-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi Body";src:url("/assets/fonts/Glomi-Body-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi Body";src:url("/assets/fonts/Glomi-Body-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi Body";src:url("/assets/fonts/Glomi-Body-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"Glomi Display";src:url("/assets/fonts/Glomi-Display-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi Display";src:url("/assets/fonts/Glomi-Display-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi Display";src:url("/assets/fonts/Glomi-Display-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi Display";src:url("/assets/fonts/Glomi-Display-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"Glomi";src:url("/assets/fonts/Glomi-Body-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi";src:url("/assets/fonts/Glomi-Body-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi";src:url("/assets/fonts/Glomi-Body-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Glomi";src:url("/assets/fonts/Glomi-Body-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root {
  --font-display: var(--font-family-display), Georgia, serif;
  --font-body: var(--font-family-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Cairo", "Noto Sans Arabic", sans-serif;
  --font-annotation: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- design system: tokens/typography.css --- */
/* Glomi Core DS — named type roles.
 * One class per style in the .fig "Foundations / Typography / Board".
 * Usage rule from the source file: use the named role. Do not expose
 * family, weight, size or line-height as component properties. */
.glomi-display-60 { font-family: var(--font-display); font-weight: 600; font-size: 60px; line-height: 72px; }
.glomi-display-44 { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 53px; }
.glomi-display-40 { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 48px; }
.glomi-display-36 { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 43px; }
.glomi-display-32 { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 40px; }

.glomi-body-24-semi { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 34px; }
.glomi-body-20-semi { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 28px; }
.glomi-body-20 { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 28px; }
.glomi-body-18-semi { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 25px; }
.glomi-body-16-semi { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 21px; }
.glomi-body-16-medium { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 21px; }
.glomi-body-16 { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 21px; }
.glomi-body-14-semi { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px; }
.glomi-body-14-medium { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; }
.glomi-body-14 { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; }
.glomi-body-12-medium { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; }
.glomi-body-12 { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 16px; }
.glomi-micro { font-family: var(--font-body); font-weight: 500; font-size: 10px; line-height: 13px; }

/* Semantic aliases matching the --type-* variable roles.
 *
 * These read the variables rather than restating numbers, because the roles
 * are DUAL-MODE in the source: the Typography collection defines a desktop
 * and a mobile value for each. Setting data-mode="mobile" on :root reflows
 * every one of these. Six roles actually change:
 *
 *   role                    desktop     mobile
 *   display/hero            60 / 72     32 / 40
 *   display/section         40 / 48     32 / 40
 *   heading/h1              40 / 48     26 / 34
 *   heading/h2              26 / 34     22 / 31
 *   body/lg                 20 / 28     18 / 25
 *   section-heading         36          26
 *
 * h3, h4, body/md, body/sm, caption, micro and both labels are identical in
 * both modes. Weight and family never vary by mode, so they stay literal —
 * the style variables hold Figma style names ("SemiBold"), not CSS weights.
 * Size and line variables are unitless numbers, hence calc(… * 1px). */
.glomi-hero { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--type-display-hero-size) * 1px); line-height: calc(var(--type-display-hero-line) * 1px); }
.glomi-section-title { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--type-display-section-size) * 1px); line-height: calc(var(--type-display-section-line) * 1px); }
.glomi-section-heading { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--type-section-heading-size) * 1px); line-height: calc(var(--glomi-section-heading-line) * 1px); }
.glomi-h1 { font-family: var(--font-body); font-weight: 600; font-size: calc(var(--type-heading-h1-size) * 1px); line-height: calc(var(--type-heading-h1-line) * 1px); }
.glomi-h2 { font-family: var(--font-body); font-weight: 600; font-size: calc(var(--type-heading-h2-size) * 1px); line-height: calc(var(--type-heading-h2-line) * 1px); }
.glomi-h3 { font-family: var(--font-body); font-weight: 600; font-size: calc(var(--type-heading-h3-size) * 1px); line-height: calc(var(--type-heading-h3-line) * 1px); }
.glomi-h4 { font-family: var(--font-body); font-weight: 600; font-size: calc(var(--type-heading-h4-size) * 1px); line-height: calc(var(--type-heading-h4-line) * 1px); }
.glomi-body-lg { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--type-body-lg-size) * 1px); line-height: calc(var(--type-body-lg-line) * 1px); }
.glomi-body-md { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--type-body-md-size) * 1px); line-height: calc(var(--type-body-md-line) * 1px); }
.glomi-body-sm { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--type-body-sm-size) * 1px); line-height: calc(var(--type-body-sm-line) * 1px); }
.glomi-label-button { font-family: var(--font-body); font-weight: 600; font-size: calc(var(--type-label-button-size) * 1px); line-height: calc(var(--type-label-button-line) * 1px); }
.glomi-label-control { font-family: var(--font-body); font-weight: 500; font-size: calc(var(--type-label-control-size) * 1px); line-height: calc(var(--type-label-control-line) * 1px); }
.glomi-caption { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--type-caption-size) * 1px); line-height: calc(var(--type-caption-line) * 1px); }

/* Arabic / RTL. The .fig pairs Cairo with the Glomi roles for AR strings. */
[dir="rtl"], .glomi-ar { font-family: var(--font-arabic); }

/* NOT A DIRECT TRANSCRIPTION — the one typography value here that the source
 * does not state. `type/section-heading/size` exists (36 web / 26 mobile) with
 * no matching line variable, so an inherited line-height would leave a 36px
 * heading on whatever the consumer's body sets (21px in this kit — glyphs
 * overlap on any second line). Paired instead with the line values the file
 * already uses at exactly these sizes: 36 -> type/line/43 (its own
 * `Display/36, Semi bold` style) and 26 -> type/line/31 (h2 mobile). Mode-aware
 * to track the size. Rebind here if the source later defines the role's line. */
:root { --glomi-section-heading-line: 43; /* @kind font */ }
:root[data-mode="mobile"] { --glomi-section-heading-line: 31; /* @kind font */ }

/* --- design system: tokens/effects.css --- */
/* Glomi Core DS — elevation effect styles (Figma Effect Styles, verbatim).
 * Hairline borders remain the default boundary; shadow is additive lift. */
:root {
  --elevation-01-card: 0 4px 16px 0 #0702030F;
  --elevation-02-raised: 0 8px 24px 0 #0702031A;
  --elevation-03-floating: 0 16px 40px 0 #07020324;
}

/* --- design system: tokens/motion.css --- */
/* Motion tokens.
 *
 * The source file specifies no curves or durations, so this layer is authored
 * rather than extracted — and it is authored around one rule:
 *
 *   DURATION SCALES WITH DISTANCE.
 *
 * A 22px heart filling and a 320px panel dropping open are not the same event, and
 * giving them the same duration makes one feel sluggish and the other abrupt. The
 * ladder below is distance-based, not importance-based: pick by how far the thing
 * travels, never by how much you want it noticed.
 *
 * Everything is a token so a consumer can retune the whole system's feel from one
 * file, and so `prefers-reduced-motion` can collapse it centrally.
 */
:root {
  /* --- Durations -------------------------------------------------------------
   * instant  a colour or border swap in place — no travel at all
   * fast     a small element changing state: chip, dot, focus ring
   * base     the default; a control's hover and press, a card's lift
   * slow     something with real distance: a panel, a sheet, a month change
   * slower   a full-width or full-height surface entering
   */
  --motion-duration-instant: 90ms; /* @kind other */
  --motion-duration-fast: 140ms; /* @kind other */
  --motion-duration-base: 180ms; /* @kind other */
  --motion-duration-slow: 260ms; /* @kind other */
  --motion-duration-slower: 360ms; /* @kind other */

  /* --- Easing ---------------------------------------------------------------
   * standard  both ends eased — for a change that starts and stops on screen,
   *           which is almost every state transition
   * enter     decelerate: fast in, settles — for something arriving
   * exit      accelerate: eases out of view — for something leaving. Shorter than
   *           its enter, because waiting for a thing to leave is dead time
   * emphasis  overshoots and settles — reserved for a receipt (the favourite pop)
   * linear    only for continuous loops: spinners and shimmer
   */
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --motion-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); /* @kind other */
  --motion-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* @kind other */
  --motion-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --motion-ease-linear: linear; /* @kind other */

  /* --- Loops ---------------------------------------------------------------- */
  --motion-loop-spinner: 720ms; /* @kind other */
  --motion-loop-shimmer: 1400ms; /* @kind other */

  /* --- Travel ---------------------------------------------------------------
   * How far a thing moves when it enters. Small on purpose: a panel that slides
   * 24px reads as arriving, one that slides 80px reads as flying in.
   */
  --motion-travel-sm: 4px; /* @kind spacing */
  --motion-travel-md: 8px; /* @kind spacing */
  --motion-travel-lg: 16px; /* @kind spacing */

  /* The composed default, so an inline style can spend one token. */
  --motion-state: var(--motion-duration-base) var(--motion-ease-standard); /* @kind other */
  --motion-enter: var(--motion-duration-slow) var(--motion-ease-enter); /* @kind other */
  --motion-exit: var(--motion-duration-fast) var(--motion-ease-exit); /* @kind other */
}

/* REDUCED MOTION IS ONE SWITCH, NOT A PATCH PER COMPONENT.
 *
 * Collapsing the duration tokens to ~0 removes every transition and animation in
 * the system at once, including any a consumer adds later — which is the only way
 * this stays true as the system grows. Durations go to 1ms rather than 0 so
 * transitionend still fires and nothing that waits on it hangs.
 *
 * The two LOOPS are slowed rather than stopped: a spinner that does not spin is a
 * static shape that says nothing, so it keeps turning, gently. The shimmer stops
 * outright — a pulsing placeholder is the exact effect this setting exists to
 * prevent. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 1ms; /* @kind other */
    --motion-duration-fast: 1ms; /* @kind other */
    --motion-duration-base: 1ms; /* @kind other */
    --motion-duration-slow: 1ms; /* @kind other */
    --motion-duration-slower: 1ms; /* @kind other */
    --motion-ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
    --motion-loop-spinner: 1600ms; /* @kind other */
    --motion-travel-sm: 0px; /* @kind spacing */
    --motion-travel-md: 0px; /* @kind spacing */
    --motion-travel-lg: 0px; /* @kind spacing */
  }
}

/* --- design system: tokens/base.css --- */
/* Glomi Core DS — base document defaults. */
:root { color-scheme: light; }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 21px; color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--action-secondary-text-hover); text-decoration: underline; }
a:active { color: var(--action-primary-bg-pressed); }
:focus-visible { outline: calc(var(--focus-width) * 1px) solid var(--focus-ring); outline-offset: calc(var(--focus-offset) * 1px); }
::selection { background: var(--surface-brand-wash); color: var(--text-brand); }
img { max-width: 100%; }

/* --- icon font, subset to the 29 glyphs this site uses --- */
@font-face {
  font-family: "Glomi Icons";
  src:
    url("/assets/glomi-icons/GlomiIcons-Regular.woff2") format("woff2"),
    url("/assets/glomi-icons/GlomiIcons-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
.glomi-icon {
  display: inline-block;
  font-family: "Glomi Icons";
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  speak: never;
}
.glomi-icon--weight-regular {
  font-weight: 400;
}
.glomi-icon--arrows__arrow-left::before {
  content: "\E031";
}
.glomi-icon--arrows__arrow-right::before {
  content: "\E03A";
}
.glomi-icon--arrows__arrow-up-right::before {
  content: "\E045";
}
.glomi-icon--arrows__chevron-down::before {
  content: "\E04B";
}
.glomi-icon--charts__bar-chart-square-02::before {
  content: "\E086";
}
.glomi-icon--charts__trend-up-01::before {
  content: "\E0A5";
}
.glomi-icon--communication__mail-01::before {
  content: "\E0B2";
}
.glomi-icon--communication__message-chat-circle::before {
  content: "\E0B9";
}
.glomi-icon--communication__message-notification-square::before {
  content: "\E0C4";
}
.glomi-icon--communication__phone::before {
  content: "\E0D3";
}
.glomi-icon--editor__scissors-01::before {
  content: "\E176";
}
.glomi-icon--finance-ecommerce__credit-card-02::before {
  content: "\E1F3";
}
.glomi-icon--finance-ecommerce__gift-01::before {
  content: "\E217";
}
.glomi-icon--general__activity-heart::before {
  content: "\E233";
}
.glomi-icon--general__check::before {
  content: "\E246";
}
.glomi-icon--general__check-circle::before {
  content: "\E247";
}
.glomi-icon--general__menu-01::before {
  content: "\E2A5";
}
.glomi-icon--general__minus::before {
  content: "\E2AA";
}
.glomi-icon--general__plus::before {
  content: "\E2B3";
}
.glomi-icon--general__x-close::before {
  content: "\E2EC";
}
.glomi-icon--maps-travel__globe-01::before {
  content: "\E35B";
}
.glomi-icon--maps-travel__globe-02::before {
  content: "\E35C";
}
.glomi-icon--maps-travel__marker-pin-01::before {
  content: "\E367";
}
.glomi-icon--security__lock-01::before {
  content: "\E3F7";
}
.glomi-icon--shapes__star-01::before {
  content: "\E41D";
}
.glomi-icon--time__calendar::before {
  content: "\E42A";
}
.glomi-icon--time__clock::before {
  content: "\E434";
}
.glomi-icon--users__users-01::before {
  content: "\E45E";
}
.glomi-icon--users__users-03::before {
  content: "\E460";
}

/* --- keyframes and page defaults, lifted from the templates --- */
@keyframes glomi-word {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}
@keyframes glomi-marquee {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes glomi-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes lm-fade {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes glomi-panel-in {
  0% { opacity: 0; transform: translateY(calc(var(--motion-travel-md) * -1)) scale(.985); }
  100% { opacity: 1; transform: none; }
}
@keyframes glomi-pop {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: none; }
}
@keyframes laba-progress {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes laba-progress6 {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* --- rules that belong to one page only, media queries last --- */
html[data-page="home"] body { background: var(--surface-card); }
html[data-page="studio"] body { background: var(--surface-card); }
html[data-page="pricing"] body { background: var(--surface-card); }
html[data-page="book-a-demo"] body { background: var(--surface-card); }
html[data-page="terms"] body { background: var(--surface-card); }
html[data-page="privacy"] body { background: var(--surface-card); }
html[data-page="cookies"] body { background: var(--surface-card); }
html[data-page="lab"] body { background: var(--surface-card); }
html[data-page="lab-a"] body { background: var(--surface-card); }
html[data-page="lab-b"] body { background: var(--surface-card); }
html[data-page="lab-c"] body { background: var(--surface-card); }
html[data-page="home"][dir="rtl"] .glomi-marquee-track { animation-direction: reverse; }
html[data-page="lab"][dir="rtl"] .glomi-marquee-track { animation-direction: reverse; }
html[data-page="lab-a"][dir="rtl"] .glomi-marquee-track { animation-direction: reverse; }
html[data-page="lab-b"][dir="rtl"] .glomi-marquee-track { animation-direction: reverse; }
html[data-page="lab-c"][dir="rtl"] .glomi-marquee-track { animation-direction: reverse; }
html[data-page="home"] .glomi-price-sar div { height: 24px; color: var(--color-palette-gold-gold-300); }
html[data-page="lab"] .glomi-price-sar div { height: 24px; color: var(--color-palette-gold-gold-300); }
html[data-page="lab-a"] .glomi-price-sar div { height: 24px; color: var(--color-palette-gold-gold-300); }
html[data-page="lab-b"] .glomi-price-sar div { height: 24px; color: var(--color-palette-gold-gold-300); }
html[data-page="lab-c"] .glomi-price-sar div { height: 24px; color: var(--color-palette-gold-gold-300); }
html[data-page="home"] .labc-ind { padding: 96px 0px 44px; }
html[data-page="lab-c"] .labc-ind { padding: 96px 0px 44px; }
html[data-page="home"] .labc-ind-wrap { max-width: 1200px; margin: 0px auto; padding: 0px 32px; }
html[data-page="lab-c"] .labc-ind-wrap { max-width: 1200px; margin: 0px auto; padding: 0px 32px; }
html[data-page="home"] .labc-index { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 64px; align-items: center; }
html[data-page="lab-c"] .labc-index { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 64px; align-items: center; }
html[data-page="home"] .labc-col-list { display: flex; flex-direction: column; gap: 26px; padding-top: 4px; }
html[data-page="lab-c"] .labc-col-list { display: flex; flex-direction: column; gap: 26px; padding-top: 4px; }
html[data-page="home"] .labc-list { display: flex; flex-direction: column; }
html[data-page="lab-c"] .labc-list { display: flex; flex-direction: column; }
html[data-page="home"] .labc-item { border-top: 1px solid var(--border-hairline); }
html[data-page="lab-c"] .labc-item { border-top: 1px solid var(--border-hairline); }
html[data-page="home"] .labc-item:last-child { border-bottom: 1px solid var(--border-hairline); }
html[data-page="lab-c"] .labc-item:last-child { border-bottom: 1px solid var(--border-hairline); }
html[data-page="home"] .labc-row { position: relative; display: flex; align-items: baseline; gap: 18px; width: 100%; margin: 0px; padding: 34px 0px 30px; border: 0px; background: none; text-align: start; font-family: inherit; color: var(--text-muted); cursor: pointer; transition: color 0.35s; }
html[data-page="lab-c"] .labc-row { position: relative; display: flex; align-items: baseline; gap: 18px; width: 100%; margin: 0px; padding: 34px 0px 30px; border: 0px; background: none; text-align: start; font-family: inherit; color: var(--text-muted); cursor: pointer; transition: color 0.35s; }
html[data-page="home"] .labc-row:hover { color: var(--color-palette-neutral-neutral-900); }
html[data-page="lab-c"] .labc-row:hover { color: var(--color-palette-neutral-neutral-900); }
html[data-page="home"] .labc-row.on { color: var(--color-palette-neutral-neutral-900); cursor: default; }
html[data-page="lab-c"] .labc-row.on { color: var(--color-palette-neutral-neutral-900); cursor: default; }
html[data-page="home"] .labc-row-n { flex: 0 0 auto; letter-spacing: 0.14em; color: var(--text-muted); transition: color 0.35s; }
html[data-page="lab-c"] .labc-row-n { flex: 0 0 auto; letter-spacing: 0.14em; color: var(--text-muted); transition: color 0.35s; }
html[data-page="home"] .labc-row:hover .labc-row-n, html[data-page="home"] .labc-row.on .labc-row-n { color: var(--color-palette-gold-gold-700); }
html[data-page="lab-c"] .labc-row:hover .labc-row-n, html[data-page="lab-c"] .labc-row.on .labc-row-n { color: var(--color-palette-gold-gold-700); }
html[data-page="home"] .labc-row-name { font-size: 46px; line-height: 1.06; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
html[data-page="lab-c"] .labc-row-name { font-size: 46px; line-height: 1.06; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
html[data-page="home"] .labc-row-rule { position: absolute; inset-inline: 0px; bottom: -1px; height: 2px; background: var(--surface-brand); transform: scaleX(0); transform-origin: 0px 50%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-c"] .labc-row-rule { position: absolute; inset-inline: 0px; bottom: -1px; height: 2px; background: var(--surface-brand); transform: scaleX(0); transform-origin: 0px 50%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="home"][dir="rtl"] .labc-row-rule { transform-origin: 100% 50%; }
html[data-page="lab-c"][dir="rtl"] .labc-row-rule { transform-origin: 100% 50%; }
html[data-page="home"] .labc-row.on .labc-row-rule { transform: scaleX(1); }
html[data-page="lab-c"] .labc-row.on .labc-row-rule { transform: scaleX(1); }
html[data-page="home"] .labc-copy { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
html[data-page="lab-c"] .labc-copy { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
html[data-page="home"] .labc-copy.on { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s 0.18s; }
html[data-page="lab-c"] .labc-copy.on { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s 0.18s; }
html[data-page="home"] .labc-copy-in { min-height: 0px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding-inline-end: 32px; }
html[data-page="lab-c"] .labc-copy-in { min-height: 0px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding-inline-end: 32px; }
html[data-page="home"] .labc-copy-title { padding-top: 16px; color: var(--color-palette-neutral-neutral-900); text-wrap: pretty; }
html[data-page="lab-c"] .labc-copy-title { padding-top: 16px; color: var(--color-palette-neutral-neutral-900); text-wrap: pretty; }
html[data-page="home"] .labc-copy-body { margin: 0px; padding-bottom: 26px; color: var(--text-secondary); text-wrap: pretty; }
html[data-page="lab-c"] .labc-copy-body { margin: 0px; padding-bottom: 26px; color: var(--text-secondary); text-wrap: pretty; }
html[data-page="home"] .labc-col-stage { position: relative; }
html[data-page="lab-c"] .labc-col-stage { position: relative; }
html[data-page="home"] .labc-stage { position: relative; aspect-ratio: 4 / 5; max-height: 620px; border-radius: 28px; overflow: hidden; background: var(--surface-canvas); box-shadow: var(--elevation-03-floating); }
html[data-page="lab-c"] .labc-stage { position: relative; aspect-ratio: 4 / 5; max-height: 620px; border-radius: 28px; overflow: hidden; background: var(--surface-canvas); box-shadow: var(--elevation-03-floating); }
html[data-page="home"] .labc-shot { position: absolute; inset: 0px; z-index: 1; clip-path: inset(100% 0px 0px); transition-property: clip-path; transition-duration: 0s; transition-delay: 0.76s; }
html[data-page="lab-c"] .labc-shot { position: absolute; inset: 0px; z-index: 1; clip-path: inset(100% 0px 0px); transition-property: clip-path; transition-duration: 0s; transition-delay: 0.76s; }
html[data-page="home"] .labc-shot.on { z-index: 2; clip-path: inset(0px); transition: clip-path 0.72s cubic-bezier(0.62, 0.02, 0.2, 1); }
html[data-page="lab-c"] .labc-shot.on { z-index: 2; clip-path: inset(0px); transition: clip-path 0.72s cubic-bezier(0.62, 0.02, 0.2, 1); }
html[data-page="home"] .labc-shot-zoom { position: absolute; inset: 0px; transform: scale(1.14); transition-property: transform; transition-duration: 0s; transition-delay: 0.76s; }
html[data-page="lab-c"] .labc-shot-zoom { position: absolute; inset: 0px; transform: scale(1.14); transition-property: transform; transition-duration: 0s; transition-delay: 0.76s; }
html[data-page="home"] .labc-col-stage.in .labc-shot.on .labc-shot-zoom { transform: scale(1); transition: transform 8s linear; }
html[data-page="lab-c"] .labc-col-stage.in .labc-shot.on .labc-shot-zoom { transform: scale(1); transition: transform 8s linear; }
html[data-page="home"] .labc-shot-zoom image-slot, html[data-page="home"] .labc-shot-zoom .glomi-slot { display: block; width: 100%; height: 100%; }
html[data-page="lab-c"] .labc-shot-zoom image-slot, html[data-page="lab-c"] .labc-shot-zoom .glomi-slot { display: block; width: 100%; height: 100%; }
html[data-page="home"] .labc-shot-zoom img { object-fit: cover; display: block; width: 100% !important; height: 100% !important; }
html[data-page="lab-c"] .labc-shot-zoom img { object-fit: cover; display: block; width: 100% !important; height: 100% !important; }
html[data-page="home"] .labc-plate { position: absolute; z-index: 3; inset-inline-start: 22px; bottom: 28px; max-width: calc(100% - 44px); display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 18px; background: var(--surface-card); box-shadow: var(--elevation-03-floating); }
html[data-page="lab-c"] .labc-plate { position: absolute; z-index: 3; inset-inline-start: 22px; bottom: 28px; max-width: calc(100% - 44px); display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 18px; background: var(--surface-card); box-shadow: var(--elevation-03-floating); }
html[data-page="home"][dir="rtl"] .labc-plate { padding: 10px 10px 10px 20px; }
html[data-page="lab-c"][dir="rtl"] .labc-plate { padding: 10px 10px 10px 20px; }
html[data-page="home"] .labc-plate-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; }
html[data-page="lab-c"] .labc-plate-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; }
html[data-page="home"] .labc-plate-txt { color: var(--color-palette-neutral-neutral-900); }
html[data-page="lab-c"] .labc-plate-txt { color: var(--color-palette-neutral-neutral-900); }
html[data-page="home"] .labc-stage-bar { position: absolute; z-index: 4; inset-inline: 0px; bottom: 0px; height: 3px; background: var(--border-hairline); }
html[data-page="lab-c"] .labc-stage-bar { position: absolute; z-index: 4; inset-inline: 0px; bottom: 0px; height: 3px; background: var(--border-hairline); }
html[data-page="home"] .labc-stage-bar i { display: block; height: 100%; background: var(--surface-brand); transform: scaleX(0); transform-origin: 0px 50%; transition-property: transform; transition-duration: 0s; }
html[data-page="lab-c"] .labc-stage-bar i { display: block; height: 100%; background: var(--surface-brand); transform: scaleX(0); transform-origin: 0px 50%; transition-property: transform; transition-duration: 0s; }
html[data-page="home"][dir="rtl"] .labc-stage-bar i { transform-origin: 100% 50%; }
html[data-page="lab-c"][dir="rtl"] .labc-stage-bar i { transform-origin: 100% 50%; }
html[data-page="home"] .labc-index.auto .labc-col-stage.in .labc-shot.on .labc-stage-bar i { transform: scaleX(1); transition: transform 5s linear; }
html[data-page="lab-c"] .labc-index.auto .labc-col-stage.in .labc-shot.on .labc-stage-bar i { transform: scaleX(1); transition: transform 5s linear; }
html[data-page="home"] .labc-stack { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
html[data-page="lab-c"] .labc-stack { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
html[data-page="home"] .labc-card2 { position: sticky; border-radius: 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--elevation-03-floating); padding: 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; min-height: 540px; transform-origin: 50% 0px; will-change: transform, opacity; }
html[data-page="lab-c"] .labc-card2 { position: sticky; border-radius: 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--elevation-03-floating); padding: 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; min-height: 540px; transform-origin: 50% 0px; will-change: transform, opacity; }
html[data-page="home"] .labc-card2:nth-child(1) { top: 84px; }
html[data-page="lab-c"] .labc-card2:nth-child(1) { top: 84px; }
html[data-page="home"] .labc-card2:nth-child(2) { top: 96px; }
html[data-page="lab-c"] .labc-card2:nth-child(2) { top: 96px; }
html[data-page="home"] .labc-card2:nth-child(3) { top: 108px; }
html[data-page="lab-c"] .labc-card2:nth-child(3) { top: 108px; }
html[data-page="home"] .labc-card2:nth-child(4) { top: 120px; }
html[data-page="lab-c"] .labc-card2:nth-child(4) { top: 120px; }
html[data-page="home"] .labc-card2:nth-child(5) { top: 132px; }
html[data-page="lab-c"] .labc-card2:nth-child(5) { top: 132px; }
html[data-page="home"] .labc-card2:nth-child(6) { top: 144px; }
html[data-page="lab-c"] .labc-card2:nth-child(6) { top: 144px; }
html[data-page="home"] .labc-c-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
html[data-page="lab-c"] .labc-c-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
html[data-page="home"] .labc-c-mock { aspect-ratio: 16 / 10; }
html[data-page="lab-c"] .labc-c-mock { aspect-ratio: 16 / 10; }
html[data-page="home"] .labc-pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-c"] .labc-pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="home"] .lm { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; min-height: 0px; position: relative; font-family: var(--font-body); color: var(--text-primary); }
html[data-page="studio"] .lm { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; min-height: 0px; position: relative; font-family: var(--font-body); color: var(--text-primary); }
html[data-page="lab-a"] .lm { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; min-height: 0px; position: relative; font-family: var(--font-body); color: var(--text-primary); }
html[data-page="lab-b"] .lm { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; min-height: 0px; position: relative; font-family: var(--font-body); color: var(--text-primary); }
html[data-page="lab-c"] .lm { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; min-height: 0px; position: relative; font-family: var(--font-body); color: var(--text-primary); }
html[data-page="home"] .lm-muted { color: var(--text-secondary); }
html[data-page="studio"] .lm-muted { color: var(--text-secondary); }
html[data-page="lab-a"] .lm-muted { color: var(--text-secondary); }
html[data-page="lab-b"] .lm-muted { color: var(--text-secondary); }
html[data-page="lab-c"] .lm-muted { color: var(--text-secondary); }
html[data-page="home"] .lm-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="studio"] .lm-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-a"] .lm-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-b"] .lm-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-c"] .lm-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="home"] .lm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-page="studio"] .lm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-page="lab-a"] .lm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-page="lab-b"] .lm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-page="lab-c"] .lm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-page="home"] .lm-head-tight { justify-content: flex-start; }
html[data-page="studio"] .lm-head-tight { justify-content: flex-start; }
html[data-page="lab-a"] .lm-head-tight { justify-content: flex-start; }
html[data-page="lab-b"] .lm-head-tight { justify-content: flex-start; }
html[data-page="lab-c"] .lm-head-tight { justify-content: flex-start; }
html[data-page="home"] .lm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="studio"] .lm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="lab-a"] .lm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="lab-b"] .lm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="lab-c"] .lm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="home"] .lm-seg-item { padding: 5px 12px; border-radius: 999px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; font-family: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
html[data-page="studio"] .lm-seg-item { padding: 5px 12px; border-radius: 999px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; font-family: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
html[data-page="lab-a"] .lm-seg-item { padding: 5px 12px; border-radius: 999px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; font-family: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
html[data-page="lab-b"] .lm-seg-item { padding: 5px 12px; border-radius: 999px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; font-family: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
html[data-page="lab-c"] .lm-seg-item { padding: 5px 12px; border-radius: 999px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; font-family: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
html[data-page="home"] .lm-seg-item.on { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--elevation-01-card); }
html[data-page="studio"] .lm-seg-item.on { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--elevation-01-card); }
html[data-page="lab-a"] .lm-seg-item.on { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--elevation-01-card); }
html[data-page="lab-b"] .lm-seg-item.on { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--elevation-01-card); }
html[data-page="lab-c"] .lm-seg-item.on { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--elevation-01-card); }
html[data-page="home"] .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0px 12px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--surface-brand); color: var(--text-on-brand); font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.2s; }
html[data-page="studio"] .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0px 12px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--surface-brand); color: var(--text-on-brand); font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.2s; }
html[data-page="lab-a"] .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0px 12px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--surface-brand); color: var(--text-on-brand); font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.2s; }
html[data-page="lab-b"] .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0px 12px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--surface-brand); color: var(--text-on-brand); font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.2s; }
html[data-page="lab-c"] .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0px 12px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--surface-brand); color: var(--text-on-brand); font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.2s; }
html[data-page="home"] .lm-btn:hover { background: var(--action-primary-bg-hover); }
html[data-page="studio"] .lm-btn:hover { background: var(--action-primary-bg-hover); }
html[data-page="lab-a"] .lm-btn:hover { background: var(--action-primary-bg-hover); }
html[data-page="lab-b"] .lm-btn:hover { background: var(--action-primary-bg-hover); }
html[data-page="lab-c"] .lm-btn:hover { background: var(--action-primary-bg-hover); }
html[data-page="home"] .lm-btn:active { transform: scale(0.97); }
html[data-page="studio"] .lm-btn:active { transform: scale(0.97); }
html[data-page="lab-a"] .lm-btn:active { transform: scale(0.97); }
html[data-page="lab-b"] .lm-btn:active { transform: scale(0.97); }
html[data-page="lab-c"] .lm-btn:active { transform: scale(0.97); }
html[data-page="home"] .lm-btn-l { height: 40px; padding: 0px 16px; width: 100%; justify-content: space-between; }
html[data-page="studio"] .lm-btn-l { height: 40px; padding: 0px 16px; width: 100%; justify-content: space-between; }
html[data-page="lab-a"] .lm-btn-l { height: 40px; padding: 0px 16px; width: 100%; justify-content: space-between; }
html[data-page="lab-b"] .lm-btn-l { height: 40px; padding: 0px 16px; width: 100%; justify-content: space-between; }
html[data-page="lab-c"] .lm-btn-l { height: 40px; padding: 0px 16px; width: 100%; justify-content: space-between; }
html[data-page="home"] .lm-btn-xs { height: 28px; padding: 0px 10px; }
html[data-page="studio"] .lm-btn-xs { height: 28px; padding: 0px 10px; }
html[data-page="lab-a"] .lm-btn-xs { height: 28px; padding: 0px 10px; }
html[data-page="lab-b"] .lm-btn-xs { height: 28px; padding: 0px 10px; }
html[data-page="lab-c"] .lm-btn-xs { height: 28px; padding: 0px 10px; }
html[data-page="home"] .lm-btn-ghost { background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="studio"] .lm-btn-ghost { background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-a"] .lm-btn-ghost { background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-b"] .lm-btn-ghost { background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-c"] .lm-btn-ghost { background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="home"] .lm-btn-ghost:hover { background: var(--surface-brand-wash); }
html[data-page="studio"] .lm-btn-ghost:hover { background: var(--surface-brand-wash); }
html[data-page="lab-a"] .lm-btn-ghost:hover { background: var(--surface-brand-wash); }
html[data-page="lab-b"] .lm-btn-ghost:hover { background: var(--surface-brand-wash); }
html[data-page="lab-c"] .lm-btn-ghost:hover { background: var(--surface-brand-wash); }
html[data-page="home"] .lm-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: 0.02em; }
html[data-page="studio"] .lm-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: 0.02em; }
html[data-page="lab-a"] .lm-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: 0.02em; }
html[data-page="lab-b"] .lm-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: 0.02em; }
html[data-page="lab-c"] .lm-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: 0.02em; }
html[data-page="home"] .lm-av-xs { width: 20px; height: 20px; font-size: 9px; }
html[data-page="studio"] .lm-av-xs { width: 20px; height: 20px; font-size: 9px; }
html[data-page="lab-a"] .lm-av-xs { width: 20px; height: 20px; font-size: 9px; }
html[data-page="lab-b"] .lm-av-xs { width: 20px; height: 20px; font-size: 9px; }
html[data-page="lab-c"] .lm-av-xs { width: 20px; height: 20px; font-size: 9px; }
html[data-page="home"] .lm-price { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
html[data-page="studio"] .lm-price { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
html[data-page="lab-a"] .lm-price { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
html[data-page="lab-b"] .lm-price { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
html[data-page="lab-c"] .lm-price { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
html[data-page="home"] .lm-toast { position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); white-space: nowrap; z-index: 3; }
html[data-page="studio"] .lm-toast { position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); white-space: nowrap; z-index: 3; }
html[data-page="lab-a"] .lm-toast { position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); white-space: nowrap; z-index: 3; }
html[data-page="lab-b"] .lm-toast { position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); white-space: nowrap; z-index: 3; }
html[data-page="lab-c"] .lm-toast { position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); white-space: nowrap; z-index: 3; }
html[data-page="home"][dir="rtl"] .lm-toast { transform: translate(50%, 12px); }
html[data-page="studio"][dir="rtl"] .lm-toast { transform: translate(50%, 12px); }
html[data-page="lab-a"][dir="rtl"] .lm-toast { transform: translate(50%, 12px); }
html[data-page="lab-b"][dir="rtl"] .lm-toast { transform: translate(50%, 12px); }
html[data-page="lab-c"][dir="rtl"] .lm-toast { transform: translate(50%, 12px); }
html[data-page="home"] .lm-toast.show { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="studio"] .lm-toast.show { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="lab-a"] .lm-toast.show { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="lab-b"] .lm-toast.show { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="lab-c"] .lm-toast.show { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="home"][dir="rtl"] .lm-toast.show { transform: translate(50%, 0px); }
html[data-page="studio"][dir="rtl"] .lm-toast.show { transform: translate(50%, 0px); }
html[data-page="lab-a"][dir="rtl"] .lm-toast.show { transform: translate(50%, 0px); }
html[data-page="lab-b"][dir="rtl"] .lm-toast.show { transform: translate(50%, 0px); }
html[data-page="lab-c"][dir="rtl"] .lm-toast.show { transform: translate(50%, 0px); }
html[data-page="home"] .lm-cal-grid { flex: 1 1 0%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 190px; }
html[data-page="studio"] .lm-cal-grid { flex: 1 1 0%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 190px; }
html[data-page="lab-a"] .lm-cal-grid { flex: 1 1 0%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 190px; }
html[data-page="lab-b"] .lm-cal-grid { flex: 1 1 0%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 190px; }
html[data-page="lab-c"] .lm-cal-grid { flex: 1 1 0%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 190px; }
html[data-page="home"] .lm-col { display: flex; flex-direction: column; min-width: 0px; }
html[data-page="studio"] .lm-col { display: flex; flex-direction: column; min-width: 0px; }
html[data-page="lab-a"] .lm-col { display: flex; flex-direction: column; min-width: 0px; }
html[data-page="lab-b"] .lm-col { display: flex; flex-direction: column; min-width: 0px; }
html[data-page="lab-c"] .lm-col { display: flex; flex-direction: column; min-width: 0px; }
html[data-page="home"] .lm-col-day { text-align: center; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
html[data-page="studio"] .lm-col-day { text-align: center; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
html[data-page="lab-a"] .lm-col-day { text-align: center; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
html[data-page="lab-b"] .lm-col-day { text-align: center; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
html[data-page="lab-c"] .lm-col-day { text-align: center; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
html[data-page="home"] .lm-col-body { position: relative; flex: 1 1 0%; min-height: 170px; }
html[data-page="studio"] .lm-col-body { position: relative; flex: 1 1 0%; min-height: 170px; }
html[data-page="lab-a"] .lm-col-body { position: relative; flex: 1 1 0%; min-height: 170px; }
html[data-page="lab-b"] .lm-col-body { position: relative; flex: 1 1 0%; min-height: 170px; }
html[data-page="lab-c"] .lm-col-body { position: relative; flex: 1 1 0%; min-height: 170px; }
html[data-page="home"] .lm-slot { position: absolute; inset-inline: 0px; border-radius: 8px; padding: 6px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
html[data-page="studio"] .lm-slot { position: absolute; inset-inline: 0px; border-radius: 8px; padding: 6px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
html[data-page="lab-a"] .lm-slot { position: absolute; inset-inline: 0px; border-radius: 8px; padding: 6px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
html[data-page="lab-b"] .lm-slot { position: absolute; inset-inline: 0px; border-radius: 8px; padding: 6px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
html[data-page="lab-c"] .lm-slot { position: absolute; inset-inline: 0px; border-radius: 8px; padding: 6px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
html[data-page="home"] .lm-slot-svc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
html[data-page="studio"] .lm-slot-svc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
html[data-page="lab-a"] .lm-slot-svc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
html[data-page="lab-b"] .lm-slot-svc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
html[data-page="lab-c"] .lm-slot-svc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
html[data-page="home"] .lm-slot-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); line-height: 14px; }
html[data-page="studio"] .lm-slot-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); line-height: 14px; }
html[data-page="lab-a"] .lm-slot-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); line-height: 14px; }
html[data-page="lab-b"] .lm-slot-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); line-height: 14px; }
html[data-page="lab-c"] .lm-slot-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); line-height: 14px; }
html[data-page="home"] .lm-slot .lm-av-xs { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 18px; height: 18px; font-size: 8px; }
html[data-page="studio"] .lm-slot .lm-av-xs { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 18px; height: 18px; font-size: 8px; }
html[data-page="lab-a"] .lm-slot .lm-av-xs { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 18px; height: 18px; font-size: 8px; }
html[data-page="lab-b"] .lm-slot .lm-av-xs { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 18px; height: 18px; font-size: 8px; }
html[data-page="lab-c"] .lm-slot .lm-av-xs { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 18px; height: 18px; font-size: 8px; }
html[data-page="home"] .lm-slot-new { background: var(--surface-card); border: 1px dashed var(--border-brand); border-inline-start: 3px solid var(--surface-brand); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="studio"] .lm-slot-new { background: var(--surface-card); border: 1px dashed var(--border-brand); border-inline-start: 3px solid var(--surface-brand); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-a"] .lm-slot-new { background: var(--surface-card); border: 1px dashed var(--border-brand); border-inline-start: 3px solid var(--surface-brand); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-b"] .lm-slot-new { background: var(--surface-card); border: 1px dashed var(--border-brand); border-inline-start: 3px solid var(--surface-brand); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-c"] .lm-slot-new { background: var(--surface-card); border: 1px dashed var(--border-brand); border-inline-start: 3px solid var(--surface-brand); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="home"] .lm-slot-new .lm-av-xs { background: var(--surface-brand); }
html[data-page="studio"] .lm-slot-new .lm-av-xs { background: var(--surface-brand); }
html[data-page="lab-a"] .lm-slot-new .lm-av-xs { background: var(--surface-brand); }
html[data-page="lab-b"] .lm-slot-new .lm-av-xs { background: var(--surface-brand); }
html[data-page="lab-c"] .lm-slot-new .lm-av-xs { background: var(--surface-brand); }
html[data-page="home"] .lm-slot-new.show { opacity: 1; transform: none; }
html[data-page="studio"] .lm-slot-new.show { opacity: 1; transform: none; }
html[data-page="lab-a"] .lm-slot-new.show { opacity: 1; transform: none; }
html[data-page="lab-b"] .lm-slot-new.show { opacity: 1; transform: none; }
html[data-page="lab-c"] .lm-slot-new.show { opacity: 1; transform: none; }
html[data-page="home"] .lm-slot-new.ok { background: var(--surface-brand-wash); border-style: solid; }
html[data-page="studio"] .lm-slot-new.ok { background: var(--surface-brand-wash); border-style: solid; }
html[data-page="lab-a"] .lm-slot-new.ok { background: var(--surface-brand-wash); border-style: solid; }
html[data-page="lab-b"] .lm-slot-new.ok { background: var(--surface-brand-wash); border-style: solid; }
html[data-page="lab-c"] .lm-slot-new.ok { background: var(--surface-brand-wash); border-style: solid; }
html[data-page="home"] .lm-check { position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.4); }
html[data-page="studio"] .lm-check { position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.4); }
html[data-page="lab-a"] .lm-check { position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.4); }
html[data-page="lab-b"] .lm-check { position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.4); }
html[data-page="lab-c"] .lm-check { position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.4); }
html[data-page="home"] .lm-slot-new.ok .lm-check { transform: scale(1); }
html[data-page="studio"] .lm-slot-new.ok .lm-check { transform: scale(1); }
html[data-page="lab-a"] .lm-slot-new.ok .lm-check { transform: scale(1); }
html[data-page="lab-b"] .lm-slot-new.ok .lm-check { transform: scale(1); }
html[data-page="lab-c"] .lm-slot-new.ok .lm-check { transform: scale(1); }
html[data-page="home"] .lm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="studio"] .lm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="lab-a"] .lm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="lab-b"] .lm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="lab-c"] .lm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="home"] .lm-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 10px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="studio"] .lm-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 10px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="lab-a"] .lm-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 10px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="lab-b"] .lm-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 10px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="lab-c"] .lm-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 10px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="home"] .lm-chip.on { background: var(--surface-brand-wash); border-color: var(--border-brand); color: var(--text-brand); }
html[data-page="studio"] .lm-chip.on { background: var(--surface-brand-wash); border-color: var(--border-brand); color: var(--text-brand); }
html[data-page="lab-a"] .lm-chip.on { background: var(--surface-brand-wash); border-color: var(--border-brand); color: var(--text-brand); }
html[data-page="lab-b"] .lm-chip.on { background: var(--surface-brand-wash); border-color: var(--border-brand); color: var(--text-brand); }
html[data-page="lab-c"] .lm-chip.on { background: var(--surface-brand-wash); border-color: var(--border-brand); color: var(--text-brand); }
html[data-page="home"] .lm-rows { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; }
html[data-page="studio"] .lm-rows { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; }
html[data-page="lab-a"] .lm-rows { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; }
html[data-page="lab-b"] .lm-rows { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; }
html[data-page="lab-c"] .lm-rows { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; }
html[data-page="home"] .lm-rows.on { display: flex; animation: 0.4s ease 0s 1 normal both running lm-fade; }
html[data-page="studio"] .lm-rows.on { display: flex; animation: 0.4s ease 0s 1 normal both running lm-fade; }
html[data-page="lab-a"] .lm-rows.on { display: flex; animation: 0.4s ease 0s 1 normal both running lm-fade; }
html[data-page="lab-b"] .lm-rows.on { display: flex; animation: 0.4s ease 0s 1 normal both running lm-fade; }
html[data-page="lab-c"] .lm-rows.on { display: flex; animation: 0.4s ease 0s 1 normal both running lm-fade; }
html[data-page="home"] .lm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); min-width: 0px; }
html[data-page="studio"] .lm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); min-width: 0px; }
html[data-page="lab-a"] .lm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); min-width: 0px; }
html[data-page="lab-b"] .lm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); min-width: 0px; }
html[data-page="lab-c"] .lm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); min-width: 0px; }
html[data-page="home"] .lm-row-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="studio"] .lm-row-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="lab-a"] .lm-row-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="lab-b"] .lm-row-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="lab-c"] .lm-row-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="home"] .lm-tags { display: flex; gap: 4px; flex-shrink: 0; }
html[data-page="studio"] .lm-tags { display: flex; gap: 4px; flex-shrink: 0; }
html[data-page="lab-a"] .lm-tags { display: flex; gap: 4px; flex-shrink: 0; }
html[data-page="lab-b"] .lm-tags { display: flex; gap: 4px; flex-shrink: 0; }
html[data-page="lab-c"] .lm-tags { display: flex; gap: 4px; flex-shrink: 0; }
html[data-page="home"] .lm-tag { padding: 3px 8px; border-radius: 999px; background: var(--surface-canvas); color: var(--text-secondary); white-space: nowrap; }
html[data-page="studio"] .lm-tag { padding: 3px 8px; border-radius: 999px; background: var(--surface-canvas); color: var(--text-secondary); white-space: nowrap; }
html[data-page="lab-a"] .lm-tag { padding: 3px 8px; border-radius: 999px; background: var(--surface-canvas); color: var(--text-secondary); white-space: nowrap; }
html[data-page="lab-b"] .lm-tag { padding: 3px 8px; border-radius: 999px; background: var(--surface-canvas); color: var(--text-secondary); white-space: nowrap; }
html[data-page="lab-c"] .lm-tag { padding: 3px 8px; border-radius: 999px; background: var(--surface-canvas); color: var(--text-secondary); white-space: nowrap; }
html[data-page="home"] .lm-comm { width: 34px; text-align: end; color: var(--text-secondary); flex-shrink: 0; }
html[data-page="studio"] .lm-comm { width: 34px; text-align: end; color: var(--text-secondary); flex-shrink: 0; }
html[data-page="lab-a"] .lm-comm { width: 34px; text-align: end; color: var(--text-secondary); flex-shrink: 0; }
html[data-page="lab-b"] .lm-comm { width: 34px; text-align: end; color: var(--text-secondary); flex-shrink: 0; }
html[data-page="lab-c"] .lm-comm { width: 34px; text-align: end; color: var(--text-secondary); flex-shrink: 0; }
html[data-page="home"] .lm-toggle { width: 34px; height: 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; background: var(--surface-sunken); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
html[data-page="studio"] .lm-toggle { width: 34px; height: 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; background: var(--surface-sunken); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
html[data-page="lab-a"] .lm-toggle { width: 34px; height: 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; background: var(--surface-sunken); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
html[data-page="lab-b"] .lm-toggle { width: 34px; height: 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; background: var(--surface-sunken); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
html[data-page="lab-c"] .lm-toggle { width: 34px; height: 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; background: var(--surface-sunken); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
html[data-page="home"] .lm-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-card); box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="studio"] .lm-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-card); box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-a"] .lm-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-card); box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-b"] .lm-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-card); box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-c"] .lm-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface-card); box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="home"] .lm-toggle.on { background: var(--surface-brand); }
html[data-page="studio"] .lm-toggle.on { background: var(--surface-brand); }
html[data-page="lab-a"] .lm-toggle.on { background: var(--surface-brand); }
html[data-page="lab-b"] .lm-toggle.on { background: var(--surface-brand); }
html[data-page="lab-c"] .lm-toggle.on { background: var(--surface-brand); }
html[data-page="home"] .lm-toggle.on i { transform: translateX(14px); }
html[data-page="studio"] .lm-toggle.on i { transform: translateX(14px); }
html[data-page="lab-a"] .lm-toggle.on i { transform: translateX(14px); }
html[data-page="lab-b"] .lm-toggle.on i { transform: translateX(14px); }
html[data-page="lab-c"] .lm-toggle.on i { transform: translateX(14px); }
html[data-page="home"][dir="rtl"] .lm-toggle.on i { transform: translateX(-14px); }
html[data-page="studio"][dir="rtl"] .lm-toggle.on i { transform: translateX(-14px); }
html[data-page="lab-a"][dir="rtl"] .lm-toggle.on i { transform: translateX(-14px); }
html[data-page="lab-b"][dir="rtl"] .lm-toggle.on i { transform: translateX(-14px); }
html[data-page="lab-c"][dir="rtl"] .lm-toggle.on i { transform: translateX(-14px); }
html[data-page="home"] .lm-pos { flex-direction: row; gap: 16px; }
html[data-page="studio"] .lm-pos { flex-direction: row; gap: 16px; }
html[data-page="lab-a"] .lm-pos { flex-direction: row; gap: 16px; }
html[data-page="lab-b"] .lm-pos { flex-direction: row; gap: 16px; }
html[data-page="lab-c"] .lm-pos { flex-direction: row; gap: 16px; }
html[data-page="home"] .lm-pos-cart { flex: 1.15 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
html[data-page="studio"] .lm-pos-cart { flex: 1.15 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
html[data-page="lab-a"] .lm-pos-cart { flex: 1.15 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
html[data-page="lab-b"] .lm-pos-cart { flex: 1.15 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
html[data-page="lab-c"] .lm-pos-cart { flex: 1.15 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
html[data-page="home"] .lm-pos-pay { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0px; }
html[data-page="studio"] .lm-pos-pay { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0px; }
html[data-page="lab-a"] .lm-pos-pay { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0px; }
html[data-page="lab-b"] .lm-pos-pay { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0px; }
html[data-page="lab-c"] .lm-pos-pay { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0px; }
html[data-page="home"] .lm-client { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0px; }
html[data-page="studio"] .lm-client { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0px; }
html[data-page="lab-a"] .lm-client { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0px; }
html[data-page="lab-b"] .lm-client { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0px; }
html[data-page="lab-c"] .lm-client { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0px; }
html[data-page="home"] .lm-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="studio"] .lm-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="lab-a"] .lm-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="lab-b"] .lm-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="lab-c"] .lm-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="home"] .lm-line-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="studio"] .lm-line-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="lab-a"] .lm-line-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="lab-b"] .lm-line-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="lab-c"] .lm-line-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
html[data-page="home"] .lm-sum { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
html[data-page="studio"] .lm-sum { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
html[data-page="lab-a"] .lm-sum { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
html[data-page="lab-b"] .lm-sum { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
html[data-page="lab-c"] .lm-sum { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
html[data-page="home"] .lm-sum-row { display: flex; justify-content: space-between; align-items: center; }
html[data-page="studio"] .lm-sum-row { display: flex; justify-content: space-between; align-items: center; }
html[data-page="lab-a"] .lm-sum-row { display: flex; justify-content: space-between; align-items: center; }
html[data-page="lab-b"] .lm-sum-row { display: flex; justify-content: space-between; align-items: center; }
html[data-page="lab-c"] .lm-sum-row { display: flex; justify-content: space-between; align-items: center; }
html[data-page="home"] .lm-method { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; text-align: start; transition: border-color 0.2s, background 0.2s, color 0.2s; }
html[data-page="studio"] .lm-method { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; text-align: start; transition: border-color 0.2s, background 0.2s, color 0.2s; }
html[data-page="lab-a"] .lm-method { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; text-align: start; transition: border-color 0.2s, background 0.2s, color 0.2s; }
html[data-page="lab-b"] .lm-method { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; text-align: start; transition: border-color 0.2s, background 0.2s, color 0.2s; }
html[data-page="lab-c"] .lm-method { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; text-align: start; transition: border-color 0.2s, background 0.2s, color 0.2s; }
html[data-page="home"] .lm-method span { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="studio"] .lm-method span { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-a"] .lm-method span { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-b"] .lm-method span { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-c"] .lm-method span { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="home"] .lm-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-hairline); flex-shrink: 0; transition: border 0.2s, box-shadow 0.2s; }
html[data-page="studio"] .lm-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-hairline); flex-shrink: 0; transition: border 0.2s, box-shadow 0.2s; }
html[data-page="lab-a"] .lm-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-hairline); flex-shrink: 0; transition: border 0.2s, box-shadow 0.2s; }
html[data-page="lab-b"] .lm-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-hairline); flex-shrink: 0; transition: border 0.2s, box-shadow 0.2s; }
html[data-page="lab-c"] .lm-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-hairline); flex-shrink: 0; transition: border 0.2s, box-shadow 0.2s; }
html[data-page="home"] .lm-method.on { border-color: var(--border-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="studio"] .lm-method.on { border-color: var(--border-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-a"] .lm-method.on { border-color: var(--border-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-b"] .lm-method.on { border-color: var(--border-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="lab-c"] .lm-method.on { border-color: var(--border-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
html[data-page="home"] .lm-method.on .lm-radio { border: 4px solid var(--surface-brand); }
html[data-page="studio"] .lm-method.on .lm-radio { border: 4px solid var(--surface-brand); }
html[data-page="lab-a"] .lm-method.on .lm-radio { border: 4px solid var(--surface-brand); }
html[data-page="lab-b"] .lm-method.on .lm-radio { border: 4px solid var(--surface-brand); }
html[data-page="lab-c"] .lm-method.on .lm-radio { border: 4px solid var(--surface-brand); }
html[data-page="home"] .lm-pos-pay .lm-btn-l { margin-top: auto; }
html[data-page="studio"] .lm-pos-pay .lm-btn-l { margin-top: auto; }
html[data-page="lab-a"] .lm-pos-pay .lm-btn-l { margin-top: auto; }
html[data-page="lab-b"] .lm-pos-pay .lm-btn-l { margin-top: auto; }
html[data-page="lab-c"] .lm-pos-pay .lm-btn-l { margin-top: auto; }
html[data-page="home"] .lm-paid { position: absolute; inset: 0px; border-radius: 12px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.35s; }
html[data-page="studio"] .lm-paid { position: absolute; inset: 0px; border-radius: 12px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.35s; }
html[data-page="lab-a"] .lm-paid { position: absolute; inset: 0px; border-radius: 12px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.35s; }
html[data-page="lab-b"] .lm-paid { position: absolute; inset: 0px; border-radius: 12px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.35s; }
html[data-page="lab-c"] .lm-paid { position: absolute; inset: 0px; border-radius: 12px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.35s; }
html[data-page="home"] .lm-pos.paid .lm-paid { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html[data-page="studio"] .lm-pos.paid .lm-paid { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html[data-page="lab-a"] .lm-pos.paid .lm-paid { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html[data-page="lab-b"] .lm-pos.paid .lm-paid { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html[data-page="lab-c"] .lm-pos.paid .lm-paid { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html[data-page="home"] .lm-pos.paying .lm-btn-l { opacity: 0.6; }
html[data-page="studio"] .lm-pos.paying .lm-btn-l { opacity: 0.6; }
html[data-page="lab-a"] .lm-pos.paying .lm-btn-l { opacity: 0.6; }
html[data-page="lab-b"] .lm-pos.paying .lm-btn-l { opacity: 0.6; }
html[data-page="lab-c"] .lm-pos.paying .lm-btn-l { opacity: 0.6; }
html[data-page="home"] .lm-paid-check { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.4) 0.1s; }
html[data-page="studio"] .lm-paid-check { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.4) 0.1s; }
html[data-page="lab-a"] .lm-paid-check { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.4) 0.1s; }
html[data-page="lab-b"] .lm-paid-check { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.4) 0.1s; }
html[data-page="lab-c"] .lm-paid-check { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-brand); display: inline-flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.4) 0.1s; }
html[data-page="home"] .lm-pos.paid .lm-paid-check, html[data-page="home"] .lm-step.on .lm-paid-check { transform: scale(1); }
html[data-page="studio"] .lm-pos.paid .lm-paid-check, html[data-page="studio"] .lm-step.on .lm-paid-check { transform: scale(1); }
html[data-page="lab-a"] .lm-pos.paid .lm-paid-check, html[data-page="lab-a"] .lm-step.on .lm-paid-check { transform: scale(1); }
html[data-page="lab-b"] .lm-pos.paid .lm-paid-check, html[data-page="lab-b"] .lm-step.on .lm-paid-check { transform: scale(1); }
html[data-page="lab-c"] .lm-pos.paid .lm-paid-check, html[data-page="lab-c"] .lm-step.on .lm-paid-check { transform: scale(1); }
html[data-page="home"] .lm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-page="studio"] .lm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-page="lab-a"] .lm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-page="lab-b"] .lm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-page="lab-c"] .lm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-page="home"] .lm-kpi { padding: 10px 12px; border-radius: 12px; background: var(--surface-canvas); display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
html[data-page="studio"] .lm-kpi { padding: 10px 12px; border-radius: 12px; background: var(--surface-canvas); display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
html[data-page="lab-a"] .lm-kpi { padding: 10px 12px; border-radius: 12px; background: var(--surface-canvas); display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
html[data-page="lab-b"] .lm-kpi { padding: 10px 12px; border-radius: 12px; background: var(--surface-canvas); display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
html[data-page="lab-c"] .lm-kpi { padding: 10px 12px; border-radius: 12px; background: var(--surface-canvas); display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
html[data-page="home"] .lm-kpi-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-page="studio"] .lm-kpi-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-page="lab-a"] .lm-kpi-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-page="lab-b"] .lm-kpi-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-page="lab-c"] .lm-kpi-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-page="home"] .lm-delta { align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="studio"] .lm-delta { align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="lab-a"] .lm-delta { align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="lab-b"] .lm-delta { align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="lab-c"] .lm-delta { align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="home"] .lm-delta-down { background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="studio"] .lm-delta-down { background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="lab-a"] .lm-delta-down { background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="lab-b"] .lm-delta-down { background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="lab-c"] .lm-delta-down { background: rgba(46, 125, 50, 0.12); color: rgb(46, 125, 50); }
html[data-page="home"] .lm-chart { flex: 1 1 0%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; min-height: 120px; padding-top: 18px; }
html[data-page="studio"] .lm-chart { flex: 1 1 0%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; min-height: 120px; padding-top: 18px; }
html[data-page="lab-a"] .lm-chart { flex: 1 1 0%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; min-height: 120px; padding-top: 18px; }
html[data-page="lab-b"] .lm-chart { flex: 1 1 0%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; min-height: 120px; padding-top: 18px; }
html[data-page="lab-c"] .lm-chart { flex: 1 1 0%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; min-height: 120px; padding-top: 18px; }
html[data-page="home"] .lm-bar-col { display: flex; flex-direction: column; gap: 6px; min-width: 0px; height: 100%; }
html[data-page="studio"] .lm-bar-col { display: flex; flex-direction: column; gap: 6px; min-width: 0px; height: 100%; }
html[data-page="lab-a"] .lm-bar-col { display: flex; flex-direction: column; gap: 6px; min-width: 0px; height: 100%; }
html[data-page="lab-b"] .lm-bar-col { display: flex; flex-direction: column; gap: 6px; min-width: 0px; height: 100%; }
html[data-page="lab-c"] .lm-bar-col { display: flex; flex-direction: column; gap: 6px; min-width: 0px; height: 100%; }
html[data-page="home"] .lm-bar-track { flex: 1 1 0%; display: flex; align-items: flex-end; position: relative; min-height: 90px; }
html[data-page="studio"] .lm-bar-track { flex: 1 1 0%; display: flex; align-items: flex-end; position: relative; min-height: 90px; }
html[data-page="lab-a"] .lm-bar-track { flex: 1 1 0%; display: flex; align-items: flex-end; position: relative; min-height: 90px; }
html[data-page="lab-b"] .lm-bar-track { flex: 1 1 0%; display: flex; align-items: flex-end; position: relative; min-height: 90px; }
html[data-page="lab-c"] .lm-bar-track { flex: 1 1 0%; display: flex; align-items: flex-end; position: relative; min-height: 90px; }
html[data-page="home"] .lm-bar { width: 100%; border-radius: 6px 6px 0px 0px; background: var(--surface-brand-wash); position: relative; transform: scaleY(0.06); transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; cursor: default; }
html[data-page="studio"] .lm-bar { width: 100%; border-radius: 6px 6px 0px 0px; background: var(--surface-brand-wash); position: relative; transform: scaleY(0.06); transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; cursor: default; }
html[data-page="lab-a"] .lm-bar { width: 100%; border-radius: 6px 6px 0px 0px; background: var(--surface-brand-wash); position: relative; transform: scaleY(0.06); transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; cursor: default; }
html[data-page="lab-b"] .lm-bar { width: 100%; border-radius: 6px 6px 0px 0px; background: var(--surface-brand-wash); position: relative; transform: scaleY(0.06); transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; cursor: default; }
html[data-page="lab-c"] .lm-bar { width: 100%; border-radius: 6px 6px 0px 0px; background: var(--surface-brand-wash); position: relative; transform: scaleY(0.06); transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; cursor: default; }
html[data-page="home"] .lm-bar.on { background: var(--surface-brand); }
html[data-page="studio"] .lm-bar.on { background: var(--surface-brand); }
html[data-page="lab-a"] .lm-bar.on { background: var(--surface-brand); }
html[data-page="lab-b"] .lm-bar.on { background: var(--surface-brand); }
html[data-page="lab-c"] .lm-bar.on { background: var(--surface-brand); }
html[data-page="home"] .lm-bar:hover { background: var(--surface-brand); }
html[data-page="studio"] .lm-bar:hover { background: var(--surface-brand); }
html[data-page="lab-a"] .lm-bar:hover { background: var(--surface-brand); }
html[data-page="lab-b"] .lm-bar:hover { background: var(--surface-brand); }
html[data-page="lab-c"] .lm-bar:hover { background: var(--surface-brand); }
html[data-page="home"] .live-on .lm-bar { transform: none; }
html[data-page="studio"] .live-on .lm-bar { transform: none; }
html[data-page="lab-a"] .live-on .lm-bar { transform: none; }
html[data-page="lab-b"] .live-on .lm-bar { transform: none; }
html[data-page="lab-c"] .live-on .lm-bar { transform: none; }
html[data-page="home"] .lm-bar-col:nth-child(2) .lm-bar { transition-delay: 0.05s; }
html[data-page="studio"] .lm-bar-col:nth-child(2) .lm-bar { transition-delay: 0.05s; }
html[data-page="lab-a"] .lm-bar-col:nth-child(2) .lm-bar { transition-delay: 0.05s; }
html[data-page="lab-b"] .lm-bar-col:nth-child(2) .lm-bar { transition-delay: 0.05s; }
html[data-page="lab-c"] .lm-bar-col:nth-child(2) .lm-bar { transition-delay: 0.05s; }
html[data-page="home"] .lm-bar-col:nth-child(3) .lm-bar { transition-delay: 0.1s; }
html[data-page="studio"] .lm-bar-col:nth-child(3) .lm-bar { transition-delay: 0.1s; }
html[data-page="lab-a"] .lm-bar-col:nth-child(3) .lm-bar { transition-delay: 0.1s; }
html[data-page="lab-b"] .lm-bar-col:nth-child(3) .lm-bar { transition-delay: 0.1s; }
html[data-page="lab-c"] .lm-bar-col:nth-child(3) .lm-bar { transition-delay: 0.1s; }
html[data-page="home"] .lm-bar-col:nth-child(4) .lm-bar { transition-delay: 0.15s; }
html[data-page="studio"] .lm-bar-col:nth-child(4) .lm-bar { transition-delay: 0.15s; }
html[data-page="lab-a"] .lm-bar-col:nth-child(4) .lm-bar { transition-delay: 0.15s; }
html[data-page="lab-b"] .lm-bar-col:nth-child(4) .lm-bar { transition-delay: 0.15s; }
html[data-page="lab-c"] .lm-bar-col:nth-child(4) .lm-bar { transition-delay: 0.15s; }
html[data-page="home"] .lm-bar-col:nth-child(5) .lm-bar { transition-delay: 0.2s; }
html[data-page="studio"] .lm-bar-col:nth-child(5) .lm-bar { transition-delay: 0.2s; }
html[data-page="lab-a"] .lm-bar-col:nth-child(5) .lm-bar { transition-delay: 0.2s; }
html[data-page="lab-b"] .lm-bar-col:nth-child(5) .lm-bar { transition-delay: 0.2s; }
html[data-page="lab-c"] .lm-bar-col:nth-child(5) .lm-bar { transition-delay: 0.2s; }
html[data-page="home"] .lm-bar-col:nth-child(6) .lm-bar { transition-delay: 0.25s; }
html[data-page="studio"] .lm-bar-col:nth-child(6) .lm-bar { transition-delay: 0.25s; }
html[data-page="lab-a"] .lm-bar-col:nth-child(6) .lm-bar { transition-delay: 0.25s; }
html[data-page="lab-b"] .lm-bar-col:nth-child(6) .lm-bar { transition-delay: 0.25s; }
html[data-page="lab-c"] .lm-bar-col:nth-child(6) .lm-bar { transition-delay: 0.25s; }
html[data-page="home"] .lm-bar-col:nth-child(7) .lm-bar { transition-delay: 0.3s; }
html[data-page="studio"] .lm-bar-col:nth-child(7) .lm-bar { transition-delay: 0.3s; }
html[data-page="lab-a"] .lm-bar-col:nth-child(7) .lm-bar { transition-delay: 0.3s; }
html[data-page="lab-b"] .lm-bar-col:nth-child(7) .lm-bar { transition-delay: 0.3s; }
html[data-page="lab-c"] .lm-bar-col:nth-child(7) .lm-bar { transition-delay: 0.3s; }
html[data-page="home"] .lm-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 3px 7px; border-radius: 6px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-page="studio"] .lm-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 3px 7px; border-radius: 6px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-page="lab-a"] .lm-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 3px 7px; border-radius: 6px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-page="lab-b"] .lm-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 3px 7px; border-radius: 6px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-page="lab-c"] .lm-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 3px 7px; border-radius: 6px; background: var(--surface-inverse); color: var(--text-on-inverse); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-page="home"] .lm-bar:hover .lm-tip, html[data-page="home"] .lm-bar.on .lm-tip { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="studio"] .lm-bar:hover .lm-tip, html[data-page="studio"] .lm-bar.on .lm-tip { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="lab-a"] .lm-bar:hover .lm-tip, html[data-page="lab-a"] .lm-bar.on .lm-tip { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="lab-b"] .lm-bar:hover .lm-tip, html[data-page="lab-b"] .lm-bar.on .lm-tip { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="lab-c"] .lm-bar:hover .lm-tip, html[data-page="lab-c"] .lm-bar.on .lm-tip { opacity: 1; transform: translate(-50%, 0px); }
html[data-page="home"] .lm-bar-day { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="studio"] .lm-bar-day { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-a"] .lm-bar-day { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-b"] .lm-bar-day { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="lab-c"] .lm-bar-day { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page="home"] .lm-foot { display: flex; align-items: center; gap: 6px; }
html[data-page="studio"] .lm-foot { display: flex; align-items: center; gap: 6px; }
html[data-page="lab-a"] .lm-foot { display: flex; align-items: center; gap: 6px; }
html[data-page="lab-b"] .lm-foot { display: flex; align-items: center; gap: 6px; }
html[data-page="lab-c"] .lm-foot { display: flex; align-items: center; gap: 6px; }
html[data-page="home"] .lm-loyalty { flex-direction: row; gap: 16px; }
html[data-page="studio"] .lm-loyalty { flex-direction: row; gap: 16px; }
html[data-page="lab-a"] .lm-loyalty { flex-direction: row; gap: 16px; }
html[data-page="lab-b"] .lm-loyalty { flex-direction: row; gap: 16px; }
html[data-page="lab-c"] .lm-loyalty { flex-direction: row; gap: 16px; }
html[data-page="home"] .lm-loy-left { flex: 1.1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; position: relative; }
html[data-page="studio"] .lm-loy-left { flex: 1.1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; position: relative; }
html[data-page="lab-a"] .lm-loy-left { flex: 1.1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; position: relative; }
html[data-page="lab-b"] .lm-loy-left { flex: 1.1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; position: relative; }
html[data-page="lab-c"] .lm-loy-left { flex: 1.1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; position: relative; }
html[data-page="home"] .lm-loy-right { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
html[data-page="studio"] .lm-loy-right { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
html[data-page="lab-a"] .lm-loy-right { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
html[data-page="lab-b"] .lm-loy-right { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
html[data-page="lab-c"] .lm-loy-right { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
html[data-page="home"] .lm-tier { display: inline-flex; align-items: center; gap: 4px; color: var(--color-palette-gold-gold-500); }
html[data-page="studio"] .lm-tier { display: inline-flex; align-items: center; gap: 4px; color: var(--color-palette-gold-gold-500); }
html[data-page="lab-a"] .lm-tier { display: inline-flex; align-items: center; gap: 4px; color: var(--color-palette-gold-gold-500); }
html[data-page="lab-b"] .lm-tier { display: inline-flex; align-items: center; gap: 4px; color: var(--color-palette-gold-gold-500); }
html[data-page="lab-c"] .lm-tier { display: inline-flex; align-items: center; gap: 4px; color: var(--color-palette-gold-gold-500); }
html[data-page="home"] .lm-points { display: flex; align-items: baseline; gap: 6px; }
html[data-page="studio"] .lm-points { display: flex; align-items: baseline; gap: 6px; }
html[data-page="lab-a"] .lm-points { display: flex; align-items: baseline; gap: 6px; }
html[data-page="lab-b"] .lm-points { display: flex; align-items: baseline; gap: 6px; }
html[data-page="lab-c"] .lm-points { display: flex; align-items: baseline; gap: 6px; }
html[data-page="home"] .lm-points-n { font-variant-numeric: tabular-nums; font-size: 26px; line-height: 30px; }
html[data-page="studio"] .lm-points-n { font-variant-numeric: tabular-nums; font-size: 26px; line-height: 30px; }
html[data-page="lab-a"] .lm-points-n { font-variant-numeric: tabular-nums; font-size: 26px; line-height: 30px; }
html[data-page="lab-b"] .lm-points-n { font-variant-numeric: tabular-nums; font-size: 26px; line-height: 30px; }
html[data-page="lab-c"] .lm-points-n { font-variant-numeric: tabular-nums; font-size: 26px; line-height: 30px; }
html[data-page="home"] .lm-progress { height: 10px; border-radius: 999px; background: var(--surface-canvas); overflow: hidden; }
html[data-page="studio"] .lm-progress { height: 10px; border-radius: 999px; background: var(--surface-canvas); overflow: hidden; }
html[data-page="lab-a"] .lm-progress { height: 10px; border-radius: 999px; background: var(--surface-canvas); overflow: hidden; }
html[data-page="lab-b"] .lm-progress { height: 10px; border-radius: 999px; background: var(--surface-canvas); overflow: hidden; }
html[data-page="lab-c"] .lm-progress { height: 10px; border-radius: 999px; background: var(--surface-canvas); overflow: hidden; }
html[data-page="home"] .lm-progress-fill { height: 100%; width: 0px; border-radius: 999px; background: linear-gradient(90deg,var(--surface-brand),var(--color-palette-gold-gold-500)); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="studio"] .lm-progress-fill { height: 100%; width: 0px; border-radius: 999px; background: linear-gradient(90deg,var(--surface-brand),var(--color-palette-gold-gold-500)); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-a"] .lm-progress-fill { height: 100%; width: 0px; border-radius: 999px; background: linear-gradient(90deg,var(--surface-brand),var(--color-palette-gold-gold-500)); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-b"] .lm-progress-fill { height: 100%; width: 0px; border-radius: 999px; background: linear-gradient(90deg,var(--surface-brand),var(--color-palette-gold-gold-500)); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-c"] .lm-progress-fill { height: 100%; width: 0px; border-radius: 999px; background: linear-gradient(90deg,var(--surface-brand),var(--color-palette-gold-gold-500)); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="home"] .lm-reward { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); margin-top: auto; flex-wrap: wrap; }
html[data-page="studio"] .lm-reward { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); margin-top: auto; flex-wrap: wrap; }
html[data-page="lab-a"] .lm-reward { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); margin-top: auto; flex-wrap: wrap; }
html[data-page="lab-b"] .lm-reward { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); margin-top: auto; flex-wrap: wrap; }
html[data-page="lab-c"] .lm-reward { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); margin-top: auto; flex-wrap: wrap; }
html[data-page="home"] .lm-reward .lm-row-main { flex: 1 1 120px; }
html[data-page="studio"] .lm-reward .lm-row-main { flex: 1 1 120px; }
html[data-page="lab-a"] .lm-reward .lm-row-main { flex: 1 1 120px; }
html[data-page="lab-b"] .lm-reward .lm-row-main { flex: 1 1 120px; }
html[data-page="lab-c"] .lm-reward .lm-row-main { flex: 1 1 120px; }
html[data-page="home"] .lm-reward-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-page="studio"] .lm-reward-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-page="lab-a"] .lm-reward-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-page="lab-b"] .lm-reward-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-page="lab-c"] .lm-reward-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-page="home"] .lm-gift { position: relative; aspect-ratio: 1.6 / 1; border-radius: 14px; background: var(--surface-inverse); color: var(--text-on-inverse); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--elevation-02-raised); }
html[data-page="studio"] .lm-gift { position: relative; aspect-ratio: 1.6 / 1; border-radius: 14px; background: var(--surface-inverse); color: var(--text-on-inverse); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--elevation-02-raised); }
html[data-page="lab-a"] .lm-gift { position: relative; aspect-ratio: 1.6 / 1; border-radius: 14px; background: var(--surface-inverse); color: var(--text-on-inverse); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--elevation-02-raised); }
html[data-page="lab-b"] .lm-gift { position: relative; aspect-ratio: 1.6 / 1; border-radius: 14px; background: var(--surface-inverse); color: var(--text-on-inverse); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--elevation-02-raised); }
html[data-page="lab-c"] .lm-gift { position: relative; aspect-ratio: 1.6 / 1; border-radius: 14px; background: var(--surface-inverse); color: var(--text-on-inverse); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--elevation-02-raised); }
html[data-page="home"] .lm-gift-glow { position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 999px; background: var(--surface-brand); opacity: 0.55; }
html[data-page="studio"] .lm-gift-glow { position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 999px; background: var(--surface-brand); opacity: 0.55; }
html[data-page="lab-a"] .lm-gift-glow { position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 999px; background: var(--surface-brand); opacity: 0.55; }
html[data-page="lab-b"] .lm-gift-glow { position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 999px; background: var(--surface-brand); opacity: 0.55; }
html[data-page="lab-c"] .lm-gift-glow { position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 999px; background: var(--surface-brand); opacity: 0.55; }
html[data-page="home"] .lm-gift-logo { height: 24px; width: 50px; position: relative; }
html[data-page="studio"] .lm-gift-logo { height: 24px; width: 50px; position: relative; }
html[data-page="lab-a"] .lm-gift-logo { height: 24px; width: 50px; position: relative; }
html[data-page="lab-b"] .lm-gift-logo { height: 24px; width: 50px; position: relative; }
html[data-page="lab-c"] .lm-gift-logo { height: 24px; width: 50px; position: relative; }
html[data-page="home"] .lm-gift-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; }
html[data-page="studio"] .lm-gift-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; }
html[data-page="lab-a"] .lm-gift-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; }
html[data-page="lab-b"] .lm-gift-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; }
html[data-page="lab-c"] .lm-gift-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; }
html[data-page="home"] .lm-gift-label { color: var(--text-on-media-gold); }
html[data-page="studio"] .lm-gift-label { color: var(--text-on-media-gold); }
html[data-page="lab-a"] .lm-gift-label { color: var(--text-on-media-gold); }
html[data-page="lab-b"] .lm-gift-label { color: var(--text-on-media-gold); }
html[data-page="lab-c"] .lm-gift-label { color: var(--text-on-media-gold); }
html[data-page="home"] .lm-gift-code { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; white-space: nowrap; }
html[data-page="studio"] .lm-gift-code { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; white-space: nowrap; }
html[data-page="lab-a"] .lm-gift-code { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; white-space: nowrap; }
html[data-page="lab-b"] .lm-gift-code { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; white-space: nowrap; }
html[data-page="lab-c"] .lm-gift-code { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; white-space: nowrap; }
html[data-page="home"] .lm-gift-amt { color: rgb(255, 255, 255); }
html[data-page="studio"] .lm-gift-amt { color: rgb(255, 255, 255); }
html[data-page="lab-a"] .lm-gift-amt { color: rgb(255, 255, 255); }
html[data-page="lab-b"] .lm-gift-amt { color: rgb(255, 255, 255); }
html[data-page="lab-c"] .lm-gift-amt { color: rgb(255, 255, 255); }
html[data-page="home"] .lm-pkg { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); }
html[data-page="studio"] .lm-pkg { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); }
html[data-page="lab-a"] .lm-pkg { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); }
html[data-page="lab-b"] .lm-pkg { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); }
html[data-page="lab-c"] .lm-pkg { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); }
html[data-page="home"] .lm-pkg-dots { display: flex; gap: 4px; }
html[data-page="studio"] .lm-pkg-dots { display: flex; gap: 4px; }
html[data-page="lab-a"] .lm-pkg-dots { display: flex; gap: 4px; }
html[data-page="lab-b"] .lm-pkg-dots { display: flex; gap: 4px; }
html[data-page="lab-c"] .lm-pkg-dots { display: flex; gap: 4px; }
html[data-page="home"] .lm-pkg-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="studio"] .lm-pkg-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="lab-a"] .lm-pkg-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="lab-b"] .lm-pkg-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="lab-c"] .lm-pkg-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--surface-canvas); }
html[data-page="home"] .lm-pkg-dots i.on { background: var(--surface-brand); }
html[data-page="studio"] .lm-pkg-dots i.on { background: var(--surface-brand); }
html[data-page="lab-a"] .lm-pkg-dots i.on { background: var(--surface-brand); }
html[data-page="lab-b"] .lm-pkg-dots i.on { background: var(--surface-brand); }
html[data-page="lab-c"] .lm-pkg-dots i.on { background: var(--surface-brand); }
html[data-page="home"] .lm-site { gap: 0px; border-radius: 12px; border: 1px solid var(--border-subtle); overflow: hidden; }
html[data-page="studio"] .lm-site { gap: 0px; border-radius: 12px; border: 1px solid var(--border-subtle); overflow: hidden; }
html[data-page="lab-a"] .lm-site { gap: 0px; border-radius: 12px; border: 1px solid var(--border-subtle); overflow: hidden; }
html[data-page="lab-b"] .lm-site { gap: 0px; border-radius: 12px; border: 1px solid var(--border-subtle); overflow: hidden; }
html[data-page="lab-c"] .lm-site { gap: 0px; border-radius: 12px; border: 1px solid var(--border-subtle); overflow: hidden; }
html[data-page="home"] .lm-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle); }
html[data-page="studio"] .lm-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle); }
html[data-page="lab-a"] .lm-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle); }
html[data-page="lab-b"] .lm-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle); }
html[data-page="lab-c"] .lm-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle); }
html[data-page="home"] .lm-browser > span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-hairline); }
html[data-page="studio"] .lm-browser > span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-hairline); }
html[data-page="lab-a"] .lm-browser > span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-hairline); }
html[data-page="lab-b"] .lm-browser > span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-hairline); }
html[data-page="lab-c"] .lm-browser > span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-hairline); }
html[data-page="home"] .lm-url { flex: 1 1 0%; display: flex; align-items: center; gap: 6px; margin-inline-start: 6px; height: 24px; padding: 0px 10px; border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); direction: ltr; }
html[data-page="studio"] .lm-url { flex: 1 1 0%; display: flex; align-items: center; gap: 6px; margin-inline-start: 6px; height: 24px; padding: 0px 10px; border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); direction: ltr; }
html[data-page="lab-a"] .lm-url { flex: 1 1 0%; display: flex; align-items: center; gap: 6px; margin-inline-start: 6px; height: 24px; padding: 0px 10px; border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); direction: ltr; }
html[data-page="lab-b"] .lm-url { flex: 1 1 0%; display: flex; align-items: center; gap: 6px; margin-inline-start: 6px; height: 24px; padding: 0px 10px; border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); direction: ltr; }
html[data-page="lab-c"] .lm-url { flex: 1 1 0%; display: flex; align-items: center; gap: 6px; margin-inline-start: 6px; height: 24px; padding: 0px 10px; border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); direction: ltr; }
html[data-page="home"] .lm-site-body { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; padding: 12px; position: relative; min-height: 0px; }
html[data-page="studio"] .lm-site-body { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; padding: 12px; position: relative; min-height: 0px; }
html[data-page="lab-a"] .lm-site-body { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; padding: 12px; position: relative; min-height: 0px; }
html[data-page="lab-b"] .lm-site-body { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; padding: 12px; position: relative; min-height: 0px; }
html[data-page="lab-c"] .lm-site-body { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; padding: 12px; position: relative; min-height: 0px; }
html[data-page="home"] .lm-site-hero { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
html[data-page="studio"] .lm-site-hero { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
html[data-page="lab-a"] .lm-site-hero { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
html[data-page="lab-b"] .lm-site-hero { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
html[data-page="lab-c"] .lm-site-hero { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
html[data-page="home"] .lm-site-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand); flex-shrink: 0; }
html[data-page="studio"] .lm-site-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand); flex-shrink: 0; }
html[data-page="lab-a"] .lm-site-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand); flex-shrink: 0; }
html[data-page="lab-b"] .lm-site-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand); flex-shrink: 0; }
html[data-page="lab-c"] .lm-site-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-brand); flex-shrink: 0; }
html[data-page="home"] .lm-rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--surface-gold-wash); color: var(--text-primary); }
html[data-page="studio"] .lm-rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--surface-gold-wash); color: var(--text-primary); }
html[data-page="lab-a"] .lm-rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--surface-gold-wash); color: var(--text-primary); }
html[data-page="lab-b"] .lm-rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--surface-gold-wash); color: var(--text-primary); }
html[data-page="lab-c"] .lm-rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--surface-gold-wash); color: var(--text-primary); }
html[data-page="home"] .lm-step { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; animation: 0.35s ease 0s 1 normal both running lm-fade; }
html[data-page="studio"] .lm-step { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; animation: 0.35s ease 0s 1 normal both running lm-fade; }
html[data-page="lab-a"] .lm-step { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; animation: 0.35s ease 0s 1 normal both running lm-fade; }
html[data-page="lab-b"] .lm-step { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; animation: 0.35s ease 0s 1 normal both running lm-fade; }
html[data-page="lab-c"] .lm-step { display: none; flex-direction: column; gap: 8px; flex: 1 1 0%; animation: 0.35s ease 0s 1 normal both running lm-fade; }
html[data-page="home"] .lm-step.on { display: flex; }
html[data-page="studio"] .lm-step.on { display: flex; }
html[data-page="lab-a"] .lm-step.on { display: flex; }
html[data-page="lab-b"] .lm-step.on { display: flex; }
html[data-page="lab-c"] .lm-step.on { display: flex; }
html[data-page="home"] .lm-step-done { align-items: center; justify-content: center; text-align: center; gap: 6px; }
html[data-page="studio"] .lm-step-done { align-items: center; justify-content: center; text-align: center; gap: 6px; }
html[data-page="lab-a"] .lm-step-done { align-items: center; justify-content: center; text-align: center; gap: 6px; }
html[data-page="lab-b"] .lm-step-done { align-items: center; justify-content: center; text-align: center; gap: 6px; }
html[data-page="lab-c"] .lm-step-done { align-items: center; justify-content: center; text-align: center; gap: 6px; }
html[data-page="home"] .lm-svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="studio"] .lm-svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="lab-a"] .lm-svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="lab-b"] .lm-svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="lab-c"] .lm-svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-canvas); }
html[data-page="home"] .lm-times { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="studio"] .lm-times { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="lab-a"] .lm-times { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="lab-b"] .lm-times { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="lab-c"] .lm-times { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-page="home"] .lm-time { height: 32px; padding: 0px 12px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; direction: ltr; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="studio"] .lm-time { height: 32px; padding: 0px 12px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; direction: ltr; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="lab-a"] .lm-time { height: 32px; padding: 0px 12px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; direction: ltr; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="lab-b"] .lm-time { height: 32px; padding: 0px 12px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; direction: ltr; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="lab-c"] .lm-time { height: 32px; padding: 0px 12px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; cursor: pointer; direction: ltr; transition: background 0.2s, color 0.2s, border-color 0.2s; }
html[data-page="home"] .lm-time.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
html[data-page="studio"] .lm-time.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
html[data-page="lab-a"] .lm-time.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
html[data-page="lab-b"] .lm-time.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
html[data-page="lab-c"] .lm-time.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
html[data-page="home"] .lm-step[data-step="2"] .lm-btn-l { margin-top: auto; justify-content: center; }
html[data-page="studio"] .lm-step[data-step="2"] .lm-btn-l { margin-top: auto; justify-content: center; }
html[data-page="lab-a"] .lm-step[data-step="2"] .lm-btn-l { margin-top: auto; justify-content: center; }
html[data-page="lab-b"] .lm-step[data-step="2"] .lm-btn-l { margin-top: auto; justify-content: center; }
html[data-page="lab-c"] .lm-step[data-step="2"] .lm-btn-l { margin-top: auto; justify-content: center; }
html[data-page="home"] .labb-price { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; border-radius: 28px; overflow: hidden; box-shadow: var(--elevation-02-raised); background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-neutral-neutral-900); }
html[data-page="lab-b"] .labb-price { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; border-radius: 28px; overflow: hidden; box-shadow: var(--elevation-02-raised); background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-neutral-neutral-900); }
html[data-page="home"] .labb-price-dark { position: relative; background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-neutral-neutral-900); min-height: 320px; padding: 64px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
html[data-page="lab-b"] .labb-price-dark { position: relative; background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-neutral-neutral-900); min-height: 320px; padding: 64px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
html[data-page="home"] .labb-price-ring { position: absolute; top: 50%; inset-inline-start: 50%; width: 264px; height: 264px; border-radius: 999px; border: 1px solid var(--color-palette-lavender-lavender-600); opacity: 0.55; transform: translate(-50%, -50%); pointer-events: none; }
html[data-page="lab-b"] .labb-price-ring { position: absolute; top: 50%; inset-inline-start: 50%; width: 264px; height: 264px; border-radius: 999px; border: 1px solid var(--color-palette-lavender-lavender-600); opacity: 0.55; transform: translate(-50%, -50%); pointer-events: none; }
html[data-page="home"][dir="rtl"] .labb-price-ring { transform: translate(50%, -50%); }
html[data-page="lab-b"][dir="rtl"] .labb-price-ring { transform: translate(50%, -50%); }
html[data-page="home"] .labb-price-sar { display: inline-flex; align-items: flex-start; margin-block-start: 26px; transform: scale(1.4); transform-origin: center top; --icon-primary: var(--color-palette-lavender-lavender-600); color: var(--icon-primary); }
html[data-page="lab-b"] .labb-price-sar { display: inline-flex; align-items: flex-start; margin-block-start: 26px; transform: scale(1.4); transform-origin: center top; --icon-primary: var(--color-palette-lavender-lavender-600); color: var(--icon-primary); }
html[data-page="home"] .labb-price-sar div { height: 24px; }
html[data-page="lab-b"] .labb-price-sar div { height: 24px; }
html[data-page="home"] .labb-price-num { display: flex; align-items: flex-start; gap: 10px; position: relative; }
html[data-page="lab-b"] .labb-price-num { display: flex; align-items: flex-start; gap: 10px; position: relative; }
html[data-page="home"] .labb-price-forever { color: var(--color-palette-lavender-lavender-600); text-align: center; position: relative; }
html[data-page="lab-b"] .labb-price-forever { color: var(--color-palette-lavender-lavender-600); text-align: center; position: relative; }
html[data-page="home"] .labb-price-light { background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-neutral-neutral-900); padding: 56px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center; }
html[data-page="lab-b"] .labb-price-light { background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-neutral-neutral-900); padding: 56px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center; }
html[data-page="home"] .labb-price-light h2 { color: var(--color-palette-neutral-neutral-900); font-size: 48px; line-height: 1.1; }
html[data-page="lab-b"] .labb-price-light h2 { color: var(--color-palette-neutral-neutral-900); font-size: 48px; line-height: 1.1; }
html[data-page="home"] .labb-price-eyebrow { color: var(--color-palette-lavender-lavender-600); letter-spacing: 0.1em; }
html[data-page="lab-b"] .labb-price-eyebrow { color: var(--color-palette-lavender-lavender-600); letter-spacing: 0.1em; }
html[data-page="home"] .labb-price-body { color: var(--text-secondary); max-width: 640px; font-size: 20px !important; line-height: 30px !important; }
html[data-page="lab-b"] .labb-price-body { color: var(--text-secondary); max-width: 640px; font-size: 20px !important; line-height: 30px !important; }
html[data-page="home"] .labb-price-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; height: 48px; padding: 0px 22px; border-radius: 999px; background: var(--color-palette-lavender-lavender-700); color: var(--color-palette-base-white); text-decoration: none; transition: transform 0.2s, background 0.2s; }
html[data-page="lab-b"] .labb-price-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; height: 48px; padding: 0px 22px; border-radius: 999px; background: var(--color-palette-lavender-lavender-700); color: var(--color-palette-base-white); text-decoration: none; transition: transform 0.2s, background 0.2s; }
html[data-page="home"] .labb-price-cta:hover { transform: translateY(-2px); background: var(--color-palette-lavender-lavender-800); }
html[data-page="lab-b"] .labb-price-cta:hover { transform: translateY(-2px); background: var(--color-palette-lavender-lavender-800); }
html[data-page="studio"] .studio-grid .labb-mock { min-height: 320px; }
html[data-page="studio"] .studio-time { font-variant-numeric: tabular-nums; }
html[data-page="studio"] .labb-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
html[data-page="studio"] .labb-cell { border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell { border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s; }
html[data-page="studio"] .labb-cell:hover { transform: translateY(-6px); box-shadow: var(--elevation-03-floating); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell:hover { transform: translateY(-6px); box-shadow: var(--elevation-03-floating); }
html[data-page="studio"] .labb-cell-0 { grid-column: span 4; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-0 { grid-column: span 4; }
html[data-page="studio"] .labb-cell-1 { grid-column: span 2; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-1 { grid-column: span 2; }
html[data-page="studio"] .labb-cell-2, html[data-page="studio"] .labb-cell-3, html[data-page="studio"] .labb-cell-4, html[data-page="studio"] .labb-cell-5 { grid-column: span 3; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-2, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-3, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-4, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-5 { grid-column: span 3; }
html[data-page="studio"] .labb-mock { height: auto; min-height: 300px; padding: 22px; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; background: var(--surface-canvas); flex-shrink: 0; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-mock { height: auto; min-height: 300px; padding: 22px; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; background: var(--surface-canvas); flex-shrink: 0; }
html[data-page="studio"] .labb-cell-1 .labb-mock { padding: 16px; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-1 .labb-mock { padding: 16px; }
html[data-page="studio"] .labb-copy { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-copy { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
html[data-page="studio"] .labb-pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface-brand-wash); color: var(--text-brand); align-self: flex-start; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface-brand-wash); color: var(--text-brand); align-self: flex-start; }
html[data-page="studio"] .labb-cell { box-shadow: var(--elevation-01-card); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell { box-shadow: var(--elevation-01-card); }
html[data-page="studio"] .labb-cell.light { background: var(--color-palette-base-white); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.light { background: var(--color-palette-base-white); }
html[data-page="studio"] .labb-cell.lav { background: var(--color-palette-lavender-lavender-200); border-color: var(--color-palette-lavender-lavender-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.lav { background: var(--color-palette-lavender-lavender-200); border-color: var(--color-palette-lavender-lavender-300); }
html[data-page="studio"] .labb-cell.cream { background: var(--color-palette-base-cream); border-color: var(--color-palette-gold-gold-400); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.cream { background: var(--color-palette-base-cream); border-color: var(--color-palette-gold-gold-400); }
html[data-page="studio"] .labb-cell.dark { background: var(--color-palette-neutral-neutral-900); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07),var(--elevation-02-raised); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark { background: var(--color-palette-neutral-neutral-900); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07),var(--elevation-02-raised); }
html[data-page="studio"] .labb-cell.plum { background: var(--surface-brand); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12),var(--elevation-02-raised); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum { background: var(--surface-brand); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12),var(--elevation-02-raised); }
html[data-page="studio"] .labb-cell.dark:hover, html[data-page="studio"] .labb-cell.plum:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14),var(--elevation-03-floating); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark:hover, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14),var(--elevation-03-floating); }
html[data-page="studio"] .labb-cell.dark .labb-copy h3, html[data-page="studio"] .labb-cell.plum .labb-copy h3 { color: var(--color-palette-base-white) !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .labb-copy h3, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .labb-copy h3 { color: var(--color-palette-base-white) !important; }
html[data-page="studio"] .labb-cell.dark .labb-copy p, html[data-page="studio"] .labb-cell.plum .labb-copy p { color: rgba(255, 255, 255, 0.75) !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .labb-copy p, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .labb-copy p { color: rgba(255, 255, 255, 0.75) !important; }
html[data-page="studio"] .labb-cell.light { --surface-brand-wash: var(--color-palette-primary-primary-200); --surface-accent-wash: var(--color-palette-lavender-lavender-300); --surface-gold-wash: var(--color-palette-gold-gold-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.light { --surface-brand-wash: var(--color-palette-primary-primary-200); --surface-accent-wash: var(--color-palette-lavender-lavender-300); --surface-gold-wash: var(--color-palette-gold-gold-300); }
html[data-page="studio"] .labb-cell.light .labb-mock { background: var(--surface-canvas) !important; border-color: var(--border-subtle) !important; box-shadow: none !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.light .labb-mock { background: var(--surface-canvas) !important; border-color: var(--border-subtle) !important; box-shadow: none !important; }
html[data-page="studio"] .labb-cell.light .labb-pill { color: var(--color-palette-primary-primary-800); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.light .labb-pill { color: var(--color-palette-primary-primary-800); }
html[data-page="studio"] .labb-cell.lav { --surface-canvas: var(--color-palette-lavender-lavender-200); --surface-sunken: var(--color-palette-lavender-lavender-300); --border-subtle: var(--color-palette-lavender-lavender-300); --border-hairline: var(--color-palette-lavender-lavender-400); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.lav { --surface-canvas: var(--color-palette-lavender-lavender-200); --surface-sunken: var(--color-palette-lavender-lavender-300); --border-subtle: var(--color-palette-lavender-lavender-300); --border-hairline: var(--color-palette-lavender-lavender-400); }
html[data-page="studio"] .labb-cell.lav .labb-mock { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.lav .labb-mock { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-page="studio"] .labb-cell.lav .labb-pill { background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-lavender-lavender-700); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.lav .labb-pill { background: var(--color-palette-lavender-lavender-300); color: var(--color-palette-lavender-lavender-700); }
html[data-page="studio"] .labb-cell.lav .lm-chip.on { background: var(--color-palette-lavender-lavender-500); border-color: var(--color-palette-lavender-lavender-500); color: var(--color-palette-neutral-neutral-900); --icon-brand: var(--color-palette-neutral-neutral-900); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.lav .lm-chip.on { background: var(--color-palette-lavender-lavender-500); border-color: var(--color-palette-lavender-lavender-500); color: var(--color-palette-neutral-neutral-900); --icon-brand: var(--color-palette-neutral-neutral-900); }
html[data-page="studio"] .labb-cell.dark { --surface-card: rgba(255,255,255,0.10); --surface-canvas: rgba(255,255,255,0.05); --surface-sunken: rgba(255,255,255,0.16); --text-primary: var(--color-palette-base-white); --text-secondary: rgba(255,255,255,0.72); --text-muted: rgba(255,255,255,0.58); --text-brand: var(--color-palette-primary-primary-200); --border-subtle: rgba(255,255,255,0.12); --border-hairline: rgba(255,255,255,0.24); --border-brand: var(--color-palette-primary-primary-300); --surface-brand-wash: rgba(255,255,255,0.12); color: var(--color-palette-base-white); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark { --surface-card: rgba(255,255,255,0.10); --surface-canvas: rgba(255,255,255,0.05); --surface-sunken: rgba(255,255,255,0.16); --text-primary: var(--color-palette-base-white); --text-secondary: rgba(255,255,255,0.72); --text-muted: rgba(255,255,255,0.58); --text-brand: var(--color-palette-primary-primary-200); --border-subtle: rgba(255,255,255,0.12); --border-hairline: rgba(255,255,255,0.24); --border-brand: var(--color-palette-primary-primary-300); --surface-brand-wash: rgba(255,255,255,0.12); color: var(--color-palette-base-white); }
html[data-page="studio"] .labb-cell.dark .labb-mock { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .labb-mock { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-page="studio"] .labb-cell.dark .labb-pill { background: rgba(255, 255, 255, 0.1); color: var(--color-palette-primary-primary-200); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .labb-pill { background: rgba(255, 255, 255, 0.1); color: var(--color-palette-primary-primary-200); }
html[data-page="studio"] .labb-cell.dark .lm-pos .lm-sum-row:last-child { color: var(--color-palette-gold-gold-400); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-pos .lm-sum-row:last-child { color: var(--color-palette-gold-gold-400); }
html[data-page="studio"] .labb-cell.dark .lm-paid { background: var(--color-palette-neutral-neutral-900); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-paid { background: var(--color-palette-neutral-neutral-900); }
html[data-page="studio"] .labb-cell.dark .lm-method.on .lm-radio { border-color: var(--color-palette-primary-primary-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-method.on .lm-radio { border-color: var(--color-palette-primary-primary-300); }
html[data-page="studio"] .labb-cell.dark .lm-delta { background: rgba(108, 233, 166, 0.16); color: var(--color-palette-success-success-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-delta { background: rgba(108, 233, 166, 0.16); color: var(--color-palette-success-success-300); }
html[data-page="studio"] .labb-cell.dark .lm-bar-track { background: rgba(255, 255, 255, 0.07); border-radius: 8px 8px 0px 0px; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-bar-track { background: rgba(255, 255, 255, 0.07); border-radius: 8px 8px 0px 0px; }
html[data-page="studio"] .labb-cell.dark .lm-bar { background: var(--color-palette-lavender-lavender-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-bar { background: var(--color-palette-lavender-lavender-300); }
html[data-page="studio"] .labb-cell.dark .lm-bar-col:nth-child(3n+2) .lm-bar { background: var(--color-palette-primary-primary-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-bar-col:nth-child(3n+2) .lm-bar { background: var(--color-palette-primary-primary-300); }
html[data-page="studio"] .labb-cell.dark .lm-bar-col:nth-child(3n) .lm-bar { background: var(--color-palette-gold-gold-400); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-bar-col:nth-child(3n) .lm-bar { background: var(--color-palette-gold-gold-400); }
html[data-page="studio"] .labb-cell.dark .lm-bar.on, html[data-page="studio"] .labb-cell.dark .lm-bar:hover { background: var(--color-palette-gold-gold-500); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-bar.on, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-bar:hover { background: var(--color-palette-gold-gold-500); }
html[data-page="studio"] .labb-cell.dark .lm-tip { background: var(--color-palette-base-white); color: var(--color-palette-neutral-neutral-900); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.dark .lm-tip { background: var(--color-palette-base-white); color: var(--color-palette-neutral-neutral-900); }
html[data-page="studio"] .labb-cell.plum { --surface-card: rgba(255,255,255,0.14); --surface-canvas: rgba(255,255,255,0.18); --surface-sunken: rgba(255,255,255,0.20); --text-primary: var(--color-palette-base-white); --text-secondary: rgba(255,255,255,0.75); --text-muted: rgba(255,255,255,0.65); --text-brand: var(--color-palette-base-white); --border-subtle: rgba(255,255,255,0.22); --border-hairline: rgba(255,255,255,0.28); --surface-brand-wash: rgba(255,255,255,0.16); color: var(--color-palette-base-white); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum { --surface-card: rgba(255,255,255,0.14); --surface-canvas: rgba(255,255,255,0.18); --surface-sunken: rgba(255,255,255,0.20); --text-primary: var(--color-palette-base-white); --text-secondary: rgba(255,255,255,0.75); --text-muted: rgba(255,255,255,0.65); --text-brand: var(--color-palette-base-white); --border-subtle: rgba(255,255,255,0.22); --border-hairline: rgba(255,255,255,0.28); --surface-brand-wash: rgba(255,255,255,0.16); color: var(--color-palette-base-white); }
html[data-page="studio"] .labb-cell.plum .labb-mock { --surface-brand: var(--color-palette-primary-primary-800); background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .labb-mock { --surface-brand: var(--color-palette-primary-primary-800); background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-page="studio"] .labb-cell.plum .labb-pill { background: rgba(255, 255, 255, 0.16); color: var(--color-palette-gold-gold-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .labb-pill { background: rgba(255, 255, 255, 0.16); color: var(--color-palette-gold-gold-300); }
html[data-page="studio"] .labb-cell.plum .lm-tier { color: var(--color-palette-gold-gold-300); --icon-gold: var(--color-palette-gold-gold-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-tier { color: var(--color-palette-gold-gold-300); --icon-gold: var(--color-palette-gold-gold-300); }
html[data-page="studio"] .labb-cell.plum .lm-points-n { color: var(--color-palette-gold-gold-500); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-points-n { color: var(--color-palette-gold-gold-500); }
html[data-page="studio"] .labb-cell.plum .lm-progress-fill { background: var(--color-palette-base-white); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-progress-fill { background: var(--color-palette-base-white); }
html[data-page="studio"] .labb-cell.plum .lm-gift-glow { background: var(--color-palette-gold-gold-500); opacity: 0.55; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-gift-glow { background: var(--color-palette-gold-gold-500); opacity: 0.55; }
html[data-page="studio"] .labb-cell.plum .lm-gift-amt { color: var(--color-palette-gold-gold-500); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-gift-amt { color: var(--color-palette-gold-gold-500); }
html[data-page="studio"] .labb-cell.plum .lm-pkg-dots i.on { background: var(--color-palette-gold-gold-300); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-pkg-dots i.on { background: var(--color-palette-gold-gold-300); }
html[data-page="studio"] .labb-cell.plum .lm-btn-ghost { background: rgba(255, 255, 255, 0.16); color: var(--color-palette-base-white); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-btn-ghost { background: rgba(255, 255, 255, 0.16); color: var(--color-palette-base-white); }
html[data-page="studio"] .labb-cell.plum .lm-btn-ghost:hover { background: rgba(255, 255, 255, 0.26); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.plum .lm-btn-ghost:hover { background: rgba(255, 255, 255, 0.26); }
html[data-page="studio"] .labb-cell.cream .labb-mock { background: var(--color-palette-base-white) !important; border-color: var(--border-subtle) !important; box-shadow: var(--elevation-01-card) !important; }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.cream .labb-mock { background: var(--color-palette-base-white) !important; border-color: var(--border-subtle) !important; box-shadow: var(--elevation-01-card) !important; }
html[data-page="studio"] .labb-cell.cream .labb-pill { background: var(--color-palette-gold-gold-300); color: var(--color-palette-primary-primary-800); }
:is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell.cream .labb-pill { background: var(--color-palette-gold-gold-300); color: var(--color-palette-primary-primary-800); }
html[data-page="discover"] body { background: var(--surface-card); height: 100vh; overflow: hidden; }
html[data-page="discover"] .glomi-phone { scale: calc(min(676px, -116px + 100vh) * (1 / 676px)); transform-origin: center center; }
html[data-page="book-a-demo"] input[type="search"].glomi-field::-webkit-search-cancel-button, html[data-page="book-a-demo"] input[type="search"].glomi-field::-webkit-search-decoration, html[data-page="book-a-demo"] input[type="search"].glomi-field::-webkit-search-results-button, html[data-page="book-a-demo"] input[type="search"].glomi-field::-webkit-search-results-decoration { appearance: none; display: none; }
html[data-page="book-a-demo"] input[type="number"].glomi-field::-webkit-outer-spin-button, html[data-page="book-a-demo"] input[type="number"].glomi-field::-webkit-inner-spin-button { appearance: none; margin: 0px; }
html[data-page="book-a-demo"] input[type="number"].glomi-field { }
html[data-page="terms"], html[data-page="terms"] body { height: 100%; margin: 0px; }
html[data-page="privacy"], html[data-page="privacy"] body { height: 100%; margin: 0px; }
html[data-page="cookies"], html[data-page="cookies"] body { height: 100%; margin: 0px; }
html[data-page="terms"] #dc-root, html[data-page="terms"] #dc-root > .sc-host { height: 100%; }
html[data-page="privacy"] #dc-root, html[data-page="privacy"] #dc-root > .sc-host { height: 100%; }
html[data-page="cookies"] #dc-root, html[data-page="cookies"] #dc-root > .sc-host { height: 100%; }
html[data-page="lab-a"] .laba-switch { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
html[data-page="lab-a"] .laba-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
html[data-page="lab-a"] .laba-switch { margin-top: 4px; }
html[data-page="lab-a"] .laba-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0px 16px 0px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--color-palette-base-white); cursor: pointer; font-family: inherit; transition: color 0.2s, border-color 0.2s, background 0.2s; }
html[data-page="lab-a"] .laba-tab:not(.on):hover { background: rgba(255, 255, 255, 0.12); }
html[data-page="lab-a"][dir="rtl"] .laba-tab { padding: 0px 10px 0px 16px; }
html[data-page="lab-a"] .laba-tab-ico { width: 28px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; }
html[data-page="lab-a"] .laba-tab .laba-tab-ico .glomi-icon { color: var(--color-palette-base-white) !important; }
html[data-page="lab-a"] .laba-tab.on { color: var(--text-brand); border-color: var(--color-palette-base-white); background: var(--color-palette-base-white); }
html[data-page="lab-a"] .laba-tab.on .laba-tab-ico { background: var(--surface-brand-wash); }
html[data-page="lab-a"] .laba-tab.on .laba-tab-ico .glomi-icon { color: var(--text-brand) !important; }
html[data-page="lab-a"] .laba-tab-bar { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 2px; background: var(--surface-brand); transform: scaleX(0); transform-origin: 0px 50%; }
html[data-page="lab-a"][dir="rtl"] .laba-tab-bar { transform-origin: 100% 50%; }
html[data-page="lab-a"] .auto .laba-tab.on .laba-tab-bar { animation: 5s linear 0s 1 normal forwards running laba-progress; }
html[data-page="lab-a"] .laba-panels { position: relative; min-height: 220px; }
html[data-page="lab-a"] .laba-panel { position: absolute; inset: 0px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.45s, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.45s; }
html[data-page="lab-a"] .laba-panel.on { position: relative; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html[data-page="lab-a"] .laba-media { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, 0.06); box-shadow: rgba(0, 0, 0, 0.35) 0px 24px 60px; }
html[data-page="lab-a"] .laba-img { position: absolute; inset: 0px; opacity: 0; transform: scale(1.04); transition: opacity 0.8s, transform 6s linear; }
html[data-page="lab-a"] .laba-img.on { opacity: 1; transform: scale(1.1); }
html[data-page="lab-a"] .laba-img image-slot, html[data-page="lab-a"] .laba-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-page="lab-a"] .laba-explorer { display: grid; grid-template-columns: minmax(260px, 0.75fr) 1.25fr; grid-template-rows: repeat(6, max-content) 1fr; gap: 16px 32px; align-items: start; }
html[data-page="lab-a"] .laba-wrap { display: contents; }
html[data-page="lab-a"] .laba-item { grid-column: 1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 16px 18px; border-radius: 16px; border: 1.5px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background 0.25s, color 0.25s, border-color 0.25s; }
html[data-page="lab-a"] .laba-item:hover { background: var(--surface-card); }
html[data-page="lab-a"] .laba-item.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--color-palette-base-white); font-weight: 600; box-shadow: var(--elevation-02-raised); }
html[data-page="lab-a"] .laba-item-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-brand-wash); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-page="lab-a"] .laba-item.on .laba-item-ico { background: rgba(255, 255, 255, 0.18); }
html[data-page="lab-a"] .laba-item.on .laba-item-bar { background: var(--color-palette-gold-gold-300); }
html[data-page="lab-a"] .laba-item.on .laba-item-ico .glomi-icon { color: var(--color-palette-base-white) !important; }
html[data-page="lab-a"] .laba-item-bar { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 2px; background: var(--surface-brand); transform: scaleX(0); transform-origin: 0px 50%; }
html[data-page="lab-a"][dir="rtl"] .laba-item-bar { transform-origin: 100% 50%; }
html[data-page="lab-a"] .auto .laba-item.on .laba-item-bar { animation: 6s linear 0s 1 normal forwards running laba-progress6; }
html[data-page="lab-a"] .laba-pane { grid-area: 1 / 2 / span 7; display: flex; flex-direction: column; gap: 24px; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.985); transition: opacity 0.45s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.45s; pointer-events: none; }
html[data-page="lab-a"] .laba-pane.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto; position: relative; z-index: 1; }
html[data-page="lab-a"] .laba-pane .lab-live { aspect-ratio: 16 / 10; }
html[data-page="lab-a"] .laba-pane-copy { display: flex; flex-direction: column; gap: 12px; padding: 0px 8px; }
html[data-page="lab-b"] .labb-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
html[data-page="lab-b"] .labb-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--surface-canvas); isolation: isolate; }
html[data-page="lab-b"] .labb-tile-media { position: absolute; inset: 0px; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-b"] .labb-tile-media image-slot, html[data-page="lab-b"] .labb-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-page="lab-b"] .labb-tile:hover .labb-tile-media { transform: scale(1.06); }
html[data-page="lab-b"] .labb-tile::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(28, 12, 14, 0) 35%, rgba(28, 12, 14, 0.55) 65%, rgba(28, 12, 14, 0.86) 100%); z-index: 1; transition: opacity 0.4s; }
html[data-page="lab-b"] .labb-tile-ico { position: absolute; top: 16px; inset-inline-start: 16px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2; }
html[data-page="lab-b"] .labb-tile-copy { position: absolute; inset-inline: 0px; bottom: 0px; padding: 24px; z-index: 2; color: rgb(255, 255, 255); display: flex; flex-direction: column; gap: 8px; transform: translateY(var(--labb-hide,0)); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-page="lab-b"] .labb-tile-name { margin: 0px; color: rgb(255, 255, 255); font-size: 30px; line-height: 36px; }
html[data-page="lab-b"] .labb-tile-title { color: rgba(255, 255, 255, 0.92); }
html[data-page="lab-b"] .labb-tile-body { margin: 0px; color: rgba(255, 255, 255, 0.78); max-height: 0px; opacity: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s 0.05s; }
html[data-page="lab-b"] .labb-tile:hover .labb-tile-body, html[data-page="lab-b"] .labb-tile:focus-within .labb-tile-body { max-height: 160px; opacity: 1; }
@media (max-width: 900px) {
  html[data-page="home"] .labc-ind, html[data-page="lab-c"] .labc-ind { padding: 64px 0px 28px; }
  html[data-page="home"] .labc-ind-wrap, html[data-page="lab-c"] .labc-ind-wrap { padding: 0px 20px; }
  html[data-page="home"] .labc-index, html[data-page="lab-c"] .labc-index { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  html[data-page="home"] .labc-col-list, html[data-page="lab-c"] .labc-col-list { display: contents; }
  html[data-page="home"] .labc-eyebrow, html[data-page="lab-c"] .labc-eyebrow { order: -2; }
  html[data-page="home"] .labc-col-stage, html[data-page="lab-c"] .labc-col-stage { order: -1; }
  html[data-page="home"] .labc-list, html[data-page="lab-c"] .labc-list { order: 0; }
  html[data-page="home"] .labc-stage, html[data-page="lab-c"] .labc-stage { aspect-ratio: 4 / 3; max-height: none; border-radius: 20px; }
  html[data-page="home"] .labc-row, html[data-page="lab-c"] .labc-row { padding: 16px 0px 15px; gap: 14px; }
  html[data-page="home"] .labc-row-name, html[data-page="lab-c"] .labc-row-name { font-size: 32px; line-height: 1.12; }
  html[data-page="home"] .labc-copy-in, html[data-page="lab-c"] .labc-copy-in { padding-inline-end: 0px; }
  html[data-page="home"] .labc-copy-body, html[data-page="lab-c"] .labc-copy-body { padding-bottom: 20px; }
  html[data-page="home"] .labc-plate, html[data-page="lab-c"] .labc-plate { inset-inline-start: 14px; bottom: 16px; max-width: calc(100% - 28px); padding: 8px 16px 8px 8px; border-radius: 14px; }
  html[data-page="home"][dir="rtl"] .labc-plate, html[data-page="lab-c"][dir="rtl"] .labc-plate { padding: 8px 8px 8px 16px; }
  html[data-page="home"] .labc-plate-ico, html[data-page="lab-c"] .labc-plate-ico { width: 34px; height: 34px; border-radius: 10px; }
  html[data-page="home"] .labc-card2, html[data-page="lab-c"] .labc-card2 { grid-template-columns: 1fr; gap: 20px; padding: 22px; min-height: 0px; }
  html[data-page="home"] .labc-card2:nth-child(n), html[data-page="lab-c"] .labc-card2:nth-child(n) { top: 80px; }
  html[data-page="home"] .labc-c-mock, html[data-page="lab-c"] .labc-c-mock { order: -1; aspect-ratio: auto; min-height: 240px; padding: 16px; }

}
@media (max-width: 600px) {
  html[data-page="home"] .lm-pos, html[data-page="studio"] .lm-pos, html[data-page="lab-a"] .lm-pos, html[data-page="lab-b"] .lm-pos, html[data-page="lab-c"] .lm-pos, html[data-page="home"] .lm-loyalty, html[data-page="studio"] .lm-loyalty, html[data-page="lab-a"] .lm-loyalty, html[data-page="lab-b"] .lm-loyalty, html[data-page="lab-c"] .lm-loyalty { flex-direction: column; }
  html[data-page="home"] .lm-cal-grid, html[data-page="studio"] .lm-cal-grid, html[data-page="lab-a"] .lm-cal-grid, html[data-page="lab-b"] .lm-cal-grid, html[data-page="lab-c"] .lm-cal-grid { gap: 5px; }
  html[data-page="home"] .lm-slot, html[data-page="studio"] .lm-slot, html[data-page="lab-a"] .lm-slot, html[data-page="lab-b"] .lm-slot, html[data-page="lab-c"] .lm-slot { padding: 5px; }
  html[data-page="home"] .lm-slot .lm-av-xs, html[data-page="studio"] .lm-slot .lm-av-xs, html[data-page="lab-a"] .lm-slot .lm-av-xs, html[data-page="lab-b"] .lm-slot .lm-av-xs, html[data-page="lab-c"] .lm-slot .lm-av-xs { display: none; }
  html[data-page="home"] .lm-tags, html[data-page="studio"] .lm-tags, html[data-page="lab-a"] .lm-tags, html[data-page="lab-b"] .lm-tags, html[data-page="lab-c"] .lm-tags { display: none; }
  html[data-page="home"] .lm-kpis, html[data-page="studio"] .lm-kpis, html[data-page="lab-a"] .lm-kpis, html[data-page="lab-b"] .lm-kpis, html[data-page="lab-c"] .lm-kpis { gap: 6px; }
  html[data-page="home"] .lm-kpi, html[data-page="studio"] .lm-kpi, html[data-page="lab-a"] .lm-kpi, html[data-page="lab-b"] .lm-kpi, html[data-page="lab-c"] .lm-kpi { padding: 8px; }
  html[data-page="home"] .lm-kpi-val, html[data-page="studio"] .lm-kpi-val, html[data-page="lab-a"] .lm-kpi-val, html[data-page="lab-b"] .lm-kpi-val, html[data-page="lab-c"] .lm-kpi-val { font-size: 16px; }
  html[data-page="home"] .lm-gift, html[data-page="studio"] .lm-gift, html[data-page="lab-a"] .lm-gift, html[data-page="lab-b"] .lm-gift, html[data-page="lab-c"] .lm-gift { aspect-ratio: 2.2 / 1; }

}
@media (prefers-reduced-motion: reduce) {
  html[data-page="home"] .lm *, html[data-page="studio"] .lm *, html[data-page="lab-a"] .lm *, html[data-page="lab-b"] .lm *, html[data-page="lab-c"] .lm * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
  html[data-page="home"] .lm-bar, html[data-page="studio"] .lm-bar, html[data-page="lab-a"] .lm-bar, html[data-page="lab-b"] .lm-bar, html[data-page="lab-c"] .lm-bar { transform: none !important; }

}
@media (max-width: 900px) {
  html[data-page="home"] .labb-price, html[data-page="lab-b"] .labb-price { grid-template-columns: 1fr; }
  html[data-page="home"] .labb-price-dark, html[data-page="lab-b"] .labb-price-dark { min-height: 280px; padding: 44px 28px; }
  html[data-page="home"] .labb-price-ring, html[data-page="lab-b"] .labb-price-ring { width: 216px; height: 216px; }
  html[data-page="home"] .labb-price-sar, html[data-page="lab-b"] .labb-price-sar { margin-block-start: 18px; }
  html[data-page="home"] .labb-price-light, html[data-page="lab-b"] .labb-price-light { padding: 36px 28px; align-items: center; text-align: center; }
  html[data-page="home"] .labb-price-n, html[data-page="lab-b"] .labb-price-n { font-size: 150px !important; }
  html[data-page="home"] .labb-price-body, html[data-page="lab-b"] .labb-price-body { max-width: none; }

}
@media (max-width: 900px) {
  html[data-page="studio"] .studio-grid .labb-mock { min-height: 240px; }

}
@media (max-width: 1100px) {
  html[data-page="studio"] .labb-cell-0, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-0, html[data-page="studio"] .labb-cell-1, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-1 { grid-column: span 6; }
  html[data-page="studio"] .labb-cell-2, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-2, html[data-page="studio"] .labb-cell-3, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-3, html[data-page="studio"] .labb-cell-4, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-4, html[data-page="studio"] .labb-cell-5, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-5 { grid-column: span 3; }

}
@media (max-width: 900px) {
  html[data-page="studio"] .labb-tiles, html[data-page="lab-b"] .labb-tiles { grid-template-columns: 1fr; gap: 16px; }
  html[data-page="studio"] .labb-tile, html[data-page="lab-b"] .labb-tile { aspect-ratio: 4 / 3; }
  html[data-page="studio"] .labb-tile-body, html[data-page="lab-b"] .labb-tile-body { max-height: 200px; opacity: 1; }
  html[data-page="studio"] .labb-bento, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-bento { grid-template-columns: 1fr; gap: 16px; }
  html[data-page="studio"] .labb-cell, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell, html[data-page="studio"] .labb-cell-0, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-0, html[data-page="studio"] .labb-cell-1, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-1, html[data-page="studio"] .labb-cell-2, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-2, html[data-page="studio"] .labb-cell-3, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-3, html[data-page="studio"] .labb-cell-4, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-4, html[data-page="studio"] .labb-cell-5, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-5 { grid-column: span 1; flex-direction: column; }
  html[data-page="studio"] .labb-mock, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-mock, html[data-page="studio"] .labb-cell-1 .labb-mock, :is(html[data-page="home"], html[data-page="lab-b"]) .labb-cell-1 .labb-mock { height: auto; min-height: 240px; padding: 16px; }

}
@media (max-width: 1024px) {
  html[data-page="discover"] .glomi-phone { scale: calc(min(676px, -420px + 100vh) * (1 / 676px)); transform-origin: center top; }
  html[data-page="discover"] .glomi-soon-grid { align-items: start !important; padding-top: 24px !important; gap: 0px !important; }
  html[data-page="discover"] .glomi-soon-card { padding: 28px !important; max-width: none !important; }
  html[data-page="discover"] .glomi-hero-grid { gap: 0px !important; }
  html[data-page="discover"] .glomi-phone-col { padding-top: 300px; height: auto !important; align-items: flex-start !important; }

}
@media (max-width: 900px) {
  html[data-page="lab-a"] .laba-switch { grid-template-columns: 1fr; gap: 24px; }
  html[data-page="lab-a"] .laba-media { order: -1; }
  html[data-page="lab-a"] .laba-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0px 16px 4px; }
  html[data-page="lab-a"] .laba-tabs::-webkit-scrollbar { display: none; }
  html[data-page="lab-a"] .laba-tab { flex-shrink: 0; }
  html[data-page="lab-a"] .laba-explorer { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  html[data-page="lab-a"] .laba-item { grid-column: 1; }
  html[data-page="lab-a"] .laba-pane { grid-area: auto / 1; display: none; padding: 0px 0px 12px; }
  html[data-page="lab-a"] .laba-pane.on { display: flex; }
  html[data-page="lab-a"] .laba-pane .lab-live { aspect-ratio: auto; min-height: 260px; padding: 18px; }

}

/* ---------------------------------------------------------------------------
 * glomi marketing site - page rules that sit UNDER the element classes.
 *
 * Everything here was a stylesheet rule in the old build, so an element's own
 * style attribute beat it. The generated .gs classes below stand in for those
 * style attributes, so these rules have to be declared before them or the
 * cascade flips. The pricing page's featured card is the case that proves it:
 * it carries transform: translateY(-12px) and is also a [data-reveal] block,
 * and [data-reveal].in sets transform: none.
 *
 * The image rules are here for the same reason: they are the <image-slot>
 * custom element's own shadow-DOM stylesheet, and the picture's inline sizing
 * used to win over them.
 * ------------------------------------------------------------------------ */

/* --- images ---------------------------------------------------------------
 * These three rules are the custom element's own, copied from its shadow root
 * so the pictures keep the exact fit and the exact grey they had.
 */
.glomi-slot { background: rgba(127, 127, 127, 0.08); }
.glomi-slot > img { position: absolute; max-width: none; transform: translate(-50%, -50%); }
.glomi-credit {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  display: block; padding: 3px 7px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font: 10px/1.2 system-ui, -apple-system, sans-serif; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(6px);
}
.glomi-credit a { color: inherit; text-decoration: none; }
.glomi-credit a:hover, .glomi-credit a:focus-visible { text-decoration: underline; }

/* --- scroll reveal --------------------------------------------------------
 * site.js adds .in as each block enters the viewport, exactly as the old
 * runtime did. A reader with no script gets the <noscript> override in the
 * head, so the page is never blank.
 */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].in { opacity: 1; transform: none; }

/* --- generated element classes, one per distinct style attribute --- */
.gs10w4p73.gs10w4p73{position: relative; height: 40px; padding: 0px 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; font-family: inherit; background: transparent; color: var(--text-primary); transition: color 0.3s; display: flex; align-items: center; gap: 8px;}
.gs10yyf4g.gs10yyf4g{position: absolute; inset-inline: 10%; top: 0px; height: 60%; background: radial-gradient(ellipse at 30% 40%,var(--surface-brand-wash),transparent 60%),radial-gradient(ellipse at 75% 60%,var(--surface-accent-wash),transparent 55%); filter: blur(60px); opacity: 0.9; pointer-events: none;}
.gs112vgia.gs112vgia{display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; font-size: 10px; line-height: 1; flex: 0 0 auto; color: var(--icon-secondary);}
.gs112z6j3.gs112z6j3{max-width: 1200px; margin: 0px auto; padding: 80px 32px 96px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start;}
.gs1131cta.gs1131cta{position: absolute; top: 0px; left: 0px; width: 163.04px; height: 80px; transform: scale(0.5); transform-origin: 0px 0px;}
.gs11rzcna.gs11rzcna{position: relative; z-index: 50;}
.gs11wgqlw.gs11wgqlw{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 28px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gs12an2u2.gs12an2u2{margin: 0px; font-family: var(--font-display); text-wrap: pretty; font-size: 32px; line-height: 40px;}
.gs12jgtlv.gs12jgtlv{display: flex; flex-direction: column; gap: 20px; align-items: flex-start;}
.gs12pwaod.gs12pwaod{position: absolute; left: 54.945px; top: 20.301px; width: 40.028px; height: 40.5px;}
.gs12uoc5f.gs12uoc5f{color: var(--text-on-inverse); text-decoration: none; opacity: 0.85; transition: opacity 0.2s;}
.gs12zpxmu.gs12zpxmu{top: 8%; height: 40%; background: var(--surface-brand-wash); border-inline-start: 3px solid var(--surface-brand);}
.gs138yyad.gs138yyad{font-family: var(--font-display); line-height: 1.25; display: inline-block;}
.gs13bimmv.gs13bimmv{margin: 0px; color: var(--text-secondary); text-wrap: pretty; font-size: 18px; line-height: 27px; animation: 0.8s ease 0.25s 1 normal both running glomi-word;}
.gs13dazhb.gs13dazhb{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s 1 normal both running glomi-word;}
.gs13fv044.gs13fv044{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; flex: 0 0 auto; color: var(--icon-secondary);}
.gs14dezpj.gs14dezpj{display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--color-palette-gold-gold-300);}
.gs14t4sbv.gs14t4sbv{display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);}
.gs14wko84.gs14wko84{position: relative; width: 163.042px; flex-shrink: 0; align-self: stretch;}
.gs14x50qe.gs14x50qe{aspect-ratio: 9 / 16; border-radius: 20px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; box-shadow: var(--elevation-01-card);}
.gs14yc3r6.gs14yc3r6{height: 1px; background: currentcolor; opacity: 0.12;}
.gs157wfn9.gs157wfn9{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: none;}
.gs15l6iky.gs15l6iky{display: block; width: 177.778%; height: 100%; left: 50%; top: 50%;}
.gs15mga2q.gs15mga2q{font-family: var(--font-display);}
.gs15qq8ea.gs15qq8ea{padding: 24px 24px 10px; color: var(--text-brand); letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface-card);}
.gs15vq4j1.gs15vq4j1{width: 100%; height: 100%; position: relative; display: block; overflow: hidden; border-radius: 0px;}
.gs15x4wjm.gs15x4wjm{height: 64%;}
.gs164wpph.gs164wpph{position: absolute; left: 12.631px; top: 19.538px; width: 8.843px; height: 4.462px;}
.gs16qqzcj.gs16qqzcj{background: var(--surface-brand); color: var(--text-on-brand); border-radius: 28px; padding: 64px; display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden;}
.gs16vdn7x.gs16vdn7x{background: var(--surface-canvas); padding: 96px 0px;}
.gs16x1q6x.gs16x1q6x{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.24s 1 normal both running glomi-word;}
.gs17n254d.gs17n254d{display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 14px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gs17no7mp.gs17no7mp{color: var(--feedback-error-fg);}
.gs17pigon.gs17pigon{position: relative; flex: 1 1 0%; overflow: hidden;}
.gs17wzk75.gs17wzk75{display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s 1 normal both running glomi-word;}
.gs17xp57z.gs17xp57z{padding: 2px 8px; border-radius: 999px; background: var(--surface-gold-wash); color: var(--text-gold);}
.gs180dsra.gs180dsra{display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--icon-gold);}
.gs18lmedk.gs18lmedk{box-sizing: border-box; appearance: none; width: 100%; min-width: 172px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; text-align: right; cursor: pointer; outline: none; outline-offset: 0px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gs1955823.gs1955823{display: block; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; flex: 0 0 auto; color: currentcolor; transform: scaleX(-1);}
.gs198t7iv.gs198t7iv{color: var(--text-on-inverse-muted); letter-spacing: 0.08em; text-transform: uppercase;}
.gs19e729.gs19e729{margin: 0px; text-wrap: pretty;}
.gs19g7e1g.gs19g7e1g{margin: 0px; color: var(--text-on-inverse-muted);}
.gs19hutle.gs19hutle{transition-delay: 0.2s; position: relative; border-radius: 20px; padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--color-palette-lavender-lavender-100) 85%, white), color-mix(in srgb, var(--color-palette-lavender-lavender-100) 55%, white)); color: var(--text-primary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: var(--elevation-01-card), inset 0 1px 0 rgba(255,255,255,0.8); backdrop-filter: blur(24px) saturate(1.3); transform: none;}
.gs1akim19.gs1akim19{color: var(--text-on-media-gold); text-align: center;}
.gs1alap7l.gs1alap7l{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border-top: 1px solid var(--border-subtle); transition: background 0.2s;}
.gs1alp0ba.gs1alp0ba{display: grid; grid-template-columns: repeat(3, 1fr);}
.gs1axx1v8.gs1axx1v8{margin: 0px; color: var(--text-on-inverse-muted); max-width: 340px; text-wrap: pretty;}
.gs1b1ddiw.gs1b1ddiw{margin: 0px; color: var(--text-secondary); max-width: 620px; text-wrap: pretty; animation: 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s 1 normal both running glomi-word;}
.gs1b48r0m.gs1b48r0m{color: var(--text-on-media-gold); letter-spacing: 0.1em;}
.gs1bdut38.gs1bdut38{display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 14px; line-height: 1; flex: 0 0 auto; color: var(--icon-inverse);}
.gs1bn5apc.gs1bn5apc{top: 0%; height: 24%; background: var(--surface-accent-wash); border-inline-start: 3px solid var(--color-palette-lavender-lavender-400);}
.gs1bu3fmx.gs1bu3fmx{display: inline-flex; align-items: center; gap: 10px; min-width: 0px;}
.gs1cj1eva.gs1cj1eva{flex: 1 1 0%; height: 48px; padding: 0px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: var(--text-on-inverse); font-family: inherit; outline: none;}
.gs1cohuqq.gs1cohuqq{display: flex; flex-direction: column; gap: 10px; padding: 0px 32px; border-inline-start: 1px solid var(--border-brand); opacity: 0.95;}
.gs1cpy3dq.gs1cpy3dq{position: absolute; left: 48.197px; top: 61.401px; width: 0.023px; height: 1px;}
.gs1dk9bd3.gs1dk9bd3{margin: 0px; color: rgba(255, 255, 255, 0.72); text-wrap: pretty; max-width: 520px; font-size: 18px; line-height: 27px;}
.gs1dkxw7r.gs1dkxw7r{width: fit-content; display: flex; flex-flow: row; align-items: flex-start; position: relative; color: var(--icon-primary);}
.gs1dn2lvx.gs1dn2lvx{position: absolute; top: calc(100% + 6px); right: 0px; z-index: 40; min-width: 100%; max-height: 264px; overflow-y: auto; padding: 6px; box-sizing: border-box; border-radius: var(--px-radius-12); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); box-shadow: var(--elevation-02-raised, 0 12px 32px rgba(0,0,0,.14)); animation: glomi-panel-in var(--motion-enter) both;}
.gs1dtfbqd.gs1dtfbqd{display: block; width: 100%; height: auto;}
.gs1dth98e.gs1dth98e{margin: 0px; color: var(--text-secondary); max-width: 600px; text-wrap: pretty; animation: 0.8s ease 0.25s 1 normal both running glomi-word;}
.gs1dtvmdc.gs1dtvmdc{position: relative; width: 100%; display: block;}
.gs1dzd6wy.gs1dzd6wy{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.16s 1 normal both running glomi-word;}
.gs1e436sp.gs1e436sp{transition-delay: 0.3s; display: flex; flex-direction: column; gap: 16px;}
.gs1e86q2s.gs1e86q2s{display: flex; flex-direction: column; gap: 6px;}
.gs1efwa3x.gs1efwa3x{position: absolute; top: -14px; inset-inline-start: 32px; padding: 6px 14px; border-radius: 999px; background: var(--surface-featured); color: var(--text-on-accent);}
.gs1ey50ai.gs1ey50ai{padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--text-secondary); background: transparent;}
.gs1f34sob.gs1f34sob{border-top: 1px solid var(--border-subtle); background: var(--surface-cream);}
.gs1fhy3wc.gs1fhy3wc{width: 20px; height: 20px; flex-shrink: 0; background: var(--icon-brand); mask: url("/assets/whatsapp.svg") center center / contain no-repeat;}
.gs1fkpqgb.gs1fkpqgb{display: block; height: 40px; width: 82px; overflow: hidden; position: relative;}
.gs1fuomxh.gs1fuomxh{max-width: 1200px; margin: 0px auto; padding: 72px 32px 0px; position: relative; animation: 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s 1 normal both running glomi-word;}
.gs1g2e0ze.gs1g2e0ze{padding: 14px 16px; border-radius: 12px; color: var(--text-secondary); background: transparent; text-decoration: none;}
.gs1g4d0nc.gs1g4d0nc{display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: var(--surface-canvas); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-primary); transition: transform 0.35s, box-shadow 0.35s;}
.gs1g7o1l0.gs1g7o1l0{display: flex; transform: none; transition: transform 0.3s;}
.gs1gh06e5.gs1gh06e5{position: absolute; inset-inline-start: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 999px; background: var(--surface-brand); opacity: 0.35; filter: blur(40px);}
.gs1gkrl2h.gs1gkrl2h{width: fit-content; display: flex; flex-flow: row; justify-content: center; align-items: center; position: relative; color: var(--color-palette-base-white);}
.gs1gp1arr.gs1gp1arr{display: flex; justify-content: center; animation: 1s ease 0.5s 1 normal both running glomi-word; position: relative; z-index: 45; height: calc(-68px + 100vh); align-items: center;}
.gs1gqbztt.gs1gqbztt{height: 50%;}
.gs1grens7.gs1grens7{margin: 0px; color: var(--text-secondary); max-width: 380px;}
.gs1gw9akm.gs1gw9akm{margin: 0px; color: var(--text-secondary); line-height: 26px; text-wrap: pretty;}
.gs1h3s940.gs1h3s940{height: 40px; padding: 0px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--text-on-inverse); cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 8px;}
.gs1hivm2h.gs1hivm2h{position: absolute; left: 155.252px; top: 8.238px; width: 6.292px; height: 9.191px;}
.gs1hoysf6.gs1hoysf6{position: absolute; inset-inline: 32px; bottom: 0px; height: 140px; background: linear-gradient(180deg,rgba(255,255,255,0),var(--surface-card));}
.gs1hqmt0l.gs1hqmt0l{display: block; width: 55%; height: 100%; left: 50%; top: 50%;}
.gs1hw84pf.gs1hw84pf{box-sizing: border-box; display: flex; gap: 10px; align-items: center; width: 100%; min-width: 200px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); outline: none; outline-offset: 0px; transition: background-color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state);}
.gs1hyh66y.gs1hyh66y{height: 86%;}
.gs1hz4tcw.gs1hz4tcw{color: var(--text-muted); text-decoration: none; padding: 2px 14px;}
.gs1ibigyc.gs1ibigyc{color: var(--text-secondary); text-wrap: pretty;}
.gs1inx91c.gs1inx91c{top: 40%; height: 24%; background: var(--surface-accent-wash); border-inline-start: 3px solid var(--color-palette-lavender-lavender-400);}
.gs1j2qp7w.gs1j2qp7w{position: relative; height: 40px; padding: 0px 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; font-family: inherit; background: transparent; color: var(--text-secondary); transition: color 0.3s;}
.gs1j4v8db.gs1j4v8db{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.gs1j8fp40.gs1j8fp40{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; width: 100%; padding: 0px 24px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg); color: var(--action-primary-text); display: flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gs1jatoff.gs1jatoff{margin: 0px; color: var(--text-secondary); max-width: 560px; text-wrap: pretty; animation: 0.8s ease 0.25s 1 normal both running glomi-word;}
.gs1jci6ka.gs1jci6ka{color: var(--text-lavender); letter-spacing: 0.1em;}
.gs1jhasy5.gs1jhasy5{transition: transform 0.35s, box-shadow 0.35s; border: 1px solid var(--border-subtle); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px;}
.gs1jn3bij.gs1jn3bij{margin: 0px; padding: 0px 24px 20px; color: var(--text-secondary); text-wrap: pretty;}
.gs1k000he.gs1k000he{overflow: hidden;}
.gs1k05vec.gs1k05vec{display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);}
.gs1kcijfl.gs1kcijfl{margin: 0px; color: rgba(255, 255, 255, 0.78); max-width: 520px; text-wrap: pretty; font-size: 18px; line-height: 25px;}
.gs1khzzd9.gs1khzzd9{position: absolute; inset-inline-start: 100%; top: 24px; margin-inline-start: 10px; display: block; height: 24px; color: var(--color-palette-gold-gold-300);}
.gs1koxjm6.gs1koxjm6{text-decoration: none; position: relative;}
.gs1kz11hs.gs1kz11hs{margin: 0px;}
.gs1l3f4d8.gs1l3f4d8{position: sticky; top: 0px; z-index: 50; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-body);}
.gs1l6110n.gs1l6110n{width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; cursor: pointer; font-family: inherit; text-align: start; color: var(--text-primary);}
.gs1lgurh2.gs1lgurh2{color: var(--text-brand); letter-spacing: 0.1em;}
.gs1lnsl74.gs1lnsl74{display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; font-size: 10px; line-height: 1; flex: 0 0 auto; color: var(--icon-inverse);}
.gs1lyu9tu.gs1lyu9tu{padding: 14px 24px;}
.gs1mdcc4a.gs1mdcc4a{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.gs1mkqzxy.gs1mkqzxy{transition-delay: 0.15s; background: var(--surface-card); border-radius: 16px; border: 1px solid var(--border-subtle); padding: 32px; display: flex; flex-direction: column; gap: 16px;}
.gs1mn5aig.gs1mn5aig{position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px;}
.gs1mqly3p.gs1mqly3p{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0s 1 normal both running glomi-word;}
.gs1mquh2t.gs1mquh2t{position: absolute; top: 0px; left: 0px; width: 163.04px; height: 80px; transform: scale(0.6); transform-origin: 0px 0px;}
.gs1mrw95l.gs1mrw95l{display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-primary); text-decoration: none;}
.gs1nce5ug.gs1nce5ug{height: 40px; padding: 0px 14px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: inherit; transition: border-color 0.2s, color 0.2s;}
.gs1nfe4zf.gs1nfe4zf{width: 320px; height: 676px; flex-shrink: 0; border-radius: 44px; background: var(--surface-card); border: 8px solid var(--surface-inverse); box-shadow: var(--elevation-03-floating); overflow: hidden; position: relative;}
.gs1njkp9i.gs1njkp9i{display: flex; gap: 12px; flex-wrap: wrap;}
.gs1nniwil.gs1nniwil{max-width: 1200px; margin: 0px auto; padding: 0px 32px;}
.gs1o0jofp.gs1o0jofp{display: flex; flex-direction: column; gap: 8px; margin-top: 4px;}
.gs1o2s1jy.gs1o2s1jy{display: flex; flex-direction: column; gap: 20px;}
.gs1o54ugn.gs1o54ugn{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s 1 normal both running glomi-word;}
.gs1ofmnxg.gs1ofmnxg{max-width: 820px; margin: 0px auto; padding: 0px 32px; display: flex; flex-direction: column; gap: 32px;}
.gs1omqo1l.gs1omqo1l{max-width: 980px; margin: 0px auto; padding: 96px 32px 0px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; position: relative; z-index: 1;}
.gs1oqewwo.gs1oqewwo{top: 66%; height: 24%; background: var(--surface-brand-wash); border-inline-start: 3px solid var(--surface-brand);}
.gs1ou8qi6.gs1ou8qi6{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.56s 1 normal both running glomi-word;}
.gs1p0yert.gs1p0yert{box-sizing: border-box; appearance: none; width: 100%; min-width: 172px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); color: var(--text-muted); display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; text-align: right; cursor: pointer; outline: none; outline-offset: 0px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gs1p1l1p6.gs1p1l1p6{margin: 0px; text-wrap: pretty; font-size: 18px; line-height: 25px;}
.gs1p393hi.gs1p393hi{width: fit-content; display: flex; flex-flow: row; justify-content: center; align-items: center; position: relative; color: var(--legacy-brand-maroon);}
.gs1p3ynto.gs1p3ynto{width: 28px; height: 28px; border-radius: 999px; background: var(--surface-brand); color: var(--text-on-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.gs1p6abmb.gs1p6abmb{display: flex; align-items: center; gap: 12px;}
.gs1paei8d.gs1paei8d{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; width: 100%; padding: 0px 24px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg-disabled); color: var(--action-primary-text-disabled); display: flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: not-allowed; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gs1puhle8.gs1puhle8{display: flex; align-items: center; gap: 4px;}
.gs1q54vfk.gs1q54vfk{position: relative; overflow: hidden; background: linear-gradient(180deg,var(--surface-cream) 0%,var(--surface-card) 100%);}
.gs1qb330f.gs1qb330f{display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 64px 16px; animation: 0.5s ease 0s 1 normal both running glomi-pop;}
.gs1qpd6db.gs1qpd6db{top: 56%; height: 32%;}
.gs1qs79ek.gs1qs79ek{position: absolute; left: 0px; top: 20.551px; width: 38.038px; height: 58.588px;}
.gs1qy5t4l.gs1qy5t4l{display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 24px; line-height: 1; flex: 0 0 auto; color: var(--icon-accent);}
.gs1r9vwqm.gs1r9vwqm{position: absolute; top: 4px; bottom: 4px; left: 99px; width: 164px; border-radius: 999px; background: var(--surface-card); box-shadow: var(--elevation-01-card); transition: left 0.4s cubic-bezier(0.3, 0.8, 0.3, 1), width 0.4s cubic-bezier(0.3, 0.8, 0.3, 1); pointer-events: none;}
.gs1ray9wt.gs1ray9wt{display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-card); cursor: pointer; align-items: center; justify-content: center; padding: 0px;}
.gs1rcq47h.gs1rcq47h{display: flex; flex-direction: column; gap: 40px; max-width: 720px;}
.gs1rdf4jo.gs1rdf4jo{max-width: 1100px; margin: 0px auto; padding: 0px 32px 96px; display: flex; flex-direction: column; gap: 40px;}
.gs1refw2n.gs1refw2n{position: absolute; inset-inline-end: -80px; top: -120px; width: 320px; height: 320px; border-radius: 999px; background: var(--color-palette-lavender-lavender-400); opacity: 0.35; filter: blur(40px);}
.gs1rzkhmm.gs1rzkhmm{position: absolute; top: 0px; inset-inline: 0px; height: 28px; display: flex; justify-content: center; pointer-events: none;}
.gs1sbpsfh.gs1sbpsfh{background: var(--color-palette-neutral-neutral-900); color: var(--color-palette-base-white); padding: 96px 0px 40px;}
.gs1sk7zt5.gs1sk7zt5{position: absolute; inset-inline-start: 4%; bottom: -30%; width: 40%; aspect-ratio: 1 / 1; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);}
.gs1sll217.gs1sll217{height: 100%;}
.gs1smwh6y.gs1smwh6y{display: flex; flex-direction: column; gap: 12px; align-items: flex-start;}
.gs1sv0gnc.gs1sv0gnc{border-top: 1px solid rgba(255, 255, 255, 0.12);}
.gs1t056gx.gs1t056gx{margin: 0px; color: var(--text-secondary); text-wrap: pretty;}
.gs1t6b68j.gs1t6b68j{margin: 0px; font-family: var(--font-display); text-wrap: balance; animation: 0.8s ease 0.1s 1 normal both running glomi-word;}
.gs1t8dley.gs1t8dley{transition-delay: 0s; position: relative; border-radius: 20px; padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--color-palette-lavender-lavender-100) 85%, white), color-mix(in srgb, var(--color-palette-lavender-lavender-100) 55%, white)); color: var(--text-primary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: var(--elevation-01-card), inset 0 1px 0 rgba(255,255,255,0.8); backdrop-filter: blur(24px) saturate(1.3); transform: none;}
.gs1tb1qok.gs1tb1qok{margin: 0px; font-family: var(--font-display); text-wrap: balance;}
.gs1tcwiz5.gs1tcwiz5{width: 110px; height: 26px; border-radius: 0px 0px 16px 16px; background: var(--surface-inverse);}
.gs1td1i08.gs1td1i08{display: block; width: 100%; height: 100%; left: 50%; top: 50%;}
.gs1tdsggu.gs1tdsggu{position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-sunken); margin-top: 8px; animation: 0.8s ease 0.4s 1 normal both running glomi-word;}
.gs1tr01cr.gs1tr01cr{color: var(--text-primary); background: var(--surface-card); font-family: var(--font-body);}
.gs1ttbpr3.gs1ttbpr3{top: 0%; height: 26%; background: var(--surface-gold-wash); border-inline-start: 3px solid var(--color-palette-gold-gold-500);}
.gs1tu4dpc.gs1tu4dpc{position: absolute; top: 0px; left: 0px; width: 163.04px; height: 80px; transform: scale(0.3); transform-origin: 0px 0px;}
.gs1u3g4t2.gs1u3g4t2{max-width: 1200px; margin: 0px auto; padding: 72px 32px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;}
.gs1uf53cy.gs1uf53cy{display: flex; flex-direction: column; gap: 4px;}
.gs1ujn517.gs1ujn517{max-width: 820px; margin: 0px auto; padding: 0px 32px 96px; display: flex; flex-direction: column; gap: 32px;}
.gs1unbun.gs1unbun{display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 12px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gs1uogy3p.gs1uogy3p{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.64s 1 normal both running glomi-word;}
.gs1uoirpt.gs1uoirpt{font-family: var(--font-display); color: var(--text-brand); line-height: 1;}
.gs1us8knn.gs1us8knn{max-width: 1200px; margin: 0px auto; padding: 0px 32px; height: calc(-68px + 100vh); display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;}
.gs1v7ojmq.gs1v7ojmq{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; flex: 0 0 auto; color: var(--text-brand);}
.gs1vaest9.gs1vaest9{display: block; width: 166.667%; height: 100%; left: 50%; top: 50%;}
.gs1vj7q4e.gs1vj7q4e{position: relative; max-width: 1200px; margin: 0px auto; padding: 24px 32px 96px;}
.gs1vkpsqq.gs1vkpsqq{color: var(--text-muted);}
.gs1vmpm9m.gs1vmpm9m{transition-delay: 0.2s; display: flex; flex-direction: column; gap: 16px;}
.gs1vtbbs6.gs1vtbbs6{display: flex; flex-direction: column; gap: 8px;}
.gs1wlvsga.gs1wlvsga{display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none;}
.gs1wmm1cc.gs1wmm1cc{display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 12px; line-height: 1; flex: 0 0 auto; color: var(--icon-gold);}
.gs1wnxd0c.gs1wnxd0c{max-width: 1200px; margin: 0px auto; padding: 96px 32px;}
.gs1wnyfd8.gs1wnyfd8{margin: 0px; font-family: var(--font-display); text-wrap: pretty; font-size: 26px; line-height: 32px;}
.gs1wprbtb.gs1wprbtb{position: absolute; inset-inline: 15%; top: 40px; height: 70%; background: var(--surface-brand-wash); filter: blur(80px); opacity: 0.8; border-radius: 999px;}
.gs1wvuzdm.gs1wvuzdm{margin: 0px; color: var(--text-secondary); text-wrap: pretty; font-size: 18px; line-height: 25px;}
.gs1x8zony.gs1x8zony{transition-delay: 0.08s;}
.gs1xsfjoj.gs1xsfjoj{display: block; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; flex: 0 0 auto; color: currentcolor;}
.gs1xwnqh5.gs1xwnqh5{top: 36%; height: 40%; background: var(--surface-brand-wash); border-inline-start: 3px solid var(--surface-brand);}
.gs1xxb4rz.gs1xxb4rz{margin: 0px; color: var(--text-brand);}
.gs1yca6ex.gs1yca6ex{position: sticky; top: 0px; z-index: 50;}
.gs1yifilu.gs1yifilu{border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden;}
.gs1yn8vow.gs1yn8vow{display: block; width: 100%; height: 97.5758%; left: 50%; top: 50%;}
.gs1zqykk.gs1zqykk{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gs20eg8o.gs20eg8o{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; padding: 0px 24px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--action-secondary-border); background: transparent; color: var(--action-secondary-text); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gs2fa6ci.gs2fa6ci{max-width: 1200px; margin: 0px auto; padding: 96px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;}
.gs2ir3gz.gs2ir3gz{font-family: var(--font-body); color: var(--text-primary); background: var(--surface-card);}
.gs2wp7et.gs2wp7et{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 36px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gs2xb9t7.gs2xb9t7{transition-delay: 0.1s; display: flex; flex-direction: column; gap: 16px;}
.gs35w5m4.gs35w5m4{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gs37cskt.gs37cskt{position: relative; width: 21.474px; overflow: hidden; flex-shrink: 0; align-self: stretch;}
.gs37mhfq.gs37mhfq{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; padding: 0px 24px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg-disabled); color: var(--action-primary-text-disabled); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: not-allowed; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gs3egb2r.gs3egb2r{padding: 14px 16px; display: flex; justify-content: center; align-items: center;}
.gs3iwjiy.gs3iwjiy{max-width: 1100px; margin: 0px auto; padding: 72px 32px 96px; display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start;}
.gs3k5ik1.gs3k5ik1{color: var(--text-brand); letter-spacing: 0.1em; animation: 0.7s ease 0s 1 normal both running glomi-word;}
.gs3k8meo.gs3k8meo{padding: 18px 16px; text-align: center;}
.gs3ood8p.gs3ood8p{margin: 6px 0px 0px; opacity: 0.7; min-height: 32px;}
.gs3sqb0w.gs3sqb0w{background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 40px; box-shadow: var(--elevation-03-floating); animation: 0.9s ease 0.3s 1 normal both running glomi-word;}
.gs3x9lw9.gs3x9lw9{position: absolute; left: 42.381px; top: 0px; width: 4.925px; height: 19.219px;}
.gs4fb8ff.gs4fb8ff{margin: 0px; font-family: var(--font-display); position: relative;}
.gs4r79st.gs4r79st{transition-delay: 0.16s;}
.gs4rtucp.gs4rtucp{margin: 0px; font-family: var(--font-display);}
.gs536d8y.gs536d8y{position: absolute; left: 42.71px; top: 21.734px; width: 93.637px; height: 40.4px;}
.gs5b5s9p.gs5b5s9p{height: 54%;}
.gs5ggr7v.gs5ggr7v{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; flex: 0 0 auto; color: var(--icon-secondary);}
.gs5iq0uh.gs5iq0uh{position: absolute; inset-inline-start: -6%; bottom: -40%; width: 55%; aspect-ratio: 1 / 1; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18);}
.gs5rpqla.gs5rpqla{background: var(--color-palette-lavender-lavender-400);}
.gs5tuld8.gs5tuld8{margin: 0px; opacity: 0.8; text-wrap: pretty; min-height: 60px;}
.gs611e22.gs611e22{max-width: 1200px; height: 100%; margin: 0px auto; padding: 0px 32px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;}
.gs6avl7z.gs6avl7z{display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--text-brand);}
.gs6e2abr.gs6e2abr{display: flex; flex-direction: column; gap: 24px; align-items: flex-start;}
.gs6q5uo.gs6q5uo{width: 120px; height: 44px; position: relative; display: block; overflow: hidden; border-radius: 0px;}
.gs6xcyou.gs6xcyou{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; flex: 0 0 auto; color: var(--icon-inverse);}
.gs7ju2gc.gs7ju2gc{transition-delay: 0.2s;}
.gs7vqq1s.gs7vqq1s{text-decoration: none;}
.gs7ze6sv.gs7ze6sv{display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--px-radius-6); cursor: pointer; color: var(--text-primary); background: transparent;}
.gs82rysl.gs82rysl{display: flex; flex-direction: column; gap: 12px;}
.gs8hvhmq.gs8hvhmq{top: 34%; height: 36%; background: var(--surface-accent-wash); border-inline-start: 3px solid var(--color-palette-lavender-lavender-400);}
.gs8pxq4q.gs8pxq4q{font-family: var(--font-display); font-size: 200px; line-height: 0.85; letter-spacing: -0.04em;}
.gs8t8bc0.gs8t8bc0{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; flex: 0 0 auto; color: var(--text-muted);}
.gs90bskc.gs90bskc{transition-delay: 0.24s;}
.gs98hicm.gs98hicm{border-radius: 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--elevation-03-floating); overflow: hidden; position: relative; padding: 28px; display: flex; flex-direction: column;}
.gs9c5lci.gs9c5lci{position: absolute; top: calc(100% + 6px); left: 0px; z-index: 40; min-width: 100%; max-height: 264px; overflow-y: auto; padding: 6px; box-sizing: border-box; border-radius: var(--px-radius-12); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); box-shadow: var(--elevation-02-raised, 0 12px 32px rgba(0,0,0,.14)); animation: glomi-panel-in var(--motion-enter) both;}
.gs9ikf8p.gs9ikf8p{position: relative; display: inline-flex;}
.gs9n2lwm.gs9n2lwm{width: 140px; height: 44px; position: relative; display: block; overflow: hidden; border-radius: 0px;}
.gs9qm1uz.gs9qm1uz{position: absolute; inset-inline-end: 14%; top: 130px; width: 72px; height: 72px; border-radius: 999px; background: var(--surface-brand-wash); animation: 6s ease-in-out 0s infinite normal none running glomi-float;}
.gsa8vulm.gsa8vulm{padding: 8px 14px; border-radius: 999px; color: var(--text-secondary); background: transparent; text-decoration: none; transition: background 0.2s, color 0.2s;}
.gsaeb5s1.gsaeb5s1{top: 30%; height: 30%; background: var(--surface-gold-wash); border-inline-start: 3px solid var(--color-palette-gold-gold-500);}
.gsaku7s0.gsaku7s0{list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 0%;}
.gsalmro9.gsalmro9{margin: 0px; font-family: var(--font-display); text-wrap: pretty; animation: 0.8s ease 0.1s 1 normal both running glomi-word;}
.gsamrdyr.gsamrdyr{position: relative; box-sizing: border-box; appearance: none; height: 40px; min-width: 40px; padding: 0px 16px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg); color: var(--action-primary-text); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gsapl7f5.gsapl7f5{transition-delay: 0.1s;}
.gsaqh2lo.gsaqh2lo{height: 48px; width: 98px; overflow: hidden; position: relative;}
.gsasg6qm.gsasg6qm{display: flex; align-items: center; gap: 40px;}
.gsbbrj5z.gsbbrj5z{text-decoration: none; margin-top: 8px;}
.gsbc79wv.gsbc79wv{max-width: 1200px; margin: 0px auto; padding: 72px 32px 0px; position: relative; animation: 1.2s ease 0.6s 1 normal both running glomi-word;}
.gsbeuhwx.gsbeuhwx{top: 0%; height: 34%; background: var(--surface-brand-wash); border-inline-start: 3px solid var(--surface-brand);}
.gsbgzk0z.gsbgzk0z{flex: 1 1 0%; min-width: 0px; appearance: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; background: transparent; color: var(--text-primary); padding: 0px; margin: 0px; font: inherit; text-align: right;}
.gsbhfbyd.gsbhfbyd{display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 22px; line-height: 1; flex: 0 0 auto; color: var(--icon-primary);}
.gsbw5ug3.gsbw5ug3{margin: 0px; color: var(--text-secondary); text-wrap: pretty; font-size: 18px; line-height: 27px; max-width: 520px;}
.gsbyjaw6.gsbyjaw6{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;}
.gsc24t6c.gsc24t6c{position: absolute; left: 131.612px; top: 23.008px; width: 1.148px; height: 1.137px;}
.gscgntxt.gscgntxt{background: var(--surface-brand);}
.gscsw3hr.gscsw3hr{position: absolute; left: 28.903px; top: 11.699px; width: 16.785px; height: 17.072px;}
.gsd4h2rt.gsd4h2rt{max-width: 720px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px;}
.gsdawmqb.gsdawmqb{margin: 0px; color: var(--text-secondary); text-wrap: pretty; font-size: 15px; line-height: 23px;}
.gsdf92gg.gsdf92gg{background: var(--surface-card); border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; justify-content: center;}
.gsdifxin.gsdifxin{display: none; border-top: 1px solid var(--border-subtle); background: var(--surface-card); padding: 12px 16px 20px; flex-direction: column; gap: 6px;}
.gsdq2mnb.gsdq2mnb{flex-shrink: 0;}
.gsdvrxvy.gsdvrxvy{height: 77%;}
.gse9ko0o.gse9ko0o{display: flex; gap: 12px; margin-top: 8px;}
.gsefcd2s.gsefcd2s{padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--text-brand); background: var(--surface-brand-wash);}
.gseggjjf.gseggjjf{width: 56px; height: 56px; border-radius: 14px; background: var(--surface-canvas); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center;}
.gsegrez.gsegrez{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; padding: 0px 24px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg); color: var(--action-primary-text); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gsep6070.gsep6070{max-width: 1200px; margin: 0px auto; padding: 96px 32px; display: flex; flex-direction: column; gap: 40px; min-height: 60vh;}
.gsf4wq6b.gsf4wq6b{transition-delay: 0.1s; position: relative; border-radius: 20px; padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; background: var(--surface-inverse); color: var(--text-on-inverse); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: var(--elevation-03-floating); backdrop-filter: blur(24px) saturate(1.3); transform: translateY(-12px);}
.gsfe1fct.gsfe1fct{position: absolute; left: 0px; top: 0px; width: 21.474px; height: 22.19px;}
.gsfhczje.gsfhczje{box-sizing: border-box; appearance: none; width: 100%; min-width: 172px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); color: var(--text-muted); display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; text-align: left; cursor: pointer; outline: none; outline-offset: 0px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gsfk07av.gsfk07av{background: var(--color-palette-gold-gold-500);}
.gsfm1lw4.gsfm1lw4{transition-delay: 0s;}
.gsfod9ro.gsfod9ro{max-width: 1200px; margin: 0px auto; padding: 96px 32px 0px;}
.gsgutatk.gsgutatk{color: var(--text-primary); font-weight: 400;}
.gsgwns8g.gsgwns8g{position: relative; overflow: hidden; background: linear-gradient(180deg,var(--surface-accent-wash) 0%,var(--surface-card) 100%);}
.gsh1q5nj.gsh1q5nj{display: flex; flex-direction: column; gap: 12px; animation: 0.8s ease 0.4s 1 normal both running glomi-word;}
.gsh3an1w.gsh3an1w{margin: 0px; font-family: var(--font-display); text-align: center;}
.gsh6clp3.gsh6clp3{display: flex; align-items: center; gap: 8px; color: var(--text-on-media-gold);}
.gshaad6y.gshaad6y{width: 48px; height: 48px; border-radius: 12px; background: var(--surface-accent-wash); display: flex; align-items: center; justify-content: center;}
.gshczefj.gshczefj{display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle);}
.gshfw3xh.gshfw3xh{width: 72px; height: 72px; border-radius: 999px; background: var(--surface-brand-wash); display: flex; align-items: center; justify-content: center;}
.gshx0cx3.gshx0cx3{background: var(--surface-canvas); padding: 80px 0px 96px;}
.gsi1w7qe.gsi1w7qe{display: contents;}
.gsi8iaad.gsi8iaad{color: var(--text-on-inverse-muted);}
.gsims9wu.gsims9wu{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.gsimydpg.gsimydpg{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; flex: 0 0 auto; color: currentcolor; transition: transform var(--motion-state); transform: rotate(180deg);}
.gsixr8f1.gsixr8f1{flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gsj66r9p.gsj66r9p{display: flex; align-items: center; gap: 10px;}
.gsj86g8s.gsj86g8s{padding: 8px 14px; border-radius: 999px; color: var(--text-brand); background: var(--surface-brand-wash); text-decoration: none; transition: background 0.2s, color 0.2s;}
.gsjisiao.gsjisiao{display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-error-wash,var(--surface-brand-wash)); color: var(--text-error,var(--text-brand)); border: 1px solid var(--border-error,var(--border-brand));}
.gsjnm1mz.gsjnm1mz{background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; animation: 0.8s ease 0.55s 1 normal both running glomi-word;}
.gsjtej7z.gsjtej7z{margin: 0px; color: var(--text-secondary); max-width: 720px; text-wrap: pretty; animation: 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0s 1 normal both running glomi-word;}
.gsk33zec.gsk33zec{display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px;}
.gsk7d92d.gsk7d92d{margin: 0px; font-family: var(--font-display); text-wrap: pretty; max-width: 520px;}
.gsk8bgjn.gsk8bgjn{background: var(--surface-inverse); color: var(--text-on-inverse); font-family: var(--font-body);}
.gsk9e50r.gsk9e50r{position: absolute; left: 102.381px; top: 20.631px; width: 47.6px; height: 39.839px;}
.gsk9wvh.gsk9wvh{position: relative; aspect-ratio: 16 / 8; border-radius: 20px 20px 0px 0px; background: var(--surface-canvas); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); box-shadow: var(--elevation-03-floating); overflow: hidden;}
.gskmq3yz.gskmq3yz{display: flex; align-items: baseline; gap: 10px;}
.gsks74pq.gsks74pq{color: var(--text-brand); display: flex; gap: 6px; padding-top: 4px; flex-wrap: wrap;}
.gskubt1x.gskubt1x{color: var(--text-lavender); letter-spacing: 0.1em; animation: 0.7s ease 0s 1 normal both running glomi-word;}
.gsl0i37r.gsl0i37r{background: linear-gradient(180deg,var(--surface-cream) 0%,var(--surface-card) 100%);}
.gsl40rs0.gsl40rs0{font-family: var(--font-display); font-size: 220px; line-height: 0.85; letter-spacing: -0.04em;}
.gslmrdgb.gslmrdgb{display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 22px; line-height: 1; flex: 0 0 auto; color: var(--icon-inverse);}
.gslq3owe.gslq3owe{max-width: 1200px; margin: 0px auto; padding: 96px 32px 40px;}
.gsm6nhgv.gsm6nhgv{position: absolute; left: 0.351px; top: 0.425px; width: 162.324px; height: 79.139px; overflow: hidden;}
.gsme32f8.gsme32f8{margin: 0px; color: var(--text-muted); text-align: center;}
.gsmkeov.gsmkeov{box-sizing: border-box; appearance: none; width: 100%; min-width: 172px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-brand); background: var(--surface-card); color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; text-align: right; cursor: pointer; outline: 2px solid var(--focus-ring); outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gsmtk88q.gsmtk88q{margin: 0px; color: var(--text-secondary); max-width: 640px; text-wrap: pretty; animation: 0.8s ease 0.25s 1 normal both running glomi-word;}
.gsn2g02x.gsn2g02x{height: 72%;}
.gsn8atgo.gsn8atgo{margin: 0px; color: var(--text-secondary); text-wrap: pretty; font-size: 17px; line-height: 26px;}
.gsnhq1ip.gsnhq1ip{display: flex; flex-direction: column; gap: 16px;}
.gsnlyoeb.gsnlyoeb{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle);}
.gsnn0vfh.gsnn0vfh{display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--px-radius-6); cursor: pointer; color: var(--text-brand); background: var(--state-hover-surface); font-weight: 600;}
.gsny1ru4.gsny1ru4{display: flex; flex-direction: column; gap: 16px; align-items: flex-start; position: relative;}
.gsocuoyn.gsocuoyn{display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 96px;}
.gsokzhgp.gsokzhgp{position: absolute; top: 4px; bottom: 4px; left: 4px; width: 141px; border-radius: 999px; background: var(--surface-card); box-shadow: var(--elevation-01-card); transition: left 0.4s cubic-bezier(0.3, 0.8, 0.3, 1), width 0.4s cubic-bezier(0.3, 0.8, 0.3, 1); pointer-events: none;}
.gsond3q9.gsond3q9{display: flex; flex-direction: column; gap: 32px; position: sticky; top: 100px;}
.gsonp1jv.gsonp1jv{display: inline-flex; align-items: center; gap: 5px; color: var(--text-primary);}
.gsotuk41.gsotuk41{box-sizing: border-box; appearance: none; width: 100%; min-width: 172px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-hairline); background: var(--surface-card); color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; text-align: left; cursor: pointer; outline: none; outline-offset: 0px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gsov5lmg.gsov5lmg{display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--icon-inverse);}
.gsp2yf5i.gsp2yf5i{box-sizing: border-box; appearance: none; width: 100%; min-width: 172px; height: 44px; padding: 0px 16px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--border-brand); background: var(--surface-card); color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; text-align: left; cursor: pointer; outline: 2px solid var(--focus-ring); outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
.gsp5qkgg.gsp5qkgg{margin: 0px; color: var(--text-secondary);}
.gsp7fuvt.gsp7fuvt{display: flex; flex-direction: column; gap: 8px; margin-top: 8px;}
.gspb8aaa.gspb8aaa{transition-delay: 0s; display: flex; flex-direction: column; gap: 16px;}
.gspfue34.gspfue34{opacity: 0.7;}
.gsqkm4q.gsqkm4q{color: var(--text-primary); background: var(--surface-card);}
.gsqksiq6.gsqksiq6{margin: 0px; font-family: var(--font-display); text-wrap: pretty;}
.gsqpohom.gsqpohom{position: absolute; inset: 0px; z-index: 40; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(14px) saturate(1.2);}
.gsqt355t.gsqt355t{font-family: var(--font-body); color: var(--text-primary); background: var(--surface-card); height: 100vh; overflow: hidden; display: flex; flex-direction: column;}
.gsrmrlgw.gsrmrlgw{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; flex: 0 0 auto; color: currentcolor;}
.gsrzzowz.gsrzzowz{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gss7amj1.gss7amj1{margin: 0px; font-family: var(--font-display); text-wrap: balance; max-width: 900px;}
.gss8u01k.gss8u01k{max-width: 1200px; margin: 0px auto; padding: 0px 32px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.gsskmivk.gsskmivk{display: flex; gap: 12px; flex-wrap: wrap; animation: 0.8s ease 0.4s 1 normal both running glomi-word;}
.gssmdp9c.gssmdp9c{position: absolute; inset: 0px; width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--surface-card); object-fit: cover; object-position: center top;}
.gssprj63.gssprj63{background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden;}
.gssrgvmh.gssrgvmh{background: var(--surface-brand-wash); border-radius: 24px; padding: 56px 64px; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center;}
.gssu6q4q.gssu6q4q{padding: 18px 24px; background: var(--surface-brand-wash); color: var(--text-brand); text-align: center;}
.gssxmp7c.gssxmp7c{display: flex; flex-direction: column; gap: 14px; align-items: flex-start;}
.gst12pbn.gst12pbn{top: 4%; height: 26%; background: var(--surface-gold-wash); border-inline-start: 3px solid var(--color-palette-gold-gold-500);}
.gstj2wgm.gstj2wgm{display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; min-width: 240px;}
.gstj98h1.gstj98h1{position: absolute; inset-inline-start: 9%; top: 380px; width: 44px; height: 44px; border-radius: 999px; background: var(--surface-accent-wash); animation: 8s ease-in-out 1s infinite normal none running glomi-float;}
.gstjp0kl.gstjp0kl{display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 100%;}
.gstq0sdp.gstq0sdp{max-width: 980px; margin: 0px auto; padding: 96px 32px 0px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; position: relative; z-index: 1;}
.gstsizcx.gstsizcx{display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--icon-brand);}
.gstvaiva.gstvaiva{background: linear-gradient(180deg,var(--surface-cream) 0%,var(--surface-card) 60%);}
.gsugvuvg.gsugvuvg{color: var(--text-brand); letter-spacing: 0.1em; margin-bottom: 32px;}
.gsuk3asq.gsuk3asq{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; flex: 0 0 auto; color: currentcolor; transition: transform var(--motion-state);}
.gsuw7cgn.gsuw7cgn{display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; height: 48px; padding: 0px 22px; border-radius: 999px; background: var(--surface-card); color: var(--text-brand); text-decoration: none; transition: transform 0.2s;}
.gsva75pb.gsva75pb{display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 20px; padding: 48px; border-radius: 24px; background: rgba(255, 255, 255, 0.7); box-shadow: var(--elevation-03-floating); max-width: 560px; animation: 0.9s ease 0.2s 1 normal both running glomi-word;}
.gsvb5299.gsvb5299{height: 1px; background: var(--border-subtle);}
.gsvchpgz.gsvchpgz{position: absolute; left: 154.46px; top: 20.643px; width: 7.865px; height: 39.816px;}
.gsvibdbo.gsvibdbo{padding: 14px 16px; border-radius: 12px; color: var(--text-brand); background: var(--surface-brand-wash); text-decoration: none;}
.gsviowsi.gsviowsi{text-decoration: none; display: block;}
.gsvkexsw.gsvkexsw{display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: 0.8s ease 0.4s 1 normal both running glomi-word;}
.gsvqmysv.gsvqmysv{padding-top: 8px;}
.gsw0u84j.gsw0u84j{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch;}
.gsw53j7n.gsw53j7n{max-width: 900px; margin: 0px auto; padding: 88px 32px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;}
.gswaa7k0.gswaa7k0{max-width: 1200px; margin: 0px auto; padding: 24px 32px 48px; text-align: center;}
.gswlec2b.gswlec2b{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.48s 1 normal both running glomi-word;}
.gswpmd7m.gswpmd7m{display: flex; gap: 8px; align-items: stretch;}
.gswxei6u.gswxei6u{flex: 1 1 0%; min-width: 0px; appearance: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; background: transparent; color: var(--text-primary); padding: 0px; margin: 0px; font: inherit; text-align: left;}
.gsx14kj5.gsx14kj5{background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: 24px; padding: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; position: relative; overflow: hidden;}
.gsx46ti0.gsx46ti0{display: inline-block; animation: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s 1 normal both running glomi-word;}
.gsx5ybiw.gsx5ybiw{background: var(--surface-canvas); padding: 80px 0px 60px;}
.gsx7el2v.gsx7el2v{display: flex; transform: rotate(180deg); transition: transform 0.3s;}
.gsy1j13y.gsy1j13y{padding: 18px 24px;}
.gsy8zy7n.gsy8zy7n{margin: 0px; color: var(--text-secondary); font-size: 18px; line-height: 25px;}
.gsyquuhx.gsyquuhx{margin: 0px; color: var(--text-on-inverse-muted); position: relative; font-size: 18px; line-height: 25px;}
.gsyvvmvb.gsyvvmvb{display: flex; flex-direction: column; gap: 14px;}
.gsz4c7d3.gsz4c7d3{max-width: 1200px; margin: 0px auto; padding: 20px 32px; color: var(--text-on-inverse-muted);}
.gsz6i0jc.gsz6i0jc{color: var(--color-palette-gold-gold-300); letter-spacing: 0.1em;}
.gsze327o.gsze327o{display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: end;}
.gsznsb8a.gsznsb8a{display: flex; flex-direction: column; gap: 14px; max-width: 720px;}

/* --- generated hover classes (was the style-hover attribute) --- */
.gh10bugn7:hover{transform: translateY(-6px) !important; box-shadow: var(--elevation-02-raised) !important;}
.gh10po30y:hover{background: var(--surface-brand-wash) !important; text-decoration: none !important;}
.gh1ass3go:hover{background: var(--surface-brand-wash) !important; color: var(--text-brand) !important; text-decoration: none !important;}
.gh1es4in7:hover{border-color: var(--border-brand) !important; color: var(--text-brand) !important;}
.gh1jr5zan:hover{color: var(--text-brand) !important; text-decoration: none !important;}
.gh1mf0ew2:hover{transform: translateY(-2px) !important;}
.gh1rjzgs3:hover{border-color: var(--border-brand) !important; text-decoration: none !important;}
.gh5mhj92:hover{opacity: 1 !important; color: var(--text-on-inverse) !important; text-decoration: none !important;}
.ghie6faf:hover{background: var(--surface-canvas) !important; text-decoration: none !important;}
.ghosxqnj:hover{background: var(--surface-canvas) !important;}
.ghysmja1:hover{background: var(--state-on-color-hover) !important;}

/* --- the design system renders some controls differently below 900px --- */
@media (max-width: 900px) {
  .gm131ycmc.gm131ycmc{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; width: 100%; padding: 0px 20px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg); color: var(--action-primary-text); display: flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
  .gm1cj032p.gm1cj032p{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; width: 100%; padding: 0px 20px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg-disabled); color: var(--action-primary-text-disabled); display: flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: not-allowed; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
  .gmd7vfb6.gmd7vfb6{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; padding: 0px 20px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg-disabled); color: var(--action-primary-text-disabled); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: not-allowed; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
  .gmf5kkuv.gmf5kkuv{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; padding: 0px 20px; border-radius: var(--px-radius-control); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--action-primary-bg); color: var(--action-primary-text); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
  .gmfti4h8.gmfti4h8{position: relative; box-sizing: border-box; appearance: none; height: 48px; min-width: 48px; padding: 0px 20px; border-radius: var(--px-radius-control); border: var(--px-stroke-1, 1px) solid var(--action-secondary-border); background: transparent; color: var(--action-secondary-text); display: inline-flex; flex-flow: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-align: center; cursor: pointer; outline: none; outline-offset: 2px; transition: background-color var(--motion-state), color var(--motion-state), border-color var(--motion-state), outline-color var(--motion-state); -webkit-tap-highlight-color: transparent;}
}

/* ---------------------------------------------------------------------------
 * glomi marketing site - page rules that sit OVER the element classes.
 *
 * Every rule here replaces something the old build wrote as an inline style at
 * runtime: the design system's hover, focus and pressed states, the active
 * label on the pricing switch, and the box a <button> had before the language
 * switch became a link. Inline styles beat everything, so these are declared
 * after the generated classes.
 * ------------------------------------------------------------------------ */

/* --- the language switch --------------------------------------------------
 * It used to be a <button>, which is border-box and never underlines. As an
 * <a> it needs both stated, or the 40px pill grows to 42px and gains a rule.
 */
.glomi-langlink { box-sizing: border-box; margin: 0; text-align: center; text-decoration: none; }
.glomi-langlink:hover, .glomi-langlink:focus-visible { text-decoration: none; }

/* --- design-system control states ----------------------------------------- */
[data-btn="primary"]:hover { background: var(--action-primary-bg-hover); }
[data-btn="primary"]:active { background: var(--action-primary-bg-pressed); }
[data-btn="secondary"]:hover { background: var(--action-secondary-bg-hover); color: var(--action-secondary-text-hover); }
[data-btn="secondary"]:active { background: var(--color-palette-primary-primary-200); color: var(--action-secondary-text-hover); }
[data-btn]:disabled { cursor: default; }

.glomi-field-box:hover { border-color: var(--border-strong); }
.glomi-field-box:focus-within,
[data-g="combo"][aria-expanded="true"] { border-color: var(--border-brand); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[data-g="combo"]:focus-visible { border-color: var(--border-brand); }
[data-g="combo"][aria-expanded="true"] .glomi-icon--arrows__chevron-down { transform: rotate(180deg); }
[data-g="combo"][data-chosen="true"] { color: var(--text-primary); }

/* Options sit on white. Hover takes a brand tint rather than grey, which clashed with the brand-red selection. */
[role="option"] { background: var(--surface-card); }
[role="option"]:hover { background: var(--surface-brand-wash); }
[role="option"][aria-selected="true"] { color: var(--text-brand); background: var(--surface-card); font-weight: 600; }
[role="option"][aria-selected="true"]:hover { background: var(--surface-brand-wash); }


/* --- the mobile menu panel ------------------------------------------------
 * The panel lives in a <template> and is cloned into the header while the menu
 * is open, which is exactly what the old <sc-if> did. mobile.css styles it, and
 * its :has() rules depend on the panel being absent from the DOM when closed.
 */

/* --- the pricing period switch --------------------------------------------
 * The active label used to be coloured by the component's own render. The
 * switch now carries the state as an attribute and the two labels read it.
 */
/* The label that was active when the page was captured has the active colour
 * baked into its generated class, which is two classes deep. Both selectors
 * here have to clear that bar, or clicking Monthly leaves Yearly looking
 * active too.
 */
[data-g="seg"] [data-g="seg-m"], [data-g="seg"] [data-g="seg-y"] { color: var(--text-secondary); }
[data-g="seg"][data-period="m"] [data-g="seg-m"],
[data-g="seg"][data-period="y"] [data-g="seg-y"] { color: var(--text-primary); }

/* --- Arabic typeface -------------------------------------------------------
 * The design system sets `--font-arabic: "Cairo", ...` and applies it to every
 * RTL element. Cairo is not shipped with the site; it arrives through a Google
 * Fonts @import, so on a filtered or slow network the Arabic headings fell back
 * to Geeza Pro or Helvetica while the body stayed Glomi, putting two typefaces
 * on one page. Both Glomi faces carry Arabic with full joining, so point the
 * token at them and keep Cairo only as a fallback.
 * ------------------------------------------------------------------------ */
:root { --font-arabic: "Glomi Body", "Cairo", "Noto Sans Arabic", sans-serif; }

/* --- directional glyphs under RTL -----------------------------------------
 * The play triangle in the hero pill is a direction, not a symbol: it points
 * the way the eye travels. Under `dir="rtl"` that is leftwards, so mirror it.
 * The design already does the same thing by hand elsewhere, swapping
 * arrows__arrow-right for arrows__arrow-left when the language is Arabic.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .glomi-icon--media-devices__play { transform: scaleX(-1); }

/* Contact rows on /book-a-demo that still carry a placeholder number (+966 XX XXX XXXX, wa.me/966).
   Hidden until a real number is filled in: remove this class from the two <a> rows once you set the number. */
.glomi-pending-number { display: none !important; }
/* A country code like +966 is a left-to-right token: keep it that way inside RTL dropdowns. */
[dir="rtl"] .glomi-field-box span,
[dir="rtl"] [role="option"] span { unicode-bidi: plaintext; }

/* Hero product shot: rests at 0.92 and site.js scales it to 1 as it scrolls into view. */
.glomi-hero-shot { transform: scale(0.92); transform-origin: 50% 100%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .glomi-hero-shot { transform: none !important; } }

/* The Saudi riyal mark component flattens to a box with no height (its two SVGs
 * are absolutely positioned inside an overflow-hidden div), so the mark never
 * painted in the ready version, and its outer box pins the colour to icon-primary
 * instead of the authored colour. Both fixed here for every page. (06 Sep 2026) */
div:has(> svg[viewBox="0 0 21.474 22.190"]) { height: 24px !important; }
div:has(> div > svg[viewBox="0 0 21.474 22.190"]) { color: inherit !important; }

/* The header starts clear on every page and takes its background once the page
 * scrolls, so the hero reads as one uninterrupted surface. site.js adds
 * .glomi-scrolled past the first few pixels. The mobile menu keeps the
 * background whatever the scroll position, or the panel would float on nothing.
 * (07 Sep 2026) */
header[data-g="header"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
header[data-g="header"].glomi-scrolled {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom-color: var(--border-subtle) !important;
}
/* With the menu open the header goes solid and keeps NO backdrop filter: a
 * filtered element becomes the containing block for its fixed children, and the
 * panel (inset: 68px 0 0) would then resolve against the 68px header and
 * collapse to nothing. mobile.css relies on the same rule. */
header[data-g="header"]:has(.glomi-mobile-menu),
header[data-g="header"].glomi-scrolled:has(.glomi-mobile-menu) {
  background: var(--surface-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: var(--border-subtle) !important;
}
@media (prefers-reduced-motion: reduce) { header[data-g="header"] { transition: none } }

/* --- mobile and tablet layers ---
 * These rules used to select elements by a substring of their style attribute.
 * There are no style attributes any more, so each of those selectors has been
 * rewritten to the list of generated classes whose declarations contain that
 * substring: the same elements, named a different way. :is() carries the
 * specificity of a single class, which is what an attribute selector had, so
 * the source order these rules depend on still decides the winner.
 * 5 of them matched no element in the source build and are kept, inert,
 * so the design intent stays visible.
 */
@media (max-width: 900px) {

  /* --- visibility swap ------------------------------------------------- */
  .glomi-mobile-only { display: flex !important }
  .glomi-desktop-only { display: none !important }
  header nav { display: none !important }

  /* --- page containers: 32px gutter down to 20px, vertical rhythm cut ---
   * Two-value shapes first, three-value shapes after: `padding: 96px 32px` is a
   * substring of `padding: 96px 32px 0px`, so both rules match that element and
   * the later, more specific one has to win on source order.
   */
  :is(.gs1cohuqq,.gs1nniwil,.gs1ofmnxg,.gs1rdf4jo,.gs1ujn517,.gs1us8knn,.gs611e22,.gss8u01k)  { padding: 0 20px !important }
  :is(.gsz4c7d3) { padding: 16px 20px !important }
  :is(.gs1vj7q4e,.gswaa7k0) { padding: 24px 20px !important }
  :not(*) /* was [style*="padding: 28px 32px"], no element on the site has it */ { padding: 24px 20px !important }
  :is(.gs19hutle,.gs1t8dley,.gsf4wq6b) { padding: 28px 20px !important }
  :is(.gs1fuomxh,.gs1u3g4t2,.gs3iwjiy,.gsbc79wv) { padding: 48px 20px !important }
  :is(.gs112z6j3) { padding: 48px 20px !important }
  :is(.gsw53j7n) { padding: 48px 20px !important }
  :is(.gs1omqo1l,.gs1wnxd0c,.gs2fa6ci,.gsep6070,.gsfod9ro,.gslq3owe,.gstq0sdp) { padding: 56px 20px !important }
  :is(.gs16vdn7x,.gs1sbpsfh)  { padding: 56px 0 !important }

  :is(.gs1rdf4jo,.gs1ujn517)  { padding: 0 20px 56px !important }
  :is(.gswaa7k0) { padding: 24px 20px 32px !important }
  :is(.gs1vj7q4e) { padding: 24px 20px 56px !important }
  :not(*) /* was [style*="padding: 28px 32px 0px"], no element on the site has it */  { padding: 24px 20px 0 !important }
  :is(.gs1fuomxh,.gsbc79wv)  { padding: 48px 20px 0 !important }
  :is(.gs1u3g4t2) { padding: 48px 20px 32px !important }
  :is(.gs3iwjiy) { padding: 48px 20px 56px !important }
  :not(*) /* was [style*="padding: 80px 32px 0px"], no element on the site has it */  { padding: 48px 20px 0 !important }
  :is(.gs112z6j3) { padding: 48px 20px 56px !important }
  :is(.gsw53j7n) { padding: 48px 20px 32px !important }
  :is(.gs1omqo1l,.gsfod9ro,.gstq0sdp)  { padding: 56px 20px 0 !important }

  /* --- cards: desktop-scale inner padding is unusable on a phone -------- */
  :is(.gs16qqzcj,.gs1qb330f,.gsx14kj5)     { padding: 40px 24px !important }
  :is(.gssrgvmh){ padding: 32px 24px !important }
  :is(.gsva75pb)     { padding: 28px 24px !important }
  :is(.gs3sqb0w)     { padding: 24px 20px !important }
  :is(.gs1qb330f){ padding: 40px 16px !important }   /* after `64px` */

  /* --- multi-column layouts collapse ------------------------------------
   * The previous rule was `section :is(.gs112z6j3,.gs16qqzcj,.gs1alap7l,.gs1alp0ba,.gs1j4v8db,.gs1mdcc4a,.gs1u3g4t2,.gs1us8knn,.gs2fa6ci,.gs3iwjiy,.gs611e22,.gsims9wu,.gsnlyoeb,.gssrgvmh,.gsw0u84j,.gsze327o)`, a
   * DESCENDANT selector, so it only reached grids nested inside a <section> and
   * missed every grid declared ON the section or wrapper itself. That is why
   * /terms, /privacy and /cookies scrolled sideways (their 260px sidebar grid
   * lives on the <section>) and why Discover's coming-soon panel stayed in two
   * columns on a 390px screen.
   *
   * The design already marks the grids that must survive as tables and
   * calendars with data-keep-grid, so the blanket form is safe. Descendants of
   * a kept grid are kept too, since a mock's inner rows are part of the mock.
   */
  :is(.gs112z6j3,.gs16qqzcj,.gs1alap7l,.gs1alp0ba,.gs1j4v8db,.gs1mdcc4a,.gs1u3g4t2,.gs1us8knn,.gs2fa6ci,.gs3iwjiy,.gs611e22,.gsims9wu,.gsnlyoeb,.gssrgvmh,.gsw0u84j,.gsze327o):not([data-keep-grid]):not([data-keep-grid] *) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  input, select, textarea { min-width: 0 }
  /* Once the legal sidebar or the demo page's intro column is stacked it must
   * stop sticking, or it floats over the content below as you scroll. */
  :is(.gs3iwjiy) > *:first-child,
  .gsond3q9,
  :not(*) /* was [style*="grid-template-columns: 240px 1fr"], no element on the site has it */ > *:first-child { position: static !important }

  /* --- the horizontal feature rail (Home v2) ---------------------------
   * The design stacks the rail below 900 and sets the card to `width: 100%`.
   * There is no global border-box reset here, so 100% of the 326px column plus
   * the card's own 24px padding measured 376px in a 358px space: the 18px of
   * sideways scroll on the V2 homepage.
   */
  .glomi-hcard, [data-htrack] > * { box-sizing: border-box !important; max-width: 100% !important }

  /* --- misc ------------------------------------------------------------- */
  /* Form controls default to `min-width: auto` as flex items, which resolves to
   * an input's intrinsic ~20-character width. In the demo page's "prefer a quick
   * call" row that pinned the input plus its button at 355px inside a 350px
   * column and pushed the whole page sideways. On a phone a field should always
   * be free to shrink. */
  input, select, textarea { min-width: 0 !important }
  /* A single-line flex row reports the SUM of its items as its min-content, so
   * a field beside a button pins the whole column open. Letting such a row wrap
   * makes its min-content the widest item instead. It still renders on one line
   * wherever there is room. */
  :is(.gm131ycmc,.gm1cj032p,.gs10w4p73,.gs12jgtlv,.gs14x50qe,.gs17wzk75,.gs19hutle,.gs1cohuqq,.gs1dkxw7r,.gs1e436sp,.gs1e86q2s,.gs1g4d0nc,.gs1g7o1l0,.gs1gkrl2h,.gs1gp1arr,.gs1h3s940,.gs1hw84pf,.gs1j8fp40,.gs1jhasy5,.gs1l6110n,.gs1mkqzxy,.gs1mn5aig,.gs1mrw95l,.gs1nce5ug,.gs1njkp9i,.gs1o0jofp,.gs1o2s1jy,.gs1ofmnxg,.gs1omqo1l,.gs1p393hi,.gs1p3ynto,.gs1p6abmb,.gs1paei8d,.gs1puhle8,.gs1qb330f,.gs1rcq47h,.gs1rdf4jo,.gs1rzkhmm,.gs1smwh6y,.gs1t8dley,.gs1uf53cy,.gs1ujn517,.gs1vmpm9m,.gs1vtbbs6,.gs1wlvsga,.gs2xb9t7,.gs3egb2r,.gs6e2abr,.gs7ze6sv,.gs82rysl,.gs98hicm,.gsaku7s0,.gsasg6qm,.gsd4h2rt,.gsdf92gg,.gse9ko0o,.gseggjjf,.gsep6070,.gsf4wq6b,.gsh1q5nj,.gsh6clp3,.gshaad6y,.gshczefj,.gshfw3xh,.gsj66r9p,.gsjisiao,.gsjnm1mz,.gsk33zec,.gskmq3yz,.gsks74pq,.gsnhq1ip,.gsnn0vfh,.gsny1ru4,.gsocuoyn,.gsond3q9,.gsp7fuvt,.gspb8aaa,.gsqt355t,.gss8u01k,.gsskmivk,.gssxmp7c,.gstj2wgm,.gstjp0kl,.gstq0sdp,.gsva75pb,.gsvkexsw,.gsw53j7n,.gswpmd7m,.gsx14kj5,.gsx7el2v,.gsyvvmvb,.gsznsb8a):has(> input) { flex-wrap: wrap !important }

  /* The featured pricing card is lifted 12px so it floats above its two
   * neighbours when the three sit side by side. Once the grid stacks, that lift
   * eats half the 24px row gap and drags the "Most popular" badge, which hangs
   * 14px above the card, into the bottom edge of the card above it. The lift
   * only means anything in a row, so drop it in the stack. */
  :is(.gsf4wq6b) { transform: none !important }

  /* Footer links are 14px text in a column with a 14px gap, so on a phone each
   * one is a 20px-tall target with 34px of pitch. That is well under the 44px
   * a finger needs. Move the spacing from the flex gap into the links' own
   * padding: the text sits where it did, but the tappable box reaches 44px.
   * The social buttons are 42px including their border, so nudge them too. */
  footer :is(.gs12jgtlv,.gs19hutle,.gs1cohuqq,.gs1e436sp,.gs1e86q2s,.gs1g4d0nc,.gs1jhasy5,.gs1mkqzxy,.gs1mn5aig,.gs1o0jofp,.gs1o2s1jy,.gs1ofmnxg,.gs1omqo1l,.gs1qb330f,.gs1rcq47h,.gs1rdf4jo,.gs1smwh6y,.gs1t8dley,.gs1uf53cy,.gs1ujn517,.gs1vmpm9m,.gs1vtbbs6,.gs2xb9t7,.gs6e2abr,.gs82rysl,.gs98hicm,.gsaku7s0,.gsd4h2rt,.gsdifxin,.gsep6070,.gsf4wq6b,.gsh1q5nj,.gshczefj,.gsjnm1mz,.gsk33zec,.gsnhq1ip,.gsny1ru4,.gsocuoyn,.gsond3q9,.gsp7fuvt,.gspb8aaa,.gsqt355t,.gssxmp7c,.gstj2wgm,.gstjp0kl,.gstq0sdp,.gsva75pb,.gsw53j7n,.gsx14kj5,.gsyvvmvb,.gsznsb8a):has(> a:not(.glomi-langlink)) { gap: 0 !important }
  footer :is(.gs12jgtlv,.gs19hutle,.gs1cohuqq,.gs1e436sp,.gs1e86q2s,.gs1g4d0nc,.gs1jhasy5,.gs1mkqzxy,.gs1mn5aig,.gs1o0jofp,.gs1o2s1jy,.gs1ofmnxg,.gs1omqo1l,.gs1qb330f,.gs1rcq47h,.gs1rdf4jo,.gs1smwh6y,.gs1t8dley,.gs1uf53cy,.gs1ujn517,.gs1vmpm9m,.gs1vtbbs6,.gs2xb9t7,.gs6e2abr,.gs82rysl,.gs98hicm,.gsaku7s0,.gsd4h2rt,.gsdifxin,.gsep6070,.gsf4wq6b,.gsh1q5nj,.gshczefj,.gsjnm1mz,.gsk33zec,.gsnhq1ip,.gsny1ru4,.gsocuoyn,.gsond3q9,.gsp7fuvt,.gspb8aaa,.gsqt355t,.gssxmp7c,.gstj2wgm,.gstjp0kl,.gstq0sdp,.gsva75pb,.gsw53j7n,.gsx14kj5,.gsyvvmvb,.gsznsb8a) > a:not(.glomi-langlink) { padding: 12px 0 !important }
  footer a[aria-label] { width: 44px !important; height: 44px !important }


  /* --- pricing banner ---------------------------------------------------
   * Side by side, the big "0" sits left and the copy reads from the start
   * edge beside it. Once the two stack on a phone the copy is the only thing
   * in the column, and a start-aligned block under a centred numeral reads as
   * a mistake. Centre the whole block, both languages.
   */
  .glomi-pricing-copy { align-items: center !important; text-align: center !important }

  :not(*) /* was [style*="min-height: 56vh"], no element on the site has it */ { min-height: auto !important }
  img, iframe { max-width: 100% }

  /* --- full-screen menu -------------------------------------------------
   * The panel shipped as a strip hanging under the 68px header. It now fills
   * the viewport below the header, with the demo button pinned to the bottom.
   *
   * `position: fixed` needs care: the panel is a descendant of <header>, and
   * the header's backdrop-filter makes it a containing block for fixed
   * children, which would trap the panel inside 68px of header. The panel only
   * exists in the DOM while the menu is open (it sits behind an <sc-if>), so
   * :has() can drop the filter for exactly that state.
   */
  header:has(.glomi-mobile-menu) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface-card) !important;
  }
  .glomi-mobile-menu {
    position: fixed !important;
    inset: 68px 0 0 0 !important;
    z-index: 60 !important;
    background: var(--surface-card) !important;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Full-width rows at the design system's largest body role, so a full-screen
   * menu reads as a destination rather than a dropdown that lost its box. The
   * pill background stays: it is how this design shows the active page. */
  .glomi-mobile-menu > a { padding: 20px 16px !important; border-radius: 14px !important }
  .glomi-mobile-menu > a:last-child { margin-top: auto !important; padding: 24px 0 0 !important }

  /* The page behind a full-screen menu must not scroll. */
  body:has(.glomi-mobile-menu) { overflow: hidden !important }
}

@media (min-width: 901px) { .glomi-mobile-only { display: none !important } }

/* --- tablet: 901px to 1200px ------------------------------------------------
 * The demo form's two-up rows hold design-system text fields. A grid item
 * defaults to `min-width: auto`, which for an <input> resolves to its intrinsic
 * ~20-character width, so each row demanded 460px. Between the mobile
 * breakpoint and 1200px the page is still two columns and the form's card track
 * is narrower than that, so /book-a-demo scrolled sideways by 33px at 1024
 * (iPad portrait). Above 1200 the track is wide enough and this never applied.
 *
 * Letting the items shrink keeps the designed two-column composition; only the
 * fields get narrower, which is what the track was always meant to do.
 */
@media (min-width: 901px) and (max-width: 1200px) {
  :is(.gs112z6j3,.gs14t4sbv,.gs16qqzcj,.gs1alap7l,.gs1alp0ba,.gs1j4v8db,.gs1k05vec,.gs1mdcc4a,.gs1u3g4t2,.gs1us8knn,.gs2fa6ci,.gs3iwjiy,.gs611e22,.gsims9wu,.gsnlyoeb,.gssrgvmh,.gsw0u84j,.gsze327o) > *,
  :is(.gm131ycmc,.gm1cj032p,.gs10w4p73,.gs12jgtlv,.gs14x50qe,.gs17wzk75,.gs19hutle,.gs1cohuqq,.gs1dkxw7r,.gs1e436sp,.gs1e86q2s,.gs1g4d0nc,.gs1g7o1l0,.gs1gkrl2h,.gs1gp1arr,.gs1h3s940,.gs1hw84pf,.gs1j8fp40,.gs1jhasy5,.gs1l6110n,.gs1mkqzxy,.gs1mn5aig,.gs1mrw95l,.gs1nce5ug,.gs1njkp9i,.gs1o0jofp,.gs1o2s1jy,.gs1ofmnxg,.gs1omqo1l,.gs1p393hi,.gs1p3ynto,.gs1p6abmb,.gs1paei8d,.gs1puhle8,.gs1qb330f,.gs1rcq47h,.gs1rdf4jo,.gs1rzkhmm,.gs1smwh6y,.gs1t8dley,.gs1uf53cy,.gs1ujn517,.gs1vmpm9m,.gs1vtbbs6,.gs1wlvsga,.gs2xb9t7,.gs3egb2r,.gs6e2abr,.gs7ze6sv,.gs82rysl,.gs98hicm,.gsaku7s0,.gsasg6qm,.gsd4h2rt,.gsdf92gg,.gse9ko0o,.gseggjjf,.gsep6070,.gsf4wq6b,.gsh1q5nj,.gsh6clp3,.gshaad6y,.gshczefj,.gshfw3xh,.gsj66r9p,.gsjisiao,.gsjnm1mz,.gsk33zec,.gskmq3yz,.gsks74pq,.gsnhq1ip,.gsnn0vfh,.gsny1ru4,.gsocuoyn,.gsond3q9,.gsp7fuvt,.gspb8aaa,.gsqt355t,.gss8u01k,.gsskmivk,.gssxmp7c,.gstj2wgm,.gstjp0kl,.gstq0sdp,.gsva75pb,.gsvkexsw,.gsw53j7n,.gswpmd7m,.gsx14kj5,.gsx7el2v,.gsyvvmvb,.gsznsb8a) > * { min-width: 0 }
  /* The runtime wraps every component in a `display: contents` host, so the real
   * grid item is one level below the selector above. */
  :is(.gsi1w7qe) > * { min-width: 0 }
  input, select, textarea { min-width: 0 }
}

/* --- short viewports: phone held sideways --------------------------------
 * The full-screen menu is sized for a portrait phone: generous rows and the
 * demo button pushed to the bottom by `margin-top: auto`. In landscape the
 * panel is only ~320px tall, the four rows need ~350px, and the button lands
 * below the fold, so a four-item menu has to be scrolled. Tighten the rhythm
 * and let the button sit right after the links instead of being pushed down.
 */
@media (max-width: 900px) and (max-height: 520px) {
  .glomi-mobile-menu { padding: 12px 20px 16px !important; gap: 2px !important }
  .glomi-mobile-menu > a { padding: 10px 16px !important }
  .glomi-mobile-menu > a:last-child { margin-top: 10px !important; padding: 0 !important }
}

/* Pricing comparison: keep the four columns on a phone, tighten the cells so
   "Enterprise" and the tick columns fit in 390px. */
@media (max-width: 600px) {
  .glomi-compare-head, .glomi-compare-row { grid-template-columns: 1.7fr 1fr 1fr 1fr !important; }
  .glomi-compare-head > div { padding: 14px 4px !important; font-size: 13px; line-height: 18px; }
  .glomi-compare-row > div:first-child { padding: 12px 12px !important; }
  .glomi-compare-row > div { padding-left: 4px !important; padding-right: 4px !important; }
}
/* Quick call: the number field takes the whole row on a narrow phone, the button drops under it. */
@media (max-width: 480px) {
  .glomi-quick-call { flex-wrap: wrap !important; }
  .glomi-quick-call > input { flex: 1 1 100% !important; }
}

/* Pricing: the three plan cards, buttons included, fit the first screen on desktop.
   Spacing and display sizes scale with the viewport height, so a short laptop screen
   tightens and a tall monitor keeps the full-size layout. */
@media (min-width: 901px) {
  html[data-page="pricing"] .gsw53j7n { padding: clamp(8px, 2.6vh, 44px) 32px clamp(6px, 1.4vh, 20px); gap: clamp(6px, 1vh, 14px); }
  html[data-page="pricing"] .gs1t6b68j { font-size: clamp(34px, 5vh, 60px); }
  html[data-page="pricing"] .gs1dth98e { font-size: clamp(15px, 1.9vh, 20px); }
  html[data-page="pricing"] .gs1tdsggu { margin-top: 0; }
  html[data-page="pricing"] .gs1vj7q4e { padding-top: clamp(8px, 1.4vh, 16px); }
  html[data-page="pricing"] .gsw0u84j > * { padding: clamp(14px, 2.2vh, 28px) 32px; gap: clamp(8px, 1.3vh, 16px); }
  html[data-page="pricing"] .gs138yyad { font-size: clamp(38px, 5.4vh, 60px); line-height: 1.1; }
  html[data-page="pricing"] .gsaku7s0 { gap: clamp(5px, 0.9vh, 10px); }
}
@media (min-width: 901px) and (max-height: 820px) {
  html[data-page="pricing"] .gs3k5ik1 { display: none; }
}