/**
 * @file tokens-light.css
 * @title Design Tokens - Light Theme
 * @description CSS custom properties (variables) for the ID.me Design System light theme.
 *              These tokens define colors, spacing, typography, and other design values.
 *
 * @author Fragno Team
 * @version 1.1.0
 * @updated 2026-01-16 - Added semantic tokens and additional primitive tokens
 */

:host,
:host {
  /* ============================================
      COLORS - Primary
      ============================================ */
  --colors-primary-default: var(--colors-gray-900);
  --colors-primary-hover: var(--colors-gray-800);
  --colors-primary-disabled: var(--colors-gray-100);
  --colors-primary-text: var(--colors-base-white);
  --colors-primary-text-disabled: var(--colors-gray-500);

  /* ============================================
      COLORS - Secondary
      ============================================ */
  --colors-secondary-default: var(--colors-base-white);
  --colors-secondary-hover: var(--colors-gray-25);
  --colors-secondary-border: var(--colors-gray-400);
  --colors-secondary-border-hover: var(--colors-gray-600);
  --colors-secondary-border-focused: var(--colors-gray-600);
  --colors-secondary-text: var(--colors-gray-900);
  --colors-secondary-text-hover: var(--colors-gray-800);
  --colors-secondary-text-disabled: var(--colors-gray-500);

  /* ============================================
      COLORS - Tertiary
      ============================================ */
  --colors-tertiary-default: var(--colors-base-white);
  --colors-tertiary-hover: var(--colors-gray-200);
  --colors-tertiary-text: var(--colors-gray-900);
  --colors-tertiary-text-hover: var(--colors-gray-700);
  --colors-tertiary-text-disabled: var(--colors-gray-500);

  /* ============================================
      COLORS - Focus & Effects
      ============================================ */
  --colors-focus-ring: var(--colors-blue-600);
  --colors-focus-shadow: rgba(10, 13, 18, 0.05);
  --colors-shadow-skeumorphic-inner-border: rgba(10, 13, 18, 0.18);
  --colors-shadow-skeumorphic-inner: rgba(10, 13, 18, 0.05);

  /* ============================================
      COLORS - Disabled
      ============================================ */
  --colors-disabled-border: var(--colors-gray-200);
  --colors-disabled-background: var(--colors-gray-100);
  --colors-disabled-foreground: var(--colors-gray-500);

  /* ============================================
      COLORS - Base (Nova Colors [rebrand] 64430:14879)
      ============================================ */
  --colors-base-white: #ffffff;
  --colors-base-black: #000000;
  --colors-base-gray: #f7f7f7;

  /* ============================================
      COLORS - Neutrals (gray)
      ============================================ */
  --colors-gray-25: #f7f7f7; /* Neutral White */
  --colors-gray-50: #f1f0f0;
  --colors-gray-100: #ecece8;
  --colors-gray-200: #e4e7e0; /* Light Grey */
  --colors-gray-300: #cfd2c7;
  --colors-gray-400: #babcaf;
  --colors-gray-500: #a6a697; /* Mid Grey */
  --colors-gray-600: #7f7f6e;
  --colors-gray-700: #545449; /* Low Grey */
  --colors-gray-800: #373931;
  --colors-gray-900: #1b1d19; /* Dark Grey */
  --colors-gray-950: #000000; /* Black */
  --colors-gray-border: var(--colors-gray-400);
  /* Segment control selected pill — closest rebrand neutral */
  --fragno-segment-pill-grey: var(--colors-gray-100);

  /* ============================================
      COLORS - Component / Alpha (Nova)
      ============================================ */
  /* Alpha white — overlays, borders, text on dark (e.g. avatar, modals) */
  /* The opaque rung. Declared here in the base sheet and never overridden in tokens-dark.css, which
     is precisely what makes it the primitive for anything that must stay white in BOTH themes — the
     semantic whites (--color-text-on-interactive, --colors-tertiary-default) all invert in dark. */
  --colors-alpha-white-100: rgba(255, 255, 255, 1);
  --colors-alpha-white-90: rgba(255, 255, 255, 0.9);
  --colors-alpha-white-80: rgba(255, 255, 255, 0.8);
  --colors-alpha-white-50: rgba(255, 255, 255, 0.5);
  --colors-alpha-white-30: rgba(255, 255, 255, 0.3);
  --colors-alpha-white-25: rgba(255, 255, 255, 0.25);
  --colors-alpha-white-70: rgba(255, 255, 255, 0.7);
  --colors-alpha-white-12: rgba(255, 255, 255, 0.12);
  /* Alpha black — shadows, backdrops, overlays */
  --colors-alpha-black-50: rgba(0, 0, 0, 0.5);
  --colors-alpha-black-40: rgba(0, 0, 0, 0.4);
  --colors-alpha-black-30: rgba(0, 0, 0, 0.3);
  --colors-alpha-black-20: rgba(0, 0, 0, 0.2);
  --colors-alpha-black-10: rgba(0, 0, 0, 0.1);
  --colors-alpha-black-06: rgba(0, 0, 0, 0.06);

  /* ============================================
      COLORS - Blue (secondary)
      ============================================ */
  --colors-blue-25: #f4f7fa;
  --colors-blue-50: #d1dff3;
  --colors-blue-100: #a5c5f5;
  --colors-blue-200: #70a9ff; /* Light Blue */
  --colors-blue-300: #5490f9;
  --colors-blue-400: #3a77f1;
  --colors-blue-500: #225de7; /* Mid Blue */
  --colors-blue-600: #193ed4;
  --colors-blue-700: #1727b9; /* Low Blue */
  --colors-blue-800: #07347f;
  --colors-blue-900: #00273c; /* Dark Blue */
  --colors-blue-950: #021722;

  /* ============================================
      COLORS - Red (secondary / error)
      ============================================ */
  --colors-red-25: #faf5f4;
  --colors-red-50: #f1cdc9;
  --colors-red-100: #f29d93;
  --colors-red-200: #fd6452; /* Bright Red */
  --colors-red-300: #f75845;
  --colors-red-400: #ef4c39;
  --colors-red-500: #e6422f; /* Mid Red */
  --colors-red-600: #d8321f;
  --colors-red-700: #b92f20; /* Low Red (Figma layer mislabeled 500-Low Red) */
  --colors-red-800: #9e271b;
  --colors-red-900: #822016; /* Dark Red */
  --colors-red-950: #4b1610;

  /* ============================================
      COLORS - Green (primary brand)
      ============================================ */
  --colors-green-25: #f8faf4;
  --colors-green-50: #d2ecb3;
  --colors-green-100: #adee63;
  --colors-green-200: #89ff02; /* Bright Green */
  --colors-green-300: #3dd608;
  --colors-green-400: #0eae11;
  --colors-green-500: #118834; /* Mid Green */
  --colors-green-600: #0e6a2d;
  --colors-green-700: #0b4c23; /* Low Green */
  --colors-green-800: #063820;
  --colors-green-900: #032318; /* Dark Green */
  --colors-green-950: #03140e;
  /* Green FOREGROUND (alert text, community-card icon glyph). Light theme matches green-800;
     tokens-dark may invert this independently of the primitive. */
  --colors-green-fg: var(--colors-green-800);
  --colors-green-900-alpha-10: rgba(3, 35, 24, 0.1);

  /* ============================================
      COLORS - Green secondary
      ============================================ */
  --colors-green-secondary-25: #f9faf5;
  --colors-green-secondary-50: #dee9bc;
  --colors-green-secondary-100: #cae478;
  --colors-green-secondary-200: #bdeb27; /* Bright Secondary Green */
  --colors-green-secondary-300: #b8e026;
  --colors-green-secondary-400: #afd229;
  --colors-green-secondary-500: #a4bf30; /* Mid Secondary Green */
  --colors-green-secondary-600: #7d9718;
  --colors-green-secondary-700: #526708; /* Low Secondary Green */
  --colors-green-secondary-800: #3c4f07;
  --colors-green-secondary-900: #283805; /* Dark Secondary Green */
  --colors-green-secondary-950: #172005;

  /* ============================================
      COLORS - Green gradient button (Nova | Web – Figma)
      ============================================ */
  /* From Figma node 66694:47854 – base gradient rgba(61,113,80)→rgba(37,72,50), highlight rgba(175,221,192) */
  --colors-green-gradient-start: #3d7150;
  --colors-green-gradient-end: #254832;
  --colors-green-gradient-highlight: #afddc0;
  --colors-green-gradient-start-hover: #4d8160;
  --colors-green-gradient-end-hover: #2d5840;
  --colors-green-gradient-start-disabled: #6b8a6f;
  --colors-green-gradient-end-disabled: #4a5c4d;
  /* The gradient is a fixed-chroma brand surface — identical in light and dark (see tokens-dark.css)
     — so its label must be fixed too. It cannot use --colors-primary-text, which flips to #141414 in
     dark and rendered near-black on the dark green (~1.9:1, worse than the disabled state below). */
  --colors-green-gradient-text: var(--colors-alpha-white-100);
  --colors-green-gradient-text-disabled: var(--colors-alpha-white-70);
  --colors-green-gradient-border-disabled: var(--colors-alpha-white-25);

  /* ============================================
      COLORS - Yellow (secondary)
      ============================================ */
  --colors-yellow-25: #fafaf5;
  --colors-yellow-50: #e9e9bc;
  --colors-yellow-100: #e8e873;
  --colors-yellow-200: #f3f31f; /* Bright Yellow */
  --colors-yellow-300: #e7ea1c;
  --colors-yellow-400: #e2db19;
  --colors-yellow-500: #d1c81e; /* Mid Yellow */
  --colors-yellow-600: #979318;
  --colors-yellow-700: #676508; /* Low Yellow */
  --colors-yellow-800: #4d4f07;
  --colors-yellow-900: #343805; /* Dark Yellow */
  --colors-yellow-950: #1e2005;

  /* ============================================
      COLORS - Pink (secondary)
      ============================================ */
  --colors-pink-25: #faf5fa;
  --colors-pink-50: #f0d7f1;
  --colors-pink-100: #edb2ef;
  --colors-pink-200: #ef87f3; /* Bright Pink */
  --colors-pink-300: #ea69ef;
  --colors-pink-400: #e54ceb;
  --colors-pink-500: #e02fe6; /* Mid Pink */
  --colors-pink-600: #c70ebd;
  --colors-pink-700: #92037e; /* Low Pink */
  --colors-pink-800: #770467;
  --colors-pink-900: #5c0551; /* Dark Pink */
  --colors-pink-950: #35062f;

  /* ============================================
      SPACING
      ============================================ */
  --spacing-none: 0;
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.375rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-xxl: 1.125rem;
  --spacing-2xl: 1.25rem;
  --spacing-3xl: 1.5rem;
  --spacing-4xl: 2rem;
  --spacing-5xl: 2.5rem;
  --spacing-6xl: 3rem;
  --spacing-7xl: 4rem;

  /* ============================================
      CONTENT BLOCK (Nova / Figma)
  ============================================ */
  --content-block-padding-x-desktop: 7rem;   /* 112px - horizontal padding desktop */
  --content-block-gap-desktop: 4.5rem;       /* 72px - gap between image and content desktop */

  /* FAQ block (Nova Web — FAQ Block Variants; aligns with content-block frame + text styles) */
  --faq-surface-background: transparent;
  --faq-padding-mobile: var(--spacing-3xl); /* 24px — inset; matches content-block mobile inner */
  --faq-padding-desktop-y: var(--spacing-7xl); /* 64px — vertical inset desktop */
  --faq-padding-desktop-x: var(--content-block-padding-x-desktop);
  --faq-gap-columns-desktop: var(--content-block-gap-desktop); /* 72px — text column ↔ image */
  --faq-gap-stacked: var(--spacing-3xl); /* 24px — mobile stack gap image ↔ copy */
  --faq-gap-title-accordion: var(--spacing-6xl); /* 48px — “FAQs” heading → first accordion row */
  --faq-accordion-title-padding-y-mobile: var(--spacing-4xl); /* 32px — row padding mobile */
  --faq-accordion-title-padding-y-desktop: var(--spacing-5xl); /* 40px — row padding desktop */
  --faq-accordion-icon-slot-width: 3.125rem; /* 50px — +/- icon column (Figma) */
  --faq-accordion-content-offset-y-mobile: var(--faq-accordion-title-padding-y-mobile);
  --faq-accordion-content-offset-y-desktop: var(--faq-accordion-title-padding-y-desktop);
  --faq-accordion-content-padding-top: var(--spacing-sm);
  --faq-accordion-content-padding-bottom: var(--spacing-4xl);

  /* Interstitial lockup (Nova Web — Figma 64445:26467, measured via Plugin API) */
  --interstitial-lockup-max-width-desktop: 24rem; /* 384px */
  --interstitial-lockup-max-width-mobile: 20.9375rem; /* 335px card on 375 viewport */
  --interstitial-lockup-content-width: 21rem; /* 336px inner content */
  --interstitial-lockup-stack-gap: var(--spacing-4xl); /* 32px */
  --interstitial-lockup-card-padding-x: var(--spacing-3xl); /* 24px desktop */
  --interstitial-lockup-card-padding-x-mobile: var(--spacing-xl); /* 16px mobile */
  --interstitial-lockup-card-padding-bottom: var(--spacing-3xl); /* 24px */
  --interstitial-lockup-card-border-width: 1.6px;
  --interstitial-lockup-card-radius: var(--radius-5xl); /* 32px */
  --interstitial-lockup-card-bg: rgba(255, 255, 255, 0.4);
  --interstitial-lockup-card-blur: 30px;
  --interstitial-lockup-card-shadow: 0 4px 18px rgba(10, 13, 18, 0.1);
  --interstitial-lockup-brand-width: 6.625rem; /* 106px */
  --interstitial-lockup-brand-height: 5.5rem; /* 88px */
  --interstitial-lockup-brand-radius: var(--radius-3xl); /* 20px */
  --interstitial-lockup-brand-padding-y: 0;
  --interstitial-lockup-content-padding-top: var(--spacing-3xl); /* 24px when no badge */
  --interstitial-lockup-content-padding-top-badge: 3.375rem; /* 54px — Figma: badge row (30px) + 24px to headline */
  --interstitial-lockup-content-gap: var(--spacing-4xl); /* 32px */
  --interstitial-lockup-headline-subheadline-gap: var(--spacing-md); /* 8px */
  --interstitial-lockup-message-outer-padding: 0.75rem; /* 12px */
  --interstitial-lockup-message-outer-gap: var(--spacing-2xl); /* 20px */
  --interstitial-lockup-message-outer-radius: var(--radius-5xl); /* 32px */
  --interstitial-lockup-message-outer-bg: rgba(255, 255, 255, 0.6);
  --interstitial-lockup-message-inner-gap: var(--spacing-md); /* 8px */
  --interstitial-lockup-coupon-label-gap: 0.375rem; /* 6px */
  --interstitial-lockup-coupon-field-height: 3.75rem; /* 60px */
  --interstitial-lockup-coupon-field-radius: var(--radius-3xl); /* 20px */
  --interstitial-lockup-coupon-field-padding-x: var(--spacing-2xl); /* 20px */
  --interstitial-lockup-coupon-field-padding-y: var(--spacing-xl); /* 16px */
  --interstitial-lockup-button-height: 2.75rem; /* 44px */
  --interstitial-lockup-divider-gap: var(--spacing-lg); /* 12px */
  --interstitial-lockup-divider-color: #d6d6d6;
  --interstitial-lockup-slate-text: #272727;
  --interstitial-lockup-legacy-brand-green: #08833d;
  --interstitial-lockup-signin-text: #f7f7f7;

  /* ============================================
      BORDER RADIUS
      ============================================ */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.125rem;
  --radius-3xl: 1.25rem;
  --radius-4xl: 1.5rem;
  --radius-5xl: 2rem;
  --radius-xlg: 1.5rem; /* Legacy - use radius-4xl instead */
  --radius-full: 9999px;

  /* ============================================
      TYPOGRAPHY - Font Families
      ============================================ */
  --font-family-body:
    "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-family-display:
    "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-family-mono:
    "IDMe Matter Mono", "Matter VF Mono", ui-monospace, "SFMono-Regular", Menlo,
    Monaco, monospace;

  /* ============================================
      TYPOGRAPHY - Font Sizes
      Nova Typography [rebrand] (Figma 64192:6548), Matter scale
      ============================================ */
  --font-size-text-xs: 0.75rem; /* 12px */
  --font-size-text-sm: 0.875rem; /* 14px */
  --font-size-text-md: 1rem; /* 16px */
  --font-size-text-lg: 1.125rem; /* 18px */
  --font-size-text-xl: 1.25rem; /* 20px */
  --font-size-caption: 0.625rem; /* 10px — IDMe Matter Mono Caption */

  /* ============================================
      TYPOGRAPHY - Display Font Sizes
      ============================================ */
  --font-size-display-xs: 1.5rem; /* 24px */
  --font-size-display-sm: 1.875rem; /* 30px */
  --font-size-display-2sm: 2rem; /* 32px */
  --font-size-display-md: 2.25rem; /* 36px */
  --font-size-display-lg: 3rem; /* 48px */
  --font-size-display-xl: 3.75rem; /* 60px */
  --font-size-display-2xl: 4.5rem; /* 72px */
  --font-size-display-3xl: 6rem; /* 96px */
  --font-size-display-4xl: 7.5rem; /* 120px */
  --font-size-hero: 9.75rem; /* 156px */
  /* Legacy aliases — names not on the Matter scale */
  --font-size-display-2xs: var(--font-size-display-xs);
  --font-size-display-30: var(--font-size-display-sm);

  /* ============================================
      TYPOGRAPHY - Line Heights
      ============================================ */
  --line-height-text-xs: 1.125rem; /* 18px */
  --line-height-text-sm: 1.25rem; /* 20px */
  --line-height-text-md: 1.5rem; /* 24px */
  --line-height-text-lg: 1.75rem; /* 28px */
  --line-height-text-xl: 1.875rem; /* 30px */
  --line-height-caption: 1rem; /* 16px */

  /* ============================================
      TYPOGRAPHY - Display Line Heights
      ============================================ */
  --line-height-display-xs: 2rem; /* 32px */
  --line-height-display-sm: 2.375rem; /* 38px */
  --line-height-display-2sm: 2.5rem; /* 40px */
  --line-height-display-md: 2.75rem; /* 44px */
  --line-height-display-lg: 3.75rem; /* 60px */
  --line-height-display-xl: 4.5rem; /* 72px */
  --line-height-display-2xl: 5rem; /* 80px — scale card (specimen used 90px) */
  --line-height-display-3xl: 7rem; /* 112px */
  --line-height-display-4xl: 9rem; /* 144px */
  --line-height-hero: 11.25rem; /* 180px */
  --line-height-display-2xs: var(--line-height-display-xs);
  --line-height-display-30: var(--line-height-display-sm);

  /* ============================================
      TYPOGRAPHY - Font Weights
      ============================================ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-medium-plus: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
      TYPOGRAPHY - Letter Spacing
      Figma uses percent of font size; em keeps that ratio.
      ============================================ */
  --letter-spacing-text-xs: -0.005em; /* -0.5% */
  --letter-spacing-text-sm: -0.005em;
  --letter-spacing-text-md: -0.005em;
  --letter-spacing-text-lg: -0.005em;
  --letter-spacing-text-xl: -0.005em;
  --letter-spacing-caption: -0.005em;

  /* ============================================
      TYPOGRAPHY - Display Letter Spacing
      ============================================ */
  --letter-spacing-display-xs: -0.02em; /* -2% */
  --letter-spacing-display-sm: -0.02em;
  --letter-spacing-display-2sm: -0.02em;
  --letter-spacing-display-md: -0.02em;
  --letter-spacing-display-lg: -0.02em;
  --letter-spacing-display-xl: -0.02em;
  --letter-spacing-display-2xl: -0.03em; /* -3% — scale card */
  --letter-spacing-display-3xl: -0.03em; /* -3% */
  --letter-spacing-display-4xl: -0.04em; /* -4% */
  --letter-spacing-hero: -0.04em; /* -4% */
  --letter-spacing-display-2xs: var(--letter-spacing-display-xs);
  --letter-spacing-display-30: var(--letter-spacing-display-sm);

  /* ============================================
      BUTTON — Nova Buttons/Button [rebrand]
      Scoped here so --colors-primary-* stays gray-900 for the rest of the UI.
      ============================================ */
  /* Hierarchies follow Figma: Primary (Brand, green), Primary-Product (black), Secondary
     (outlined), Tertiary (text only). */
  --button-primary-fill: var(--colors-green-700);
  --button-primary-fill-hover: var(--colors-green-800);
  --button-primary-text: var(--colors-base-gray); /* #f7f7f7 */
  --button-primary-border: rgba(0, 0, 0, 0.1);
  --button-primary-product-fill: var(--colors-base-black);
  --button-primary-product-fill-hover: var(--colors-gray-800); /* #373931 */
  --button-primary-product-text: var(--colors-base-gray);
  --button-primary-product-border: rgba(0, 0, 0, 0.1);
  --button-secondary-fill: transparent;
  --button-secondary-fill-hover: var(--colors-green-25);
  --button-secondary-fill-focus: var(--colors-base-gray);
  --button-secondary-text: var(--colors-green-900);
  --button-secondary-border: var(--colors-green-900);
  --button-tertiary-text: var(--colors-green-900);
  --button-tertiary-text-hover: var(--colors-green-800);
  --button-tertiary-fill-focus: var(--colors-base-gray);
  --button-destructive-fill: var(--colors-red-700);
  --button-destructive-fill-hover: var(--colors-red-800);
  --button-destructive-text: var(--colors-base-gray);
  --button-destructive-border: rgba(0, 0, 0, 0.1);
  --button-destructive-secondary-fill: var(--colors-base-white);
  --button-destructive-secondary-fill-hover: var(--colors-red-25);
  --button-destructive-secondary-text: var(--colors-red-900);
  --button-destructive-secondary-border: var(--colors-red-300);
  --button-destructive-tertiary-text: var(--colors-red-900);
  --button-destructive-focus-ring: #f04438; /* Figma literal; not a token (red-500 is #e6422f) */
  --button-disabled-fill: var(--colors-gray-100);
  --button-disabled-text: var(--colors-gray-600);
  --button-disabled-border: rgba(0, 0, 0, 0.1);
  --button-focus-ring: var(--colors-green-800);
  --button-focus-gap: var(--colors-base-white);

  /* ============================================
      BUTTON SIZES - Extra small (xs)
      ============================================ */
  --button-xs-height: 1.75rem;
  --button-xs-padding-x: 0.75rem;
  --button-xs-padding-y: 0.5rem;
  --button-xs-gap: var(--spacing-xs);
  --button-xs-radius: 0.375rem; /* 6px — Nova radius-sm; --radius-sm in this file is 4px */
  --button-xs-icon-size: 1.25rem;
  --button-xs-font-size: var(--font-size-text-sm);
  --button-xs-line-height: var(--line-height-text-sm);
  --button-xs-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Small (sm)
      ============================================ */
  --button-sm-height: 2.25rem;
  --button-sm-padding-x: 0.75rem;
  --button-sm-padding-y: 0.5rem;
  --button-sm-gap: var(--spacing-xs);
  --button-sm-radius: var(--radius-md);
  --button-sm-icon-size: 1.25rem;
  --button-sm-font-size: var(--font-size-text-sm);
  --button-sm-line-height: var(--line-height-text-sm);
  --button-sm-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Medium (md)
      ============================================ */
  --button-md-height: 2.5rem;
  --button-md-padding-x: 0.875rem;
  --button-md-padding-y: 0.625rem;
  --button-md-gap: var(--spacing-xs);
  --button-md-radius: var(--radius-md);
  --button-md-icon-size: 1.25rem;
  --button-md-font-size: var(--font-size-text-sm);
  --button-md-line-height: var(--line-height-text-sm);
  --button-md-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Large (lg)
      Icon-only lg is 44px; the labeled button is 48px.
      ============================================ */
  --button-lg-height: 3rem;
  --button-lg-icon-only-size: 2.75rem;
  --button-lg-padding-x: 1rem;
  --button-lg-padding-y: 0.625rem;
  --button-lg-gap: var(--spacing-sm);
  --button-lg-radius: 0.625rem; /* 10px — Nova radius-lg; --radius-lg in this file is 12px */
  --button-lg-icon-size: 1.25rem;
  --button-lg-font-size: var(--font-size-text-md);
  --button-lg-line-height: var(--line-height-text-md);
  --button-lg-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      BUTTON SIZES - Extra Large (xl)
      ============================================ */
  --button-xl-height: 3.5rem;
  --button-xl-padding-x: 1rem;
  --button-xl-padding-y: 0.75rem;
  --button-xl-gap: var(--spacing-sm);
  --button-xl-radius: 0.75rem; /* 12px — Nova radius-xl; --radius-xl in this file is 16px */
  --button-xl-icon-size: 1.25rem;
  --button-xl-font-size: var(--font-size-text-md);
  --button-xl-line-height: var(--line-height-text-md);
  --button-xl-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      SEMANTIC COLORS - Interactive States
      ============================================ */
  --color-interactive-default: var(--colors-blue-500);
  --color-interactive-hover: var(--colors-blue-600);
  --color-interactive-active: var(--colors-blue-700);
  --color-interactive-subtle: var(--colors-blue-100);
  --color-interactive-disabled: var(--colors-gray-200);

  /* ============================================
      SEMANTIC COLORS - Text
      ============================================ */
  --color-text-primary: var(--colors-gray-900);
  --color-text-secondary: var(--colors-gray-800);
  --color-text-tertiary: var(--colors-gray-700);
  --color-text-disabled: var(--colors-gray-500);
  --color-text-on-interactive: #ffffff;
  --color-text-link: var(--colors-gray-800);

  /* ============================================
      SEMANTIC COLORS - Borders
      ============================================ */
  --color-border-default: var(--colors-gray-border);
  --color-border-subtle: var(--colors-gray-200);
  --color-border-strong: var(--colors-gray-700);
  --color-border-interactive: var(--color-interactive-default);
  --color-border-disabled: var(--colors-disabled-border);

  /* ============================================
      SEMANTIC COLORS - Backgrounds
      ============================================ */
  --color-bg-primary: var(--colors-base-white);
  --color-bg-secondary: var(--colors-gray-100);
  --color-bg-disabled: var(--colors-gray-100);
  --color-bg-interactive-subtle: var(--colors-blue-50);
  --gradient-bg-light: linear-gradient(172deg, #f3f4f6 1.74%, #e3e3e8 110.94%);

  /* ============================================
      SEMANTIC COLORS - Status (Error)
      ============================================ */
  --color-status-error-text: var(--colors-red-700);
  --color-status-error-bg: var(--colors-red-300);
  --color-status-error-border: var(--colors-red-50);

  /* ============================================
      SEMANTIC COLORS - Status (Success)
      ============================================ */
  --color-status-success-text: var(--colors-green-700);
  --color-status-success-bg: var(--colors-green-50);
  --color-status-success-border: var(--colors-green-600);

  /* ============================================
      SEMANTIC COLORS - Status (Warning)
      ============================================ */
  --color-status-warning-text: var(--colors-yellow-700);
  --color-status-warning-bg: var(--colors-yellow-50);
  --color-status-warning-border: var(--colors-yellow-600);

  /* ============================================
      TRANSITIONS
      ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Entrance for popovers opened from an anchored trigger (account menu, quick
     menu, inline search): fade in while rising from below. The curve is the same
     one the side sheet slides in on. */
  --popover-rise-distance: 10px;
  --popover-rise-duration: 0.2s;
  --popover-rise-easing: cubic-bezier(0.32, 0.72, 0, 1);

  /* ============================================
      AVATAR TOKENS (Nova | Design System - Foundation)
      ============================================ */
  --avatar-size-xs: 1.5rem;   /* 24px */
  --avatar-size-sm: 2rem;      /* 32px */
  --avatar-size-md: 2.5rem;    /* 40px */
  --avatar-size-lg: 3rem;      /* 48px */
  --avatar-size-xl: 3.5rem;    /* 56px */
  --avatar-size-2xl: 4rem;    /* 64px */
  --avatar-bg-default: var(--colors-gray-100);
  --avatar-border-color: var(--colors-alpha-white-90);
  --avatar-text-color: var(--colors-gray-700);
  --avatar-status-indicator-border: var(--color-bg-primary);
  --avatar-shadow-light: 0 4px 18px 0 var(--colors-alpha-black-06);
  --avatar-bg-dark: var(--colors-gray-800);
  --avatar-bg-dark-gradient: linear-gradient(172deg, rgb(76, 74, 74) 6.23%, rgb(0, 0, 0) 103.28%);
  --avatar-border-color-dark: var(--colors-alpha-white-30);
  --avatar-border-width-dark: 2px;
  --avatar-text-color-dark: var(--colors-alpha-white-90);
  --avatar-icon-color-dark: var(--colors-alpha-white-80);
  --avatar-icon-size-xs: 1rem;    /* 16px */
  --avatar-icon-size-sm: 1.25rem; /* 20px */
  --avatar-icon-size-md: 1.5rem;  /* 24px */
  --avatar-icon-size-lg: 1.75rem;  /* 28px */
  --avatar-icon-size-xl: 2rem;     /* 32px */
  --avatar-icon-size-2xl: 2rem;    /* 32px */

  /* ============================================
      MODAL TOKENS
      ============================================ */
  --modal-bg: var(--colors-gray-100);
  --modal-border-radius: var(--radius-5xl);
  --modal-max-width: 400px;
  --modal-shadow:
    0 1.25rem 1.5625rem -5px rgba(0, 0, 0, 0.1), 0 0.625rem 0.625rem -5px rgba(0, 0, 0, 0.04);
  --modal-backdrop-color: rgba(0, 0, 0, 0.4);
  --modal-backdrop-blur: 1rem;
  --modal-close-button-size: 2.75rem;
  --modal-close-button-color: var(--colors-gray-800);
  --modal-close-button-hover-bg: rgba(0, 0, 0, 0.05);
  --modal-close-button-focus-outline: 2px solid var(--colors-blue-500);
  --modal-icon-container-bg: var(--colors-blue-100);
  --modal-icon-container-radius: var(--radius-xl); /* 1rem per Figma */
  --modal-icon-color: var(--colors-blue-500);
  --modal-animation-duration: 250ms;
  /* Modal title typography - matches Figma display-xs specs */
  --modal-title-font-size: 1.5rem;
  --modal-title-line-height: 2rem;
  --modal-title-letter-spacing: 0;

  /* ============================================
      PAGE HEADER (layout / color only; typography uses display tokens above)
      ============================================ */
  --page-header-gap: var(--spacing-4xl);
  --page-header-content-gap: var(--spacing-lg);
  --page-header-row-gap: var(--spacing-xl);
  --page-header-actions-gap: var(--spacing-lg);
  --page-header-title-color: var(--colors-primary-default);
  --page-header-title-font-weight: var(--font-weight-medium);
  --page-header-secondary-info-color: var(--colors-gray-800);
  --page-header-logo-size: 4rem;
  --page-header-logo-border-color: rgba(0, 0, 0, 0.1);
  --page-header-divider-color: var(--colors-gray-300);
  --page-header-divider-height: 1px;

  /* ============================================
      ALERTS (Nova | Web)
      ============================================ */
  /* Title/description/close/CTA colour for the blue alert. The variant's SURFACE is --colors-blue-50,
     which tokens-dark.css themes to #0A1929 — but --colors-blue-800 has no dark value, so the text
     stayed #0040c1 on that navy box: measured 2.11:1, below AA and effectively unreadable. Authored
     as its own token so the dark theme can pick a light blue from the scale WITHOUT redefining
     --colors-blue-800, which also drives buttons and links elsewhere in fragno. */
  --alerts-blue-text: var(--colors-blue-800);

  /* Border for the gray alert. Its surface (--colors-gray-100) and text (--colors-gray-800)
     are both themed already, but --colors-gray-400 has no dark value, so the edge stayed
     #a3a3a3 — legible on the dark #2a2a2a box, yet far louder than a dark-mode border should
     be. Its own token so dark can step the other way along the scale without touching
     --colors-gray-400, which is also the default secondary border across fragno. */
  --alerts-gray-border: var(--colors-gray-400);

  /* ============================================
      GLOBAL NAV — scrolled "glass" surfaces (Nova | Web)
      ============================================ */
  /* The scrolled pill (__bar) and the detached suggestions panel (__panel) share one recipe:
     translucent fill + blur(12px) + lifted shadow. On a light page a 10% BLACK wash is what makes
     glass read. On a dark page the same wash darkens an already-dark surface — measured 1.03:1
     against the #1a1a1a canvas, i.e. the pill vanished — so tokens-dark.css flips the fill to a
     white lift and deepens the shadow. Authored as tokens rather than inline so the two surfaces
     cannot drift apart, and so --colors-alpha-black-10 (used for borders and dividers elsewhere)
     does not have to change meaning per theme. */
  --global-nav-glass-bg: var(--colors-alpha-black-10);
  --global-nav-glass-shadow-color: var(--colors-alpha-black-10);

  /* Table selected row (fragno-table, incl. every row after select-all). The rule used --colors-blue-25 directly, and blue-25 is the one
     rung of the blue ramp tokens-dark.css does not override (50/100/500/600/700 all are), so a
     selected row stayed #f5f8ff — near-white — under white text in dark. This is the light value,
     unchanged; the dark counterpart is in fragno-dev-portal.css's [data-theme="dark"] block.
       light  #ffffff → #f5f5f5 → #f5f8ff  (row → hover → selected)
       dark   #1a1a1a → #2a2a2a → #424242 */
  --table-row-selected-surface: var(--colors-blue-25);

  /* ============================================
      CARD (shared elevation / hover - Nova | Web)
      Used by featured card and other card components.
      ============================================ */
  /* Card surfaces. Authored as tokens (not literals) so the card family themes: tokens-dark.css
     overrides both. `translucent` is the 0.8-alpha fill shared by community/offer/featured/content
     cards; `border-white` is the `data-style="white"` edge, which matches its own surface. */
  /* Base surface as an RGB triple so translucent surfaces can theme at ANY alpha:
     `background: rgb(var(--surface-base-rgb) / 0.4)`. One token instead of one per opacity — the
     card/panel/CTA surfaces use 0.4, 0.6, 0.8, 0.85 and 0.92. */
  --surface-base-rgb: 255 255 255;
  --card-surface-translucent: rgba(255, 255, 255, 0.8);
  --card-surface-border-white: #ffffff;

  --card-shadow-default: 0 1px 4px rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(10, 13, 18, 0.06);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(10, 13, 18, 0.08);
  /* Figma shadow-sm: two layers of #0a0d121a (colors/effects/shadows/shadow-sm_01, _02) */
  --shadow-sm: 0 1px 3px rgba(10, 13, 18, 0.1), 0 1px 2px rgba(10, 13, 18, 0.1);
  /* Edge for cards that rely on a fill and shadow, both dropped in forced-colors mode. */
  --forced-colors-border-width: 1px;

  /* ============================================
      HERO CARD (Nova | Web)
      ============================================ */
  --hero-card-border-width: 1px;
  --hero-card-border-light: var(--color-bg-primary);
  /* Dark variant: thin border visible on dark backgrounds (Figma Outline style); use light border. */
  --hero-card-border-dark: rgba(255, 255, 255, 0.25);
  --hero-card-radius: var(--radius-5xl);
  /* Blur at bottom-left text area (frosted glass) */
  --hero-card-image-blur: 15px;
  --hero-card-gradient-overlay: linear-gradient(
      191.27deg,
      rgba(76, 137, 134, 0.05) 68.49%,
      rgba(20, 38, 37, 0.2) 92.7%
    ),
    linear-gradient(
      187.64deg,
      rgba(0, 0, 0, 0) 48.84%,
      rgba(0, 0, 0, 0.5) 83.08%,
      rgba(0, 0, 0, 0.7) 106.05%
    );
  --hero-card-sm-width: 24rem;
  --hero-card-sm-height: 13.5rem;
  --hero-card-md-width: 24rem;
  --hero-card-md-height: 16.5rem;
  --hero-card-lg-width: 24rem;
  --hero-card-lg-height: 20rem;
  --hero-card-xl-width: 63rem;
  --hero-card-xl-height: 31.5rem;
  --hero-card-xl-min-width: 52.5rem;
  --hero-card-xl-min-height: 26.25rem;
  --hero-card-icon-container-sm-width: 5rem;
  --hero-card-icon-container-sm-height: 3.75rem;
  --hero-card-icon-container-xl-width: 7.5rem;
  --hero-card-icon-container-xl-height: 5.625rem;
  --hero-card-action-size-sm: 2.5rem;
  --hero-card-action-size-xl: 3.25rem;

  /* Category card (Nova | Web — Figma 65655:32227) */
  --category-card-width: 24rem;
  --category-card-min-width: 17.5rem;
  --category-card-height-sm: 13.5rem;
  --category-card-height-md: 16.5rem;
  --category-card-height-lg: 20rem;
  --category-card-height-xl: 24.375rem;
  --category-card-radius: var(--radius-5xl);
  --category-card-border-width: 1.6px;
  --category-card-border-width-hover: 1.68px;
  --category-card-border-color: #ffffff;
  --category-card-fallback-bg: rgba(255, 255, 255, 0.8);
  --category-card-title-font-size: 1.5rem;
  --category-card-title-line-height: 2rem;
  --category-card-title-letter-spacing: -0.03rem;

  /* Text on image overlay — Nova Web hero cards (Figma: utility-gray-50, utility-gray-200) */
  --hero-card-text-eyebrow: var(--colors-gray-50);
  --hero-card-text-title: var(--colors-gray-50);
  --hero-card-text-subtitle: var(--colors-gray-200);
  --hero-card-text-description: var(--colors-gray-200);
  /* XL subtitle: Display sm/Medium — Nova | Web Hero Cards (Figma: Hero Cards, xl) */
  --hero-card-xl-subtitle-font-size: var(--font-size-display-sm);
  --hero-card-xl-subtitle-line-height: var(--line-height-display-sm);
  --hero-card-xl-subtitle-letter-spacing: var(--letter-spacing-display-sm);
  /* XL description: Text xl/Regular */
  --hero-card-xl-description-font-size: var(--font-size-text-xl);
  --hero-card-xl-description-line-height: var(--line-height-text-xl);
  --hero-card-xl-description-letter-spacing: var(--letter-spacing-text-xl, 0);

  /* ============================================
      FEATURED CARD (Nova | Web)
      ============================================ */
  --featured-card-width: 24rem;
  --featured-card-height: 25.375rem; /* +1.25rem to absorb the circular-logo chip (60→80) */
  --featured-card-min-width: 17.5rem; /* match --offer-card-md-min-width so card-grid wrapping aligns */
  --featured-card-min-height: 21.25rem;
  --featured-card-radius: var(--radius-5xl);
  --featured-card-border-width: 1.6px;
  /* Fixed image band — Nova | Web Featured Cards (Figma: QQ7oqsQdNUUsW88EqJHWAB, node 65655:30703). Tune to match Dev Mode if needed. */
  --featured-card-media-height: 12rem;
  --featured-card-store-logo-width: 5rem;
  --featured-card-store-logo-height: 3.75rem;
  --featured-card-action-size: 2.5rem;
  /* Typography — Nova | Web Featured Cards (Figma: Featured Cards, node 65655:30703) */
  --featured-card-text-eyebrow-font-size: var(--font-size-text-md);
  --featured-card-text-eyebrow-line-height: var(--line-height-text-md);
  --featured-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --featured-card-text-title-font-size: var(--font-size-text-xl);
  --featured-card-text-title-line-height: var(--line-height-text-xl);
  --featured-card-text-title-letter-spacing: var(--letter-spacing-text-xl);
  --featured-card-text-subtitle-font-size: var(--font-size-text-md);
  --featured-card-text-subtitle-line-height: var(--line-height-text-md);
  --featured-card-text-subtitle-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      CONTENT CARD (Nova | Web)
      Figma: QQ7oqsQdNUUsW88EqJHWAB — Content Cards, node 65677:6873
      ============================================ */
  --content-card-width: 24rem;
  --content-card-min-width: 20rem;
  --content-card-min-height: 20rem;
  --content-card-radius: var(--radius-5xl);
  --content-card-border-width: 1.6px;
  /* Fixed image band — Nova | Web content cards (Figma: 236px) */
  --content-card-media-height: 14.75rem; /* 236px @ 16px root */
  --content-card-description-line-clamp: 4;
  --content-card-action-size: 2.5rem;
  --content-card-text-eyebrow-font-size: var(--font-size-text-md);
  --content-card-text-eyebrow-line-height: var(--line-height-text-md);
  --content-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --content-card-text-title-font-size: var(--font-size-display-2xs);
  --content-card-text-title-line-height: var(--line-height-display-xs);
  --content-card-text-title-letter-spacing: var(--letter-spacing-display-2xs);
  --content-card-text-description-font-size: var(--font-size-text-md);
  --content-card-text-description-line-height: var(--line-height-text-md);
  --content-card-text-description-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      COMMUNITY OFFER CARD (ID.me | Browser Extension 2026 — Figma 14054:178460)
      ============================================ */
  --community-offer-card-surface: rgb(var(--surface-base-rgb) / 0.75);
  --community-offer-card-radius: var(--radius-xl); /* 16px */
  --community-offer-card-padding: var(--spacing-xl);
  --community-offer-card-gap: var(--spacing-xl);
  --community-offer-card-shadow: var(--shadow-sm);
  --community-offer-card-shadow-hover: var(--card-shadow-hover);
  --community-offer-card-tile-size: 3.5rem; /* 56px */
  --community-offer-card-tile-radius: var(--radius-md); /* 8px */
  --community-offer-card-tile-surface: var(--colors-gray-200); /* Rebrand Light Grey #e4e7e0 */
  --community-offer-card-icon-size: var(--spacing-4xl); /* 32px */
  --community-offer-card-icon-color: var(--colors-green-900); /* Rebrand Dark Green #032318 */
  --community-offer-card-eyebrow-font-size: var(--font-size-caption); /* 10px */
  --community-offer-card-eyebrow-line-height: 0.875rem; /* 14px; --line-height-caption is 16px */
  --community-offer-card-eyebrow-letter-spacing: 0.03125rem; /* 0.5px; no positive tracking token */
  /* Same text tokens as fragno-offer-panel's headlines (gray-900) and subtitles (gray-700). */
  --community-offer-card-eyebrow-color: var(--color-text-tertiary);
  --community-offer-card-title-color: var(--color-text-primary);
  --community-offer-card-subtitle-color: var(--colors-base-black);

  /* ============================================
      OFFER PANEL (ID.me | Browser Extension 2026 — Figma 14053:176385, cashback 13988:144568)
      ============================================ */
  /* Card body (primary-offer + coupon). White at 75%: the opaque #FFF top layer in Figma Dev
     Mode is the background blur exported as a fill. */
  --offer-panel-radius: var(--radius-xl); /* 16px */
  --offer-panel-surface: rgb(var(--surface-base-rgb) / 0.75);
  /* Reduced motion drops the blur, so the fill goes near-opaque to stay readable. */
  --offer-panel-surface-opaque: rgb(var(--surface-base-rgb) / 0.95);
  --offer-panel-blur: 6px;
  --offer-panel-shadow: var(--shadow-sm);
  --offer-panel-padding: var(--spacing-3xl);
  --offer-panel-gap: var(--spacing-3xl);
  --offer-panel-badge-gap: var(--spacing-xl);
  --offer-panel-coupon-gap: var(--spacing-xl);
  --offer-panel-transition: var(--transition-base);
  --offer-panel-transition-fast: var(--transition-fast);

  /* Headline: Figma default, then the `headline-size` steps (the extension's length buckets). */
  --offer-panel-headline-font-size: 1.75rem; /* 28px */
  --offer-panel-headline-line-height: 1.75rem; /* 28px */
  --offer-panel-headline-letter-spacing: -0.01em;
  --offer-panel-headline-font-weight: var(--font-weight-medium-plus);
  --offer-panel-headline-color: var(--color-text-primary);
  --offer-panel-headline-xl-font-size: 1.875rem; /* 30px */
  --offer-panel-headline-xl-line-height: 2.125rem; /* 34px */
  --offer-panel-headline-xl-letter-spacing: -0.046875rem; /* -0.75px */
  --offer-panel-headline-lg-font-size: 1.625rem; /* 26px */
  --offer-panel-headline-lg-line-height: 2rem; /* 32px */
  --offer-panel-headline-lg-letter-spacing: -0.024375rem; /* -0.39px */
  --offer-panel-headline-sm-font-size: 1.375rem; /* 22px */
  --offer-panel-headline-sm-line-height: 1.75rem; /* 28px */
  --offer-panel-headline-sm-letter-spacing: -0.020625rem; /* -0.33px */
  --offer-panel-headline-xs-font-size: 1.125rem; /* 18px */
  --offer-panel-headline-xs-line-height: 1.5rem; /* 24px */
  --offer-panel-headline-xs-letter-spacing: -0.01125rem; /* -0.18px */

  /* Subheadline: Figma default, then the `subheadline-size` steps (the extension's two stops:
     xl = lg and sm = xs; sm/xs keep the default line height, as the extension does today). */
  --offer-panel-subheadline-font-size: var(--font-size-text-xl); /* 20px */
  --offer-panel-subheadline-line-height: var(--line-height-text-xl); /* 30px */
  --offer-panel-subheadline-letter-spacing: 0;
  --offer-panel-subheadline-font-weight: var(--font-weight-medium);
  --offer-panel-subheadline-color: var(--color-text-secondary);
  --offer-panel-subheadline-gap: var(--spacing-xs);
  --offer-panel-subheadline-xl-font-size: var(--font-size-text-xl); /* 20px */
  --offer-panel-subheadline-xl-line-height: 1.5rem; /* 24px */
  --offer-panel-subheadline-xl-letter-spacing: 0.00625rem; /* 0.1px */
  --offer-panel-subheadline-lg-font-size: var(--offer-panel-subheadline-xl-font-size);
  --offer-panel-subheadline-lg-line-height: var(--offer-panel-subheadline-xl-line-height);
  --offer-panel-subheadline-lg-letter-spacing: var(--offer-panel-subheadline-xl-letter-spacing);
  --offer-panel-subheadline-sm-font-size: var(--font-size-text-md); /* 16px */
  --offer-panel-subheadline-sm-line-height: var(--offer-panel-subheadline-line-height);
  --offer-panel-subheadline-sm-letter-spacing: 0.005rem; /* 0.08px */
  --offer-panel-subheadline-xs-font-size: var(--offer-panel-subheadline-sm-font-size);
  --offer-panel-subheadline-xs-line-height: var(--offer-panel-subheadline-sm-line-height);
  --offer-panel-subheadline-xs-letter-spacing: var(--offer-panel-subheadline-sm-letter-spacing);

  /* "How to get this deal" box. No fixed height: Figma's 114px would clip at 200% zoom. */
  --offer-panel-how-to-surface: var(--colors-alpha-white-80);
  --offer-panel-how-to-blur: 10.828px;
  --offer-panel-how-to-border-width: 0.5px;
  --offer-panel-how-to-border-color: var(--colors-gray-200);
  --offer-panel-how-to-radius: var(--radius-md); /* 8px */
  --offer-panel-how-to-padding-y: var(--spacing-lg);
  --offer-panel-how-to-padding-x: var(--spacing-xl);
  --offer-panel-how-to-color: var(--colors-base-black);
  --offer-panel-how-to-heading-line-height: 1.375rem; /* 22px */

  /* Coupon (Figma 14053:178261). The headline uses the default sizes above. The code box hugs
     its content; 64px is a min-height so it grows at 200% zoom. */
  --offer-panel-coupon-section-gap: var(--spacing-3xl);
  --offer-panel-coupon-field-min-height: 4rem; /* 64px */
  --offer-panel-coupon-field-padding-y: var(--spacing-xl);
  --offer-panel-coupon-field-padding-x: var(--spacing-3xl);
  --offer-panel-coupon-border-width: 0.5px;
  --offer-panel-coupon-border-color: var(--colors-alpha-black-20);
  --offer-panel-coupon-border-color-hover: var(--colors-alpha-black-40);
  --offer-panel-coupon-radius: var(--radius-md); /* 8px */
  --offer-panel-coupon-surface: var(--colors-base-white);
  --offer-panel-coupon-color: var(--colors-base-black);
  --offer-panel-coupon-code-letter-spacing: 0.05em; /* 0.8px */
  --offer-panel-coupon-rule-line-height: 1.25rem; /* 20px */
  --offer-panel-coupon-btn-hover-surface: var(--colors-gray-200);

  /* Cashback row: 10px + 24px + 10px = Figma's 44px, growing with its text. */
  --offer-panel-cashback-padding-y: 0.625rem; /* 10px */
  --offer-panel-cashback-padding-x: 0.875rem; /* 14px */
  --offer-panel-cashback-line-height: var(--line-height-text-md); /* 24px */
  --offer-panel-cashback-letter-spacing: 0.01em;
  --offer-panel-cashback-color: var(--colors-base-black);

  /* Offers list. Room for fragno-community-offer-card's focus ring (2px outline + 2px offset). */
  --offer-panel-list-inset: var(--spacing-xs);
  --offer-panel-list-title-color: var(--colors-gray-900);
  --offer-panel-list-subtitle-color: var(--colors-gray-700);

  /* ============================================
      OFFER CARD (Nova | Web)
      ============================================ */
  --offer-card-radius: var(--radius-5xl);
  --offer-card-border-width: 1.6px;
  --offer-card-store-logo-width: 5rem;
  --offer-card-store-logo-height: 3.75rem;
  --offer-card-action-size: 2.5rem;
  /* Typography — Nova | Web Offer Cards (Figma: Offer Cards, node 65655:31211) */
  --offer-card-text-eyebrow-font-size: var(--font-size-text-sm);
  --offer-card-text-eyebrow-line-height: var(--line-height-text-sm);
  --offer-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-eyebrow-sm-font-size: var(--font-size-text-md);
  --offer-card-text-eyebrow-sm-line-height: var(--line-height-text-md);
  --offer-card-text-eyebrow-sm-letter-spacing: var(--letter-spacing-text-md);
  --offer-card-text-title-font-size: var(--font-size-text-lg);
  --offer-card-text-title-line-height: var(--line-height-text-lg);
  --offer-card-text-title-letter-spacing: var(--letter-spacing-text-lg);
  --offer-card-text-title-lg-font-size: var(--font-size-text-xl);
  --offer-card-text-title-lg-line-height: var(--line-height-text-xl);
  --offer-card-text-title-lg-letter-spacing: var(--letter-spacing-text-xl);
  --offer-card-text-subtitle-font-size: var(--font-size-text-sm);
  --offer-card-text-subtitle-line-height: var(--line-height-text-sm);
  --offer-card-text-subtitle-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-subtitle-lg-font-size: var(--font-size-text-md);
  --offer-card-text-subtitle-lg-line-height: var(--line-height-text-md);
  --offer-card-text-subtitle-lg-letter-spacing: var(--letter-spacing-text-md);
  /* XS */
  --offer-card-xs-min-height: 6.375rem;   /* 102 (Figma 69157:40163) */
  --offer-card-xs-max-height: 6.375rem;
  --offer-card-xs-store-logo-width: 3.875rem;
  --offer-card-xs-store-logo-height: 3.25rem;
  --offer-card-xs-action-size: 2.25rem;

  /* SM */
  --offer-card-sm-width: 24rem;
  --offer-card-sm-min-width: 20rem;
  --offer-card-sm-max-width: 25rem;
  --offer-card-sm-min-height: 7.5rem;
  --offer-card-sm-max-height: 10rem;
  /* MD */
  --offer-card-md-width: 24rem;
  --offer-card-md-min-width: 17.5rem;
  --offer-card-md-height: 13.75rem;       /* 220 (Figma 65669:6310) */
  --offer-card-md-min-height: 13.75rem;
  --offer-card-md-max-height: 20rem;
  /* LG */
  --offer-card-lg-width: 24rem;
  --offer-card-lg-min-width: 18.375rem;
  --offer-card-lg-height: 15.3125rem;     /* 245 (Figma 65655:31212) */
  --offer-card-lg-min-height: 15.3125rem;

  /* ============================================
      COMMUNITY CARD (Nova | Web)
      ============================================ */
  --community-card-radius: var(--radius-5xl);
  --community-card-border-width: 1.6px;
  --community-card-icon-wrap-size: 2.25rem;
  --community-card-icon-size: 1.25rem;
  --community-card-width: 24rem;
  --community-card-min-width: 17.5rem;
  /* Nova | Web — Community Cards frame: Vertical 384×156, Horizontal 384×104 */
  --community-card-min-height: 9.75rem;
  --community-card-min-height-horizontal: 6.5rem;

  /* ============================================
      PROGRESS CARD (Nova | Web – Figma 71862:53597)
      ============================================ */
  --progress-card-radius: var(--radius-5xl); /* 32px */
  --progress-card-border-width: 1.6px;
  --progress-card-padding-x: var(--spacing-2xl); /* 20px */
  --progress-card-padding-y: var(--spacing-3xl); /* 24px */
  --progress-card-padding-mobile: var(--spacing-2xl); /* 20px all sides */
  --progress-card-width: 24rem; /* 384px desktop */
  --progress-card-width-mobile: 23.4375rem; /* 375px */
  --progress-card-max-width: 25rem; /* 400px */
  --progress-card-min-width: 17.5rem; /* 280px */
  --progress-card-top-gap: var(--spacing-lg); /* 12px */
  --progress-card-content-gap: var(--spacing-lg); /* 12px desktop */
  --progress-card-content-gap-mobile: var(--spacing-xl); /* 16px mobile */
  --progress-card-bottom-gap: var(--spacing-xl); /* 16px */
  --progress-card-logo-size: 4.125rem; /* 66px desktop */
  --progress-card-logo-size-mobile: 3.75rem; /* 60px */
  --progress-card-icon-size: 3.5rem; /* 56px */
  --progress-card-icon-glyph-size: 1.9375rem; /* 31px */
  --progress-card-icon-radius: var(--radius-2xl);
  --progress-card-icon-bg: var(--colors-gray-100);
  --progress-card-headline-color: var(--colors-gray-900);
  --progress-card-headline-font-weight: 550;
  --progress-card-text-color: var(--colors-gray-900);
  --progress-card-divider-color: var(--colors-alpha-black-20);
  --progress-card-bg-transparent: var(--colors-alpha-white-80);
  --progress-card-border-transparent: #ffffff; /* alpha-white-100 */
  --progress-card-bg-outline: #ffffff;
  --progress-card-border-outline: var(--colors-alpha-black-10);
  --progress-card-shadow: 0px 4px 18px 8px rgba(0, 0, 0, 0.02), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
  --progress-card-shadow-mobile: 0px 6px 18px 8px rgba(0, 0, 0, 0.06), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);

  /* ============================================
      RIBBON BANNER (Nova | Web – Figma 67321:8416)
      ============================================ */
  --ribbon-banner-content-max-width: 45rem; /* 720px */
  --ribbon-banner-text-column-max-width: 40.25rem; /* 644px */
  --ribbon-banner-padding-x: var(--spacing-2xl); /* 20px */
  --ribbon-banner-gap-section: var(--spacing-lg); /* 12px reserved (icon+text block) */
  --ribbon-banner-gap-icon-text: var(--spacing-xxs); /* 2px between icon and label */
  --ribbon-banner-padding-y-lg: var(--spacing-md); /* 8px vertical – size lg */
  --ribbon-banner-padding-y-md-sm: var(--spacing-xs); /* 4px vertical – size md, sm */
  --ribbon-banner-icon-wrap-radius: var(--radius-md);
  --ribbon-banner-icon-padding-lg-md: var(--spacing-md); /* 8px */
  --ribbon-banner-icon-padding-sm: 0.416667rem; /* ~6.667px */
  --ribbon-banner-icon-size-lg-md: 1.25rem; /* 20px */
  --ribbon-banner-icon-size-sm: 1.041667rem; /* ~16.667px */
  --ribbon-banner-action-padding-lg-md: var(--spacing-md);
  --ribbon-banner-action-padding-sm: 0.416667rem;
  --ribbon-banner-white-elevation: var(--card-shadow-default);
  --ribbon-banner-green-gradient-base: radial-gradient(
    120% 200% at 50% 0%,
    var(--colors-green-gradient-start) 0%,
    var(--colors-green-gradient-end) 100%
  );
  --ribbon-banner-green-gradient-highlight: radial-gradient(
    90% 140% at 50% 110%,
    var(--colors-green-gradient-highlight) 0%,
    transparent 65%
  );
  /* Content row height with leading icon (padding + icon); same min-height when icon omitted */
  --ribbon-banner-content-row-min-height-lg-md: calc(
    var(--ribbon-banner-icon-padding-lg-md) * 2 + var(--ribbon-banner-icon-size-lg-md)
  );
  --ribbon-banner-content-row-min-height-sm: calc(
    var(--ribbon-banner-icon-padding-sm) * 2 + var(--ribbon-banner-icon-size-sm)
  );

  /* ============================================
      CARD SYSTEM BUILDING BLOCKS (Nova | Web – Figma 74383:66170,
      74113:67234, 74149:24194, 74296:80205, 74296:79897)
      Status badge, icon tile, item block (+ group), list item (+ block).
      ============================================ */
  /* Framed variants (outline / grey) shared by item block and list item block,
     so the two stay aligned when they sit side by side on one card. Nova draws
     the greys as #f7f7f7 and #f0f0f1; one grey until a designer says otherwise. */
  --card-block-radius: var(--radius-xl); /* 16px — Nova radius 2xl */
  --card-block-border-color: var(--colors-gray-300);
  --card-block-surface-grey: var(--colors-gray-50);

  /* Status badge — Nova pairs a 600-level dot with its 100-level halo */
  --status-badge-bg: var(--colors-gray-100);
  --status-badge-radius: var(--radius-md);
  --status-badge-label-color: var(--colors-gray-700);
  /* Nova text xs runs 18px/-0.06px here, wider than the shared text-xs tokens */
  --status-badge-label-line-height: 1.125rem;
  --status-badge-label-letter-spacing: -0.00375rem;
  --status-badge-indicator-size: 1rem; /* 16px box */
  --status-badge-dot-size: 0.5rem; /* 8px dot */
  --status-badge-halo-width: 3px;
  --status-badge-dot-neutral: var(--colors-gray-500);
  --status-badge-halo-neutral: var(--colors-gray-200);
  --status-badge-dot-success: #099250; /* Nova Green 600 */
  --status-badge-halo-success: var(--colors-green-100);
  --status-badge-dot-warning: var(--colors-yellow-600);
  --status-badge-halo-warning: var(--colors-yellow-100);
  --status-badge-dot-error: var(--colors-red-600);
  --status-badge-halo-error: var(--colors-red-100);
  --status-badge-dot-info: var(--colors-blue-600);
  --status-badge-halo-info: var(--colors-blue-100);

  /* Icon tile — Nova rounds these at its radius lg/xl/2xl (10/12/16px); only
     the 10px has no counterpart in the radius scale above. */
  --icon-tile-size-sm: 1.625rem; /* 26px */
  --icon-tile-size-md: 2.125rem; /* 34px */
  --icon-tile-size-lg: 2.625rem; /* 42px */
  --icon-tile-size-xl: 3rem; /* 48px */
  --icon-tile-glyph-size-sm: 0.875rem; /* 14px */
  --icon-tile-glyph-size-md: 1.125rem; /* 18px */
  --icon-tile-glyph-size-lg: 1.5rem; /* 24px */
  --icon-tile-glyph-size-xl: 2rem; /* 32px */
  --icon-tile-radius-sm: 0.625rem; /* 10px */
  --icon-tile-radius-md: var(--icon-tile-radius-sm);
  --icon-tile-radius-lg: var(--radius-lg); /* 12px */
  --icon-tile-radius-xl: var(--radius-xl); /* 16px */
  --icon-tile-bg-grey: var(--colors-gray-100);
  --icon-tile-fg-grey: var(--colors-gray-800);
  --icon-tile-bg-blue: var(--colors-blue-100);
  --icon-tile-fg-blue: var(--colors-blue-700);
  --icon-tile-bg-green: var(--colors-green-100);
  --icon-tile-fg-green: #087443; /* Nova Green 700 */
  --icon-tile-bg-red: var(--colors-red-100);
  --icon-tile-fg-red: var(--colors-red-700);
  --icon-tile-bg-white: #ffffff;
  --icon-tile-fg-white: var(--colors-green-900);
  --icon-tile-fg-transparent: var(--colors-gray-700);

  /* Item block (label above value) and its group */
  --item-block-label-color: var(--colors-gray-700);
  --item-block-value-color: var(--colors-gray-900);
  --item-block-group-gap: var(--spacing-lg);
  --item-block-group-min-item-width: 7.5rem; /* 120px before the row rewraps */

  /* List item (icon + text row) and its block */
  --list-item-gap: var(--spacing-sm);
  --list-item-icon-size: 1.125rem; /* 18px */
  --list-item-text-color: var(--colors-gray-800);
  --list-item-supporting-text-color: var(--colors-gray-500);
  --list-item-icon-color: var(--colors-gray-700);
  --list-item-icon-color-success: var(--icon-tile-fg-green);
  --list-item-icon-color-warning: var(--colors-yellow-700);
  --list-item-icon-color-error: var(--colors-red-700);
  --list-item-icon-color-info: var(--colors-blue-700);
  --list-item-icon-color-muted: var(--colors-gray-400);

  /* Global Nav 2.0 (fragno-global-nav-v2): ink, fills and the regular bar's card. Theme tokens so
     tokens-dark.css can swap them; the compact bar sets its own fixed card values in fragno.css. */
  --global-nav-v2-ink: var(--colors-green-900);
  --global-nav-v2-ink-alpha-10: var(--colors-green-900-alpha-10);
  --global-nav-v2-link-hover-fill: rgba(186, 188, 175, 0.4); /* gray-400 at 40% */
  /* The `selected-style="filled"` active link's pill. */
  --global-nav-v2-selected-fill: var(--colors-gray-400);
  --global-nav-v2-search-hover-fill: rgba(255, 255, 255, 0.6);
  --global-nav-v2-local-fill: rgba(20, 20, 20, 0.02);
  --global-nav-v2-panel-surface: rgba(255, 255, 255, 0.7); /* alpha-white-70 */
  --global-nav-v2-pill-border: var(--colors-alpha-white-80);
  --global-nav-v2-pill-fill: var(--colors-alpha-white-50);
  --global-nav-v2-divider: var(--colors-alpha-black-20);
  --global-nav-v2-card-surface: rgba(255, 255, 255, 0.8); /* alpha-white-80 */
  /* Figma draws the drop shadow under its translucent fill, which reads as a
     light gray (#f7f7f7 on a white page). CSS shadows are clipped inside the box,
     so the same tint is layered on top of the fill. */
  --global-nav-v2-card-tint: rgba(0, 0, 0, 0.03);
  --global-nav-v2-card-border: var(--colors-base-white);
  --global-nav-v2-card-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.12),
    0 2px 4px 0 rgba(10, 13, 18, 0.06);
}



/* fragno 2.7.0 fragno.css, component subset: fragno-avatar, fragno-button, fragno-footer, fragno-global-nav-v2, fragno-logo-lockup. */

.fragno-hidden {
  display: none;
}
@keyframes fragno-popover-rise {
  from {
    opacity: 0;
    transform: translateY(var(--popover-rise-distance, 10px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :host {
    --popover-rise-duration: 0s;
    --popover-rise-distance: 0px;
  }
}
fragno-button:not([shadow]):defined {
  font-size: 0;
  visibility: hidden;
}

fragno-button:not([shadow]):defined > :not(.fragno-button) {
  display: none !important;
}

fragno-button:not([shadow]):defined > .fragno-button {
  visibility: visible;
}
.fragno-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border: 0.6px solid transparent;
  border-radius: var(--button-md-radius);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.fragno-button:focus-visible {
  outline: none;
  box-shadow:
    0 1px 2px 0 rgba(10, 13, 18, 0.05),
    0 0 0 2.6px var(--button-focus-gap),
    0 0 0 4px var(--button-focus-ring);
}

.fragno-button--xs {
  height: var(--button-xs-height);
  padding: var(--button-xs-padding-y) var(--button-xs-padding-x);
  gap: var(--button-xs-gap);
  border-radius: var(--button-xs-radius);
  font-size: var(--button-xs-font-size);
  line-height: var(--button-xs-line-height);
  letter-spacing: var(--button-xs-letter-spacing);
}

.fragno-button--sm {
  height: var(--button-sm-height);
  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
  gap: var(--button-sm-gap);
  border-radius: var(--button-sm-radius);
  font-size: var(--button-sm-font-size);
  line-height: var(--button-sm-line-height);
  letter-spacing: var(--button-sm-letter-spacing);
}

.fragno-button--md {
  height: var(--button-md-height);
  padding: var(--button-md-padding-y) var(--button-md-padding-x);
  gap: var(--button-md-gap);
  border-radius: var(--button-md-radius);
  font-size: var(--button-md-font-size);
  line-height: var(--button-md-line-height);
  letter-spacing: var(--button-md-letter-spacing);
}

.fragno-button--lg {
  height: var(--button-lg-height);
  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
  gap: var(--button-lg-gap);
  border-radius: var(--button-lg-radius);
  font-size: var(--button-lg-font-size);
  line-height: var(--button-lg-line-height);
  letter-spacing: var(--button-lg-letter-spacing);
}

.fragno-button--xl {
  height: var(--button-xl-height);
  padding: var(--button-xl-padding-y) var(--button-xl-padding-x);
  gap: var(--button-xl-gap);
  border-radius: var(--button-xl-radius);
  font-size: var(--button-xl-font-size);
  line-height: var(--button-xl-line-height);
  letter-spacing: var(--button-xl-letter-spacing);
}
@supports (corner-shape: superellipse(2)) {
  .fragno-button {
    corner-shape: superellipse(2.13);
  }

  .fragno-button--xs {
    border-radius: calc(var(--button-xs-radius) * 2);
  }

  .fragno-button--sm {
    border-radius: calc(var(--button-sm-radius) * 2);
  }

  .fragno-button--md {
    border-radius: calc(var(--button-md-radius) * 2);
  }

  .fragno-button--lg {
    border-radius: calc(var(--button-lg-radius) * 2);
  }

  .fragno-button--xl {
    border-radius: calc(var(--button-xl-radius) * 2);
  }
}

.fragno-button--icon-only.fragno-button--xs {
  width: var(--button-xs-height);
  height: var(--button-xs-height);
  padding: 0;
}

.fragno-button--icon-only.fragno-button--sm {
  width: var(--button-sm-height);
  padding: 0;
}

.fragno-button--icon-only.fragno-button--md {
  width: var(--button-md-height);
  padding: 0;
}

.fragno-button--icon-only.fragno-button--lg {
  width: var(--button-lg-icon-only-size);
  height: var(--button-lg-icon-only-size);
  padding: 0;
}

.fragno-button--icon-only.fragno-button--xl {
  width: var(--button-xl-height);
  padding: 0;
}

.fragno-button--primary {
  background-color: var(--button-primary-fill);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
}

.fragno-button--primary:hover:not(:disabled) {
  background-color: var(--button-primary-fill-hover);
}

.fragno-button--primary-product {
  background-color: var(--button-primary-product-fill);
  color: var(--button-primary-product-text);
  border-color: var(--button-primary-product-border);
}

.fragno-button--primary-product:hover:not(:disabled) {
  background-color: var(--button-primary-product-fill-hover);
}

.fragno-button--secondary {
  background-color: var(--button-secondary-fill);
  color: var(--button-secondary-text);
  border-width: 1px;
  border-color: var(--button-secondary-border);
}

.fragno-button--secondary:hover:not(:disabled) {
  background-color: var(--button-secondary-fill-hover);
}

.fragno-button--secondary:focus-visible {
  background-color: var(--button-secondary-fill-focus);
}
.fragno-button--tertiary {
  background-color: transparent;
  color: var(--button-tertiary-text);
  border-color: transparent;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.fragno-button--tertiary:hover:not(:disabled) {
  background-color: transparent;
  color: var(--button-tertiary-text-hover);
}

.fragno-button--tertiary:focus-visible {
  background-color: var(--button-tertiary-fill-focus);
}
.fragno-button--primary.fragno-button--destructive {
  background-color: var(--button-destructive-fill);
  color: var(--button-destructive-text);
  border-width: 0.6px;
  border-color: var(--button-destructive-border);
}

.fragno-button--primary.fragno-button--destructive:hover:not(:disabled) {
  background-color: var(--button-destructive-fill-hover);
}

.fragno-button--primary-product.fragno-button--destructive,
.fragno-button--secondary.fragno-button--destructive {
  background-color: var(--button-destructive-secondary-fill);
  color: var(--button-destructive-secondary-text);
  border-width: 1px;
  border-color: var(--button-destructive-secondary-border);
}

.fragno-button--primary-product.fragno-button--destructive:hover:not(:disabled),
.fragno-button--secondary.fragno-button--destructive:hover:not(:disabled) {
  background-color: var(--button-destructive-secondary-fill-hover);
}

.fragno-button--tertiary.fragno-button--destructive,
.fragno-button--tertiary.fragno-button--destructive:hover:not(:disabled) {
  background-color: transparent;
  color: var(--button-destructive-tertiary-text);
  border-color: transparent;
}
.fragno-button--destructive:focus-visible {
  box-shadow:
    0 0 0 3px var(--button-focus-gap),
    0 0 0 4px var(--button-destructive-focus-ring);
}
.fragno-button--primary:disabled,
.fragno-button--primary-product:disabled {
  background-color: var(--button-disabled-fill);
  color: var(--button-disabled-text);
  border: 0.6px solid var(--button-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
}

.fragno-button--secondary:disabled {
  background-color: transparent;
  color: var(--button-disabled-text);
  border: 1px solid var(--button-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
}

.fragno-button--tertiary:disabled {
  background-color: transparent;
  color: var(--button-disabled-text);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

.fragno-button--green-gradient {
  border: 0.8px solid var(--colors-alpha-white-50);
  background:
    radial-gradient(
      35.06% 48.86% at 50% 89.77%,
      rgba(175, 221, 192, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      43.11% 181.04% at 50% 50%,
      var(--colors-green-gradient-start) 0%,
      var(--colors-green-gradient-end) 100%
    );
  background-blend-mode: lighten, normal;
  color: var(--colors-green-gradient-text, rgba(255, 255, 255, 1));
}

.fragno-button--green-gradient:hover:not(:disabled) {
  border: 0.8px solid var(--colors-alpha-white-50);
  background:
    radial-gradient(
      35.06% 48.86% at 50% 89.77%,
      rgba(175, 221, 192, 0.25) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      43.11% 181.04% at 50% 50%,
      var(--colors-green-gradient-start-hover) 0%,
      var(--colors-green-gradient-end-hover) 100%
    );
  background-blend-mode: lighten, normal;
}

.fragno-button--green-gradient:focus-visible {
  box-shadow:
    0 1px 2px 0 var(--colors-focus-shadow),
    0 0 0 2px var(--colors-secondary-default),
    0 0 0 0.25rem var(--colors-focus-ring);
}

.fragno-button--green-gradient:disabled {
  border: 0.8px solid var(--colors-green-gradient-border-disabled);
  background:
    radial-gradient(
      35.06% 48.86% at 50% 89.77%,
      rgba(175, 221, 192, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      43.11% 181.04% at 50% 50%,
      var(--colors-green-gradient-start-disabled) 0%,
      var(--colors-green-gradient-end-disabled) 100%
    );
  background-blend-mode: lighten, normal;
  color: var(--colors-green-gradient-text-disabled, rgba(255, 255, 255, 0.7));
  cursor: not-allowed;
}

.fragno-button--loading {
  pointer-events: none;
}

.fragno-button--loading.fragno-button--primary {
  background-color: var(--button-primary-fill);
}

.fragno-button--loading.fragno-button--primary-product {
  background-color: var(--button-primary-product-fill);
  border-color: var(--button-primary-product-border);
}

.fragno-button--loading.fragno-button--secondary {
  background-color: var(--button-secondary-fill);
  border-color: var(--button-secondary-border);
}

.fragno-button--loading.fragno-button--tertiary {
  background-color: transparent;
}

.fragno-button--loading.fragno-button--primary.fragno-button--destructive {
  background-color: var(--button-destructive-fill);
}

.fragno-button--loading.fragno-button--primary-product.fragno-button--destructive,
.fragno-button--loading.fragno-button--secondary.fragno-button--destructive {
  background-color: var(--button-destructive-secondary-fill);
}

.fragno-button--loading.fragno-button--tertiary.fragno-button--destructive {
  background-color: transparent;
}

.fragno-button--loading.fragno-button--green-gradient {
  background:
    radial-gradient(
      35.06% 48.86% at 50% 89.77%,
      rgba(175, 221, 192, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      43.11% 181.04% at 50% 50%,
      var(--colors-green-gradient-start) 0%,
      var(--colors-green-gradient-end) 100%
    );
  background-blend-mode: lighten, normal;
}

.fragno-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fragno-button__icon--leading,
.fragno-button__icon--trailing {
  margin: 0;
}

.fragno-button--icon-only .fragno-button__icon {
  margin: 0;
}

.fragno-button__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.fragno-button__icon-img {
  height: 1.25rem;
  width: auto;
  max-width: 5rem;
  display: block;
  object-fit: contain;
}

.fragno-button__spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fragno-spin 1s linear infinite;
}

.fragno-button--secondary .fragno-button__spinner,
.fragno-button--tertiary .fragno-button__spinner,
.fragno-button--primary-product.fragno-button--destructive .fragno-button__spinner,
.fragno-button--secondary.fragno-button--destructive .fragno-button__spinner,
.fragno-button--tertiary.fragno-button--destructive .fragno-button__spinner {
  border-color: rgba(3, 35, 24, 0.12);
  border-top-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-button {
    transition: none;
  }

  .fragno-button__spinner {
    animation: none;
  }
}

@keyframes fragno-spin {
  to {
    transform: rotate(360deg);
  }
}

.fragno-button__text {
  display: inline-block;
  padding-inline: var(--spacing-xxs);
}

.fragno-button--icon-only .fragno-button__text {
  display: none;
}

fragno-logo-lockup::part(lockup) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-lg, 0.75rem);
}

fragno-logo-lockup:not([variant])::part(lockup),
fragno-logo-lockup:not([variant])::part(idme),
fragno-logo-lockup[variant="brand"]::part(lockup),
fragno-logo-lockup[variant="brand"]::part(idme) {
  color: var(--colors-green-900, #032318);
}

fragno-logo-lockup[variant="light"]::part(lockup) {
  color: var(--colors-base-black, #000000);
}

fragno-logo-lockup[variant="light"]::part(idme),
fragno-logo-lockup[variant="light"]::part(partner) {
  color: var(--colors-base-black, #000000);
}

fragno-logo-lockup[variant="dark"]::part(lockup) {
  color: var(--colors-base-white, #ffffff);
}

fragno-logo-lockup[variant="dark"]::part(idme),
fragno-logo-lockup[variant="dark"]::part(divider),
fragno-logo-lockup[variant="dark"]::part(partner) {
  color: var(--colors-base-white, #ffffff);
}

fragno-logo-lockup::part(idme) {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

fragno-logo-lockup::part(divider) {
  width: 0.045rem;
  height: 2.25rem;
  background-color: var(--colors-gray-500, #a6a697);
  flex-shrink: 0;
}

fragno-logo-lockup::part(partner) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  flex-shrink: 0;
  line-height: 0;
}

fragno-logo-lockup::part(partner-img) {
  display: block;
  height: 1.5rem;
  width: auto;
  max-width: 6.525rem;
  object-fit: contain;
}
fragno-logo-lockup[segment]:not([segment=""])::part(lockup) {
  gap: var(--spacing-md, 0.5rem);
}

fragno-logo-lockup::part(segment) {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #141414;
}

fragno-logo-lockup[variant="dark"]::part(segment) {
  color: var(--colors-base-white, #ffffff);
}
.fragno-avatar {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  --avatar-nova-text: #424242;
  --avatar-nova-online: var(--colors-success-600, #099250);
  --avatar-nova-shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
    0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04);
  --avatar-nova-shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08),
    0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  --avatar-ring-width: var(--avatar-border-width-dark);
  --avatar-status-size: 0.75rem;
  --avatar-status-offset: -1px;
  --avatar-status-icon-size: 1rem;
}

.fragno-avatar--xs {
  --avatar-ring-width: 1px;
  --avatar-status-size: 0.375rem;
  --avatar-status-offset: -0.5px;
  --avatar-status-icon-size: 0.625rem;
}

.fragno-avatar--sm {
  --avatar-ring-width: 1px;
  --avatar-status-size: 0.5rem;
  --avatar-status-offset: -0.5px;
  --avatar-status-icon-size: 0.75rem;
}

.fragno-avatar--md {
  --avatar-status-size: 0.625rem;
  --avatar-status-icon-size: 0.875rem;
}

.fragno-avatar--xl {
  --avatar-status-size: 0.875rem;
  --avatar-status-icon-size: 1.125rem;
}

.fragno-avatar--2xl {
  --avatar-status-size: 1rem;
  --avatar-status-icon-size: 1.25rem;
}

.fragno-avatar__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-full);
}

.fragno-avatar__link[aria-hidden="true"] {
  pointer-events: none;
}

.fragno-avatar__main {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--colors-alpha-white-80);
  border: 1px solid var(--avatar-border-color);
  box-shadow: var(--avatar-nova-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fragno-avatar__main--icon:not(.fragno-avatar__main--dark) {
  background-color: var(--colors-alpha-white-70);
}

.fragno-avatar__main--dark {
  background-color: rgb(0, 0, 0);
  background-image: var(--avatar-bg-dark-gradient);
  background-origin: border-box;
  border: none;
  box-shadow: var(--avatar-nova-shadow-xl);
}
.fragno-avatar__main--image {
  background-color: rgb(0, 0, 0);
  border: none;
  box-shadow: var(--avatar-nova-shadow-xl);
}
.fragno-avatar__main--dark::after,
.fragno-avatar__main--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--avatar-ring-width) var(--avatar-border-color-dark);
  pointer-events: none;
}

.fragno-avatar__main--dark .fragno-avatar__initials {
  color: var(--colors-alpha-white-80);
}

.fragno-avatar__main--dark .fragno-avatar__icon {
  color: var(--avatar-icon-color-dark);
}

.fragno-avatar__main--xs {
  width: var(--avatar-size-xs);
  height: var(--avatar-size-xs);
}

.fragno-avatar__main--sm {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
}

.fragno-avatar__main--md {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
}

.fragno-avatar__main--lg {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
}

.fragno-avatar__main--xl {
  width: var(--avatar-size-xl);
  height: var(--avatar-size-xl);
}

.fragno-avatar__main--2xl {
  width: var(--avatar-size-2xl);
  height: var(--avatar-size-2xl);
}

.fragno-avatar__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

.fragno-avatar__initials {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--avatar-nova-text);
  text-align: center;
  line-height: 1;
  user-select: none;
}

.fragno-avatar__main--xs .fragno-avatar__initials {
  font-size: var(--font-size-text-xs);
  letter-spacing: var(--letter-spacing-text-xs);
}

.fragno-avatar__main--sm .fragno-avatar__initials {
  font-size: var(--font-size-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
}

.fragno-avatar__main--md .fragno-avatar__initials {
  font-size: var(--font-size-text-lg);
  letter-spacing: var(--letter-spacing-text-lg);
}

.fragno-avatar__main--lg .fragno-avatar__initials {
  font-size: var(--font-size-text-xl);
  letter-spacing: var(--letter-spacing-text-xl);
}

.fragno-avatar__main--xl .fragno-avatar__initials {
  font-size: var(--font-size-display-xs);
  letter-spacing: var(--letter-spacing-display-xs);
}

.fragno-avatar__main--2xl .fragno-avatar__initials {
  font-size: var(--font-size-display-sm);
  letter-spacing: var(--letter-spacing-display-sm);
}

.fragno-avatar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--avatar-nova-text);
}

.fragno-avatar__icon svg {
  width: var(--avatar-icon-size-md);
  height: var(--avatar-icon-size-md);
  flex-shrink: 0;
}

.fragno-avatar__main--xs .fragno-avatar__icon svg {
  width: var(--avatar-icon-size-xs);
  height: var(--avatar-icon-size-xs);
}

.fragno-avatar__main--sm .fragno-avatar__icon svg {
  width: var(--avatar-icon-size-sm);
  height: var(--avatar-icon-size-sm);
}

.fragno-avatar__main--md .fragno-avatar__icon svg {
  width: var(--avatar-icon-size-md);
  height: var(--avatar-icon-size-md);
}

.fragno-avatar__main--lg .fragno-avatar__icon svg {
  width: var(--avatar-icon-size-lg);
  height: var(--avatar-icon-size-lg);
}

.fragno-avatar__main--xl .fragno-avatar__icon svg {
  width: var(--avatar-icon-size-xl);
  height: var(--avatar-icon-size-xl);
}

.fragno-avatar__main--2xl .fragno-avatar__icon svg {
  width: var(--avatar-icon-size-2xl);
  height: var(--avatar-icon-size-2xl);
}

.fragno-avatar__status {
  position: absolute;
  bottom: var(--avatar-status-offset);
  right: var(--avatar-status-offset);
  width: var(--avatar-status-size);
  height: var(--avatar-status-size);
  border-radius: var(--radius-full);
  background-color: var(--colors-gray-200);
  border: 1.5px solid var(--avatar-status-indicator-border);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.fragno-avatar__status--visible {
  display: flex;
}
.fragno-avatar__status--image {
  bottom: -2.5px;
  right: -2.5px;
  width: var(--avatar-status-icon-size);
  height: var(--avatar-status-icon-size);
  border: 1px solid var(--colors-base-white);
  background-color: var(--colors-base-white);
}

.fragno-avatar__status-icon,
.fragno-avatar__status > * {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fragno-avatar__status > img {
  object-fit: cover;
}

.fragno-avatar__status-dot {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  box-sizing: border-box;
}

.fragno-avatar__status-dot--online {
  background-color: var(--avatar-nova-online);
}

.fragno-avatar__status-dot--offline {
  background-color: var(--colors-gray-400);
}

.fragno-avatar__status-dot--away {
  background-color: var(--colors-yellow-600);
}

.fragno-avatar__status-dot--busy {
  background-color: var(--colors-red-600);
}
fragno-footer {
  display: block;
}

.fragno-footer {
  background-color: var(--colors-gray-900);
  color: var(--colors-alpha-white-90);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
}

.fragno-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--spacing-5xl) var(--spacing-xl);
}

.fragno-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
  border-bottom: 1px solid var(--colors-alpha-white-25);
}

.fragno-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.fragno-footer__logo {
  color: var(--colors-alpha-white-90);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg);
  text-decoration: none;
  width: fit-content;
}

.fragno-footer__logo:hover {
  color: var(--colors-alpha-white-80);
  text-decoration: underline;
}

.fragno-footer__logo:focus-visible {
  outline: 2px solid var(--colors-blue-500);
  outline-offset: 2px;
}

.fragno-footer__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
}

.fragno-footer__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.fragno-footer__stat-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--colors-alpha-white-70);
}

.fragno-footer__stat-icon svg {
  width: 100%;
  height: 100%;
}

.fragno-footer__stat-value {
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-lg);
  color: var(--colors-alpha-white-90);
}

.fragno-footer__stat-label {
  font-size: var(--font-size-text-sm);
  color: var(--colors-alpha-white-70);
}

.fragno-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
}

.fragno-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.fragno-footer__heading {
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium-plus);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
  color: var(--colors-alpha-white-90);
  margin: 0;
}

.fragno-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.fragno-footer__link {
  color: var(--colors-alpha-white-70);
  text-decoration: none;
  font-size: var(--font-size-text-sm);
}

.fragno-footer__link:hover {
  color: var(--colors-alpha-white-90);
  text-decoration: underline;
}

.fragno-footer__link:focus-visible {
  outline: 2px solid var(--colors-blue-500);
  outline-offset: 2px;
}

.fragno-footer__middle {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
  border-bottom: 1px solid var(--colors-alpha-white-25);
}

.fragno-footer__follow,
.fragno-footer__help {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.fragno-footer__social-list {
  display: flex;
  gap: var(--spacing-lg);
}

.fragno-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--colors-alpha-white-70);
  border-radius: var(--radius-md);
}

.fragno-footer__social-link:hover {
  color: var(--colors-alpha-white-90);
  background-color: var(--colors-alpha-white-25);
}

.fragno-footer__social-link:focus-visible {
  outline: 2px solid var(--colors-blue-500);
  outline-offset: 2px;
}

.fragno-footer__social-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-footer__help-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--colors-alpha-white-90);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  width: fit-content;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--colors-alpha-white-50);
  border-radius: var(--radius-md);
}

.fragno-footer__help-link:hover {
  background-color: var(--colors-alpha-white-25);
  border-color: var(--colors-alpha-white-70);
}

.fragno-footer__help-link:focus-visible {
  outline: 2px solid var(--colors-blue-500);
  outline-offset: 2px;
}

.fragno-footer__help-icon {
  display: inline-flex;
}

.fragno-footer__help-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-4xl);
}

.fragno-footer__copyright {
  font-size: var(--font-size-text-sm);
  color: var(--colors-alpha-white-50);
  margin: 0;
}

.fragno-footer__bbb-badge {
  display: block;
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}
@media screen and (min-width: 56.25rem) {
  .fragno-footer__inner {
    padding-left: var(--spacing-5xl);
    padding-right: var(--spacing-5xl);
  }

  .fragno-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-6xl);
  }

  .fragno-footer__brand {
    flex: 0 0 auto;
  }

  .fragno-footer__nav {
    flex-direction: row;
    gap: var(--spacing-6xl);
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .fragno-footer__middle {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .fragno-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
:host,
:host {
  --fragno-tooltip-line-height: 1.125rem;
  --fragno-tooltip-supporting-width: 296px;
  --fragno-tooltip-z-index: 1070;
  --fragno-tooltip-icon-default: #a4a7ae;
  --fragno-tooltip-icon-hover: #717680;
  --fragno-tooltip-shadow:
    0 2px 2px -1px rgba(10, 13, 18, 0.04),
    0 4px 6px -2px rgba(10, 13, 18, 0.03),
    0 12px 16px -4px rgba(10, 13, 18, 0.08);
}

fragno-footer {
  --footer-bg: #0f0f0f;
  --footer-text-primary: #ffffff;
  --footer-text-secondary: #e5e5e5;
  --footer-text-tertiary: #a3a3a3;
  --footer-outline-ui: #e5e5e5;
  --footer-social-border: #525252;
  --footer-muted: var(--footer-text-tertiary);
  --footer-border-subtle: rgba(255, 255, 255, 0.12);
  --footer-padding-x: 5rem;
  --footer-padding-y-top: var(--spacing-7xl, 4rem);
  --footer-padding-y-bottom: var(--spacing-6xl, 3rem);
  --footer-max-width: var(--width-3xl, 80rem);

  display: block;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--footer-bg);
  color: var(--footer-text-primary);
}

.fragno-footer__shell {
  box-sizing: border-box;
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding: var(--footer-padding-y-top) var(--footer-padding-x) var(--footer-padding-y-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6xl, 3rem);
}

.fragno-footer__top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-2xl, 1.25rem);
  width: 100%;
}

.fragno-footer__brand {
  flex: 0 0 auto;
  min-width: 0;
}
.fragno-footer__brand[hidden] {
  display: none;
}

.fragno-footer__brand fragno-logo-lockup {
  display: block;
  width: 4.4403125rem;
  max-width: 100%;
}

.fragno-footer__copyright-slot--top {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.fragno-footer__copyright-slot--top[aria-hidden='true'] {
  display: none;
}

.fragno-footer__copyright-slot--bottom {
  width: 100%;
}

.fragno-footer__copyright-slot--bottom[aria-hidden='true'] {
  display: none;
}

.fragno-footer__copyright {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--footer-text-tertiary);
}
.fragno-footer__stats-wrap {
  width: 100%;
}

.fragno-footer__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3xl, 1.5rem);
  width: 100%;
}
.fragno-footer__stat {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl, 1rem);
  padding: var(--spacing-3xl, 1.5rem);
  border: 1px solid var(--footer-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: transparent;
}

.fragno-footer__stat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.fragno-footer__stat-icon,
.fragno-footer__stat .fragno-footer__stat-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--footer-text-primary);
}

.fragno-footer__stat-icon svg,
.fragno-footer__stat .fragno-footer__stat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.fragno-footer__stat-value {
  display: block;
  font-family: var(--font-family-display, 'Inter', sans-serif);
  font-size: var(--font-size-display-md, 2.5rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-display-md, 3rem);
  letter-spacing: var(--letter-spacing-display-md, -0.03125rem);
  color: var(--footer-text-primary);
}

.fragno-footer__stat-label {
  display: block;
  margin-top: var(--spacing-xs, 0.25rem);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--footer-text-tertiary);
}

.fragno-footer__stat-interactive {
  text-decoration: none;
  color: inherit;
}
.fragno-footer__columns {
  width: 100%;
}

.fragno-footer__columns-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-6xl, 3rem);
  align-items: start;
  width: 100%;
}

.fragno-footer__column {
  min-width: 0;
}

.fragno-footer__column-heading {
  margin: 0 0 var(--spacing-xl, 1rem);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--footer-text-primary);
}

.fragno-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 0.75rem);
}

.fragno-footer__link {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--footer-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--footer-text-secondary);
  text-underline-offset: 0.125rem;
}

.fragno-footer__link:hover {
  color: var(--footer-text-primary);
  text-decoration-color: var(--footer-text-primary);
}

.fragno-footer__link:focus-visible {
  outline: 2px solid var(--footer-outline-ui);
  outline-offset: 2px;
}

.fragno-footer__column--legal .fragno-footer__link-list {
  column-count: 2;
  column-gap: var(--spacing-4xl, 2rem);
  display: block;
}

.fragno-footer__column--legal .fragno-footer__link-list li {
  break-inside: avoid;
  margin-bottom: var(--spacing-lg, 0.75rem);
}
.fragno-footer__meta {
  width: 100%;
}

.fragno-footer__meta-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4xl, 2rem) var(--spacing-6xl, 3rem);
  width: 100%;
}

.fragno-footer__meta-block {
  flex: 0 1 auto;
  min-width: min(12rem, 100%);
}

.fragno-footer__meta-heading {
  margin: 0 0 var(--spacing-lg, 0.75rem);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--footer-text-primary);
}

.fragno-footer__meta-help fragno-button {
  display: inline-block;
}
.fragno-footer__meta-help fragno-button .fragno-button.fragno-button--secondary {
  background-color: transparent;
  color: var(--footer-text-primary);
  border-color: var(--footer-outline-ui);
}

.fragno-footer__meta-help fragno-button .fragno-button.fragno-button--secondary:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--footer-outline-ui);
  color: var(--footer-text-primary);
}

.fragno-footer__meta-help fragno-button .fragno-button.fragno-button--secondary:focus-visible {
  border-color: var(--footer-outline-ui);
  outline: 2px solid var(--footer-outline-ui);
  outline-offset: 2px;
  box-shadow: none;
}

.fragno-footer__social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-lg, 0.75rem);
  align-items: center;
}

.fragno-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  color: var(--footer-text);
  border-radius: var(--radius-sm, 0.375rem);
}

.fragno-footer__social-link:focus-visible {
  outline: 2px solid var(--footer-text);
  outline-offset: 2px;
}

.fragno-footer__social-link svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.fragno-footer__social-list fragno-button {
  display: inline-block;
  vertical-align: middle;
}
.fragno-footer__social-list fragno-button.fragno-footer__social-button .fragno-button.fragno-button--secondary.fragno-button--icon-only {
  background-color: transparent;
  color: var(--footer-text-secondary);
  border: 1px solid var(--footer-social-border);
  border-radius: 50%;
  aspect-ratio: 1;
  box-sizing: border-box;
}

.fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--footer-text-primary);
  border-color: #737373;
}

.fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only:focus-visible {
  border-color: var(--footer-social-border);
  outline: 2px solid var(--footer-text-secondary);
  outline-offset: 2px;
  box-shadow: none;
}

.fragno-footer__social-list fragno-button.fragno-footer__social-button .fragno-button__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.fragno-footer__meta-badge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding-top: calc(var(--line-height-text-sm, 1.25rem) + var(--spacing-lg, 0.75rem));
  box-sizing: border-box;
}

.fragno-footer__meta-badge img,
.fragno-footer__meta-badge .fragno-footer__bbb-seal {
  display: block;
  max-width: 10rem;
  width: 100%;
  height: auto;
}

@media (max-width: 63.99rem) {
  fragno-footer {
    --footer-padding-x: var(--spacing-3xl, 1.5rem);
    --footer-padding-y-top: var(--spacing-5xl, 2.5rem);
    --footer-padding-y-bottom: var(--spacing-5xl, 2.5rem);
  }

  .fragno-footer__shell {
    gap: var(--spacing-5xl, 2.5rem);
  }

  .fragno-footer__stats {
    grid-template-columns: 1fr;
  }
  .fragno-footer__columns-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-4xl, 2rem) var(--spacing-3xl, 1.5rem);
    align-items: start;
  }

  .fragno-footer__columns-inner > .fragno-footer__column:nth-child(1) {
    grid-column: 1;
  }

  .fragno-footer__columns-inner > .fragno-footer__column:nth-child(2) {
    grid-column: 2;
  }

  .fragno-footer__columns-inner > .fragno-footer__column--legal {
    grid-column: 1 / -1;
  }

  .fragno-footer__column--legal .fragno-footer__link-list {
    column-count: 2;
    column-gap: var(--spacing-3xl, 1.5rem);
  }

  .fragno-footer__link-list {
    gap: var(--spacing-xl, 1rem);
  }

  .fragno-footer__top {
    flex-direction: column;
    align-items: stretch;
  }

  .fragno-footer__copyright-slot--top {
    justify-content: flex-start;
    width: 100%;
  }

  .fragno-footer__meta {
    padding-top: var(--spacing-5xl, 2.5rem);
    border-top: 1px solid var(--footer-border-subtle);
  }

  .fragno-footer__meta-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .fragno-footer__meta-badge {
    justify-content: flex-start;
    padding-top: 0;
  }
  .fragno-footer--variant-contextual.fragno-footer--has-stats .fragno-footer__top {
    order: 1;
  }

  .fragno-footer--variant-contextual.fragno-footer--has-stats
    .fragno-footer__copyright-slot--bottom {
    order: 2;
  }

  .fragno-footer--variant-contextual.fragno-footer--has-stats .fragno-footer__stats-wrap {
    order: 3;
  }

  .fragno-footer--variant-contextual.fragno-footer--has-stats .fragno-footer__columns {
    order: 4;
  }

  .fragno-footer--variant-contextual.fragno-footer--has-stats .fragno-footer__meta {
    order: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fragno-footer__link {
    transition: none;
  }
}

fragno-footer.fragno-footer--variant-minimal {
  background-color: transparent;
  color: var(--colors-gray-900, #141414);
}

.fragno-footer__shell--minimal {
  gap: 0;
  padding: var(--spacing-4xl, 2rem) var(--footer-padding-x);
}

.fragno-footer__minimal-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-3xl, 1.5rem);
  width: 100%;
}

.fragno-footer__brand--minimal {
  flex: 0 0 auto;
  color: var(--colors-gray-900, #141414);
}

.fragno-footer__brand--minimal fragno-logo-lockup {
  color: var(--colors-gray-900, #141414);
}

.fragno-footer__minimal-links {
  flex: 1 1 auto;
  min-width: 0;
}

.fragno-footer__minimal-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--spacing-md, 0.5rem) var(--spacing-4xl, 2rem);
}

.fragno-footer__minimal-link {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--colors-gray-600, #525252);
  text-decoration: underline;
  text-decoration-color: var(--colors-gray-600, #525252);
  text-underline-offset: 0.125rem;
}

.fragno-footer__minimal-link:hover {
  color: var(--colors-gray-900, #141414);
  text-decoration-color: var(--colors-gray-900, #141414);
}

.fragno-footer__minimal-link:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
  border-radius: 2px;
}

.fragno-footer__minimal-social {
  flex: 0 0 auto;
}

.fragno-footer__minimal-social .fragno-footer__social-list {
  gap: var(--spacing-xl, 1rem);
}
.fragno-footer__minimal-social
  .fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only {
  background-color: transparent;
  color: var(--colors-gray-700, #424242);
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  aspect-ratio: 1;
}

.fragno-footer__minimal-social
  .fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only:hover:not(:disabled) {
  background-color: var(--colors-gray-100, #f5f5f5);
  color: var(--colors-gray-900, #141414);
  border: none;
}

.fragno-footer__minimal-social
  .fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
  box-shadow: none;
}
.fragno-footer__sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 63.99rem) {
  .fragno-footer__shell--minimal {
    padding: var(--spacing-4xl, 2rem) var(--spacing-2xl, 1.25rem);
  }

  .fragno-footer__minimal-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xl, 2rem);
  }

  .fragno-footer__minimal-links {
    width: 100%;
  }
  .fragno-footer__minimal-link-list {
    display: block;
    column-count: 2;
    column-gap: var(--spacing-md, 0.5rem);
  }

  .fragno-footer__minimal-link-list li {
    break-inside: avoid;
    margin-bottom: var(--spacing-xl, 1rem);
  }

  .fragno-footer__minimal-link-list li:last-child {
    margin-bottom: 0;
  }

  .fragno-footer__minimal-link {
    font-size: var(--font-size-text-md, 1rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-text-md, 1.5rem);
    letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  }

  .fragno-footer__minimal-social {
    width: 100%;
  }
}

.fragno-global-nav-v2 {
  --global-nav-v2-inset: 5rem;
  --global-nav-v2-inset-compact: var(--spacing-2xl);
  --global-nav-v2-pill-max: 63rem;
  --global-nav-v2-bar-height: 4.375rem;
  --global-nav-v2-bar-height-scrolled: 4rem;
  --global-nav-v2-bar-height-compact: 4.25rem;
  --global-nav-v2-local-height: 3.75rem;
  --global-nav-v2-column-width: 10.375rem;
  --global-nav-v2-column-gap: var(--spacing-4xl);
  --global-nav-v2-panel-radius: var(--radius-5xl);
  --global-nav-v2-panel-padding: var(--spacing-3xl);
  --global-nav-v2-glass-tint: rgba(214, 214, 214, 0.8);
  --global-nav-v2-strip-tint: rgba(176, 176, 176, 0.32);
  --global-nav-v2-strip-height: 8rem;
  --global-nav-v2-strip-blur: 8px;
  --global-nav-v2-glass-surface: rgba(255, 255, 255, 0.8);
  --global-nav-v2-glass-blur: 40px;
  --global-nav-v2-shadow: 0 4px 9px 0 var(--colors-alpha-black-06);
  --global-nav-v2-shadow-lifted: 0 8px 24px 0 var(--colors-alpha-black-10);
  --global-nav-v2-flyout-surface: var(--colors-gray-50);
  --global-nav-v2-flyout-shadow: 0 4px 18px 8px var(--colors-alpha-black-06);
  --global-nav-v2-drawer-blur: 16px;
  --global-nav-v2-overlay-blur: 16px;
  --global-nav-v2-overlay-blur-inner: 24px;
  --global-nav-v2-overlay-duration: 1.4s;
  --global-nav-v2-overlay-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --global-nav-v2-duration: 0.32s;
  --global-nav-v2-morph-duration: 0.64s;
  --global-nav-v2-morph-radius-duration: 0.52s;
  --global-nav-v2-morph-tint-duration: 0.15s;
  --global-nav-v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --global-nav-v2-underline: 1.5px;
  --global-nav-v2-underline-category: 2px;
  --global-nav-v2-underline-duration: 0.52s;
  --global-nav-v2-underline-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --global-nav-v2-heading-size: 1.5rem;
  --global-nav-v2-heading-line: 2rem;
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-body);
}

.fragno-global-nav-v2 *,
.fragno-global-nav-v2 *::before,
.fragno-global-nav-v2 *::after {
  box-sizing: border-box;
}
:where(fragno-global-nav-v2.fragno-global-nav-v2-sticky-host) {
  display: block;
  position: sticky;
  top: 0;
  z-index: 320;
}
.fragno-global-nav-v2__sticky-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}
.fragno-global-nav-v2--reserved {
  min-height: var(--global-nav-v2-reserved-height);
}
:where(fragno-global-nav-v2.fragno-global-nav-v2-reserved-host) {
  pointer-events: none;
}

.fragno-global-nav-v2--reserved .fragno-global-nav-v2__bar,
.fragno-global-nav-v2--reserved .fragno-global-nav-v2__local,
.fragno-global-nav-v2--reserved .fragno-global-nav-v2__panel,
.fragno-global-nav-v2--reserved .fragno-global-nav-v2__scrim,
.fragno-global-nav-v2--reserved .fragno-global-nav-v2__drawer {
  pointer-events: auto;
}

.fragno-global-nav-v2--reserved .fragno-global-nav-v2__shell {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transition: top var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease);
}
.fragno-global-nav-v2--reserved.fragno-global-nav-v2--scrolled .fragno-global-nav-v2__shell {
  top: var(--spacing-3xl);
}

.fragno-global-nav-v2__shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}
.fragno-global-nav-v2__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-xl);
  width: 100%;
  max-width: 100vw;
  min-height: var(--global-nav-v2-bar-height);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--global-nav-v2-inset);
  transition: max-width var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease),
    min-height var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease),
    padding var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease),
    border-radius var(--global-nav-v2-morph-radius-duration) var(--global-nav-v2-ease),
    background-color var(--global-nav-v2-morph-tint-duration) linear,
    box-shadow var(--global-nav-v2-morph-tint-duration) linear;
}
.fragno-global-nav-v2--bg-adapt .fragno-global-nav-v2__shell {
  background-color: transparent;
}

.fragno-global-nav-v2--bg-white .fragno-global-nav-v2__shell {
  background-color: var(--colors-secondary-default);
}
.fragno-global-nav-v2--sticky.fragno-global-nav-v2--scrolled .fragno-global-nav-v2__shell {
  background-color: transparent;
}
.fragno-global-nav-v2--with-local-nav:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__shell {
  box-shadow: var(--global-nav-v2-shadow);
}
.fragno-global-nav-v2--expanded:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__bar {
  background-color: var(--colors-secondary-default);
}

.fragno-global-nav-v2--expanded:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__local,
.fragno-global-nav-v2--expanded:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__panel--subnav {
  background-color: var(--global-nav-v2-flyout-surface);
}

.fragno-global-nav-v2--with-local-nav.fragno-global-nav-v2--expanded:not(
    .fragno-global-nav-v2--scrolled
  )
  .fragno-global-nav-v2__shell {
  background-color: var(--global-nav-v2-flyout-surface);
  box-shadow: none;
}

.fragno-global-nav-v2__bar,
.fragno-global-nav-v2__local {
  position: relative;
  z-index: 2;
}

.fragno-global-nav-v2__bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
  min-width: 0;
}

.fragno-global-nav-v2__bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.fragno-global-nav-v2__bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-global-nav-v2__logo-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  line-height: 0;
  text-decoration: none;
  color: inherit;
}

.fragno-global-nav-v2__logo-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}
.fragno-global-nav-v2__page-name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--global-nav-v2-heading-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--global-nav-v2-heading-line);
  letter-spacing: -0.03rem;
  color: var(--colors-gray-900);
  white-space: nowrap;
}

.fragno-global-nav-v2__primary[hidden],
.fragno-global-nav-v2__local[hidden],
.fragno-global-nav-v2__panel[hidden],
.fragno-global-nav-v2__search-field[hidden],
.fragno-global-nav-v2__drawer[hidden],
.fragno-global-nav-v2__scrim[hidden],
.fragno-global-nav-v2__search-clear[hidden] {
  display: none;
}

.fragno-global-nav-v2__primary-list,
.fragno-global-nav-v2__local-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-global-nav-v2__bar-item {
  display: flex;
  align-items: center;
}

.fragno-global-nav-v2__bar-link,
.fragno-global-nav-v2__bar-category {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  border: none;
  background: none;
  font-family: inherit;
  color: var(--colors-gray-800);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.fragno-global-nav-v2__bar-link {
  padding: var(--spacing-md) var(--spacing-lg);
  min-height: 2.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
}

.fragno-global-nav-v2__bar-link::after {
  content: '';
  position: absolute;
  right: var(--spacing-lg);
  bottom: 6px;
  left: var(--spacing-lg);
  height: var(--global-nav-v2-underline);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--global-nav-v2-underline-duration)
    var(--global-nav-v2-underline-ease);
}

.fragno-global-nav-v2__bar-link:hover::after,
.fragno-global-nav-v2:not(.fragno-global-nav-v2--selected-filled)
  .fragno-global-nav-v2__bar-link--active::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.fragno-global-nav-v2--selected-filled .fragno-global-nav-v2__bar-link--active {
  color: var(--colors-green-900);
  font-weight: var(--font-weight-medium-plus);
  letter-spacing: -0.005rem;
  background-color: var(--colors-green-900-alpha-10);
}

.fragno-global-nav-v2--selected-filled .fragno-global-nav-v2__bar-link--active:hover {
  color: var(--colors-green-900);
}
.fragno-global-nav-v2__bar-category {
  padding: var(--spacing-md) 0;
  min-height: 2.25rem;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium-plus);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.03125rem;
  color: var(--color-text-tertiary);
}

.fragno-global-nav-v2__bar-category::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--global-nav-v2-underline-category);
  background-color: var(--colors-gray-900);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--global-nav-v2-underline-duration)
    var(--global-nav-v2-underline-ease);
}

.fragno-global-nav-v2__bar-category:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.fragno-global-nav-v2__bar-link:hover,
.fragno-global-nav-v2__bar-category:hover {
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__bar-link:focus-visible,
.fragno-global-nav-v2__bar-category:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__bar-link[aria-disabled='true'] {
  color: var(--color-text-disabled);
  pointer-events: none;
}

.fragno-global-nav-v2__bar-link--active,
.fragno-global-nav-v2__bar-category--active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium-plus);
}
.fragno-global-nav-v2__bar-category--active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.fragno-global-nav-v2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.fragno-global-nav-v2__icon svg,
.fragno-global-nav-v2__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.fragno-global-nav-v2__icon--drawer {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-global-nav-v2__icon-button,
.fragno-global-nav-v2__menu-button,
.fragno-global-nav-v2__close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--colors-gray-900);
  cursor: pointer;
}

.fragno-global-nav-v2__icon-button:hover,
.fragno-global-nav-v2__menu-button:hover {
  background-color: var(--colors-green-900-alpha-10);
}

.fragno-global-nav-v2__icon-button:focus-visible,
.fragno-global-nav-v2__menu-button:focus-visible,
.fragno-global-nav-v2__close-button:focus-visible,
.fragno-global-nav-v2__avatar-pill:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__icon-button svg,
.fragno-global-nav-v2__menu-icon svg,
.fragno-global-nav-v2__close-button svg {
  display: block;
}
.fragno-global-nav-v2__close-button {
  border: 1px solid var(--colors-gray-400);
  border-radius: var(--radius-full);
  background-color: var(--colors-secondary-default);
}

.fragno-global-nav-v2__close-button:hover {
  border-color: var(--colors-gray-500);
}

.fragno-global-nav-v2__menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--global-nav-v2-duration) var(--global-nav-v2-ease);
}
.fragno-global-nav-v2__menu-button--avatar {
  width: auto;
  padding: 0 var(--spacing-sm) 0 var(--spacing-xxs);
  gap: var(--spacing-sm);
  border-radius: var(--radius-full);
  background-color: var(--colors-alpha-white-50);
  border: 1px solid var(--colors-alpha-white-80);
  box-shadow: var(--global-nav-v2-shadow);
}
.fragno-global-nav-v2__avatar-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--colors-gray-900);
  cursor: pointer;
}

.fragno-global-nav-v2--merged .fragno-global-nav-v2__avatar-pill {
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--colors-alpha-white-80);
  background-color: var(--colors-alpha-white-50);
  filter: drop-shadow(0 4px 9px var(--colors-alpha-black-06));
}

.fragno-global-nav-v2__avatar-chevron {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-global-nav-v2__avatar-pill fragno-avatar,
.fragno-global-nav-v2__menu-button--avatar fragno-avatar {
  pointer-events: none;
}

.fragno-global-nav-v2__local {
  width: 100%;
  padding: 0 var(--global-nav-v2-inset);
}

.fragno-global-nav-v2__local--divider {
  border-top: 1px solid var(--color-border-subtle);
}

.fragno-global-nav-v2__local-list {
  gap: var(--spacing-3xl);
  min-height: var(--global-nav-v2-local-height);
  justify-content: space-between;
}

.fragno-global-nav-v2__local .fragno-global-nav-v2__bar-item {
  align-items: stretch;
}

.fragno-global-nav-v2__local .fragno-global-nav-v2__bar-category {
  position: relative;
  align-items: center;
  min-height: var(--global-nav-v2-local-height);
}
.fragno-global-nav-v2__panel {
  position: absolute;
  top: 100%;
  right: var(--global-nav-v2-inset);
  left: var(--global-nav-v2-inset);
  z-index: 3;
  margin: var(--spacing-md) 0 0;
  padding: var(--global-nav-v2-panel-padding);
  border-radius: var(--global-nav-v2-panel-radius);
  background-color: var(--global-nav-v2-glass-surface);
  -webkit-backdrop-filter: blur(var(--global-nav-v2-glass-blur));
  backdrop-filter: blur(var(--global-nav-v2-glass-blur));
  box-shadow: var(--global-nav-v2-shadow);
}

.fragno-global-nav-v2__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  max-height: min(32.875rem, calc(100vh - 12rem));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fragno-global-nav-v2:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__panel--subnav {
  right: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  padding: var(--spacing-4xl) var(--global-nav-v2-inset);
  border-radius: 0;
  border-top: 0;
  background-color: var(--global-nav-v2-flyout-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--global-nav-v2-flyout-shadow);
  animation: fragno-global-nav-v2-flyout-flush 0.24s var(--global-nav-v2-ease) both;
}

@keyframes fragno-global-nav-v2-flyout-flush {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fragno-global-nav-v2__panel-heading {
  margin: 0;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__subnav {
  display: flex;
  flex-direction: column;
  gap: var(--global-nav-v2-column-gap);
  width: 100%;
}

.fragno-global-nav-v2__subnav-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--global-nav-v2-column-gap);
  align-items: start;
  width: 100%;
}

.fragno-global-nav-v2__subnav-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-global-nav-v2__subnav-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.fragno-global-nav-v2__subnav-heading-label,
.fragno-global-nav-v2__subnav-heading-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  margin: 0;
  padding: 0 0.125rem;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-lg);
  letter-spacing: -0.005em;
  color: var(--colors-gray-800);
  text-align: left;
  text-decoration: none;
}

.fragno-global-nav-v2__subnav-heading-trigger {
  cursor: pointer;
}

.fragno-global-nav-v2__subnav-heading-trigger:hover,
a.fragno-global-nav-v2__subnav-heading-label:hover {
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__subnav-heading-text {
  position: relative;
  min-width: 0;
}

.fragno-global-nav-v2__subnav-heading-text::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: var(--global-nav-v2-underline);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--global-nav-v2-underline-duration)
    var(--global-nav-v2-underline-ease);
}

.fragno-global-nav-v2__subnav-heading-trigger:hover .fragno-global-nav-v2__subnav-heading-text::after,
a.fragno-global-nav-v2__subnav-heading-label:hover .fragno-global-nav-v2__subnav-heading-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.fragno-global-nav-v2__subnav-heading-trigger:focus-visible,
.fragno-global-nav-v2__subnav-heading-label:focus-visible,
.fragno-global-nav-v2__subnav-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__subnav-heading-chevron {
  display: inline-flex;
  align-items: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.26s var(--global-nav-v2-ease);
}

.fragno-global-nav-v2__subnav-heading-trigger:hover .fragno-global-nav-v2__subnav-heading-chevron,
a.fragno-global-nav-v2__subnav-heading-label:hover .fragno-global-nav-v2__subnav-heading-chevron {
  transform: translateX(3px);
}

.fragno-global-nav-v2__subnav-divider {
  display: block;
  height: 1px;
  background-color: var(--color-border-subtle);
}
.fragno-global-nav-v2:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__panel--subnav
  .fragno-global-nav-v2__subnav-divider {
  display: none;
}
.fragno-global-nav-v2__subnav-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-global-nav-v2__subnav-link {
  display: block;
  padding: 0 0.125rem;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.005em;
  color: var(--colors-gray-700);
  text-decoration: none;
}

.fragno-global-nav-v2__subnav-link-text {
  position: relative;
}

.fragno-global-nav-v2__subnav-link-text::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: var(--global-nav-v2-underline);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--global-nav-v2-underline-duration)
    var(--global-nav-v2-underline-ease);
}

.fragno-global-nav-v2__subnav-link:hover {
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__subnav-link:hover .fragno-global-nav-v2__subnav-link-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.fragno-global-nav-v2__subnav--drill {
  gap: var(--spacing-3xl);
}

.fragno-global-nav-v2__back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  align-self: flex-start;
  min-height: 2.5rem;
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--colors-green-900-alpha-10);
  font-family: inherit;
  font-size: var(--font-size-text-md);
  font-weight: 550;
  line-height: var(--line-height-text-md);
  letter-spacing: -0.005em;
  color: var(--colors-green-900);
  cursor: pointer;
}

.fragno-global-nav-v2__back-button:hover {
  background-color: var(--colors-green-100);
}

.fragno-global-nav-v2__back-button:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__back-button svg {
  display: block;
}

.fragno-global-nav-v2--search-open .fragno-global-nav-v2__bar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.fragno-global-nav-v2--search-open .fragno-global-nav-v2__bar-left {
  display: none;
}

.fragno-global-nav-v2--search-open .fragno-global-nav-v2__bar-center {
  justify-content: flex-start;
}

.fragno-global-nav-v2__search-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--spacing-lg);
}

.fragno-global-nav-v2__search-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
  color: var(--colors-gray-900);
  appearance: none;
}

.fragno-global-nav-v2__search-input::placeholder {
  color: var(--colors-gray-700);
}

.fragno-global-nav-v2__search-input:focus {
  outline: none;
}
.fragno-global-nav-v2__search-input.fragno-global-nav-v2__search-input--keyboard-focus:focus {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.fragno-global-nav-v2__search-input::-webkit-search-cancel-button {
  display: none;
}

.fragno-global-nav-v2__search-clear {
  flex-shrink: 0;
  margin: 0;
  padding: var(--spacing-xs);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-900);
  text-decoration: underline;
  cursor: pointer;
}

.fragno-global-nav-v2__search-clear:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-global-nav-v2__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2.25rem;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--colors-gray-400);
  border-radius: var(--radius-full);
  background-color: var(--colors-secondary-default);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-900);
  text-decoration: none;
  white-space: nowrap;
}

.fragno-global-nav-v2__pill:hover {
  border-color: var(--colors-gray-500);
  background-color: var(--colors-gray-50);
}

.fragno-global-nav-v2__pill:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2__result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-global-nav-v2__result-card,
.fragno-global-nav-v2__result-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.fragno-global-nav-v2__result-card {
  padding: var(--spacing-lg);
  border-radius: var(--radius-3xl);
  background-color: var(--colors-secondary-default);
  box-shadow: var(--global-nav-v2-shadow);
}

.fragno-global-nav-v2__result-card:hover {
  box-shadow: var(--global-nav-v2-shadow-lifted);
}

.fragno-global-nav-v2__result-row {
  padding: var(--spacing-lg) var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-subtle);
}

.fragno-global-nav-v2__result-row:hover {
  background-color: var(--colors-alpha-white-50);
}

.fragno-global-nav-v2__result-card:focus-visible,
.fragno-global-nav-v2__result-row:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__result-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--colors-gray-100);
  color: var(--colors-gray-700);
}

.fragno-global-nav-v2__result-media img,
.fragno-global-nav-v2__result-media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-media {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--colors-gray-400);
  background-color: transparent;
}

.fragno-global-nav-v2__result-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  flex: 1 1 auto;
  min-width: 0;
}

.fragno-global-nav-v2__result-title {
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-title {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
}

.fragno-global-nav-v2__result-description {
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.03125rem;
  color: var(--colors-gray-700);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.fragno-global-nav-v2__result-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__result-card .fragno-global-nav-v2__result-chevron {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--colors-gray-400);
  border-radius: var(--radius-full);
}

.fragno-global-nav-v2__no-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2__no-results-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
  text-align: center;
}

.fragno-global-nav-v2__no-results-illustration {
  display: block;
  margin-bottom: var(--spacing-xl);
  color: var(--colors-gray-400);
}

.fragno-global-nav-v2__no-results-illustration svg {
  display: block;
  width: 20.4375rem;
  height: auto;
  max-width: 100%;
}

.fragno-global-nav-v2__no-results-title {
  margin: 0;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__no-results-description {
  margin: 0;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-700);
}

@property --fragno-global-nav-v2-scrim-blur {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --fragno-global-nav-v2-scrim-blur-inner {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.fragno-global-nav-v2__scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --fragno-global-nav-v2-scrim-blur: var(--global-nav-v2-overlay-blur);
  -webkit-backdrop-filter: blur(var(--fragno-global-nav-v2-scrim-blur));
  backdrop-filter: blur(var(--fragno-global-nav-v2-scrim-blur));
  animation: fragno-global-nav-v2-overlay-in var(--global-nav-v2-overlay-duration)
    var(--global-nav-v2-overlay-ease) both;
}

.fragno-global-nav-v2__scrim::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--colors-alpha-black-20);
  --fragno-global-nav-v2-scrim-blur-inner: var(--global-nav-v2-overlay-blur-inner);
  -webkit-backdrop-filter: blur(var(--fragno-global-nav-v2-scrim-blur-inner));
  backdrop-filter: blur(var(--fragno-global-nav-v2-scrim-blur-inner));
  animation: fragno-global-nav-v2-overlay-inner-in var(--global-nav-v2-overlay-duration)
    var(--global-nav-v2-overlay-ease) both;
}

@keyframes fragno-global-nav-v2-overlay-in {
  from {
    opacity: 0;
    --fragno-global-nav-v2-scrim-blur: 0px;
  }
  to {
    opacity: 1;
    --fragno-global-nav-v2-scrim-blur: var(--global-nav-v2-overlay-blur);
  }
}

@keyframes fragno-global-nav-v2-overlay-inner-in {
  from {
    opacity: 0;
    --fragno-global-nav-v2-scrim-blur-inner: 0px;
  }
  to {
    opacity: 1;
    --fragno-global-nav-v2-scrim-blur-inner: var(--global-nav-v2-overlay-blur-inner);
  }
}

@keyframes fragno-global-nav-v2-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fragno-global-nav-v2--scrolled::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--global-nav-v2-strip-height);
  z-index: 0;
  background: linear-gradient(
    to bottom,
    var(--global-nav-v2-strip-tint) 1.5%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(var(--global-nav-v2-strip-blur));
  backdrop-filter: blur(var(--global-nav-v2-strip-blur));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  pointer-events: none;
}

.fragno-global-nav-v2--scrolled .fragno-global-nav-v2__bar {
  max-width: var(--global-nav-v2-pill-max);
  min-height: var(--global-nav-v2-bar-height-scrolled);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-4xl);
  border-radius: var(--radius-full);
  background-color: var(--global-nav-v2-glass-tint);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateZ(0);
}
.fragno-global-nav-v2--scrolled.fragno-global-nav-v2--expanded .fragno-global-nav-v2__bar,
.fragno-global-nav-v2--scrolled.fragno-global-nav-v2--search-open .fragno-global-nav-v2__bar {
  background-color: var(--global-nav-v2-glass-surface);
  -webkit-backdrop-filter: blur(var(--global-nav-v2-glass-blur));
  backdrop-filter: blur(var(--global-nav-v2-glass-blur));
}
.fragno-global-nav-v2--merged .fragno-global-nav-v2__bar-left,
.fragno-global-nav-v2--merged .fragno-global-nav-v2__primary {
  animation: fragno-global-nav-v2-fade var(--global-nav-v2-duration) var(--global-nav-v2-ease);
}
.fragno-global-nav-v2--scrolled .fragno-global-nav-v2__panel {
  right: 0;
  left: 0;
  width: var(--global-nav-v2-pill-max);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.fragno-global-nav-v2--scrolled .fragno-global-nav-v2__local {
  display: none;
}
.fragno-global-nav-v2--merged .fragno-global-nav-v2__bar {
  padding-right: var(--spacing-xl);
}

.fragno-global-nav-v2--merged .fragno-global-nav-v2__primary-list {
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2--merged .fragno-global-nav-v2__bar-category {
  min-height: 2.25rem;
}

.fragno-global-nav-v2__drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  padding: var(--spacing-md);
}
.fragno-global-nav-v2__drawer-scrim {
  position: absolute;
  inset: 0;
  background-color: var(--colors-alpha-black-50);
  -webkit-backdrop-filter: blur(var(--global-nav-v2-drawer-blur));
  backdrop-filter: blur(var(--global-nav-v2-drawer-blur));
}

.fragno-global-nav-v2__drawer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  width: 100%;
  max-height: 100%;
  padding: var(--spacing-2xl) var(--spacing-4xl) var(--spacing-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 2.625rem;
  background-color: var(--colors-gray-50);
  box-shadow: var(--global-nav-v2-shadow-lifted);
}

.fragno-global-nav-v2__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-height: 3.5rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--colors-gray-50);
}

.fragno-global-nav-v2__drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  flex: 1 1 auto;
}

.fragno-global-nav-v2__drawer-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  margin-top: auto;
}

.fragno-global-nav-v2__drawer-links,
.fragno-global-nav-v2__drawer-sublinks,
.fragno-global-nav-v2__drawer-deep-links,
.fragno-global-nav-v2__drawer-quick-links,
.fragno-global-nav-v2__drawer-supporting-list,
.fragno-global-nav-v2__drawer-account-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-global-nav-v2__drawer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2__drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.fragno-global-nav-v2__drawer-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1 1 auto;
  min-height: 2.25rem;
  font-family: var(--font-family-display);
  font-size: var(--global-nav-v2-heading-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--global-nav-v2-heading-line);
  letter-spacing: -0.03rem;
  color: var(--colors-gray-900);
  text-decoration: none;
}
.fragno-global-nav-v2__drawer-link[aria-current='page'] {
  padding: 0 var(--spacing-xl);
  border-radius: var(--radius-full);
  background-color: var(--colors-green-900-alpha-10);
  color: var(--colors-green-900);
  font-weight: 550;
  letter-spacing: -0.005em;
}

.fragno-global-nav-v2__drawer-link:focus-visible,
.fragno-global-nav-v2__drawer-row:focus-visible,
.fragno-global-nav-v2__drawer-sublink:focus-visible,
.fragno-global-nav-v2__drawer-deep-link:focus-visible,
.fragno-global-nav-v2__drawer-quick-link:focus-visible,
.fragno-global-nav-v2__drawer-supporting-link:focus-visible,
.fragno-global-nav-v2__drawer-account-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}
.fragno-global-nav-v2__drawer-supporting {
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--colors-alpha-black-06);
}

.fragno-global-nav-v2__drawer-supporting-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.fragno-global-nav-v2__drawer-supporting-link {
  display: flex;
  align-items: center;
  min-height: 2rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
  color: var(--colors-green-900);
  text-decoration: none;
}

.fragno-global-nav-v2__drawer-supporting-link[aria-current='page'] {
  font-weight: var(--font-weight-medium);
}

.fragno-global-nav-v2__drawer-supporting-link[aria-disabled='true'] {
  color: var(--color-text-disabled);
  pointer-events: none;
}

.fragno-global-nav-v2__drawer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--colors-gray-900);
  pointer-events: none;
  transition: transform var(--global-nav-v2-duration) var(--global-nav-v2-ease);
}

.fragno-global-nav-v2__drawer-toggle--open {
  transform: rotate(180deg);
}

.fragno-global-nav-v2__drawer-sublinks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-md);
}

.fragno-global-nav-v2__drawer-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  min-height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.005em;
  color: var(--colors-gray-700);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fragno-global-nav-v2__drawer-sublink-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--colors-gray-700);
}

.fragno-global-nav-v2__drawer-sublink-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fragno-global-nav-v2__drawer-heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--global-nav-v2-heading-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--global-nav-v2-heading-line);
  letter-spacing: -0.03rem;
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__drawer-deep-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2__drawer-deep-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  min-height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.005em;
  color: var(--colors-gray-700);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fragno-global-nav-v2__drawer-deep-link:hover,
.fragno-global-nav-v2__drawer-sublink:hover {
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__drawer-quick-heading {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  color: var(--colors-gray-700);
}

.fragno-global-nav-v2__drawer-quick-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.fragno-global-nav-v2__drawer-quick-link,
.fragno-global-nav-v2__drawer-account-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2.25rem;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) 0;
  border-radius: var(--radius-full);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-800);
  text-decoration: none;
}

.fragno-global-nav-v2__drawer-quick-link:hover,
.fragno-global-nav-v2__drawer-account-link:hover {
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__drawer-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2__drawer-actions fragno-button {
  flex: 1 1 0;
}

.fragno-global-nav-v2__drawer-actions fragno-button .fragno-button {
  width: 100%;
}

.fragno-global-nav-v2__drawer-user {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2__drawer-identity {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2__drawer-identity-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
}

.fragno-global-nav-v2__drawer-user-name {
  margin: 0;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-md);
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__drawer-user-email {
  margin: 0;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-700);
  overflow-wrap: anywhere;
}

.fragno-global-nav-v2__drawer-account-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

@media (max-width: 63.99rem) {
  .fragno-global-nav-v2__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--global-nav-v2-bar-height-compact);
    padding: var(--spacing-lg) var(--global-nav-v2-inset-compact);
    align-items: center;
  }

  .fragno-global-nav-v2__bar-center {
    display: none;
  }

  .fragno-global-nav-v2--search-open .fragno-global-nav-v2__bar-center {
    display: flex;
  }

  .fragno-global-nav-v2__bar-right {
    gap: 0;
  }

  .fragno-global-nav-v2__icon-button,
  .fragno-global-nav-v2__menu-button:not(.fragno-global-nav-v2__menu-button--avatar) {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
  }

  .fragno-global-nav-v2__icon-button:hover,
  .fragno-global-nav-v2__menu-button:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }

  .fragno-global-nav-v2__icon-button svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .fragno-global-nav-v2__menu-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
  }

  .fragno-global-nav-v2__menu-icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .fragno-global-nav-v2__menu-button--avatar {
    height: 2.5rem;
    padding: 0 0.375rem;
    gap: 0.375rem;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    box-shadow: 0 4px 18px 8px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  }

  .fragno-global-nav-v2__menu-button--avatar:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .fragno-global-nav-v2__menu-label {
    padding: 0 0.125rem;
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-text-sm);
    letter-spacing: -0.005em;
    color: var(--colors-gray-900);
    white-space: nowrap;
  }

  .fragno-global-nav-v2--menu-open .fragno-global-nav-v2__menu-button--avatar
    .fragno-global-nav-v2__avatar-chevron {
    transform: rotate(180deg);
  }

  .fragno-global-nav-v2__menu-button--avatar .fragno-global-nav-v2__avatar-chevron {
    transition: transform 0.28s var(--global-nav-v2-ease);
  }
  .fragno-global-nav-v2__local {
    display: none;
  }

  .fragno-global-nav-v2__panel {
    right: var(--global-nav-v2-inset-compact);
    left: var(--global-nav-v2-inset-compact);
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-2xl) var(--global-nav-v2-inset-compact);
    border-radius: var(--radius-4xl);
  }
  .fragno-global-nav-v2__pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--spacing-xs);
  }

  .fragno-global-nav-v2__pill-row::-webkit-scrollbar {
    display: none;
  }

  .fragno-global-nav-v2__result-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .fragno-global-nav-v2--scrolled .fragno-global-nav-v2__bar {
    max-width: none;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-2xl);
    margin: 0 var(--global-nav-v2-inset-compact);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fragno-global-nav-v2,
  .fragno-global-nav-v2 *,
  .fragno-global-nav-v2__shell,
  .fragno-global-nav-v2__bar,
  .fragno-global-nav-v2__menu-icon,
  .fragno-global-nav-v2__drawer-toggle {
    transition: none !important;
    animation: none !important;
  }
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular {
  --global-nav-v2-margin: 3rem;
  --global-nav-v2-margin-scrolled: 4rem;
  --global-nav-v2-outer-top: 0.3125rem;
  --global-nav-v2-outer-bottom: 0.3125rem;
  --global-nav-v2-card-radius: 0.75rem;
  --global-nav-v2-card-blur: 30px;
  --global-nav-v2-card-bar-height: 3.625rem;
  --global-nav-v2-card-local-link: 1.75rem;
  --global-nav-v2-card-link-height: 1.75rem;
  padding-block: var(--global-nav-v2-outer-top) var(--global-nav-v2-outer-bottom);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--with-local-nav {
  --global-nav-v2-outer-top: 0.75rem;
  --global-nav-v2-outer-bottom: 0.6875rem;
  --global-nav-v2-card-bar-height: 3.875rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__shell {
  width: auto;
  margin: 0 var(--global-nav-v2-margin);
  border: 1px solid var(--global-nav-v2-card-border);
  border-radius: var(--global-nav-v2-card-radius);
  background-color: var(--global-nav-v2-card-surface);
  background-image: linear-gradient(var(--global-nav-v2-card-tint), var(--global-nav-v2-card-tint));
  -webkit-backdrop-filter: blur(var(--global-nav-v2-card-blur));
  backdrop-filter: blur(var(--global-nav-v2-card-blur));
  box-shadow: var(--global-nav-v2-card-shadow);
  transition: margin var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease),
    top var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--bg-white
  .fragno-global-nav-v2__shell {
  background-color: var(--colors-secondary-default);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--reserved
  .fragno-global-nav-v2__shell {
  top: var(--global-nav-v2-outer-top);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--reserved.fragno-global-nav-v2--scrolled
  .fragno-global-nav-v2__shell {
  top: var(--spacing-3xl);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--scrolled
  .fragno-global-nav-v2__shell {
  margin-right: var(--global-nav-v2-margin-scrolled);
  margin-left: var(--global-nav-v2-margin-scrolled);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__bar {
  gap: var(--spacing-xl);
  width: 100%;
  max-width: none;
  min-height: var(--global-nav-v2-card-bar-height);
  margin: 0;
  padding: 0 calc(var(--spacing-3xl) - 1px);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition: none;
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__bar-left {
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__primary-list {
  gap: var(--spacing-sm);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__bar-link {
  height: var(--global-nav-v2-card-link-height);
  min-height: var(--global-nav-v2-card-link-height);
  padding: 0 var(--spacing-md);
  border-radius: 0.375rem;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
  color: var(--global-nav-v2-ink);
  transition: background-color 0.15s linear;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__bar-link:hover {
  color: var(--global-nav-v2-ink);
  background-color: var(--global-nav-v2-link-hover-fill);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--selected-filled
  .fragno-global-nav-v2__bar-link::after {
  display: none;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--selected-filled
  .fragno-global-nav-v2__bar-link--active,
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--selected-filled
  .fragno-global-nav-v2__bar-link--active:hover {
  background-color: var(--global-nav-v2-selected-fill);
  color: var(--global-nav-v2-ink);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-text-sm);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular:not(.fragno-global-nav-v2--selected-filled)
  .fragno-global-nav-v2__bar-link::after {
  right: var(--spacing-md);
  bottom: 2px;
  left: var(--spacing-md);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular:not(.fragno-global-nav-v2--selected-filled)
  .fragno-global-nav-v2__bar-link--active {
  font-weight: var(--font-weight-medium);
}

.fragno-global-nav-v2__search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 11.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0 var(--spacing-lg);
  border: 1px solid var(--colors-gray-500);
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
  color: var(--colors-gray-800);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s linear;
}

.fragno-global-nav-v2__search-trigger:hover {
  background-color: var(--global-nav-v2-search-hover-fill);
}

.fragno-global-nav-v2__search-trigger:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-global-nav-v2__search-trigger-icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--global-nav-v2-ink);
}

.fragno-global-nav-v2__search-trigger-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fragno-global-nav-v2__search-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-global-nav-v2__supporting-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fragno-global-nav-v2__supporting-list .fragno-global-nav-v2__bar-item + .fragno-global-nav-v2__bar-item::before {
  content: '';
  width: 1px;
  height: var(--global-nav-v2-card-link-height, 1.75rem);
  margin-right: var(--spacing-sm);
  background-color: var(--colors-gray-400);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__avatar-pill {
  height: 2.25rem;
  gap: var(--spacing-sm);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular
  .fragno-global-nav-v2__avatar-pill
  .fragno-avatar__main {
  width: 2.25rem;
  height: 2.25rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__local {
  padding: 0.4375rem calc(var(--spacing-3xl) - 1px);
  border-top: 1px solid var(--colors-alpha-black-06);
  border-radius: 0 0 calc(var(--global-nav-v2-card-radius) - 1px)
    calc(var(--global-nav-v2-card-radius) - 1px);
  background-color: var(--global-nav-v2-local-fill);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--scrolled
  .fragno-global-nav-v2__local:not([hidden]) {
  display: block;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__local-list {
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-height: var(--global-nav-v2-card-local-link);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular
  .fragno-global-nav-v2__local
  .fragno-global-nav-v2__bar-category {
  height: var(--global-nav-v2-card-local-link);
  min-height: var(--global-nav-v2-card-local-link);
  padding: 0 var(--spacing-md);
  border-radius: 0.375rem;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
  color: var(--global-nav-v2-ink);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular
  .fragno-global-nav-v2__local
  .fragno-global-nav-v2__bar-category::after {
  right: var(--spacing-md);
  bottom: 2px;
  left: var(--spacing-md);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular:not(.fragno-global-nav-v2--scrolled)
  .fragno-global-nav-v2__panel--subnav {
  border-radius: 0 0 calc(var(--global-nav-v2-card-radius) - 1px)
    calc(var(--global-nav-v2-card-radius) - 1px);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__shell,
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--search-open
  .fragno-global-nav-v2__shell {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--global-nav-v2-card-surface);
  background-image: linear-gradient(var(--global-nav-v2-card-tint), var(--global-nav-v2-card-tint));
  box-shadow: var(--global-nav-v2-card-shadow);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__local {
  border-radius: 0;
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__panel {
  top: calc(100% + 1px);
  right: -1px;
  left: -1px;
  z-index: 2;
  width: auto;
  max-width: none;
  margin: -1px 0 0;
  padding: var(--spacing-md) var(--spacing-3xl) var(--spacing-xl);
  border: 1px solid var(--global-nav-v2-card-border);
  border-radius: 0 0 var(--global-nav-v2-card-radius) var(--global-nav-v2-card-radius);
  background-color: var(--global-nav-v2-panel-surface);
  background-image: linear-gradient(var(--global-nav-v2-card-tint), var(--global-nav-v2-card-tint));
  -webkit-backdrop-filter: blur(var(--global-nav-v2-card-blur));
  backdrop-filter: blur(var(--global-nav-v2-card-blur));
  box-shadow: var(--global-nav-v2-card-shadow);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav {
  gap: var(--spacing-xl);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-column {
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-heading-label,
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-heading-trigger {
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.005em;
  color: var(--global-nav-v2-ink);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular
  .fragno-global-nav-v2__panel--subnav
  .fragno-global-nav-v2__subnav-divider,
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-divider {
  display: block;
  background-color: var(--global-nav-v2-divider);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-list {
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-link {
  font-weight: var(--font-weight-regular);
  color: var(--colors-gray-800);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-link:hover {
  color: var(--global-nav-v2-ink);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__avatar-pill {
  height: 2.5rem;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-lg) 0 var(--spacing-xs);
  border: 1px solid var(--global-nav-v2-pill-border);
  background-color: var(--global-nav-v2-pill-fill);
  filter: drop-shadow(0 4px 9px var(--colors-alpha-black-06));
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__avatar-pill
  .fragno-avatar__main {
  width: 2rem;
  height: 2rem;
}

.fragno-global-nav-v2__avatar-label {
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
  color: var(--global-nav-v2-ink);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__close-button {
  width: 2.375rem;
  height: 2.375rem;
  padding: var(--spacing-md);
  border: 1px solid var(--global-nav-v2-ink);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--global-nav-v2-ink);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__close-button:hover {
  border-color: var(--global-nav-v2-ink);
  background-color: var(--global-nav-v2-ink-alpha-10);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__suggestions .fragno-global-nav-v2__panel-heading {
  line-height: var(--line-height-text-md-tight, 1.25rem);
  color: var(--colors-text-black-secondary, #1b1d19);
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__pill {
  min-height: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--global-nav-v2-ink);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--global-nav-v2-ink);
  letter-spacing: -0.03125rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__pill:hover {
  border-color: var(--global-nav-v2-ink);
  background-color: var(--global-nav-v2-ink-alpha-10);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--search-bare
  .fragno-global-nav-v2__shell {
  border-bottom-right-radius: var(--global-nav-v2-card-radius);
  border-bottom-left-radius: var(--global-nav-v2-card-radius);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact {
  --global-nav-v2-card-radius: 0.75rem;
  --global-nav-v2-card-blur: 30px;
  --global-nav-v2-card-surface: rgba(255, 255, 255, 0.8);
  --global-nav-v2-card-tint: rgba(0, 0, 0, 0.03);
  --global-nav-v2-card-border: var(--colors-base-white);
  --global-nav-v2-card-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.12),
    0 2px 4px 0 rgba(10, 13, 18, 0.06);
  --global-nav-v2-compact-margin: var(--spacing-xl);
  padding-block: var(--spacing-sm);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--scrolled {
  --global-nav-v2-compact-margin: var(--spacing-2xl);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__shell {
  width: auto;
  margin: 0 var(--global-nav-v2-compact-margin);
  border: 1px solid var(--global-nav-v2-card-border);
  border-radius: var(--global-nav-v2-card-radius);
  background-color: var(--global-nav-v2-card-surface);
  background-image: linear-gradient(var(--global-nav-v2-card-tint), var(--global-nav-v2-card-tint));
  -webkit-backdrop-filter: blur(var(--global-nav-v2-card-blur));
  backdrop-filter: blur(var(--global-nav-v2-card-blur));
  box-shadow: var(--global-nav-v2-card-shadow);
  transition: margin var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease),
    top var(--global-nav-v2-morph-duration) var(--global-nav-v2-ease);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--bg-white
  .fragno-global-nav-v2__shell {
  background-color: var(--colors-secondary-default);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--reserved
  .fragno-global-nav-v2__shell {
  top: var(--spacing-sm);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--reserved.fragno-global-nav-v2--scrolled
  .fragno-global-nav-v2__shell {
  top: var(--spacing-lg);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__bar,
.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--scrolled
  .fragno-global-nav-v2__bar {
  width: 100%;
  max-width: none;
  min-height: 3.5rem;
  margin: 0;
  padding: 0 calc(var(--spacing-xl) - 1px);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition: none;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__bar-right {
  gap: var(--spacing-sm);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__icon-button,
.fragno-global-nav-v2.fragno-global-nav-v2--compact
  .fragno-global-nav-v2__menu-button:not(.fragno-global-nav-v2__menu-button--avatar) {
  width: 2.25rem;
  height: 2.25rem;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__icon-button svg,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__menu-icon,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__menu-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__icon-button:hover,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__menu-button:hover {
  background-color: var(--colors-green-900-alpha-10);
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__menu-button--avatar {
  height: 2.5rem;
  padding: 0 var(--spacing-sm);
  gap: var(--spacing-sm);
  border: none;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.06));
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__menu-label {
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--search-open
  .fragno-global-nav-v2__shell {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--search-open.fragno-global-nav-v2--search-bare
  .fragno-global-nav-v2__shell {
  border-bottom-right-radius: var(--global-nav-v2-card-radius);
  border-bottom-left-radius: var(--global-nav-v2-card-radius);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact.fragno-global-nav-v2--search-open
  .fragno-global-nav-v2__bar {
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__close-button {
  width: 2.375rem;
  height: 2.375rem;
  padding: var(--spacing-md);
  border: 1px solid var(--colors-green-900);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__search-input:focus {
  outline: none;
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__panel {
  top: calc(100% + 1px);
  right: -1px;
  left: -1px;
  z-index: 2;
  width: auto;
  max-width: none;
  margin: -1px 0 0;
  padding: var(--spacing-xl);
  border: 1px solid var(--global-nav-v2-card-border);
  border-radius: 0 0 var(--global-nav-v2-card-radius) var(--global-nav-v2-card-radius);
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(var(--global-nav-v2-card-blur));
  backdrop-filter: blur(var(--global-nav-v2-card-blur));
  box-shadow: var(--global-nav-v2-card-shadow);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__suggestions .fragno-global-nav-v2__panel-heading {
  line-height: var(--line-height-text-md-tight, 1.25rem);
  color: var(--colors-text-black-secondary, #1b1d19);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__pill-row {
  gap: var(--spacing-sm);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__pill {
  min-height: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--colors-green-900);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--colors-green-900);
  letter-spacing: -0.03125rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-scrim {
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-card {
  gap: 0;
  padding: 0;
  border: 1px solid var(--colors-base-white);
  border-radius: var(--radius-2xl);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(10, 13, 18, 0.06);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-top {
  min-height: 3.5rem;
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--colors-neutral-300, #cfd2c7);
  background: none;
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact
  .fragno-global-nav-v2__drawer-top
  .fragno-global-nav-v2__close-button {
  width: 2.25rem;
  height: 2.25rem;
  padding: var(--spacing-md);
  border: none;
  background: none;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-body {
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-links {
  gap: var(--spacing-md);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-link {
  min-height: 2rem;
  padding: var(--spacing-xs) 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-link[aria-current='page'] {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  background-color: var(--colors-gray-400);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03125rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-toggle {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-sublinks {
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-sublink[aria-current],
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-deep-link[aria-current] {
  color: var(--colors-green-900);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-sublink {
  padding-inline-start: 0.625rem;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-heading {
  font-family: var(--font-family-body);
  font-size: var(--global-nav-v2-heading-size);
  line-height: var(--global-nav-v2-heading-line);
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-deep-links {
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-deep-link,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-sublink {
  min-height: 1.5rem;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.03125rem;
  color: var(--colors-gray-700);
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__back-button {
  min-height: 2.25rem;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border-radius: var(--radius-md);
  background-color: var(--colors-gray-400);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__back-button:hover {
  background-color: var(--colors-gray-300);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-footer {
  gap: var(--spacing-3xl);
  margin-top: 0;
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--colors-neutral-300, #cfd2c7);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-quick-links,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-actions,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-quick-heading {
  padding-inline: var(--spacing-xl);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-quick-link,
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-account-link {
  min-height: 1.75rem;
  padding: 0;
  border-radius: 0.375rem;
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-actions {
  gap: var(--spacing-lg);
}

.fragno-global-nav-v2__results {
  position: relative;
  max-height: 23.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.6) transparent;
}

.fragno-global-nav-v2__results--scrollable::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  flex-shrink: 0;
  height: 2.5rem;
  margin-top: -2.5rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
  pointer-events: none;
}

.fragno-global-nav-v2__results--list .fragno-global-nav-v2__result-list {
  column-gap: var(--spacing-3xl);
  row-gap: 0;
}

.fragno-global-nav-v2__result-row {
  gap: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--colors-alpha-black-20);
}

.fragno-global-nav-v2__results--list .fragno-global-nav-v2__result-list > li:nth-child(-n + 2) .fragno-global-nav-v2__result-row {
  padding-top: 0;
}

.fragno-global-nav-v2__results--list .fragno-global-nav-v2__result-list > li:nth-last-child(-n + 2) .fragno-global-nav-v2__result-row {
  padding-bottom: 0;
  border-bottom: none;
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-media {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: var(--radius-2xl);
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-media svg {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-body {
  gap: var(--spacing-xs);
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-title {
  font-size: var(--font-size-text-md);
  font-weight: 550;
  line-height: var(--line-height-text-md);
  color: var(--colors-gray-900);
}

.fragno-global-nav-v2__result-row .fragno-global-nav-v2__result-description {
  color: var(--colors-gray-800);
}

.fragno-global-nav-v2__result-row:hover {
  background-color: transparent;
}

.fragno-global-nav-v2__result-row:hover .fragno-global-nav-v2__result-title {
  text-decoration: underline;
}
.fragno-global-nav-v2__no-results-title {
  font-size: var(--font-size-text-md);
  line-height: 1.25rem;
  color: var(--colors-text-black-secondary, #1b1d19);
}

.fragno-global-nav-v2__no-results-description {
  color: var(--colors-text-black-tertiary, #373931);
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__results {
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__result-list {
  grid-template-columns: minmax(0, 1fr);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact
  .fragno-global-nav-v2__results--list
  .fragno-global-nav-v2__result-list
  > li
  .fragno-global-nav-v2__result-row {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--colors-alpha-black-20);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact
  .fragno-global-nav-v2__results--list
  .fragno-global-nav-v2__result-list
  > li:first-child
  .fragno-global-nav-v2__result-row {
  padding-top: 0;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact
  .fragno-global-nav-v2__results--list
  .fragno-global-nav-v2__result-list
  > li:last-child
  .fragno-global-nav-v2__result-row {
  padding-bottom: 0;
  border-bottom: none;
}
.fragno-global-nav-v2.fragno-global-nav-v2--overlay {
  padding-block: 0;
}

.fragno-global-nav-v2.fragno-global-nav-v2--overlay.fragno-global-nav-v2--reserved {
  min-height: 0;
}
fragno-global-nav-v2.fragno-global-nav-v2-overlay-host:not(.fragno-global-nav-v2-sticky-host) {
  position: relative;
  z-index: 320;
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav {
  max-height: min(30rem, calc(100vh - 12rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__subnav-link {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-user {
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-2xl);
  background-color: var(--colors-secondary-default);
  box-shadow: 0 4px 18px 8px rgba(0, 0, 0, 0.04);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-user-name {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  color: var(--colors-green-900);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-user-email {
  color: var(--colors-gray-800);
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-actions fragno-button {
  width: 100%;
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular .fragno-global-nav-v2__local {
  border-top-color: var(--global-nav-v2-card-border);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0) 0.875rem);
}
.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--with-local-nav.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__shell {
  border-bottom-color: transparent;
  background-clip: padding-box;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--with-local-nav.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__panel {
  border-top-width: 0;
}

.fragno-global-nav-v2.fragno-global-nav-v2--regular.fragno-global-nav-v2--with-local-nav.fragno-global-nav-v2--expanded
  .fragno-global-nav-v2__local {
  background-color: transparent;
}
.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer {
  align-items: flex-start;
}

.fragno-global-nav-v2.fragno-global-nav-v2--compact .fragno-global-nav-v2__drawer-body {
  flex: 0 1 auto;
}
fragno-global-nav-v2:not(:defined) {
  display: block;
  position: relative;
  z-index: 320;
}

fragno-global-nav-v2:not(:defined) > [data-nav-fallback] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg) var(--spacing-3xl);
  min-height: 4.375rem;
  padding: var(--spacing-lg) 5rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-900);
}
fragno-global-nav-v2[background='white' i]:not(:defined) > [data-nav-fallback] {
  background-color: var(--colors-secondary-default);
}
fragno-global-nav-v2:defined > [data-nav-fallback] {
  display: none;
}

fragno-global-nav-v2[overlay]:not(:defined) > [data-nav-fallback] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

fragno-global-nav-v2:not(:defined) > [data-nav-fallback] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

fragno-global-nav-v2:not(:defined) > [data-nav-fallback] a {
  color: inherit;
  text-decoration: none;
}

fragno-global-nav-v2:not(:defined) > [data-nav-fallback] a:hover {
  text-decoration: underline;
}

fragno-global-nav-v2:not(:defined) > [data-nav-fallback] a:focus-visible {
  outline: 2px solid var(--colors-gray-900);
  outline-offset: 2px;
}

@media (max-width: 63.9375rem) {
  fragno-global-nav-v2:not(:defined) > [data-nav-fallback] {
    padding-inline: var(--spacing-2xl);
  }
}

fragno-footer {
  --footer-bg: var(--colors-gray-900);
  --footer-text-primary: var(--colors-base-white);
  --footer-text-secondary: var(--colors-gray-200);
  --footer-text-tertiary: var(--colors-gray-200);
  --footer-outline-ui: var(--colors-gray-50);
  --footer-social-border: var(--colors-gray-50);
  --footer-border-subtle: rgba(255, 255, 255, 0.4);
  --footer-padding-x: var(--spacing-8xl, 5rem);
  --footer-padding-y-top: var(--spacing-8xl, 5rem);
  --footer-padding-y-bottom: var(--spacing-7xl, 4rem);
  --footer-max-width: 90rem;
  font-family: var(--font-family-body);
}
fragno-footer[segment='business'] {
  --footer-bg: var(--colors-green-900);
}

.fragno-footer__shell {
  gap: var(--spacing-7xl, 4rem);
}
.fragno-footer__top {
  gap: 0;
  padding: 0;
  border: 0;
}

.fragno-footer__brand fragno-logo-lockup {
  display: flex;
  width: 4.4403125rem;
  zoom: 2.5755;
}

.fragno-footer__brand--minimal fragno-logo-lockup {
  zoom: 1.1667;
}
.fragno-footer__columns-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-4xl, 2rem);
  align-items: start;
}

.fragno-footer__columns-inner > .fragno-footer__column,
.fragno-footer__columns-inner > .fragno-footer__column:nth-child(1),
.fragno-footer__columns-inner > .fragno-footer__column:nth-child(2) {
  grid-column: auto;
  min-width: 0;
}

.fragno-footer__columns-inner > .fragno-footer__column--legal {
  grid-column: span 2;
}

.fragno-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 1rem);
}

.fragno-footer__column-heading {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.375rem;
  letter-spacing: -0.03125rem;
  color: var(--footer-text-primary);
}

.fragno-footer__link-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-footer__link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.03125rem;
  color: var(--footer-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fragno-footer__link:hover {
  color: var(--footer-text-primary);
}

.fragno-footer__column--legal .fragno-footer__link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-4xl, 2rem);
}
.fragno-footer__meta {
  padding-top: var(--spacing-7xl, 4rem);
  border-top: 1px solid var(--footer-border-subtle);
}

.fragno-footer__meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--spacing-4xl, 2rem);
  align-items: end;
}

.fragno-footer__meta-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 0.75rem);
  min-width: 0;
}

.fragno-footer__meta-heading {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.375rem;
  letter-spacing: -0.03125rem;
  color: var(--footer-text-primary);
}

.fragno-footer__social-list {
  display: flex;
  gap: var(--spacing-xl, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-footer__meta-badge {
  align-items: flex-end;
  justify-self: end;
  padding: 0;
}

.fragno-footer__meta-badge .fragno-footer__bbb-seal {
  display: block;
  width: 7.9878rem;
  height: 3rem;
}
.fragno-footer__copyright {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.03125rem;
  color: var(--footer-text-secondary);
}
fragno-footer .fragno-button.fragno-button--secondary {
  background-color: transparent;
  border: 1px solid var(--footer-outline-ui);
  color: var(--footer-outline-ui);
  box-shadow: none;
}

fragno-footer .fragno-button.fragno-button--secondary:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--footer-outline-ui);
}

fragno-footer.fragno-footer--variant-minimal .fragno-button.fragno-button--secondary:hover:not(:disabled) {
  background-color: var(--colors-green-900-alpha-10);
}

fragno-footer .fragno-button.fragno-button--icon-only {
  width: 2.5rem;
  height: 2.5rem;
}
fragno-footer.fragno-footer--variant-minimal,
fragno-footer[variant='minimal' i]:not(:defined) {
  --footer-bg: var(--colors-gray-200);
  --footer-text-primary: var(--colors-gray-800);
  --footer-text-secondary: var(--colors-gray-800);
  --footer-text-tertiary: var(--colors-gray-800);
  --footer-outline-ui: var(--colors-green-900);
  --footer-social-border: var(--colors-green-900);
  --footer-border-subtle: rgba(0, 0, 0, 0.4);
  --footer-padding-y-top: var(--spacing-6xl, 3rem);
  --footer-padding-y-bottom: var(--spacing-3xl, 1.5rem);
  background-color: var(--footer-bg);
  color: var(--footer-text-primary);
}

fragno-footer.fragno-footer--variant-minimal[segment='business'],
fragno-footer[variant='minimal' i][segment='business']:not(:defined) {
  --footer-bg: var(--colors-base-white);
}

fragno-footer .fragno-footer__shell--minimal {
  gap: var(--spacing-4xl, 2rem);
  padding-top: var(--footer-padding-y-top);
  padding-bottom: var(--footer-padding-y-bottom);
}

.fragno-footer__shell--minimal .fragno-footer__minimal-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-3xl, 1.5rem);
  padding-top: var(--spacing-4xl, 2rem);
  border-top: 1px solid var(--footer-border-subtle);
}
fragno-footer.fragno-footer--variant-minimal[hide-separator] .fragno-footer__minimal-row {
  padding-top: 0;
  border-top: none;
}

.fragno-footer__brand--minimal fragno-logo-lockup {
  color: var(--colors-green-900);
}
.fragno-footer__minimal-links {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.fragno-footer__minimal-link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl, 1rem) var(--spacing-4xl, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: auto;
}

.fragno-footer__minimal-link-list li {
  margin-bottom: 0;
}

.fragno-footer__minimal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-sm);
  letter-spacing: -0.03125rem;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--footer-text-secondary);
}
.fragno-footer__minimal-link::after {
  content: '';
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 fill=%27none%27%3E%3Cpath d=%27M3 9L9 3M9 3H4.5M9 3v4.5%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 fill=%27none%27%3E%3Cpath d=%27M3 9L9 3M9 3H4.5M9 3v4.5%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
}

.fragno-footer__minimal-social {
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
}
@media (max-width: 47.9375rem) {
  fragno-footer {
    --footer-padding-x: var(--spacing-2xl, 1.25rem);
    --footer-padding-y-top: var(--spacing-7xl, 4rem);
    --footer-padding-y-bottom: var(--spacing-4xl, 2rem);
  }

  .fragno-footer__shell {
    gap: var(--spacing-6xl, 3rem);
  }

  .fragno-footer__brand fragno-logo-lockup {
    zoom: 2;
  }

  .fragno-footer__columns-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-md, 0.5rem);
    row-gap: var(--spacing-4xl, 2rem);
  }

  .fragno-footer__columns-inner > .fragno-footer__column--legal {
    grid-column: auto;
  }

  .fragno-footer__column--legal .fragno-footer__link-list {
    display: flex;
  }

  .fragno-footer__column-heading {
    line-height: 1.5rem;
  }

  .fragno-footer__link {
    font-size: var(--font-size-text-md);
    line-height: 1.5rem;
  }

  .fragno-footer__columns {
    margin-bottom: calc(-1 * var(--spacing-xl, 1rem));
  }

  .fragno-footer__meta {
    padding-top: var(--spacing-4xl, 2rem);
  }

  .fragno-footer__meta-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--spacing-4xl, 2rem);
    align-items: start;
  }

  .fragno-footer__meta-help {
    justify-self: end;
  }

  .fragno-footer__meta-badge {
    grid-column: 1 / -1;
    justify-self: start;
    align-items: flex-start;
  }

  .fragno-footer__meta-badge .fragno-footer__bbb-seal {
    width: 8.6534rem;
    height: 3.25rem;
  }

  .fragno-footer__meta-block {
    gap: var(--spacing-xl, 1rem);
  }

  .fragno-footer__brand--minimal fragno-logo-lockup {
    zoom: 1.1667;
  }

  .fragno-footer__minimal-link {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
  }

  .fragno-footer__minimal-link-list li,
  .fragno-footer__minimal-link-list li:last-child {
    margin-bottom: 0;
  }

  .fragno-footer__shell--minimal {
    gap: var(--spacing-4xl, 2rem);
  }

  .fragno-footer__shell--minimal .fragno-footer__minimal-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xl, 2rem);
  }

  .fragno-footer__minimal-links {
    width: 100%;
  }

  .fragno-footer__minimal-link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xl, 1rem) var(--spacing-md, 0.5rem);
  }

  .fragno-footer__minimal-social {
    margin-left: 0;
  }
}
fragno-footer:not(:defined) {
  padding: var(--footer-padding-y-top) var(--footer-padding-x) var(--footer-padding-y-bottom);
}

fragno-footer:not(:defined) > * {
  max-width: calc(var(--footer-max-width) - 2 * var(--footer-padding-x));
  margin-inline: auto;
}

fragno-footer:not(:defined) [data-footer-part='brand'] fragno-logo-lockup {
  display: flex;
  width: 4.4403125rem;
  zoom: 2.5755;
}

fragno-footer:not(:defined) :is(h2, h3) {
  margin: 0 0 var(--spacing-xl, 1rem);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.375rem;
  letter-spacing: -0.03125rem;
}

fragno-footer:not(:defined) ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

fragno-footer:not(:defined) a {
  color: var(--footer-text-secondary);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

fragno-footer:not(:defined) a:focus-visible {
  outline: 2px solid var(--footer-outline-ui);
  outline-offset: 2px;
}

fragno-footer:not(:defined) [data-footer-part='stats'] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-4xl, 2rem);
  margin-block: var(--spacing-6xl, 3rem);
}

fragno-footer:not(:defined) [data-footer-part='columns'] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-4xl, 2rem);
  margin-block: var(--spacing-7xl, 4rem);
}

@media (max-width: 47.9375rem) {
  fragno-footer:not(:defined) [data-footer-part='brand'] fragno-logo-lockup {
    zoom: 2;
  }

  fragno-footer:not(:defined) [data-footer-part='columns'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-md, 0.5rem);
  }
}

fragno-footer:not(:defined) [data-footer-part='meta'] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-4xl, 2rem);
  padding-top: var(--spacing-4xl, 2rem);
  border-top: 1px solid var(--footer-border-subtle);
}

fragno-footer:not(:defined) [data-footer-sub='social'] ul {
  flex-direction: row;
}

fragno-footer:not(:defined) [data-footer-sub='badge']:empty {
  display: none;
}

fragno-footer:not(:defined) [data-footer-sub='copyright'] {
  flex-basis: 100%;
  margin: 0;
  color: var(--footer-text-tertiary);
}
fragno-footer[variant='minimal' i]:not(:defined)
  :is([data-footer-part='stats'], [data-footer-sub='help'], [data-footer-sub='badge']) {
  display: none;
}

fragno-footer[variant='minimal' i]:not(:defined) [data-footer-part='columns'] {
  display: block;
  margin-block: var(--spacing-4xl, 2rem);
}

fragno-footer[variant='minimal' i]:not(:defined) [data-footer-part='columns'] ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md, 0.5rem) var(--spacing-3xl, 1.5rem);
}

fragno-footer[variant='minimal' i]:not(:defined) :is(h2, h3) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:where(:host) {
  --attribute-card-text: var(--colors-gray-900);
  --attribute-card-sublabel: var(--colors-gray-700);
  --attribute-card-surface: var(--colors-gray-25);
  --attribute-card-border: var(--colors-base-white);
  --attribute-card-action-border: var(--colors-gray-400);
  --attribute-card-action-hover: var(--colors-gray-50);
  --attribute-card-save-fill: var(--colors-base-black);
  --attribute-card-save-fill-hover: var(--colors-gray-800);
  --attribute-card-save-text: var(--colors-base-white);
  --attribute-card-unsaved-border: var(--colors-red-600);
  --attribute-card-error-text: var(--colors-red-700);
  --attribute-card-field-label: var(--colors-gray-800);
  --attribute-card-field-text: var(--colors-gray-900);
  --attribute-card-option-active: var(--colors-gray-100);
  --attribute-card-success-text: var(--colors-green-800);
  --attribute-card-success-fill: var(--colors-green-50);
  --attribute-card-success-border: var(--colors-green-300);
}
:host[data-theme='light']:not(.fragno-rebrand-all) :is(
  fragno-avatar,
  fragno-badge,
  fragno-button,
  fragno-community-offer-card,
  fragno-error-summary,
  fragno-external,
  fragno-footer,
  fragno-global-nav-v2,
  fragno-logo-lockup,
  fragno-offer-panel,
  fragno-page-header,
  fragno-persistent-fab
) {
  --colors-primary-default: var(--colors-gray-900);
  --colors-primary-hover: var(--colors-gray-800);
  --colors-primary-disabled: var(--colors-gray-100);
  --colors-primary-text-disabled: var(--colors-gray-500);
  --colors-secondary-border: var(--colors-gray-400);
  --colors-secondary-border-hover: var(--colors-gray-600);
  --colors-secondary-border-focused: var(--colors-gray-600);
  --colors-secondary-text: var(--colors-gray-900);
  --colors-secondary-text-hover: var(--colors-gray-800);
  --colors-secondary-text-disabled: var(--colors-gray-500);
  --colors-tertiary-hover: var(--colors-gray-200);
  --colors-tertiary-text: var(--colors-gray-900);
  --colors-tertiary-text-hover: var(--colors-gray-700);
  --colors-tertiary-text-disabled: var(--colors-gray-500);
  --colors-focus-ring: var(--colors-blue-600);
  --colors-disabled-border: var(--colors-gray-200);
  --colors-disabled-background: var(--colors-gray-100);
  --colors-disabled-foreground: var(--colors-gray-500);
  --colors-gray-50: #f1f0f0;
  --colors-gray-100: #ecece8;
  --colors-gray-200: #e4e7e0;
  --colors-gray-300: #cfd2c7;
  --colors-gray-400: #babcaf;
  --colors-gray-500: #a6a697;
  --colors-gray-600: #7f7f6e;
  --colors-gray-700: #545449;
  --colors-gray-800: #373931;
  --colors-gray-900: #1b1d19;
  --colors-gray-border: var(--colors-gray-400);
  --fragno-segment-pill-grey: var(--colors-gray-100);
  --colors-blue-25: #f4f7fa;
  --colors-blue-50: #d1dff3;
  --colors-blue-100: #a5c5f5;
  --colors-blue-200: #70a9ff;
  --colors-blue-300: #5490f9;
  --colors-blue-400: #3a77f1;
  --colors-blue-500: #225de7;
  --colors-blue-600: #193ed4;
  --colors-blue-700: #1727b9;
  --colors-blue-800: #07347f;
  --colors-blue-900: #00273c;
  --colors-blue-950: #021722;
  --colors-red-25: #faf5f4;
  --colors-red-50: #f1cdc9;
  --colors-red-100: #f29d93;
  --colors-red-200: #fd6452;
  --colors-red-300: #f75845;
  --colors-red-400: #ef4c39;
  --colors-red-500: #e6422f;
  --colors-red-600: #d8321f;
  --colors-red-700: #b92f20;
  --colors-red-800: #9e271b;
  --colors-red-900: #822016;
  --colors-red-950: #4b1610;
  --colors-green-50: #d2ecb3;
  --colors-green-100: #adee63;
  --colors-green-300: #3dd608;
  --colors-green-600: #0e6a2d;
  --colors-green-700: #0b4c23;
  --colors-green-800: #063820;
  --colors-green-900: #032318;
  --colors-green-fg: var(--colors-green-800);
  --colors-green-900-alpha-10: rgba(3, 35, 24, 0.1);
  --colors-yellow-25: #fafaf5;
  --colors-yellow-50: #e9e9bc;
  --colors-yellow-100: #e8e873;
  --colors-yellow-200: #f3f31f;
  --colors-yellow-300: #e7ea1c;
  --colors-yellow-400: #e2db19;
  --colors-yellow-500: #d1c81e;
  --colors-yellow-600: #979318;
  --colors-yellow-700: #676508;
  --colors-yellow-800: #4d4f07;
  --colors-yellow-900: #343805;
  --colors-yellow-950: #1e2005;
  --font-family-body: "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display: "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "IDMe Matter Mono", "Matter VF Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;
  --font-size-display-xs: 1.5rem;
  --font-size-display-sm: 1.875rem;
  --font-size-display-md: 2.25rem;
  --font-size-hero: 9.75rem;
  --font-size-display-2xs: var(--font-size-display-xs);
  --line-height-text-xs: 1.125rem;
  --line-height-display-xs: 2rem;
  --line-height-display-sm: 2.375rem;
  --line-height-display-md: 2.75rem;
  --line-height-display-lg: 3.75rem;
  --line-height-display-2xl: 5rem;
  --line-height-display-2xs: var(--line-height-display-xs);
  --letter-spacing-text-xs: -0.005em;
  --letter-spacing-text-sm: -0.005em;
  --letter-spacing-text-md: -0.005em;
  --letter-spacing-text-lg: -0.005em;
  --letter-spacing-text-xl: -0.005em;
  --letter-spacing-display-xs: -0.02em;
  --letter-spacing-display-sm: -0.02em;
  --letter-spacing-display-md: -0.02em;
  --letter-spacing-display-lg: -0.02em;
  --letter-spacing-display-xl: -0.02em;
  --letter-spacing-display-2xl: -0.03em;
  --letter-spacing-hero: -0.04em;
  --letter-spacing-display-2xs: var(--letter-spacing-display-xs);
  --letter-spacing-display-30: var(--letter-spacing-display-sm);
  --button-sm-letter-spacing: var(--letter-spacing-text-sm);
  --button-md-letter-spacing: var(--letter-spacing-text-sm);
  --button-lg-height: 3rem;
  --button-lg-letter-spacing: var(--letter-spacing-text-md);
  --button-xl-height: 3.5rem;
  --button-xl-padding-x: 1rem;
  --button-xl-letter-spacing: var(--letter-spacing-text-md);
  --color-interactive-default: var(--colors-blue-500);
  --color-interactive-hover: var(--colors-blue-600);
  --color-interactive-active: var(--colors-blue-700);
  --color-interactive-subtle: var(--colors-blue-100);
  --color-interactive-disabled: var(--colors-gray-200);
  --color-text-primary: var(--colors-gray-900);
  --color-text-secondary: var(--colors-gray-800);
  --color-text-tertiary: var(--colors-gray-700);
  --color-text-disabled: var(--colors-gray-500);
  --color-text-link: var(--colors-gray-800);
  --color-border-default: var(--colors-gray-border);
  --color-border-subtle: var(--colors-gray-200);
  --color-border-strong: var(--colors-gray-700);
  --color-border-interactive: var(--color-interactive-default);
  --color-border-disabled: var(--colors-disabled-border);
  --color-bg-secondary: var(--colors-gray-100);
  --color-bg-disabled: var(--colors-gray-100);
  --color-bg-interactive-subtle: var(--colors-blue-50);
  --color-status-error-text: var(--colors-red-700);
  --color-status-error-bg: var(--colors-red-300);
  --color-status-error-border: var(--colors-red-50);
  --color-status-success-text: var(--colors-green-700);
  --color-status-success-bg: var(--colors-green-50);
  --color-status-success-border: var(--colors-green-600);
  --color-status-warning-text: var(--colors-yellow-700);
  --color-status-warning-bg: var(--colors-yellow-50);
  --color-status-warning-border: var(--colors-yellow-600);
  --avatar-bg-default: var(--colors-gray-100);
  --avatar-text-color: var(--colors-gray-700);
  --avatar-bg-dark: var(--colors-gray-800);
  --modal-bg: var(--colors-gray-100);
  --modal-close-button-color: var(--colors-gray-800);
  --modal-icon-container-bg: var(--colors-blue-100);
  --modal-icon-color: var(--colors-blue-500);
  --page-header-title-color: var(--colors-primary-default);
  --page-header-secondary-info-color: var(--colors-gray-800);
  --page-header-divider-color: var(--colors-gray-300);
  --alerts-blue-text: var(--colors-blue-800);
  --alerts-gray-border: var(--colors-gray-400);
  --table-row-selected-surface: var(--colors-blue-25);
  --hero-card-text-eyebrow: var(--colors-gray-50);
  --hero-card-text-title: var(--colors-gray-50);
  --hero-card-text-subtitle: var(--colors-gray-200);
  --hero-card-text-description: var(--colors-gray-200);
  --hero-card-xl-subtitle-font-size: var(--font-size-display-sm);
  --hero-card-xl-subtitle-line-height: var(--line-height-display-sm);
  --hero-card-xl-subtitle-letter-spacing: var(--letter-spacing-display-sm);
  --hero-card-xl-description-letter-spacing: var(--letter-spacing-text-xl, 0);
  --featured-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --featured-card-text-title-letter-spacing: var(--letter-spacing-text-xl);
  --featured-card-text-subtitle-letter-spacing: var(--letter-spacing-text-md);
  --content-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --content-card-text-title-font-size: var(--font-size-display-2xs);
  --content-card-text-title-line-height: var(--line-height-display-xs);
  --content-card-text-title-letter-spacing: var(--letter-spacing-display-2xs);
  --content-card-text-description-letter-spacing: var(--letter-spacing-text-md);
  --offer-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-eyebrow-sm-letter-spacing: var(--letter-spacing-text-md);
  --offer-card-text-title-letter-spacing: var(--letter-spacing-text-lg);
  --offer-card-text-title-lg-letter-spacing: var(--letter-spacing-text-xl);
  --offer-card-text-subtitle-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-subtitle-lg-letter-spacing: var(--letter-spacing-text-md);
  --progress-card-icon-bg: var(--colors-gray-100);
  --progress-card-headline-color: var(--colors-gray-900);
  --progress-card-text-color: var(--colors-gray-900);
  --card-block-border-color: var(--colors-gray-300);
  --card-block-surface-grey: var(--colors-gray-50);
  --status-badge-bg: var(--colors-gray-100);
  --status-badge-label-color: var(--colors-gray-700);
  --status-badge-dot-neutral: var(--colors-gray-500);
  --status-badge-halo-neutral: var(--colors-gray-200);
  --status-badge-halo-success: var(--colors-green-100);
  --status-badge-dot-warning: var(--colors-yellow-600);
  --status-badge-halo-warning: var(--colors-yellow-100);
  --status-badge-dot-error: var(--colors-red-600);
  --status-badge-halo-error: var(--colors-red-100);
  --status-badge-dot-info: var(--colors-blue-600);
  --status-badge-halo-info: var(--colors-blue-100);
  --icon-tile-bg-grey: var(--colors-gray-100);
  --icon-tile-fg-grey: var(--colors-gray-800);
  --icon-tile-bg-blue: var(--colors-blue-100);
  --icon-tile-fg-blue: var(--colors-blue-700);
  --icon-tile-bg-green: var(--colors-green-100);
  --icon-tile-bg-red: var(--colors-red-100);
  --icon-tile-fg-red: var(--colors-red-700);
  --icon-tile-fg-white: var(--colors-green-900);
  --icon-tile-fg-transparent: var(--colors-gray-700);
  --item-block-label-color: var(--colors-gray-700);
  --item-block-value-color: var(--colors-gray-900);
  --list-item-text-color: var(--colors-gray-800);
  --list-item-supporting-text-color: var(--colors-gray-500);
  --list-item-icon-color: var(--colors-gray-700);
  --list-item-icon-color-warning: var(--colors-yellow-700);
  --list-item-icon-color-error: var(--colors-red-700);
  --list-item-icon-color-info: var(--colors-blue-700);
  --list-item-icon-color-muted: var(--colors-gray-400);
  --colors-base-white: #ffffff;
  --colors-base-black: #000000;
  --colors-gray-25: #f7f7f7;
  --colors-green-200: #89ff02;
  --button-tertiary-text: var(--colors-green-900);
  --button-tertiary-text-hover: var(--colors-green-800);
  --button-focus-ring: var(--colors-green-800);
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  :host:not([data-theme]):not(.fragno-rebrand-all) :is(
    fragno-avatar,
  fragno-badge,
  fragno-button,
  fragno-community-offer-card,
  fragno-error-summary,
  fragno-external,
  fragno-footer,
  fragno-global-nav-v2,
  fragno-logo-lockup,
  fragno-offer-panel,
  fragno-page-header,
  fragno-persistent-fab
  ) {
    --colors-primary-default: var(--colors-gray-900);
    --colors-primary-hover: var(--colors-gray-800);
    --colors-primary-disabled: var(--colors-gray-100);
    --colors-primary-text-disabled: var(--colors-gray-500);
    --colors-secondary-border: var(--colors-gray-400);
    --colors-secondary-border-hover: var(--colors-gray-600);
    --colors-secondary-border-focused: var(--colors-gray-600);
    --colors-secondary-text: var(--colors-gray-900);
    --colors-secondary-text-hover: var(--colors-gray-800);
    --colors-secondary-text-disabled: var(--colors-gray-500);
    --colors-tertiary-hover: var(--colors-gray-200);
    --colors-tertiary-text: var(--colors-gray-900);
    --colors-tertiary-text-hover: var(--colors-gray-700);
    --colors-tertiary-text-disabled: var(--colors-gray-500);
    --colors-focus-ring: var(--colors-blue-600);
    --colors-disabled-border: var(--colors-gray-200);
    --colors-disabled-background: var(--colors-gray-100);
    --colors-disabled-foreground: var(--colors-gray-500);
    --colors-gray-50: #f1f0f0;
    --colors-gray-100: #ecece8;
    --colors-gray-200: #e4e7e0;
    --colors-gray-300: #cfd2c7;
    --colors-gray-400: #babcaf;
    --colors-gray-500: #a6a697;
    --colors-gray-600: #7f7f6e;
    --colors-gray-700: #545449;
    --colors-gray-800: #373931;
    --colors-gray-900: #1b1d19;
    --colors-gray-border: var(--colors-gray-400);
    --fragno-segment-pill-grey: var(--colors-gray-100);
    --colors-blue-25: #f4f7fa;
    --colors-blue-50: #d1dff3;
    --colors-blue-100: #a5c5f5;
    --colors-blue-200: #70a9ff;
    --colors-blue-300: #5490f9;
    --colors-blue-400: #3a77f1;
    --colors-blue-500: #225de7;
    --colors-blue-600: #193ed4;
    --colors-blue-700: #1727b9;
    --colors-blue-800: #07347f;
    --colors-blue-900: #00273c;
    --colors-blue-950: #021722;
    --colors-red-25: #faf5f4;
    --colors-red-50: #f1cdc9;
    --colors-red-100: #f29d93;
    --colors-red-200: #fd6452;
    --colors-red-300: #f75845;
    --colors-red-400: #ef4c39;
    --colors-red-500: #e6422f;
    --colors-red-600: #d8321f;
    --colors-red-700: #b92f20;
    --colors-red-800: #9e271b;
    --colors-red-900: #822016;
    --colors-red-950: #4b1610;
    --colors-green-50: #d2ecb3;
    --colors-green-100: #adee63;
    --colors-green-300: #3dd608;
    --colors-green-600: #0e6a2d;
    --colors-green-700: #0b4c23;
    --colors-green-800: #063820;
    --colors-green-900: #032318;
    --colors-green-fg: var(--colors-green-800);
    --colors-green-900-alpha-10: rgba(3, 35, 24, 0.1);
    --colors-yellow-25: #fafaf5;
    --colors-yellow-50: #e9e9bc;
    --colors-yellow-100: #e8e873;
    --colors-yellow-200: #f3f31f;
    --colors-yellow-300: #e7ea1c;
    --colors-yellow-400: #e2db19;
    --colors-yellow-500: #d1c81e;
    --colors-yellow-600: #979318;
    --colors-yellow-700: #676508;
    --colors-yellow-800: #4d4f07;
    --colors-yellow-900: #343805;
    --colors-yellow-950: #1e2005;
    --font-family-body: "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-display: "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: "IDMe Matter Mono", "Matter VF Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;
    --font-size-display-xs: 1.5rem;
    --font-size-display-sm: 1.875rem;
    --font-size-display-md: 2.25rem;
    --font-size-hero: 9.75rem;
    --font-size-display-2xs: var(--font-size-display-xs);
    --line-height-text-xs: 1.125rem;
    --line-height-display-xs: 2rem;
    --line-height-display-sm: 2.375rem;
    --line-height-display-md: 2.75rem;
    --line-height-display-lg: 3.75rem;
    --line-height-display-2xl: 5rem;
    --line-height-display-2xs: var(--line-height-display-xs);
    --letter-spacing-text-xs: -0.005em;
    --letter-spacing-text-sm: -0.005em;
    --letter-spacing-text-md: -0.005em;
    --letter-spacing-text-lg: -0.005em;
    --letter-spacing-text-xl: -0.005em;
    --letter-spacing-display-xs: -0.02em;
    --letter-spacing-display-sm: -0.02em;
    --letter-spacing-display-md: -0.02em;
    --letter-spacing-display-lg: -0.02em;
    --letter-spacing-display-xl: -0.02em;
    --letter-spacing-display-2xl: -0.03em;
    --letter-spacing-hero: -0.04em;
    --letter-spacing-display-2xs: var(--letter-spacing-display-xs);
    --letter-spacing-display-30: var(--letter-spacing-display-sm);
    --button-sm-letter-spacing: var(--letter-spacing-text-sm);
    --button-md-letter-spacing: var(--letter-spacing-text-sm);
    --button-lg-height: 3rem;
    --button-lg-letter-spacing: var(--letter-spacing-text-md);
    --button-xl-height: 3.5rem;
    --button-xl-padding-x: 1rem;
    --button-xl-letter-spacing: var(--letter-spacing-text-md);
    --color-interactive-default: var(--colors-blue-500);
    --color-interactive-hover: var(--colors-blue-600);
    --color-interactive-active: var(--colors-blue-700);
    --color-interactive-subtle: var(--colors-blue-100);
    --color-interactive-disabled: var(--colors-gray-200);
    --color-text-primary: var(--colors-gray-900);
    --color-text-secondary: var(--colors-gray-800);
    --color-text-tertiary: var(--colors-gray-700);
    --color-text-disabled: var(--colors-gray-500);
    --color-text-link: var(--colors-gray-800);
    --color-border-default: var(--colors-gray-border);
    --color-border-subtle: var(--colors-gray-200);
    --color-border-strong: var(--colors-gray-700);
    --color-border-interactive: var(--color-interactive-default);
    --color-border-disabled: var(--colors-disabled-border);
    --color-bg-secondary: var(--colors-gray-100);
    --color-bg-disabled: var(--colors-gray-100);
    --color-bg-interactive-subtle: var(--colors-blue-50);
    --color-status-error-text: var(--colors-red-700);
    --color-status-error-bg: var(--colors-red-300);
    --color-status-error-border: var(--colors-red-50);
    --color-status-success-text: var(--colors-green-700);
    --color-status-success-bg: var(--colors-green-50);
    --color-status-success-border: var(--colors-green-600);
    --color-status-warning-text: var(--colors-yellow-700);
    --color-status-warning-bg: var(--colors-yellow-50);
    --color-status-warning-border: var(--colors-yellow-600);
    --avatar-bg-default: var(--colors-gray-100);
    --avatar-text-color: var(--colors-gray-700);
    --avatar-bg-dark: var(--colors-gray-800);
    --modal-bg: var(--colors-gray-100);
    --modal-close-button-color: var(--colors-gray-800);
    --modal-icon-container-bg: var(--colors-blue-100);
    --modal-icon-color: var(--colors-blue-500);
    --page-header-title-color: var(--colors-primary-default);
    --page-header-secondary-info-color: var(--colors-gray-800);
    --page-header-divider-color: var(--colors-gray-300);
    --alerts-blue-text: var(--colors-blue-800);
    --alerts-gray-border: var(--colors-gray-400);
    --table-row-selected-surface: var(--colors-blue-25);
    --hero-card-text-eyebrow: var(--colors-gray-50);
    --hero-card-text-title: var(--colors-gray-50);
    --hero-card-text-subtitle: var(--colors-gray-200);
    --hero-card-text-description: var(--colors-gray-200);
    --hero-card-xl-subtitle-font-size: var(--font-size-display-sm);
    --hero-card-xl-subtitle-line-height: var(--line-height-display-sm);
    --hero-card-xl-subtitle-letter-spacing: var(--letter-spacing-display-sm);
    --hero-card-xl-description-letter-spacing: var(--letter-spacing-text-xl, 0);
    --featured-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
    --featured-card-text-title-letter-spacing: var(--letter-spacing-text-xl);
    --featured-card-text-subtitle-letter-spacing: var(--letter-spacing-text-md);
    --content-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
    --content-card-text-title-font-size: var(--font-size-display-2xs);
    --content-card-text-title-line-height: var(--line-height-display-xs);
    --content-card-text-title-letter-spacing: var(--letter-spacing-display-2xs);
    --content-card-text-description-letter-spacing: var(--letter-spacing-text-md);
    --offer-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-sm);
    --offer-card-text-eyebrow-sm-letter-spacing: var(--letter-spacing-text-md);
    --offer-card-text-title-letter-spacing: var(--letter-spacing-text-lg);
    --offer-card-text-title-lg-letter-spacing: var(--letter-spacing-text-xl);
    --offer-card-text-subtitle-letter-spacing: var(--letter-spacing-text-sm);
    --offer-card-text-subtitle-lg-letter-spacing: var(--letter-spacing-text-md);
    --progress-card-icon-bg: var(--colors-gray-100);
    --progress-card-headline-color: var(--colors-gray-900);
    --progress-card-text-color: var(--colors-gray-900);
    --card-block-border-color: var(--colors-gray-300);
    --card-block-surface-grey: var(--colors-gray-50);
    --status-badge-bg: var(--colors-gray-100);
    --status-badge-label-color: var(--colors-gray-700);
    --status-badge-dot-neutral: var(--colors-gray-500);
    --status-badge-halo-neutral: var(--colors-gray-200);
    --status-badge-halo-success: var(--colors-green-100);
    --status-badge-dot-warning: var(--colors-yellow-600);
    --status-badge-halo-warning: var(--colors-yellow-100);
    --status-badge-dot-error: var(--colors-red-600);
    --status-badge-halo-error: var(--colors-red-100);
    --status-badge-dot-info: var(--colors-blue-600);
    --status-badge-halo-info: var(--colors-blue-100);
    --icon-tile-bg-grey: var(--colors-gray-100);
    --icon-tile-fg-grey: var(--colors-gray-800);
    --icon-tile-bg-blue: var(--colors-blue-100);
    --icon-tile-fg-blue: var(--colors-blue-700);
    --icon-tile-bg-green: var(--colors-green-100);
    --icon-tile-bg-red: var(--colors-red-100);
    --icon-tile-fg-red: var(--colors-red-700);
    --icon-tile-fg-white: var(--colors-green-900);
    --icon-tile-fg-transparent: var(--colors-gray-700);
    --item-block-label-color: var(--colors-gray-700);
    --item-block-value-color: var(--colors-gray-900);
    --list-item-text-color: var(--colors-gray-800);
    --list-item-supporting-text-color: var(--colors-gray-500);
    --list-item-icon-color: var(--colors-gray-700);
    --list-item-icon-color-warning: var(--colors-yellow-700);
    --list-item-icon-color-error: var(--colors-red-700);
    --list-item-icon-color-info: var(--colors-blue-700);
    --list-item-icon-color-muted: var(--colors-gray-400);
    --colors-base-white: #ffffff;
    --colors-base-black: #000000;
    --colors-gray-25: #f7f7f7;
    --colors-green-200: #89ff02;
    --button-tertiary-text: var(--colors-green-900);
    --button-tertiary-text-hover: var(--colors-green-800);
    --button-focus-ring: var(--colors-green-800);
  }
}
:host(fragno-avatar),
:host(fragno-button),
:host(fragno-footer),
:host(fragno-global-nav-v2),
:host(fragno-logo-lockup) {
  --colors-primary-default: var(--colors-gray-900);
  --colors-primary-hover: var(--colors-gray-800);
  --colors-primary-disabled: var(--colors-gray-100);
  --colors-primary-text-disabled: var(--colors-gray-500);
  --colors-secondary-border: var(--colors-gray-400);
  --colors-secondary-border-hover: var(--colors-gray-600);
  --colors-secondary-border-focused: var(--colors-gray-600);
  --colors-secondary-text: var(--colors-gray-900);
  --colors-secondary-text-hover: var(--colors-gray-800);
  --colors-secondary-text-disabled: var(--colors-gray-500);
  --colors-tertiary-hover: var(--colors-gray-200);
  --colors-tertiary-text: var(--colors-gray-900);
  --colors-tertiary-text-hover: var(--colors-gray-700);
  --colors-tertiary-text-disabled: var(--colors-gray-500);
  --colors-focus-ring: var(--colors-blue-600);
  --colors-disabled-border: var(--colors-gray-200);
  --colors-disabled-background: var(--colors-gray-100);
  --colors-disabled-foreground: var(--colors-gray-500);
  --colors-gray-50: #f1f0f0;
  --colors-gray-100: #ecece8;
  --colors-gray-200: #e4e7e0;
  --colors-gray-300: #cfd2c7;
  --colors-gray-400: #babcaf;
  --colors-gray-500: #a6a697;
  --colors-gray-600: #7f7f6e;
  --colors-gray-700: #545449;
  --colors-gray-800: #373931;
  --colors-gray-900: #1b1d19;
  --colors-gray-border: var(--colors-gray-400);
  --fragno-segment-pill-grey: var(--colors-gray-100);
  --colors-blue-25: #f4f7fa;
  --colors-blue-50: #d1dff3;
  --colors-blue-100: #a5c5f5;
  --colors-blue-200: #70a9ff;
  --colors-blue-300: #5490f9;
  --colors-blue-400: #3a77f1;
  --colors-blue-500: #225de7;
  --colors-blue-600: #193ed4;
  --colors-blue-700: #1727b9;
  --colors-blue-800: #07347f;
  --colors-blue-900: #00273c;
  --colors-blue-950: #021722;
  --colors-red-25: #faf5f4;
  --colors-red-50: #f1cdc9;
  --colors-red-100: #f29d93;
  --colors-red-200: #fd6452;
  --colors-red-300: #f75845;
  --colors-red-400: #ef4c39;
  --colors-red-500: #e6422f;
  --colors-red-600: #d8321f;
  --colors-red-700: #b92f20;
  --colors-red-800: #9e271b;
  --colors-red-900: #822016;
  --colors-red-950: #4b1610;
  --colors-green-50: #d2ecb3;
  --colors-green-100: #adee63;
  --colors-green-300: #3dd608;
  --colors-green-600: #0e6a2d;
  --colors-green-700: #0b4c23;
  --colors-green-800: #063820;
  --colors-green-900: #032318;
  --colors-green-fg: var(--colors-green-800);
  --colors-green-900-alpha-10: rgba(3, 35, 24, 0.1);
  --colors-yellow-25: #fafaf5;
  --colors-yellow-50: #e9e9bc;
  --colors-yellow-100: #e8e873;
  --colors-yellow-200: #f3f31f;
  --colors-yellow-300: #e7ea1c;
  --colors-yellow-400: #e2db19;
  --colors-yellow-500: #d1c81e;
  --colors-yellow-600: #979318;
  --colors-yellow-700: #676508;
  --colors-yellow-800: #4d4f07;
  --colors-yellow-900: #343805;
  --colors-yellow-950: #1e2005;
  --font-family-body: "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display: "IDMe Matter", "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "IDMe Matter Mono", "Matter VF Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;
  --font-size-display-xs: 1.5rem;
  --font-size-display-sm: 1.875rem;
  --font-size-display-md: 2.25rem;
  --font-size-hero: 9.75rem;
  --font-size-display-2xs: var(--font-size-display-xs);
  --line-height-text-xs: 1.125rem;
  --line-height-display-xs: 2rem;
  --line-height-display-sm: 2.375rem;
  --line-height-display-md: 2.75rem;
  --line-height-display-lg: 3.75rem;
  --line-height-display-2xl: 5rem;
  --line-height-display-2xs: var(--line-height-display-xs);
  --letter-spacing-text-xs: -0.005em;
  --letter-spacing-text-sm: -0.005em;
  --letter-spacing-text-md: -0.005em;
  --letter-spacing-text-lg: -0.005em;
  --letter-spacing-text-xl: -0.005em;
  --letter-spacing-display-xs: -0.02em;
  --letter-spacing-display-sm: -0.02em;
  --letter-spacing-display-md: -0.02em;
  --letter-spacing-display-lg: -0.02em;
  --letter-spacing-display-xl: -0.02em;
  --letter-spacing-display-2xl: -0.03em;
  --letter-spacing-hero: -0.04em;
  --letter-spacing-display-2xs: var(--letter-spacing-display-xs);
  --letter-spacing-display-30: var(--letter-spacing-display-sm);
  --button-sm-letter-spacing: var(--letter-spacing-text-sm);
  --button-md-letter-spacing: var(--letter-spacing-text-sm);
  --button-lg-height: 3rem;
  --button-lg-letter-spacing: var(--letter-spacing-text-md);
  --button-xl-height: 3.5rem;
  --button-xl-padding-x: 1rem;
  --button-xl-letter-spacing: var(--letter-spacing-text-md);
  --color-interactive-default: var(--colors-blue-500);
  --color-interactive-hover: var(--colors-blue-600);
  --color-interactive-active: var(--colors-blue-700);
  --color-interactive-subtle: var(--colors-blue-100);
  --color-interactive-disabled: var(--colors-gray-200);
  --color-text-primary: var(--colors-gray-900);
  --color-text-secondary: var(--colors-gray-800);
  --color-text-tertiary: var(--colors-gray-700);
  --color-text-disabled: var(--colors-gray-500);
  --color-text-link: var(--colors-gray-800);
  --color-border-default: var(--colors-gray-border);
  --color-border-subtle: var(--colors-gray-200);
  --color-border-strong: var(--colors-gray-700);
  --color-border-interactive: var(--color-interactive-default);
  --color-border-disabled: var(--colors-disabled-border);
  --color-bg-secondary: var(--colors-gray-100);
  --color-bg-disabled: var(--colors-gray-100);
  --color-bg-interactive-subtle: var(--colors-blue-50);
  --color-status-error-text: var(--colors-red-700);
  --color-status-error-bg: var(--colors-red-300);
  --color-status-error-border: var(--colors-red-50);
  --color-status-success-text: var(--colors-green-700);
  --color-status-success-bg: var(--colors-green-50);
  --color-status-success-border: var(--colors-green-600);
  --color-status-warning-text: var(--colors-yellow-700);
  --color-status-warning-bg: var(--colors-yellow-50);
  --color-status-warning-border: var(--colors-yellow-600);
  --avatar-bg-default: var(--colors-gray-100);
  --avatar-text-color: var(--colors-gray-700);
  --avatar-bg-dark: var(--colors-gray-800);
  --modal-bg: var(--colors-gray-100);
  --modal-close-button-color: var(--colors-gray-800);
  --modal-icon-container-bg: var(--colors-blue-100);
  --modal-icon-color: var(--colors-blue-500);
  --page-header-title-color: var(--colors-primary-default);
  --page-header-secondary-info-color: var(--colors-gray-800);
  --page-header-divider-color: var(--colors-gray-300);
  --alerts-blue-text: var(--colors-blue-800);
  --alerts-gray-border: var(--colors-gray-400);
  --table-row-selected-surface: var(--colors-blue-25);
  --hero-card-text-eyebrow: var(--colors-gray-50);
  --hero-card-text-title: var(--colors-gray-50);
  --hero-card-text-subtitle: var(--colors-gray-200);
  --hero-card-text-description: var(--colors-gray-200);
  --hero-card-xl-subtitle-font-size: var(--font-size-display-sm);
  --hero-card-xl-subtitle-line-height: var(--line-height-display-sm);
  --hero-card-xl-subtitle-letter-spacing: var(--letter-spacing-display-sm);
  --hero-card-xl-description-letter-spacing: var(--letter-spacing-text-xl, 0);
  --featured-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --featured-card-text-title-letter-spacing: var(--letter-spacing-text-xl);
  --featured-card-text-subtitle-letter-spacing: var(--letter-spacing-text-md);
  --content-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-md);
  --content-card-text-title-font-size: var(--font-size-display-2xs);
  --content-card-text-title-line-height: var(--line-height-display-xs);
  --content-card-text-title-letter-spacing: var(--letter-spacing-display-2xs);
  --content-card-text-description-letter-spacing: var(--letter-spacing-text-md);
  --offer-card-text-eyebrow-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-eyebrow-sm-letter-spacing: var(--letter-spacing-text-md);
  --offer-card-text-title-letter-spacing: var(--letter-spacing-text-lg);
  --offer-card-text-title-lg-letter-spacing: var(--letter-spacing-text-xl);
  --offer-card-text-subtitle-letter-spacing: var(--letter-spacing-text-sm);
  --offer-card-text-subtitle-lg-letter-spacing: var(--letter-spacing-text-md);
  --progress-card-icon-bg: var(--colors-gray-100);
  --progress-card-headline-color: var(--colors-gray-900);
  --progress-card-text-color: var(--colors-gray-900);
  --card-block-border-color: var(--colors-gray-300);
  --card-block-surface-grey: var(--colors-gray-50);
  --status-badge-bg: var(--colors-gray-100);
  --status-badge-label-color: var(--colors-gray-700);
  --status-badge-dot-neutral: var(--colors-gray-500);
  --status-badge-halo-neutral: var(--colors-gray-200);
  --status-badge-halo-success: var(--colors-green-100);
  --status-badge-dot-warning: var(--colors-yellow-600);
  --status-badge-halo-warning: var(--colors-yellow-100);
  --status-badge-dot-error: var(--colors-red-600);
  --status-badge-halo-error: var(--colors-red-100);
  --status-badge-dot-info: var(--colors-blue-600);
  --status-badge-halo-info: var(--colors-blue-100);
  --icon-tile-bg-grey: var(--colors-gray-100);
  --icon-tile-fg-grey: var(--colors-gray-800);
  --icon-tile-bg-blue: var(--colors-blue-100);
  --icon-tile-fg-blue: var(--colors-blue-700);
  --icon-tile-bg-green: var(--colors-green-100);
  --icon-tile-bg-red: var(--colors-red-100);
  --icon-tile-fg-red: var(--colors-red-700);
  --icon-tile-fg-white: var(--colors-green-900);
  --icon-tile-fg-transparent: var(--colors-gray-700);
  --item-block-label-color: var(--colors-gray-700);
  --item-block-value-color: var(--colors-gray-900);
  --list-item-text-color: var(--colors-gray-800);
  --list-item-supporting-text-color: var(--colors-gray-500);
  --list-item-icon-color: var(--colors-gray-700);
  --list-item-icon-color-warning: var(--colors-yellow-700);
  --list-item-icon-color-error: var(--colors-red-700);
  --list-item-icon-color-info: var(--colors-blue-700);
  --list-item-icon-color-muted: var(--colors-gray-400);
  --colors-base-white: #ffffff;
  --colors-base-black: #000000;
  --colors-gray-25: #f7f7f7;
  --colors-green-200: #89ff02;
  --button-tertiary-text: var(--colors-green-900);
  --button-tertiary-text-hover: var(--colors-green-800);
  --button-focus-ring: var(--colors-green-800);
}