/**
 * @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
 */

:root {
  /* ============================================
      COLORS - Primary
      ============================================ */
  --colors-primary-default: #141414;
  --colors-primary-hover: #424242;
  --colors-primary-disabled: #f5f5f5;
  --colors-primary-text: #ffffff;
  --colors-primary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Secondary
      ============================================ */
  --colors-secondary-default: #ffffff;
  --colors-secondary-hover: #f7f7f7;
  --colors-secondary-border: #424242;
  --colors-secondary-border-hover: #737373;
  --colors-secondary-border-focused: #737373;
  --colors-secondary-text: #141414;
  --colors-secondary-text-hover: #292929;
  --colors-secondary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Tertiary
      ============================================ */
  --colors-tertiary-default: #ffffff;
  --colors-tertiary-hover: #e5e5e5;
  --colors-tertiary-text: #141414;
  --colors-tertiary-text-hover: #424242;
  --colors-tertiary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Focus & Effects
      ============================================ */
  --colors-focus-ring: #155eef;
  --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: #e5e5e5;
  --colors-disabled-background: #f5f5f5;
  --colors-disabled-foreground: #a3a3a3;

  /* ============================================
      COLORS - Gray Scale
      ============================================ */
  --colors-gray-50: #f7f7f7;
  --colors-gray-900: #141414;
  --colors-gray-800: #292929;
  --colors-gray-700: #424242;
  --colors-gray-600: #737373;
  --colors-gray-500: #737373;
  --colors-gray-400: #a3a3a3;
  --colors-gray-border: #94979c;
  --colors-gray-300: #d6d6d6;
  --colors-gray-200: #e5e5e5;
  --colors-gray-100: #f5f5f5;

  /* ============================================
      COLORS - Component / Alpha (Nova)
      ============================================ */
  /* Alpha white — overlays, borders, text on dark (e.g. avatar, modals) */
  --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);
  /* Alpha black — shadows, backdrops */
  --colors-alpha-black-06: rgba(0, 0, 0, 0.06);

  /* ============================================
      COLORS - Blue (Interactive)
      ============================================ */
  --colors-blue-50: #eff4ff;
  --colors-blue-100: #d1e0ff;
  --colors-blue-300: #84adff;
  --colors-blue-500: #2970ff;
  --colors-blue-600: #1d5fef;
  --colors-blue-700: #004eeb;
  --colors-blue-800: #0040c1;

  /* ============================================
      COLORS - Red (Error/Danger)
      ============================================ */
  --colors-red-50: #fef3f2;
  --colors-red-300: #fda29b;
  --colors-red-600: #e53e3e;
  --colors-red-700: #b42318;

  /* ============================================
      COLORS - Green (Success)
      ============================================ */
  --colors-green-50: #edfcf2;
  --colors-green-300: #73e2a3;
  --colors-green-600: #32a467;
  --colors-green-700: #2d8a5c;
  --colors-green-800: #095c37;
  /* Nova | Web — Global Nav link hover (Figma node 66718:26920) */
  --colors-green-900: #084c2e;
  --colors-green-900-alpha-10: rgba(8, 76, 46, 0.1);

  /* ============================================
      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;
  --colors-green-gradient-text-disabled: var(--colors-alpha-white-70);
  --colors-green-gradient-border-disabled: var(--colors-alpha-white-25);

  /* ============================================
      COLORS - Yellow/Amber (Warning)
      ============================================ */
  --colors-yellow-50: #fffbeb;
  --colors-yellow-300: #fcd34d;
  --colors-yellow-600: #d97706;
  --colors-yellow-700: #b45309;

  /* ============================================
      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 */

  /* ============================================
      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:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Monaco", "Courier New", monospace;

  /* ============================================
      TYPOGRAPHY - Font Sizes
      ============================================ */
  --font-size-text-xs: 0.75rem;
  --font-size-text-sm: 0.875rem;
  --font-size-text-md: 1rem;
  --font-size-text-lg: 1.125rem;
  --font-size-text-xl: 1.25rem;

  /* ============================================
      TYPOGRAPHY - Display Font Sizes
      ============================================ */
  --font-size-display-2xs: 1.75rem;
  --font-size-display-xs: 2rem;
  --font-size-display-sm: 2.25rem;
  --font-size-display-md: 2.5rem;
  --font-size-display-lg: 3rem;
  --font-size-display-xl: 3.75rem; /* 60px - Nova display xl */
  --font-size-display-30: 1.875rem; /* 30px - Figma display sm (e.g. page header XS) */

  /* ============================================
      TYPOGRAPHY - Line Heights
      ============================================ */
  --line-height-text-xs: 1rem;
  --line-height-text-sm: 1.25rem;
  --line-height-text-md: 1.5rem;
  --line-height-text-lg: 1.75rem;
  --line-height-text-xl: 1.875rem; /* 30px - Nova text xl */

  /* ============================================
      TYPOGRAPHY - Display Line Heights
      ============================================ */
  --line-height-display-2xs: 2.125rem;
  --line-height-display-xs: 2.375rem;
  --line-height-display-sm: 2.75rem;
  --line-height-display-md: 3rem;
  --line-height-display-lg: 3.5rem;
  --line-height-display-xl: 4.5rem; /* 72px - Nova display xl */
  --line-height-display-30: 2.375rem; /* 38px - Figma 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
      ============================================ */
  --letter-spacing-text-xs: -0.03125rem; /* -0.5px - Nova */
  --letter-spacing-text-sm: -0.004375rem;
  --letter-spacing-text-md: -0.005rem;
  --letter-spacing-text-lg: -0.005rem;
  --letter-spacing-text-xl: 0;

  /* ============================================
      TYPOGRAPHY - Display Letter Spacing
      ============================================ */
  --letter-spacing-display-2xs: -0.03125rem; /* -0.5px - content block title and display 2xs */
  --letter-spacing-display-xs: -0.025rem; /* -0.4px */
  --letter-spacing-display-sm: -0.028125rem; /* -0.45px */
  --letter-spacing-display-md: -0.03125rem; /* -0.5px */
  --letter-spacing-display-lg: -0.0625rem; /* -1px - Nova display lg */
  --letter-spacing-display-xl: -0.075rem; /* -1.2px - Nova display xl */
  --letter-spacing-display-30: -0.0375rem; /* -0.6px - Figma display sm */

  /* ============================================
      BUTTON SIZES - Small (sm)
      ============================================ */
  --button-sm-height: 2.25rem;
  --button-sm-padding-x: 0.75rem;
  --button-sm-padding-y: 0.5rem;
  --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-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)
      ============================================ */
  --button-lg-height: 2.75rem;
  --button-lg-padding-x: 1rem;
  --button-lg-padding-y: 0.625rem;
  --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.25rem;
  --button-xl-padding-x: 1.125rem;
  --button-xl-padding-y: 0.75rem;
  --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: #ffffff;
  --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;

  /* ============================================
      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-row-gap: var(--spacing-xl);
  --page-header-actions-gap: var(--spacing-md);
  --page-header-title-color: var(--colors-primary-default);
  --page-header-title-font-weight: var(--font-weight-medium);
  --page-header-divider-color: var(--colors-gray-300);
  --page-header-divider-height: 1px;

  /* ============================================
      CARD (shared elevation / hover - Nova | Web)
      Used by featured card and other card components.
      ============================================ */
  --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);

  /* ============================================
      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;
  /* 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);
  /* XL subtitle: Display 2xs / display-xs 24px + lh 32px (Nova Web Hero) */
  --hero-card-xl-subtitle-font-size: 1.5rem;
  --hero-card-xl-subtitle-line-height: 2rem;
  --hero-card-xl-subtitle-letter-spacing: -0.03rem;

  /* ============================================
      FEATURED CARD (Nova | Web)
      ============================================ */
  --featured-card-width: 24rem;
  --featured-card-height: 24.125rem;
  --featured-card-min-width: 20rem;
  --featured-card-min-height: 20rem;
  --featured-card-radius: var(--radius-5xl);
  --featured-card-border-width: 1.6px;
  --featured-card-media-min-height: 8.75rem;
  --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);

  /* ============================================
      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);
  /* 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.5rem;
  --offer-card-md-min-height: 13.125rem;
  --offer-card-md-max-height: 20rem;
  /* LG */
  --offer-card-lg-width: 24rem;
  --offer-card-lg-min-width: 18.375rem;
  --offer-card-lg-height: 15.75rem;
  --offer-card-lg-min-height: 15.75rem;

  /* ============================================
      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;
  --community-card-min-height: 13.125rem;

  /* ============================================
      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 icon+text block ↔ chevron */
  --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 custom elements: block layout so they behave as grid/flex items */
fragno-card,
fragno-offer-card,
fragno-hero-card,
fragno-featured-card,
fragno-community-card {
  display: flex;
}

/* Single child (card shell or card-href link): stretch to grid/flex parent width */
fragno-offer-card,
fragno-hero-card {
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.fragno-slider-container {
  position: relative;
  width: 100%;
  min-width: 18.75rem;
}
@media screen and (min-width: 600px) {
  .fragno-slider-container {
    width: 100%;
  }
}
.fragno-slider {
  width: 90%;
  color: lightgray;
  height: 2px;
  background: lightgray;
}

.fragno-slider::-webkit-slider-thumb {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  transform: scale(0.8);
  transition-duration: 0.5s;
}

.fragno-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.fragno-slider-field {
  width: 1.875rem;
  height: 1.875rem;
  padding-left: 0.3125rem;
  border: 1px solid lightgray;
}

.fragno-slider-value-bubble {
  width: 1.875rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  background: #0175ff;
  color: #fff;
  font-size: 0.75rem;
  display: block;
  position: absolute;
  transform: translate(-50%, 0);
  border-radius: 36px;
  bottom: 1.875rem;
}
.fragno-slider-value-bubble:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 14px solid #0175ff;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -0.75rem;
  margin-top: -0.375rem;
}
.fragno-hidden {
  display: none;
}

/* ============================================
   BUTTON COMPONENT STYLES
   ============================================ */

/* Styles apply to button element inside shadow DOM */
.fragno-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.fragno-button:focus-visible {
  outline: none;
}

/* ============================================
   BUTTON SIZE VARIANTS
   ============================================ */

.fragno-button--sm {
  height: var(--button-sm-height);
  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
  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);
  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);
  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);
  font-size: var(--button-xl-font-size);
  line-height: var(--button-xl-line-height);
  letter-spacing: var(--button-xl-letter-spacing);
}

/* ============================================
   BUTTON ICON-ONLY VARIANTS
   ============================================ */

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

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

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

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

/* ============================================
   BUTTON HIERARCHY VARIANTS - PRIMARY
   ============================================ */

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

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

.fragno-button--primary: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--primary:disabled {
  background-color: var(--colors-primary-disabled);
  color: var(--colors-primary-text-disabled);
  cursor: not-allowed;
  border: 1px solid var(--colors-disabled-border);
}

/* ============================================
   BUTTON HIERARCHY VARIANTS - SECONDARY
   ============================================ */

.fragno-button--secondary {
  background-color: var(--colors-secondary-default);
  color: var(--colors-secondary-text);
  border: 1px solid var(--colors-secondary-border);
}

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

.fragno-button--secondary:focus-visible {
  border-color: var(--colors-secondary-border-focused);
  box-shadow:
    inset 0px 0px 0px 1px var(--colors-shadow-skeumorphic-inner-border),
    inset 0 -2px 0 0 var(--colors-shadow-skeumorphic-inner);
}

.fragno-button--secondary:disabled {
  background-color: var(--colors-secondary-default);
  color: var(--colors-secondary-text-disabled);
  border-color: var(--colors-disabled-border);
  cursor: not-allowed;
}

/* ============================================
   BUTTON HIERARCHY VARIANTS - TERTIARY
   ============================================ */

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

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

.fragno-button--tertiary:focus-visible {
  background-color: var(--colors-secondary-default);
  border: 1px solid var(--colors-secondary-border-focused);
  text-decoration: none;
}

.fragno-button--tertiary:disabled {
  color: var(--colors-tertiary-text-disabled);
  cursor: not-allowed;
}

/* ============================================
   BUTTON HIERARCHY VARIANTS - GREEN-GRADIENT
   ============================================ */
/* From Figma (Nova | Web): radial gradients + plus-lighter blend, 0.8px border */

.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-primary-text);
}

.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);
  cursor: not-allowed;
}

/* ============================================
   BUTTON LOADING STATE
   ============================================ */

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

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

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

.fragno-button--loading.fragno-button--tertiary {
  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;
}

/* ============================================
   BUTTON ICON STYLES
   ============================================ */

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

.fragno-button__icon--leading {
  margin-right: var(--spacing-xs);
}

.fragno-button__icon--trailing {
  margin-left: var(--spacing-xs);
}

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

/* ============================================
   BUTTON LOADING SPINNER
   ============================================ */

.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 {
  border-color: rgba(66, 66, 66, 0.12);
  border-top-color: currentColor;
}

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

/* ============================================
   BUTTON TEXT
   ============================================ */

.fragno-button__text {
  display: inline-block;
}

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

/* ============================================
   INPUT COMPONENT
   ============================================ */

.fragno-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
}

.fragno-input__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs, 2px);
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 500;
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.00.5rem;
  color: #292929;
}

.fragno-input__label-text {
  display: inline-block;
}

.fragno-input__required {
  display: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
}

.fragno-input__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  min-height: 60px;
  max-height: 60px;
  padding: var(--spacing-xl, 1rem) var(--spacing-2xl, 1.25rem);
  background-color: #ffffff;
  border: 1px solid #737373;
  border-radius: var(--radius-3xl, 20px);
  box-shadow: 0 0.25rem 1.125rem 0.5rem rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.fragno-input__container--placeholder {
  border-color: #737373;
}

.fragno-input__container--filled {
  border-color: #737373;
}

.fragno-input__container--focused {
  border: 2px solid #2970ff;
  box-shadow:
    0 1px 2px 0 rgba(23, 44, 67, 0.15),
    0 0 0 2px #ffffff,
    0 0 0 0.25rem #155eef;
}

.fragno-input__container--active {
  border: 1.4px solid #2970ff;
  box-shadow: 0 0.25rem 0.75rem 0.375rem rgba(41, 112, 255, 0.05);
}

.fragno-input__container--error {
  border: 1.4px solid #d92d20;
}

.fragno-input__container--disabled {
  background-color: #e5e5e5;
  border-color: #94979c;
  cursor: not-allowed;
}

/* ============================================
   CHECKBOX COMPONENT STYLES (Nova | Design System)
   ============================================ */

.fragno-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-md, 0.5rem);
  cursor: pointer;
  font-family: var(--font-family-body);
  user-select: none;
}

.fragno-checkbox--md {
  gap: var(--spacing-lg, 0.75rem);
}

.fragno-checkbox--disabled {
  cursor: not-allowed;
}

.fragno-checkbox__wrapper {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 2px;
}

.fragno-checkbox--md .fragno-checkbox__wrapper {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-checkbox__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;
}

.fragno-checkbox--md .fragno-checkbox__input {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-checkbox__box {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;
  border: 1px solid var(--colors-gray-600, #525252);
  background-color: var(--color-bg-primary, #ffffff);
  color: var(--color-text-on-interactive, #ffffff);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.fragno-checkbox--md .fragno-checkbox__box {
  width: 1.25rem;
  height: 1.25rem;
}

/* Square variant = rounded corners (checkbox style); rounded variant = full circle (radio style) */
.fragno-checkbox--square .fragno-checkbox__box {
  border-radius: var(--radius-sm, 0.25rem);
}

.fragno-checkbox--md.fragno-checkbox--square .fragno-checkbox__box {
  border-radius: var(--radius-md, 0.375rem);
}

.fragno-checkbox--rounded .fragno-checkbox__box {
  border-radius: var(--radius-full, 9999px);
}

.fragno-checkbox__box--checked,
.fragno-checkbox__box--indeterminate {
  border-color: var(--colors-gray-900, #141414);
  background-color: var(--colors-gray-900, #141414);
}

.fragno-checkbox__box--unchecked:hover:not(.fragno-checkbox--disabled .fragno-checkbox__box) {
  border-color: var(--colors-gray-700, #424242);
}

/* Focus: dark outline on wrapper (persists on click until blur) */
.fragno-checkbox__wrapper:has(.fragno-checkbox__input:focus) {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
}

.fragno-checkbox--square .fragno-checkbox__wrapper:has(.fragno-checkbox__input:focus) {
  border-radius: var(--radius-sm, 0.25rem);
}

.fragno-checkbox--md.fragno-checkbox--square .fragno-checkbox__wrapper:has(.fragno-checkbox__input:focus) {
  border-radius: var(--radius-md, 0.375rem);
}

.fragno-checkbox--rounded .fragno-checkbox__wrapper:has(.fragno-checkbox__input:focus) {
  border-radius: var(--radius-full, 9999px);
}

.fragno-checkbox--disabled .fragno-checkbox__box {
  border-color: var(--colors-disabled-border, #e5e5e5);
  background-color: var(--colors-disabled-background, #f5f5f5);
}

.fragno-checkbox--disabled .fragno-checkbox__box--checked,
.fragno-checkbox--disabled .fragno-checkbox__box--indeterminate {
  border-color: var(--colors-disabled-border, #e5e5e5);
  background-color: var(--colors-disabled-background, #f5f5f5);
  color: var(--colors-disabled-foreground, #a3a3a3);
}

.fragno-checkbox__icon {
  display: none;
  width: 62.5%;
  height: 62.5%;
  color: currentColor;
}

.fragno-checkbox__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fragno-checkbox__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs, 0.125rem);
  min-width: 0;
}

.fragno-checkbox__label {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: var(--letter-spacing-text-sm, -0.5px);
  color: var(--color-text-primary, var(--colors-gray-900, #141414));
}

.fragno-checkbox--disabled .fragno-checkbox__label {
  color: var(--colors-disabled-foreground, #a3a3a3);
}

.fragno-checkbox__subtext {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: var(--letter-spacing-text-sm, -0.5px);
  color: var(--color-text-tertiary, var(--colors-gray-600, #525252));
}

.fragno-checkbox--disabled .fragno-checkbox__subtext {
  color: var(--colors-disabled-foreground, #a3a3a3);
}

/* ============================================
   TOGGLE (SWITCH) — Nova Figma 57186:13250, label 57186:13315
   Tokens: --colors-gray-*, --colors-blue-*, --spacing-*, --radius-full,
   focus matches checkbox (2px gray-900 outline + 2px offset)
   ============================================ */

.fragno-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  cursor: pointer;
  font-family: var(--font-family-body);
  user-select: none;
  box-sizing: border-box;
}

.fragno-toggle--has-text {
  align-items: flex-start;
  gap: var(--spacing-lg, 0.75rem);
}

.fragno-toggle--sm.fragno-toggle--has-text {
  gap: var(--spacing-md, 0.5rem);
}

.fragno-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fragno-toggle__switch {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.25rem;
  margin-top: 0;
}

.fragno-toggle--md .fragno-toggle__switch {
  width: 3.375rem;
  height: 1.5rem;
}

/* First line of md label aligns with switch vertical center */
.fragno-toggle--md.fragno-toggle--has-text .fragno-toggle__switch {
  margin-top: 2px;
}

.fragno-toggle__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;
}

.fragno-toggle__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--spacing-xxs, 2px);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--colors-gray-600, #737373);
  transition: background-color var(--transition-fast, 0.15s ease);
}

.fragno-toggle__thumb {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1rem;
  border-radius: var(--radius-full, 9999px);
  background-color: #ffffff;
  box-shadow:
    0 1px 3px 0 rgba(10, 13, 18, 0.1),
    0 1px 2px -1px rgba(10, 13, 18, 0.1);
  transition: transform 0.2s ease, background-color var(--transition-fast, 0.15s ease);
  transform: translateX(0);
}

.fragno-toggle--md .fragno-toggle__thumb {
  width: 1.875rem;
  height: 1.25rem;
}

/* Unchecked + hover (not disabled): track gray-700 — Figma */
.fragno-toggle--unchecked:not(.fragno-toggle--disabled)
  .fragno-toggle__switch:hover
  .fragno-toggle__track {
  background-color: var(--colors-gray-700, #424242);
}

/* Grey variant — selected: charcoal track */
.fragno-toggle--grey.fragno-toggle--checked .fragno-toggle__track {
  background-color: var(--colors-gray-800, #292929);
}

.fragno-toggle--grey.fragno-toggle--checked:not(.fragno-toggle--disabled)
  .fragno-toggle__switch:hover
  .fragno-toggle__track {
  background-color: var(--colors-gray-900, #141414);
}

/* Blue variant — selected: blue track (Figma blue-600 / hover blue-800) */
.fragno-toggle--blue.fragno-toggle--checked .fragno-toggle__track {
  background-color: var(--colors-blue-600, #1d5fef);
}

.fragno-toggle--blue.fragno-toggle--checked:not(.fragno-toggle--disabled)
  .fragno-toggle__switch:hover
  .fragno-toggle__track {
  background-color: var(--colors-blue-800, #0040c1);
}

/* Thumb slide: sm inner travel 14px, md 20px */
.fragno-toggle--checked.fragno-toggle--sm .fragno-toggle__thumb {
  transform: translateX(0.875rem);
}

.fragno-toggle--checked.fragno-toggle--md .fragno-toggle__thumb {
  transform: translateX(1.25rem);
}

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

/* Focus — same pattern as fragno-checkbox */
.fragno-toggle__switch:has(.fragno-toggle__input:focus) {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
  border-radius: var(--radius-full, 9999px);
}

/* Disabled — Figma: track gray-600, thumb #fafafa */
.fragno-toggle--disabled .fragno-toggle__track {
  background-color: var(--colors-gray-600, #737373);
}

.fragno-toggle--disabled .fragno-toggle__thumb {
  background-color: #fafafa;
}

.fragno-toggle__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs, 2px);
  min-width: 0;
  flex: 1 1 auto;
}

/* md + text: Figma text-md / line-md */
.fragno-toggle--md .fragno-toggle__label {
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: var(--letter-spacing-text-md, -0.5px);
  color: var(--color-text-secondary, var(--colors-gray-800, #292929));
}

.fragno-toggle--md .fragno-toggle__subtext {
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: var(--letter-spacing-text-md, -0.5px);
  color: var(--colors-gray-700, #424242);
}

/* sm + text */
.fragno-toggle--sm .fragno-toggle__label {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: var(--letter-spacing-text-sm, -0.5px);
  color: var(--color-text-primary, var(--colors-gray-900, #141414));
}

.fragno-toggle--sm .fragno-toggle__subtext {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: var(--letter-spacing-text-sm, -0.5px);
  color: var(--color-text-tertiary, var(--colors-gray-600, #737373));
}

.fragno-toggle--disabled .fragno-toggle__label,
.fragno-toggle--disabled .fragno-toggle__subtext {
  color: var(--colors-disabled-foreground, #a3a3a3);
}

.fragno-input {
  flex: 1 0 0;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.005625rem;
  color: #141414;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.fragno-input::placeholder {
  color: transparent;
}

.fragno-input:disabled {
  color: #424242;
  cursor: not-allowed;
}

.fragno-input__icon-leading {
  display: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #a4a7ae;
}

.fragno-input__icon-leading svg {
  width: 100%;
  height: 100%;
}

.fragno-input__toggle-password {
  display: none;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00.4375rem;
  color: #141414;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  cursor: pointer;
}

.fragno-input__toggle-password:hover {
  opacity: 0.8;
}

.fragno-input__icon-help {
  display: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #a4a7ae;
  cursor: pointer;
}

.fragno-input__icon-help svg {
  width: 100%;
  height: 100%;
}

.fragno-input__error {
  display: none;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
  padding: 0 var(--spacing-2xl, 1.25rem);
  color: #d92d20;
}

.fragno-input__error-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1;
}

.fragno-input__error-text {
  flex: 1 0 0;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 400;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.00.4375rem;
  white-space: pre-wrap;
}

/* ============================================
   BADGE COMPONENT
   ============================================ */

.fragno-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  box-sizing: border-box;
}

/* Sizes */
.fragno-badge--size-sm {
  padding: var(--spacing-xxs, 2px) var(--spacing-md, 0.5rem);
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--line-height-text-xs, 1.125rem);
  letter-spacing: -0.00.375rem;
  gap: var(--spacing-xs, 0.25rem);
}

.fragno-badge--size-sm.fragno-badge--icon-dot {
  padding-left: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-sm.fragno-badge--icon-x-close {
  padding-right: 3px;
}

.fragno-badge--size-sm.fragno-badge--icon-avatar {
  padding-left: 3px;
}

.fragno-badge--size-sm.fragno-badge--icon-only {
  padding: 0.3125rem;
  gap: 0;
}

.fragno-badge--size-md {
  padding: var(--spacing-xxs, 2px) 0.625rem;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.00.4375rem;
  gap: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-md.fragno-badge--icon-dot {
  padding-left: var(--spacing-md, 0.5rem);
}

.fragno-badge--size-md.fragno-badge--icon-x-close {
  padding-left: 0.625rem;
  padding-right: var(--spacing-xs, 0.25rem);
}

.fragno-badge--size-md.fragno-badge--icon-avatar {
  padding-left: var(--spacing-xs, 0.25rem);
}

.fragno-badge--size-md.fragno-badge--icon-only {
  padding: var(--spacing-sm, 0.375rem);
  gap: 0;
}

.fragno-badge--size-lg {
  padding: var(--spacing-xs, 0.25rem) var(--spacing-lg, 0.75rem);
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.00.4375rem;
  gap: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-lg.fragno-badge--icon-dot {
  padding-left: 0.625rem;
}

.fragno-badge--size-lg.fragno-badge--icon-x-close {
  padding-left: var(--spacing-lg, 0.75rem);
  padding-right: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-lg.fragno-badge--icon-avatar {
  padding-left: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-lg.fragno-badge--icon-only {
  padding: var(--spacing-md, 0.5rem);
  gap: 0;
}

/* Colors - White */
.fragno-badge--color-white {
  background-color: #ffffff;
  color: #424242;
}

.fragno-badge--color-white.fragno-badge--border {
  border: 1px solid #737373;
}

/* Colors - Gray */
.fragno-badge--color-gray {
  background-color: #f5f5f5;
  color: #424242;
}

.fragno-badge--color-gray.fragno-badge--border {
  border: 1px solid #a3a3a3;
}

/* Colors - Blue */
.fragno-badge--color-blue {
  background-color: #d1e0ff;
  color: #0040c1;
}

.fragno-badge--color-blue.fragno-badge--border {
  border: 1px solid #84adff;
}

/* Colors - Success (Green) */
.fragno-badge--color-success {
  background-color: #d3f8df;
  color: #095c37;
}

.fragno-badge--color-success.fragno-badge--border {
  border: 1px solid #73e2a3;
}

/* Colors - Error (Red) */
.fragno-badge--color-error {
  background-color: #fee4e2;
  color: #912018;
}

.fragno-badge--color-error.fragno-badge--border {
  border: 1px solid #fda29b;
}

/* Shadow */
.fragno-badge--shadow {
  box-shadow: 0 0.25rem 1.125rem 0.5rem rgba(0, 0, 0, 0.06);
}

/* Text */
.fragno-badge__text {
  display: inline;
  text-align: center;
}

/* Leading Icon */
.fragno-badge__icon-leading {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fragno-badge__icon-leading--dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.fragno-badge--color-white .fragno-badge__icon-leading--dot,
.fragno-badge--color-gray .fragno-badge__icon-leading--dot {
  background-color: #424242;
}

.fragno-badge--color-blue .fragno-badge__icon-leading--dot {
  background-color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__icon-leading--dot {
  background-color: #095c37;
}

.fragno-badge--color-error .fragno-badge__icon-leading--dot {
  background-color: #912018;
}

.fragno-badge__icon-leading--avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.333px solid rgba(255, 255, 255, 0.8);
  background-color: #424242;
  overflow: hidden;
}

.fragno-badge--color-blue .fragno-badge__icon-leading--avatar {
  background-color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__icon-leading--avatar {
  background-color: #095c37;
}

.fragno-badge--color-error .fragno-badge__icon-leading--avatar {
  background-color: #912018;
}

/* Close Button */
.fragno-badge__close {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxs, 2px);
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.fragno-badge__close:hover {
  opacity: 0.8;
}

.fragno-badge__close-icon {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 400;
}

.fragno-badge--color-white .fragno-badge__close-icon,
.fragno-badge--color-gray .fragno-badge__close-icon {
  color: #424242;
}

.fragno-badge--color-blue .fragno-badge__close-icon {
  color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__close-icon {
  color: #095c37;
}

.fragno-badge--color-error .fragno-badge__close-icon {
  color: #912018;
}

/* Icon Only */
.fragno-badge__icon-only {
  display: none;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.fragno-badge__icon-only-symbol {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 400;
}

.fragno-badge--color-white .fragno-badge__icon-only-symbol,
.fragno-badge--color-gray .fragno-badge__icon-only-symbol {
  color: #424242;
}

.fragno-badge--color-blue .fragno-badge__icon-only-symbol {
  color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__icon-only-symbol {
  color: #095c37;
}

.fragno-badge--color-error .fragno-badge__icon-only-symbol {
  color: #912018;
}

/* ============================================
   ALERTS COMPONENT
   ============================================ */

.fragno-alerts {
  box-sizing: border-box;
  width: 100%;
}

.fragno-alerts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl, 1.5rem);
  border-radius: var(--radius-4xl, 1.5rem);
  width: 100%;
}

.fragno-alerts--filled .fragno-alerts__inner {
  padding: var(--spacing-lg, 0.75rem) var(--spacing-xl, 1rem);
  border-style: solid;
  border-width: 1.33px;
}

.fragno-alerts:not(.fragno-alerts--filled) .fragno-alerts__inner {
  padding: var(--spacing-xs, 0.25rem) 0;
  background: transparent;
  border: none;
}

.fragno-alerts__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xs, 0.25rem);
  width: 100%;
}

.fragno-alerts__icon-wrap {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2rem;
  height: 2rem;
}

.fragno-alerts--size-md .fragno-alerts__icon-wrap {
  width: 2rem;
  height: 2rem;
}

.fragno-alerts--size-sm .fragno-alerts__icon-wrap {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-alerts__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-2xl, 1rem);
  overflow: visible;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fragno-alerts--size-md .fragno-alerts__icon {
  width: 2rem;
  height: 2rem;
}

.fragno-alerts--size-sm .fragno-alerts__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-alerts__icon ::slotted(*) {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.fragno-alerts__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: contain;
}

.fragno-alerts--size-md .fragno-alerts__icon ::slotted(svg),
.fragno-alerts--size-md .fragno-alerts__icon > svg {
  width: 2rem;
  height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
}

.fragno-alerts--size-sm .fragno-alerts__icon ::slotted(svg),
.fragno-alerts--size-sm .fragno-alerts__icon > svg {
  width: 1.5rem;
  height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
}

.fragno-alerts__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.375rem);
  padding-left: 0.375rem;
}

.fragno-alerts__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.375rem);
}

.fragno-alerts__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: var(--letter-spacing-text-lg, -0.005rem);
  color: inherit;
}

.fragno-alerts--size-md .fragno-alerts__title {
  font-size: var(--font-size-text-lg, 1.125rem);
  line-height: var(--line-height-text-lg, 1.75rem);
}

.fragno-alerts--size-sm .fragno-alerts__title {
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
}

.fragno-alerts__desc {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular, 400);
  color: inherit;
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
}

.fragno-alerts--size-md .fragno-alerts__desc {
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
}

.fragno-alerts--size-sm .fragno-alerts__desc {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
}

.fragno-alerts__action a,
.fragno-alerts__action .fragno-alerts__cta-link {
  display: inline-block;
  margin-top: var(--spacing-md, 0.5rem);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.fragno-alerts__action a:hover,
.fragno-alerts__action .fragno-alerts__cta-link:hover {
  opacity: 0.9;
}

.fragno-alerts__action a:focus-visible,
.fragno-alerts__action .fragno-alerts__cta-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring, var(--colors-blue-500));
  outline-offset: 2px;
  border-radius: 2px;
}

.fragno-alerts__action:empty {
  display: none;
}

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

.fragno-alerts__close-wrap[hidden] {
  display: none;
}

.fragno-alerts__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-2xl, 1rem);
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-width: 24px;
  min-height: 24px;
}

.fragno-alerts__close:hover {
  opacity: 0.85;
}

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

/* Variant: Blue */
.fragno-alerts--blue.fragno-alerts--filled .fragno-alerts__inner {
  background: var(--colors-blue-50);
  border-color: var(--colors-blue-300);
}

.fragno-alerts--blue .fragno-alerts__title,
.fragno-alerts--blue .fragno-alerts__desc,
.fragno-alerts--blue .fragno-alerts__close,
.fragno-alerts--blue .fragno-alerts__action a {
  color: var(--colors-blue-800);
}

.fragno-alerts--blue .fragno-alerts__icon ::slotted(svg),
.fragno-alerts--blue .fragno-alerts__icon > svg {
  color: var(--colors-blue-800);
}

/* Variant: Red */
.fragno-alerts--red.fragno-alerts--filled .fragno-alerts__inner {
  background: var(--colors-red-50);
  border-color: var(--colors-red-300);
}

.fragno-alerts--red .fragno-alerts__title,
.fragno-alerts--red .fragno-alerts__desc,
.fragno-alerts--red .fragno-alerts__close,
.fragno-alerts--red .fragno-alerts__action a {
  color: var(--colors-red-700);
}

.fragno-alerts--red .fragno-alerts__icon ::slotted(svg),
.fragno-alerts--red .fragno-alerts__icon > svg {
  color: var(--colors-red-700);
}

/* Variant: Green */
.fragno-alerts--green.fragno-alerts--filled .fragno-alerts__inner {
  background: var(--colors-green-50);
  border-color: var(--colors-green-300);
}

.fragno-alerts--green .fragno-alerts__title,
.fragno-alerts--green .fragno-alerts__desc,
.fragno-alerts--green .fragno-alerts__close,
.fragno-alerts--green .fragno-alerts__action a {
  color: var(--colors-green-800);
}

.fragno-alerts--green .fragno-alerts__icon ::slotted(svg) {
  color: var(--colors-green-800);
}

.fragno-alerts--green .fragno-alerts__icon > svg {
  color: var(--colors-green-800);
}

/* Variant: Gray */
.fragno-alerts--gray.fragno-alerts--filled .fragno-alerts__inner {
  background: var(--colors-gray-100);
  border-color: var(--colors-gray-400);
}

.fragno-alerts--gray .fragno-alerts__title,
.fragno-alerts--gray .fragno-alerts__desc,
.fragno-alerts--gray .fragno-alerts__close,
.fragno-alerts--gray .fragno-alerts__action a {
  color: var(--colors-gray-800);
}

.fragno-alerts--gray .fragno-alerts__icon ::slotted(svg),
.fragno-alerts--gray .fragno-alerts__icon > svg {
  color: var(--colors-gray-800);
}

/* Variant: White (neutral with border) */
.fragno-alerts--white.fragno-alerts--filled .fragno-alerts__inner {
  background: #ffffff;
  border-color: var(--colors-gray-500);
}

.fragno-alerts--white .fragno-alerts__title,
.fragno-alerts--white .fragno-alerts__desc,
.fragno-alerts--white .fragno-alerts__close,
.fragno-alerts--white .fragno-alerts__action a {
  color: var(--colors-gray-800);
}

.fragno-alerts--white .fragno-alerts__icon ::slotted(svg),
.fragno-alerts--white .fragno-alerts__icon > svg {
  color: var(--colors-gray-800);
}

/* ============================================
   MODAL COMPONENT STYLES
   Uses CSS Parts (::part) for shadow DOM styling
   ============================================ */

/* Ensure custom element has layout for proper behavior */
fragno-modal {
  display: block;
}

/* Hide light DOM children until shadow DOM is attached */
fragno-modal:not(:defined) {
  display: none;
}

fragno-modal::part(dialog) {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--modal-animation-duration) ease;
}

fragno-modal::part(dialog):focus {
  outline: none;
  box-sizing: border-box;
}

/* Hide dialog when modal is not open */
fragno-modal:not([open])::part(dialog) {
  display: none;
}

fragno-modal[open]::part(dialog) {
  opacity: 1;
}

/* Anchor positioning */
fragno-modal[data-anchor="top"]::part(dialog) {
  align-items: flex-start;
}

fragno-modal[data-anchor="middle"]::part(dialog) {
  align-items: center;
}

fragno-modal[data-anchor="bottom"]::part(dialog) {
  align-items: flex-end;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  fragno-modal::part(dialog),
  fragno-modal::part(container) {
    transition: none;
    transform: none;
  }
}

fragno-modal::part(container) {
  background: var(--modal-bg);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  max-width: var(--modal-max-width);
  max-height: calc(100vh - var(--spacing-4xl) * 2);
  max-height: calc(100dvh - var(--spacing-4xl) * 2);
  width: calc(100% - var(--spacing-xl));
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-3xl);
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--modal-animation-duration) ease,
    transform var(--modal-animation-duration) ease;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  box-sizing: border-box;
}

fragno-modal[open]::part(container) {
  opacity: 1;
  transform: scale(1);
}

/* Anchor positioning - container margins */
fragno-modal[data-anchor="top"]::part(container) {
  margin-top: var(--spacing-4xl);
  margin-bottom: auto;
}

fragno-modal[data-anchor="bottom"]::part(container) {
  margin-top: auto;
  margin-bottom: var(--spacing-4xl);
}

/* Mobile anchor positioning */
@media (max-width: 760.5rem) {
  fragno-modal[data-anchor-mobile="bottom"]::part(dialog) {
    align-items: flex-end;
  }

  fragno-modal[data-anchor-mobile="bottom"]::part(container) {
    margin-top: auto;
    margin-bottom: var(--spacing-md);
  }
}

fragno-modal::part(header) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: var(--spacing-xl) var(--spacing-xl) 0;
  flex-shrink: 0;
  min-height: var(--modal-close-button-size);
}

/* Hide header when no icon and no close button */
fragno-modal:not([data-has-header])::part(header) {
  display: none;
}

/* When icon is present, add bottom padding to header */
fragno-modal[data-has-icon="true"]::part(header) {
  padding-bottom: var(--spacing-xl);
}

fragno-modal::part(icon) {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
}

/* Hide icon and icon-container when no icon is slotted */
fragno-modal:not([data-has-icon])::part(icon),
fragno-modal:not([data-has-icon])::part(icon-container) {
  display: none;
}

/* Left alignment - icon moves to column 1 */
fragno-modal[data-alignment="left"]::part(icon) {
  grid-column: 1;
  justify-self: start;
}

/* Center alignment - icon stays in column 2 */
fragno-modal[data-alignment="center"]::part(icon) {
  grid-column: 2;
  justify-self: center;
}

fragno-modal::part(icon-container) {
  background: var(--modal-icon-container-bg);
  border-radius: var(--modal-icon-container-radius);
  padding: var(--spacing-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

fragno-modal::part(close-button) {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: var(--modal-close-button-size);
  height: var(--modal-close-button-size);
  border: none;
  background: transparent;
  color: var(--modal-close-button-color);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color var(--modal-animation-duration) ease;
}

fragno-modal::part(close-button):hover {
  background-color: var(--modal-close-button-hover-bg);
}

fragno-modal::part(close-button):focus,
fragno-modal::part(close-button):focus-visible {
  outline: var(--modal-close-button-focus-outline);
  outline-offset: 2px;
}

fragno-modal::part(body) {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  overflow-y: auto;
  padding: var(--spacing-xl) var(--spacing-xl) 0;
}

/* When header is present (icon or close button), it provides top spacing */
fragno-modal[data-has-header="true"]::part(body) {
  padding-top: 0;
}

/* Alignment variants for body content */
fragno-modal[data-alignment="center"]::part(body) {
  text-align: center;
}

fragno-modal[data-alignment="left"]::part(body) {
  text-align: left;
}

fragno-modal::part(hero) {
  flex-shrink: 0;
  padding-bottom: var(--spacing-xl);
  box-sizing: border-box;
  overflow: hidden;
}

fragno-modal::part(title) {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--modal-title-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--modal-title-line-height);
  color: var(--colors-gray-900);
  letter-spacing: var(--modal-title-letter-spacing);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

fragno-modal::part(description) {
  margin: 0;
  margin-top: var(--spacing-sm);
  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);
  color: var(--colors-gray-700);
  letter-spacing: -0.005em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

fragno-modal::part(content) {
  margin-top: var(--spacing-xl);
}

fragno-modal::part(footer) {
  padding: 0 var(--spacing-xl);
  display: flex;
  gap: var(--spacing-lg);
  flex-shrink: 0;
  margin-top: var(--spacing-3xl);
}

/* Desktop: side-by-side */
@media (min-width: 769px) {
  fragno-modal::part(footer) {
    flex-direction: row;
  }
}

/* Mobile: stacked with primary on top */
@media (max-width: 760.5rem) {
  fragno-modal::part(footer) {
    flex-direction: column-reverse;
  }
}

/* ============================================
   CAROUSEL COMPONENT
   ============================================ */

   fragno-carousel::part(group) {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
  }
  
  fragno-carousel::part(nav-bar) {
    position: relative;
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg, 0.75rem);
    margin-top: var(--spacing-3xl, 1.5rem);
  }

  fragno-carousel[navbar-position="left"]::part(nav-bar) {
    align-self: flex-start;
  }

  fragno-carousel[navbar-position="right"]::part(nav-bar) {
    align-self: flex-end;
  }

  fragno-carousel::part(pagination-pill) {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    padding: 0;
    background: var(--colors-gray-100, #f5f5f5);
    border-radius: var(--radius-full, 9999px);
  }

  /* Dotted navbar variant: Nova pill with backdrop blur and dot indicators */
  fragno-carousel[navbar-variant="dotted"]::part(pagination-pill) {
    gap: var(--spacing-lg, 12px);
    padding: var(--spacing-md, 8px);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  fragno-carousel[navbar-variant="dotted"]::part(pagination-dots) {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl, 16px);
  }

  /* Pagination dot: 10px circle. */
  fragno-carousel[navbar-variant="dotted"]::part(dot) {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  fragno-carousel[navbar-variant="dotted"]::part(dot)::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(0, 0, 0, 0.4);
  }

  fragno-carousel[navbar-variant="dotted"]::part(dot):hover::before {
    background: rgba(0, 0, 0, 0.6);
  }

  fragno-carousel[navbar-variant="dotted"]::part(dot-active)::before {
    background: var(--colors-gray-800, #292929);
  }

  fragno-carousel[navbar-variant="dotted"]::part(dot):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  fragno-carousel::part(arrow) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: var(--spacing-lg, 0.75rem);
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--colors-gray-800, #292929);
    cursor: pointer;
  }

  fragno-carousel::part(arrow):hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06);
  }

  fragno-carousel::part(arrow):disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  fragno-carousel::part(pagination-text) {
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-text-sm, 1.25rem);
    color: var(--colors-gray-800, #292929);
    letter-spacing: -0.07px;
    min-width: 75px;
    display: flex;
    justify-content: center;
  }

  fragno-carousel::part(play-pause) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: var(--spacing-md, 0.5rem);
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--colors-gray-100, #f5f5f5);
    color: var(--colors-gray-800, #292929);
    cursor: pointer;
  }

  fragno-carousel::part(play-pause):hover,
  fragno-carousel::part(play-pause):focus-visible {
    background: var(--colors-gray-200, #e5e5e5);
  }


  
  fragno-carousel::part(container) {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-flow: row nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Horizontal padding so focus ring on first/last cards is not clipped (WCAG 2.4.11) */
    padding-left: var(--spacing-xs, 0.25rem);
    padding-right: var(--spacing-xs, 0.25rem);
    box-sizing: border-box;
  }
  
  fragno-carousel::part(container)::-webkit-scrollbar {
    display: none;
  }

  /* When autoscroll is on, prevent manual scroll (mouse wheel, touch drag). Allow vertical so page can scroll. */
  /* Only continuous autoscroll uses transform; slide-by-slide uses scrollTo() and needs a scrollable container */
  fragno-carousel[autoscroll]:not([slide-by-slide])::part(container) {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    touch-action: pan-y;
  }

  /* When navbar is shown, prevent horizontal touch scroll only; allow vertical (page scroll). Wheel blocked in JS for horizontal only. */
  fragno-carousel[shownavbar]::part(container) {
    touch-action: pan-y;
  }

  fragno-carousel::part(wrapper) {
    display: flex;
    gap: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }

  fragno-carousel::part(autoscroll) {
    width: max-content;
    animation: scroll 40s linear infinite;
    will-change: transform;
    padding-right: 2rem;
  }
  
  fragno-carousel::part(hidden) {
    display: none;
  }

  
/* ============================================
   CARD COMPONENT
   ============================================ */

fragno-card::part(container) {
  scroll-snap-align: center;
  overflow: hidden;
  width: 100%;
}

/* ============================================
   LOADING INDICATOR COMPONENT
   ============================================ */

.fragno-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 23.4375rem;
}

.fragno-loading-indicator__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
}

/* Icon Container */
.fragno-loading-indicator__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fragno-loading-indicator__icon-container--size-sm {
  width: 2rem;
  height: 2rem;
  padding: 2px;
}

.fragno-loading-indicator__icon-container--size-md {
  width: 3rem;
  height: 3rem;
  padding: 3px;
}

.fragno-loading-indicator__icon-container--size-lg {
  width: 3.5rem;
  height: 3.5rem;
  padding: 3px;
}

.fragno-loading-indicator__icon-container--size-xl {
  width: 4.625rem;
  height: 4.625rem;
  padding: 2px;
}

/* Loading Spinner */
.fragno-loading-indicator__spinner {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(66, 66, 66, 0.12);
  border-top-color: #292929;
  border-radius: 50%;
  animation: fragno-loading-spin 1s linear infinite;
  box-sizing: border-box;
}

.fragno-loading-indicator__spinner--size-sm {
  border-width: 2px;
}

.fragno-loading-indicator__spinner--size-md {
  border-width: 3px;
}

.fragno-loading-indicator__spinner--size-lg {
  border-width: 3px;
}

.fragno-loading-indicator__spinner--size-xl {
  border-width: 2px;
}

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

/* Success Icon */
.fragno-loading-indicator__success-icon {
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(-23.66deg, rgb(0, 0, 0) 6.81%, rgb(67, 67, 67) 76.99%);
  box-shadow: 0 0.75rem 1rem 0 rgba(10, 13, 18, 0.08),
    0 2px 2px 0 rgba(10, 13, 18, 0.04);
  flex-shrink: 0;
}

.fragno-loading-indicator__success-icon--size-sm {
  width: 2.875rem;
  height: 2.875rem;
}

.fragno-loading-indicator__success-icon--size-md {
  width: 3.875rem;
  height: 3.875rem;
}

.fragno-loading-indicator__success-icon--size-lg {
  width: 4.5rem;
  height: 4.5rem;
}

.fragno-loading-indicator__success-icon--size-xl {
  width: 5.75rem;
  height: 5.75rem;
}

.fragno-loading-indicator__check-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-loading-indicator__check-icon::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.75rem;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  margin-top: -2px;
}

.fragno-loading-indicator__success-icon--size-sm .fragno-loading-indicator__check-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-loading-indicator__success-icon--size-sm .fragno-loading-indicator__check-icon::before {
  width: 0.375rem;
  height: 0.625rem;
  border-width: 2px;
}

.fragno-loading-indicator__success-icon--size-md .fragno-loading-indicator__check-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.fragno-loading-indicator__success-icon--size-md .fragno-loading-indicator__check-icon::before {
  width: 0.4375rem;
  height: 11px;
  border-width: 2px;
}

.fragno-loading-indicator__success-icon--size-lg .fragno-loading-indicator__check-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-loading-indicator__success-icon--size-lg .fragno-loading-indicator__check-icon::before {
  width: 0.5rem;
  height: 0.75rem;
  border-width: 2px;
}

.fragno-loading-indicator__success-icon--size-xl .fragno-loading-indicator__check-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.fragno-loading-indicator__success-icon--size-xl .fragno-loading-indicator__check-icon::before {
  width: 0.625rem;
  height: 0.875rem;
  border-width: 2px;
}

/* Title Text */
.fragno-loading-indicator__title {
  display: block;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-800, #292929);
  text-align: center;
  margin: 0;
}

.fragno-loading-indicator__title--size-sm,
.fragno-loading-indicator__title--size-md {
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: 0;
}

.fragno-loading-indicator__title--size-lg,
.fragno-loading-indicator__title--size-xl {
  font-family: var(--font-family-display, "Inter", sans-serif);
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0;
}

/* Hide Animation Text */
.fragno-loading-indicator__hide-animation {
  display: block;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  color: var(--colors-gray-700, #424242);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}

.fragno-loading-indicator__hide-animation:hover {
  opacity: 0.8;
}

/* Supportive Text */
.fragno-loading-indicator__supportive-text {
  display: block;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-regular, 400);
  color: var(--colors-gray-700, #424242);
  text-align: center;
  margin: 0;
}

.fragno-loading-indicator__supportive-text--size-sm,
.fragno-loading-indicator__supportive-text--size-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.fragno-loading-indicator__supportive-text--size-lg,
.fragno-loading-indicator__supportive-text--size-xl {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
}

/* ============================================
   CONTENT BLOCK COMPONENT STYLES
   ============================================ */

.fragno-content-block {
  font-family: var(--font-family-body);
  background-color: var(--colors-secondary-default, #ffffff);
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
}

.fragno-content-block__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl, 1.5rem);
  padding: var(--spacing-3xl, 1.5rem);
}

@media (min-width: 768px) {
  /* Desktop row: image start/end (side-by-side) */
  .fragno-content-block[data-layout="desktop"]:not([data-stacked="true"]) .fragno-content-block__content {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--content-block-gap-desktop, 4.5rem);
    padding: var(--spacing-7xl, 4rem) var(--content-block-padding-x-desktop, 7rem);
  }

  .fragno-content-block[data-layout="desktop"][data-image-position="start"] .fragno-content-block__content {
    flex-direction: row-reverse;
  }

  .fragno-content-block[data-layout="desktop"]:not([data-stacked="true"]) .fragno-content-block__text {
    flex: 1;
    min-width: 0;
  }

  .fragno-content-block[data-layout="desktop"]:not([data-stacked="true"]) .fragno-content-block__media {
    flex: 0 1 40%;
    min-width: 0;
  }

  /* Desktop stacked: image on top (stacked + image-position=start) */
  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__content {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl, 1.5rem);
    padding: var(--spacing-7xl, 4rem) var(--content-block-padding-x-desktop, 7rem);
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__media {
    order: -1;
    width: 360px;
    max-width: 100%;
    flex-shrink: 0;
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__image {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: var(--radius-5xl, 2rem);
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__text {
    width: 100%;
    max-width: 365px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-4xl, 2rem);
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__text > .fragno-content-block__subtitle,
  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__text > .fragno-content-block__title,
  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__text > .fragno-content-block__description {
    margin: 0;
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="start"] .fragno-content-block__actions {
    justify-content: center;
  }

  /* Desktop stacked: image on bottom (stacked + image-position=end) */
  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__content {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl, 1.5rem);
    padding: var(--spacing-7xl, 4rem) var(--content-block-padding-x-desktop, 7rem);
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__text {
    width: 100%;
    max-width: 365px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-4xl, 2rem);
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__text > .fragno-content-block__subtitle,
  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__text > .fragno-content-block__title,
  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__text > .fragno-content-block__description {
    margin: 0;
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__actions {
    justify-content: center;
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__media {
    width: 360px;
    max-width: 100%;
    flex-shrink: 0;
  }

  .fragno-content-block[data-layout="desktop"][data-stacked="true"][data-image-position="end"] .fragno-content-block__image {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: var(--radius-5xl, 2rem);
  }

  /* Size: large – big image, height driven by image, buttons stacked (row only) */
  .fragno-content-block[data-layout="desktop"][data-size="large"]:not([data-stacked="true"]) .fragno-content-block__content {
    align-items: flex-start;
    padding: var(--spacing-7xl, 4rem) var(--content-block-padding-x-desktop, 7rem);
    gap: var(--content-block-gap-desktop, 4.5rem);
  }

  .fragno-content-block[data-layout="desktop"][data-size="large"]:not([data-stacked="true"]) .fragno-content-block__media {
    flex: 0 1 52%;
    min-width: 0;
  }

  .fragno-content-block[data-layout="desktop"][data-size="large"]:not([data-stacked="true"]) .fragno-content-block__image {
    width: 100%;
    height: auto;
    min-height: 18rem;
    object-fit: cover;
  }

  .fragno-content-block[data-layout="desktop"][data-size="large"]:not([data-stacked="true"]) .fragno-content-block__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Size: medium – default horizontal (40% media, buttons side by side) */
  .fragno-content-block[data-layout="desktop"][data-size="medium"]:not([data-stacked="true"]) .fragno-content-block__actions {
    flex-direction: row;
  }

  /* Size: small – smaller image, compact height, buttons side by side */
  .fragno-content-block[data-layout="desktop"][data-size="small"]:not([data-stacked="true"]) .fragno-content-block__content {
    padding: var(--spacing-5xl, 2.5rem) var(--content-block-padding-x-desktop, 7rem);
    gap: var(--content-block-gap-desktop, 4.5rem);
  }

  .fragno-content-block[data-layout="desktop"][data-size="small"]:not([data-stacked="true"]) .fragno-content-block__media {
    flex: 0 1 28%;
    min-width: 0;
  }

  .fragno-content-block[data-layout="desktop"][data-size="small"]:not([data-stacked="true"]) .fragno-content-block__title {
    font-size: var(--font-size-text-xl, 1.25rem);
    line-height: var(--line-height-text-xl, 2rem);
    margin-bottom: var(--spacing-md, 0.5rem);
  }

  .fragno-content-block[data-layout="desktop"][data-size="small"]:not([data-stacked="true"]) .fragno-content-block__description {
    font-size: var(--font-size-text-sm, 0.875rem);
    line-height: var(--line-height-text-sm, 1.25rem);
    margin-bottom: var(--spacing-lg, 0.75rem);
  }

  .fragno-content-block[data-layout="desktop"][data-size="small"]:not([data-stacked="true"]) .fragno-content-block__actions {
    flex-direction: row;
  }
}

.fragno-content-block__subtitle {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-600, #737373);
  margin: 0 0 var(--spacing-xs, 0.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
}

.fragno-content-block__subtitle[hidden] {
  display: none;
}

.fragno-content-block__title {
  font-size: var(--font-size-display-lg, 3rem);
  line-height: var(--line-height-display-lg, 3.5rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-900, #141414);
  margin: 0 0 var(--spacing-lg, 0.75rem);
  letter-spacing: var(--letter-spacing-display-lg, -0.0625rem);
}

.fragno-content-block__title[hidden] {
  display: none;
}

.fragno-content-block__description {
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  font-weight: var(--font-weight-regular, 400);
  color: var(--colors-gray-700, #424242);
  margin: 0 0 var(--spacing-xl, 1rem);
  max-width: 45rem;
}

.fragno-content-block__description[hidden] {
  display: none;
}

.fragno-content-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md, 0.5rem);
  align-items: center;
}

.fragno-content-block__media {
  flex-shrink: 0;
}

.fragno-content-block__media[hidden] {
  display: none;
}

.fragno-content-block__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md, 0.5rem);
  object-fit: cover;
}

.fragno-content-block__image[hidden] {
  display: none;
}

/* ============================================
   LOGO LOCKUP (via parts)
   ============================================ */

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

fragno-logo-lockup[variant="light"]::part(lockup) {
  color: #141414;
}

fragno-logo-lockup[variant="light"]::part(idme),
fragno-logo-lockup[variant="light"]::part(partner) {
  color: #141414;
}

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

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

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

fragno-logo-lockup::part(idme) svg {
  height: 32px;
  width: auto;
  display: block;
}

fragno-logo-lockup::part(idme) svg path {
  fill: currentColor;
}

fragno-logo-lockup::part(divider) {
  width: 1px;
  height: 32px;
  border-radius: 1000px;
  background-color: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

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

/* ============================================
   PAGE HEADER
   ============================================ */

.fragno-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--page-header-gap);
  width: 100%;
}

.fragno-page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--page-header-row-gap);
  width: 100%;
}

.fragno-page-header__title {
  margin: 0;
  font-family: var(--font-family-display, Inter), sans-serif;
  font-weight: var(--page-header-title-font-weight);
  color: var(--page-header-title-color);
}

.fragno-page-header--size-l .fragno-page-header__title {
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  letter-spacing: var(--letter-spacing-display-xl);
}

.fragno-page-header--size-m .fragno-page-header__title {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  letter-spacing: var(--letter-spacing-display-lg);
}

.fragno-page-header--size-s .fragno-page-header__title {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
  letter-spacing: var(--letter-spacing-display-sm);
}

.fragno-page-header--size-xs .fragno-page-header__title {
  font-size: var(--font-size-display-30);
  line-height: var(--line-height-display-30);
  letter-spacing: var(--letter-spacing-display-30);
}

.fragno-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--page-header-actions-gap);
  flex-shrink: 0;
}

.fragno-page-header__divider {
  height: var(--page-header-divider-height);
  width: 100%;
  background-color: var(--page-header-divider-color);
}

.fragno-page-header__divider[hidden] {
  display: none;
}

/* ============================================
   SECTION HEADER (Nova | Web)
   ============================================ */

.fragno-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

.fragno-section-header--action-right {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.fragno-section-header--action-right .fragno-section-header__content {
  flex: 1 1 0;
  min-width: 0;
}

.fragno-section-header--action-right .fragno-section-header__action-wrap {
  flex-shrink: 0;
  align-self: flex-end;
}

.fragno-section-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg); /* 12px between title and description */
}

.fragno-section-header__heading {
  display: flex;
  flex-direction: column;
  gap: 0; /* no gap between subtitle (eyebrow) and title */
}

.fragno-section-header__eyebrow[hidden],
.fragno-section-header__description[hidden],
.fragno-section-header__action-wrap[hidden] {
  display: none;
}

.fragno-section-header__eyebrow {
  margin: 0;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--color-text-tertiary);
}

.fragno-section-header__title {
  margin: 0;
  font-family: var(--font-family-display), sans-serif;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.fragno-section-header--size-l .fragno-section-header__title {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  letter-spacing: var(--letter-spacing-display-lg);
}

.fragno-section-header--size-s .fragno-section-header__title {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
  letter-spacing: var(--letter-spacing-display-sm);
}

.fragno-section-header__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  align-items: flex-start;
}

.fragno-section-header[data-layout="desktop"] .fragno-section-header__body {
  max-width: 45%;
}

.fragno-section-header[data-layout="mobile"] .fragno-section-header__body {
  max-width: 90%;
}

.fragno-section-header__description {
  margin: 0;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--color-text-tertiary);
}

.fragno-section-header--action-right .fragno-section-header__description {
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
}

.fragno-section-header__action-wrap {
  display: flex;
  align-items: center;
}

.fragno-section-header__action {
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  color: var(--colors-gray-900);
  background: none;
  border: none;
  padding: 0.375rem 0 0.375rem 0;
  padding-right: var(--spacing-xl);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-full);
  -webkit-tap-highlight-color: transparent;
}

.fragno-section-header__action:hover {
  color: var(--colors-gray-800);
}

.fragno-section-header__action:focus {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-section-header__action:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   HERO CARD (Nova | Web)
   ============================================ */

.fragno-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--hero-card-radius, var(--radius-5xl));
  border-width: var(--hero-card-border-width, 1px);
  border-style: solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.fragno-hero-card {
  border-color: var(--hero-card-border-dark);
}

/* Sizes */
.fragno-hero-card[data-size="sm"] {
  width: var(--hero-card-sm-width);
  height: var(--hero-card-sm-height);
}

.fragno-hero-card[data-size="md"] {
  width: var(--hero-card-md-width);
  height: var(--hero-card-md-height);
}

.fragno-hero-card[data-size="lg"] {
  width: var(--hero-card-lg-width);
  height: var(--hero-card-lg-height);
}

.fragno-hero-card[data-size="xl"] {
  width: var(--hero-card-xl-width);
  height: var(--hero-card-xl-height);
  min-width: min(var(--hero-card-xl-min-width), 100%);
  min-height: var(--hero-card-xl-min-height);
}

.fragno-hero-card[data-size="sm"],
.fragno-hero-card[data-size="md"],
.fragno-hero-card[data-size="lg"],
.fragno-hero-card[data-size="xl"] {
  max-width: 100%;
}

/* When card-href is set, the card is wrapped in this anchor */
.fragno-hero-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fragno-hero-card__image-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Blur only at bottom-left (over the text area), per Figma */
.fragno-hero-card__blur-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--hero-card-radius, var(--radius-5xl));
  backdrop-filter: blur(var(--hero-card-image-blur, 50px));
  -webkit-backdrop-filter: blur(var(--hero-card-image-blur, 50px));
  pointer-events: none;
  /* Blur below diagonal; moved down so less of image is affected */
  mask-image: linear-gradient(
    195deg,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 56%,
    rgba(0, 0, 0, 0.75) 60%,
    black 64%
  );
  -webkit-mask-image: linear-gradient(
    195deg,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 56%,
    rgba(0, 0, 0, 0.75) 60%,
    black 64%
  );
  mask-size: 100% 100%;
  mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-hero-card__blur-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.fragno-hero-card__gradient {
  position: absolute;
  inset: 0;
  background: var(--hero-card-gradient-overlay);
  pointer-events: none;
}

.fragno-hero-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 0 0;
  min-height: 0;
  padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-3xl);
}

.fragno-hero-card[data-size="xl"] .fragno-hero-card__content {
  padding: var(--spacing-4xl);
}

.fragno-hero-card__top {
  flex-shrink: 0;
}

.fragno-hero-card__icon-wrap {
  width: var(--hero-card-icon-container-sm-width);
  height: var(--hero-card-icon-container-sm-height);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--colors-gray-50);
}

.fragno-hero-card[data-size="xl"] .fragno-hero-card__icon-wrap {
  width: var(--hero-card-icon-container-xl-width);
  height: var(--hero-card-icon-container-xl-height);
}

.fragno-hero-card__icon-wrap .fragno-hero-card__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
}

.fragno-hero-card__icon-wrap img,
.fragno-hero-card__icon-wrap .fragno-hero-card__icon-link img,
.fragno-hero-card__icon-wrap ::slotted(*) {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.fragno-hero-card[data-dark-logo] .fragno-hero-card__icon-wrap {
  color: var(--colors-gray-900);
}

/* Only darken SVG logos; leave PNG/JPEG/WebP unchanged */
.fragno-hero-card[data-dark-logo] .fragno-hero-card__icon-wrap img[src$=".svg"],
.fragno-hero-card[data-dark-logo] .fragno-hero-card__icon-wrap img[src*=".svg?"],
.fragno-hero-card[data-dark-logo] .fragno-hero-card__icon-wrap img[src^="data:image/svg+xml"] {
  filter: brightness(0);
}

.fragno-hero-card[data-light-logo] .fragno-hero-card__icon-wrap {
  color: var(--colors-gray-50);
}

.fragno-hero-card[data-light-logo] .fragno-hero-card__icon-wrap img[src$=".svg"],
.fragno-hero-card[data-light-logo] .fragno-hero-card__icon-wrap img[src*=".svg?"],
.fragno-hero-card[data-light-logo] .fragno-hero-card__icon-wrap img[src^="data:image/svg+xml"] {
  filter: brightness(0) invert(1);
}

.fragno-hero-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-shrink: 0;
}

.fragno-hero-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
}

.fragno-hero-card[data-size="xl"] .fragno-hero-card__text {
  gap: var(--spacing-lg);
}

.fragno-hero-card__eyebrow {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus, 550);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
  color: var(--hero-card-text-eyebrow);
}

/* XL eyebrow: Text xl/Medium (500), letter-spacing 0 — Nova Web */
.fragno-hero-card[data-size="xl"] .fragno-hero-card__eyebrow {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  letter-spacing: var(--letter-spacing-text-xl, 0);
}

.fragno-hero-card__eyebrow[hidden] {
  display: none;
}

/* Title: Text lg/Medium (body) — sm–lg; Display xl/Medium — xl (Nova Web Hero) */
.fragno-hero-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg, -0.005rem);
  color: var(--hero-card-text-title);
}

.fragno-hero-card[data-size="xl"] .fragno-hero-card__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  letter-spacing: var(--letter-spacing-display-xl, -0.075rem);
}

.fragno-hero-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  padding-bottom: 0.06em; /* prevent descenders (g, y, p) from clipping */
}

.fragno-hero-card__title[hidden] {
  display: none;
}

/* One-line subtitle slot height when empty (aligns with offer card pattern) */
.fragno-hero-card__subtitle {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
  color: var(--hero-card-text-subtitle);
  min-height: var(--line-height-text-sm);
  box-sizing: border-box;
}

/* XL subtitle: Display 2xs Regular, 24px / 32px (Figma display-xs + lh display-2xs) */
.fragno-hero-card[data-size="xl"] .fragno-hero-card__subtitle {
  font-size: var(--hero-card-xl-subtitle-font-size);
  line-height: var(--hero-card-xl-subtitle-line-height);
  letter-spacing: var(--hero-card-xl-subtitle-letter-spacing);
  min-height: var(--hero-card-xl-subtitle-line-height);
}

.fragno-hero-card__subtitle[hidden] {
  display: none;
}

.fragno-hero-card__action-wrap {
  flex-shrink: 0;
}

.fragno-hero-card__action-wrap[hidden] {
  display: none;
}

.fragno-hero-card__action-link,
.fragno-hero-card__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hero-card-action-size-sm);
  height: var(--hero-card-action-size-sm);
  min-width: var(--hero-card-action-size-sm);
  border: 1px solid var(--colors-gray-300);
  border-radius: var(--radius-full);
  color: var(--colors-gray-50);
  text-decoration: none;
  background: transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.fragno-hero-card__action-link:hover,
.fragno-hero-card__link:hover .fragno-hero-card__action-icon {
  background: rgba(255, 255, 255, 0.1);
}

.fragno-hero-card__action-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-hero-card[data-size="xl"] .fragno-hero-card__action-link,
.fragno-hero-card[data-size="xl"] .fragno-hero-card__action-icon {
  width: var(--hero-card-action-size-xl);
  height: var(--hero-card-action-size-xl);
  min-width: var(--hero-card-action-size-xl);
}

/* ============================================
   FEATURED CARD (Nova | Web)
   ============================================ */

.fragno-featured-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
  width: var(--featured-card-width);
  min-width: var(--featured-card-min-width);
  height: var(--featured-card-height);
  min-height: var(--featured-card-min-height);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
  border-width: var(--featured-card-border-width);
  border-style: solid;
  border-radius: var(--featured-card-radius);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--card-shadow-default);
}

/* Subtle hover state (Nova | Web): uses shared card token */
.fragno-featured-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.fragno-featured-card[data-style="white"] {
  border-color: #fff;
}

.fragno-featured-card[data-style="outline"] {
  border-color: rgba(0, 0, 0, 0.2);
}

.fragno-featured-card__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
  border-radius: var(--featured-card-radius);
}

.fragno-featured-card__top {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-height: var(--featured-card-media-min-height);
}

.fragno-featured-card__media {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  border-radius: var(--featured-card-radius);
  overflow: hidden;
  background: var(--colors-gray-200);
}

.fragno-featured-card__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--featured-card-radius);
}

.fragno-featured-card__media--placeholder {
  background: var(--colors-gray-200);
}

.fragno-featured-card__tertiary-wrap {
  position: absolute;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  right: auto;
}

.fragno-featured-card__tertiary-wrap[hidden] {
  display: none;
}

/* Tertiary CTA link — styled like fragno-button hierarchy="tertiary" on image (pill, blur, light text) */
.fragno-featured-card__tertiary-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 1000px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.4);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  letter-spacing: var(--letter-spacing-text-xs);
  color: var(--colors-gray-900);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.fragno-featured-card__tertiary-cta:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--colors-gray-900);
}

.fragno-featured-card__tertiary-cta:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-featured-card__tertiary-cta {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.fragno-featured-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: 0 var(--spacing-md);
  flex-shrink: 0;
}

.fragno-featured-card__store-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-featured-card__store-row[hidden] {
  display: none;
}

.fragno-featured-card__icon-wrap {
  flex-shrink: 0;
  width: var(--featured-card-store-logo-width);
  height: var(--featured-card-store-logo-height);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-gray-900);
}

.fragno-featured-card__icon-wrap[hidden] {
  display: none;
}

.fragno-featured-card__icon-wrap .fragno-featured-card__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.fragno-featured-card__icon-wrap img,
.fragno-featured-card__icon-wrap ::slotted(*) {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Only darken SVG logos; leave PNG/JPEG/WebP unchanged */
.fragno-featured-card__icon-wrap img[src$=".svg"],
.fragno-featured-card__icon-wrap img[src*=".svg?"],
.fragno-featured-card__icon-wrap img[src^="data:image/svg+xml"],
.fragno-featured-card__icon-wrap ::slotted(img[src$=".svg"]),
.fragno-featured-card__icon-wrap ::slotted(img[src*=".svg?"]),
.fragno-featured-card__icon-wrap ::slotted(img[src^="data:image/svg+xml"]) {
  filter: brightness(0);
}

/* Eyebrow Text md/550 (Figma); up to 2 lines + ellipsis — full string stays in DOM for assistive tech */
.fragno-featured-card__store-text {
  margin: 0;
  flex: 1 1 0%;
  min-width: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus, 550);
  font-size: var(--featured-card-text-eyebrow-font-size);
  line-height: var(--featured-card-text-eyebrow-line-height);
  letter-spacing: var(--featured-card-text-eyebrow-letter-spacing);
  color: var(--colors-gray-900);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: var(--featured-card-text-eyebrow-line-height);
  max-height: calc(var(--featured-card-text-eyebrow-line-height) * 2);
  box-sizing: border-box;
}

.fragno-featured-card__store-text[hidden] {
  display: none;
}

.fragno-featured-card__text-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-featured-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
}

/* Title Text xl/Medium, up to 2 lines (Figma) */
.fragno-featured-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--featured-card-text-title-font-size);
  line-height: var(--featured-card-text-title-line-height);
  letter-spacing: var(--featured-card-text-title-letter-spacing);
  color: var(--colors-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  box-sizing: border-box;
}

.fragno-featured-card__title[hidden] {
  display: none;
}

/* Subtitle Text md/Regular (Figma); one line + ellipsis — full string stays in DOM for assistive tech */
.fragno-featured-card__subtitle {
  margin: 0;
  min-width: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--featured-card-text-subtitle-font-size);
  line-height: var(--featured-card-text-subtitle-line-height);
  letter-spacing: var(--featured-card-text-subtitle-letter-spacing);
  color: var(--colors-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: var(--featured-card-text-subtitle-line-height);
  box-sizing: border-box;
}

.fragno-featured-card__subtitle[hidden] {
  display: none;
}

.fragno-featured-card__action-wrap {
  flex-shrink: 0;
}

.fragno-featured-card__action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--featured-card-action-size);
  height: var(--featured-card-action-size);
  min-width: var(--featured-card-action-size);
  border: 1px solid var(--colors-gray-700);
  border-radius: var(--radius-full);
  color: var(--colors-gray-700);
  text-decoration: none;
  background: transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.fragno-featured-card__action-link:hover {
  background: var(--colors-gray-100);
  border-color: var(--colors-gray-800);
  color: var(--colors-gray-900);
}

.fragno-featured-card__action-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

/* ============================================
   OFFER CARD (Nova | Web)
   ============================================ */

.fragno-offer-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: var(--spacing-2xl) var(--spacing-3xl);
  border-width: var(--offer-card-border-width);
  border-style: solid;
  border-radius: var(--offer-card-radius);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--card-shadow-default);
}

.fragno-offer-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.fragno-offer-card[data-style="white"] {
  border-color: #fff;
}

.fragno-offer-card[data-style="outline"] {
  border-color: rgba(0, 0, 0, 0.2);
}

/* When card-href is set, the card is wrapped in this anchor */
.fragno-offer-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Size: SM — horizontal: [logo] | [eyebrow, title, subtitle, CTA] */
.fragno-offer-card[data-size="sm"] {
  width: var(--offer-card-sm-width);
  min-width: var(--offer-card-sm-min-width);
  max-width: var(--offer-card-sm-max-width);
  min-height: var(--offer-card-sm-min-height);
  max-height: var(--offer-card-sm-max-height);
  justify-content: center;
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__content {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-lg);
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__top {
  flex-shrink: 0;
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__bottom {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--spacing-xxs);
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__store-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__text-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  min-width: 0;
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__text {
  flex: 1 0 0;
  min-width: 0;
}

/* Size: MD / LG — vertical: [label? + logo] then [eyebrow, title, subtitle | CTA] */
.fragno-offer-card[data-size="md"],
.fragno-offer-card[data-size="lg"] {
  width: var(--offer-card-md-width);
  max-width: 100%;
  min-width: min(var(--offer-card-md-min-width), 100%);
  height: var(--offer-card-md-height);
  min-height: var(--offer-card-md-min-height);
  max-height: var(--offer-card-md-max-height);
  justify-content: space-between;
}

.fragno-offer-card[data-size="lg"] {
  height: var(--offer-card-lg-height);
  min-height: var(--offer-card-lg-min-height);
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__content,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__content {
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__top,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__bottom,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 1 0 0;
  min-height: 0;
  gap: var(--spacing-xxs);
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__store-row,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__store-row {
  width: 100%;
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__text-row,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__text-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  min-width: 0;
}


.fragno-offer-card__content {
  display: flex;
  flex: 1 0 0;
  min-height: 0;
  min-width: 0;
  border-radius: var(--offer-card-radius);
}

.fragno-offer-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.fragno-offer-card__top[hidden] {
  display: none;
}

.fragno-offer-card__label-wrap {
  display: flex;
  flex-shrink: 0;
}

.fragno-offer-card__label-wrap[hidden] {
  display: none;
}

.fragno-offer-card__label {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--colors-gray-800);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  letter-spacing: var(--letter-spacing-text-xs, -0.005rem);
  color: var(--colors-gray-25, #fcfcfc);
  text-decoration: none;
  transition: background-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

a.fragno-offer-card__label:hover {
  background: var(--colors-gray-700);
  color: var(--colors-gray-25, #fcfcfc);
}

.fragno-offer-card__label:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-offer-card__label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.fragno-offer-card__icon-wrap {
  flex-shrink: 0;
  width: var(--offer-card-store-logo-width);
  height: var(--offer-card-store-logo-height);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-gray-900);
}

.fragno-offer-card__icon-wrap .fragno-offer-card__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.fragno-offer-card__icon-wrap img,
.fragno-offer-card__icon-wrap .fragno-offer-card__icon-link img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Only darken SVG logos (single-color); leave PNG/JPEG/WebP unchanged */
.fragno-offer-card__icon-wrap img[src$=".svg"],
.fragno-offer-card__icon-wrap img[src*=".svg?"],
.fragno-offer-card__icon-wrap img[src^="data:image/svg+xml"],
.fragno-offer-card__icon-wrap .fragno-offer-card__icon-link img[src$=".svg"],
.fragno-offer-card__icon-wrap .fragno-offer-card__icon-link img[src*=".svg?"],
.fragno-offer-card__icon-wrap .fragno-offer-card__icon-link img[src^="data:image/svg+xml"] {
  filter: brightness(0);
}

.fragno-offer-card__icon-wrap--sm {
  width: var(--offer-card-store-logo-width);
  height: var(--offer-card-store-logo-height);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fragno-offer-card__icon-wrap--sm[hidden] {
  display: none;
}

.fragno-offer-card__icon-wrap--sm .fragno-offer-card__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.fragno-offer-card__icon-wrap--sm img,
.fragno-offer-card__icon-wrap--sm .fragno-offer-card__icon-link img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.fragno-offer-card__icon-wrap--sm img[src$=".svg"],
.fragno-offer-card__icon-wrap--sm img[src*=".svg?"],
.fragno-offer-card__icon-wrap--sm img[src^="data:image/svg+xml"],
.fragno-offer-card__icon-wrap--sm .fragno-offer-card__icon-link img[src$=".svg"],
.fragno-offer-card__icon-wrap--sm .fragno-offer-card__icon-link img[src*=".svg?"],
.fragno-offer-card__icon-wrap--sm .fragno-offer-card__icon-link img[src^="data:image/svg+xml"] {
  filter: brightness(0);
}

.fragno-offer-card__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  flex-shrink: 0;
  min-width: 0;
}

.fragno-offer-card__store-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-offer-card__store-row[hidden] {
  display: none;
}

/* Eyebrow: md/lg Text sm/550; sm Text md/550 */
.fragno-offer-card__store-text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus, 550);
  font-size: var(--offer-card-text-eyebrow-font-size);
  line-height: var(--offer-card-text-eyebrow-line-height);
  letter-spacing: var(--offer-card-text-eyebrow-letter-spacing);
  color: var(--colors-gray-900);
  /* Reserve one line so eyebrow position is stable when empty (layout slot) */
  min-height: var(--offer-card-text-eyebrow-line-height);
  box-sizing: border-box;
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__store-text {
  font-size: var(--offer-card-text-eyebrow-sm-font-size);
  line-height: var(--offer-card-text-eyebrow-sm-line-height);
  letter-spacing: var(--offer-card-text-eyebrow-sm-letter-spacing);
  min-height: var(--offer-card-text-eyebrow-sm-line-height);
}

.fragno-offer-card__store-text[hidden] {
  display: none;
}

.fragno-offer-card__text-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-offer-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
}

/* Title: sm/md Text lg/Medium; lg Text xl/Medium */
.fragno-offer-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--offer-card-text-title-font-size);
  line-height: var(--offer-card-text-title-line-height);
  letter-spacing: var(--offer-card-text-title-letter-spacing);
  color: var(--colors-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 1;
  box-sizing: border-box;
}

/* Large variant: 2 lines with ellipsis */
.fragno-offer-card[data-size="lg"] .fragno-offer-card__title {
  font-size: var(--offer-card-text-title-lg-font-size);
  line-height: var(--offer-card-text-title-lg-line-height);
  letter-spacing: var(--offer-card-text-title-lg-letter-spacing);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.fragno-offer-card__title[hidden] {
  display: none;
}

/* Subtitle: sm/md Text sm/Regular; lg Text md/Regular */
.fragno-offer-card__subtitle {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--offer-card-text-subtitle-font-size);
  line-height: var(--offer-card-text-subtitle-line-height);
  letter-spacing: var(--offer-card-text-subtitle-letter-spacing);
  color: var(--colors-gray-700);
  /* Reserve one line so subtitle row height is stable when empty (layout slot) */
  min-height: var(--offer-card-text-subtitle-line-height);
  box-sizing: border-box;
}

.fragno-offer-card[data-size="lg"] .fragno-offer-card__subtitle {
  font-size: var(--offer-card-text-subtitle-lg-font-size);
  line-height: var(--offer-card-text-subtitle-lg-line-height);
  letter-spacing: var(--offer-card-text-subtitle-lg-letter-spacing);
  min-height: var(--offer-card-text-subtitle-lg-line-height);
}

.fragno-offer-card__subtitle[hidden] {
  display: none;
}

.fragno-offer-card__action-wrap {
  flex-shrink: 0;
}

.fragno-offer-card__action-wrap[hidden] {
  display: none;
}

.fragno-offer-card__action-link,
.fragno-offer-card__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--offer-card-action-size);
  height: var(--offer-card-action-size);
  min-width: var(--offer-card-action-size);
  border: 1px solid var(--colors-gray-700);
  border-radius: var(--radius-full);
  color: var(--colors-gray-700);
  background: transparent;
  transition: border-color var(--transition-fast, 0.15s ease), background-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

.fragno-offer-card__action-link {
  text-decoration: none;
}

.fragno-offer-card__action-link:hover,
.fragno-offer-card__link:hover .fragno-offer-card__action-icon {
  background: var(--colors-gray-100);
  border-color: var(--colors-gray-800);
  color: var(--colors-gray-900);
}

.fragno-offer-card__action-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

/* ============================================
   COMMUNITY CARD (Nova | Web)
   ============================================ */

.fragno-community-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: var(--spacing-2xl) var(--spacing-3xl);
  border-width: var(--community-card-border-width);
  border-style: solid;
  border-radius: var(--community-card-radius);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--card-shadow-default);
  width: var(--community-card-width);
  min-width: var(--community-card-min-width);
  min-height: var(--community-card-min-height);
}

.fragno-community-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.fragno-community-card[data-style="white"] {
  border-color: #fff;
}

.fragno-community-card[data-style="outline"] {
  border-color: rgba(0, 0, 0, 0.2);
}

/* When card-href is set, the card is wrapped in this anchor */
.fragno-community-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fragno-community-card__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--spacing-xl);
  min-height: 0;
  min-width: 0;
  border-radius: var(--community-card-radius);
}

.fragno-community-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.fragno-community-card__top[hidden] {
  display: none;
}

.fragno-community-card__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.fragno-community-card__badge[hidden] {
  display: none;
}

.fragno-community-card__icon-wrap {
  width: var(--community-card-icon-wrap-size);
  height: var(--community-card-icon-wrap-size);
  min-width: var(--community-card-icon-wrap-size);
  min-height: var(--community-card-icon-wrap-size);
  border-radius: var(--radius-xl);
  background: var(--colors-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--colors-green-800);
}

.fragno-community-card__icon-wrap svg {
  width: var(--community-card-icon-size);
  height: var(--community-card-icon-size);
  flex-shrink: 0;
}

.fragno-community-card__community-label {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus, 550);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
  color: var(--colors-gray-900);
  white-space: nowrap;
}

.fragno-community-card__community-label[hidden] {
  display: none;
}

.fragno-community-card__bottom {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex: 1 0 0;
  min-height: 0;
  min-width: 0;
}

.fragno-community-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  min-width: 0;
  flex: 1 1 auto;
}

.fragno-community-card__action-wrap {
  flex-shrink: 0;
}

.fragno-community-card__action-wrap[hidden] {
  display: none;
}

.fragno-community-card__action-link,
.fragno-community-card__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hero-card-action-size-sm);
  height: var(--hero-card-action-size-sm);
  min-width: var(--hero-card-action-size-sm);
  border: 1px solid var(--colors-gray-700);
  border-radius: var(--radius-full);
  color: var(--colors-gray-700);
  background: transparent;
  transition: border-color var(--transition-fast, 0.15s ease), background-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

.fragno-community-card__action-link {
  text-decoration: none;
}

.fragno-community-card__action-link:hover,
.fragno-community-card__link:hover .fragno-community-card__action-icon {
  background: var(--colors-gray-100);
  border-color: var(--colors-gray-800);
  color: var(--colors-gray-900);
}

.fragno-community-card__action-link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

.fragno-community-card__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  letter-spacing: var(--letter-spacing-text-xl, 0);
  color: var(--colors-gray-900);
}

.fragno-community-card__title[hidden] {
  display: none;
}

.fragno-community-card__subtitle {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-700);
}

.fragno-community-card__subtitle[hidden] {
  display: none;
}

/* ============================================
   STATS WIDGET (Nova | Web)
   ============================================ */

.fragno-stats-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  box-sizing: border-box;
  border-width: 1.6px;
  border-style: solid;
  border-radius: var(--radius-5xl);
  text-align: center;
  font-family: var(--font-family-body);
}

.fragno-stats-widget--white {
  background: var(--colors-secondary-default);
  border-color: var(--colors-secondary-default);
}

.fragno-stats-widget--outlined {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.2);
}

/* Size: small */
.fragno-stats-widget--sm {
  padding: var(--spacing-xl);
  width: 7.125rem; /* 114px */
  min-width: 7.125rem;
}

.fragno-stats-widget--sm .fragno-stats-widget__icon-wrap {
  width: 2.125rem;
  height: 2.125rem;
  padding: var(--spacing-sm);
  border-radius: var(--radius-lg);
}

.fragno-stats-widget--sm .fragno-stats-widget__icon,
.fragno-stats-widget--sm .fragno-stats-widget__icon img {
  width: 1.125rem;
  height: 1.125rem;
}

.fragno-stats-widget--sm .fragno-stats-widget__value {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
}

.fragno-stats-widget--sm .fragno-stats-widget__label {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
}

/* Size: medium */
.fragno-stats-widget--md {
  padding: var(--spacing-2xl) var(--spacing-xl);
  width: 9.375rem; /* 150px */
  min-width: 9.375rem;
}

.fragno-stats-widget--md .fragno-stats-widget__icon-wrap {
  width: 2.125rem;
  height: 2.125rem;
  padding: var(--spacing-sm);
  border-radius: var(--radius-lg);
}

.fragno-stats-widget--md .fragno-stats-widget__icon,
.fragno-stats-widget--md .fragno-stats-widget__icon img {
  width: 1.125rem;
  height: 1.125rem;
}

.fragno-stats-widget--md .fragno-stats-widget__value {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
}

.fragno-stats-widget--md .fragno-stats-widget__label {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
}

/* Size: large (default) */
.fragno-stats-widget--lg {
  padding: var(--spacing-3xl) var(--spacing-xl);
  width: 11rem; /* 176px */
  min-width: 11rem;
}

.fragno-stats-widget--lg .fragno-stats-widget__icon-wrap {
  width: 3rem;
  height: 3rem;
  padding: var(--spacing-lg);
  border-radius: var(--radius-2xl);
}

.fragno-stats-widget--lg .fragno-stats-widget__icon,
.fragno-stats-widget--lg .fragno-stats-widget__icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-stats-widget--lg .fragno-stats-widget__value {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg);
}

.fragno-stats-widget--lg .fragno-stats-widget__label {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg);
}

.fragno-stats-widget__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--colors-gray-100);
  color: var(--colors-gray-700);
}

/* Icon colors (Nova | Web — Figma icon sizes/colors) */
.fragno-stats-widget__icon-wrap--blue {
  background: var(--colors-blue-100);
  color: var(--colors-blue-600);
}

.fragno-stats-widget__icon-wrap--green {
  background: var(--colors-green-50);
  color: var(--colors-green-600);
}

.fragno-stats-widget__icon-wrap--red {
  background: var(--colors-red-50);
  color: var(--colors-red-600);
}

.fragno-stats-widget__icon-wrap--grey {
  background: var(--colors-gray-100);
  color: var(--colors-gray-700);
}

.fragno-stats-widget__icon-wrap--black {
  background: var(--colors-gray-900);
  color: var(--colors-primary-text);
}

.fragno-stats-widget__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragno-stats-widget__icon--mask {
  flex-shrink: 0;
  background-color: currentColor;
}

.fragno-stats-widget__icon img {
  object-fit: contain;
  display: block;
}

.fragno-stats-widget__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.fragno-stats-widget__value {
  margin: 0;
  font-weight: var(--font-weight-medium);
  color: var(--colors-gray-900);
}

.fragno-stats-widget__label {
  margin: 0;
  font-weight: var(--font-weight-regular);
  color: var(--colors-gray-700);
}

/* ============================================
   Avatar (Nova | Design System - Foundation)
   ============================================ */
.fragno-avatar {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
}

.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;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--avatar-bg-default);
  border: 1px solid var(--avatar-border-color);
  box-shadow: var(--avatar-shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragno-avatar__main--dark {
  background-color: rgb(0, 0, 0);
  background-image: var(--avatar-bg-dark-gradient);
  border: none;
  /* Use box-shadow instead of border so it isn’t clipped by overflow: hidden */
  box-shadow: 0 0 0 var(--avatar-border-width-dark) var(--avatar-border-color-dark);
}

.fragno-avatar__main--dark .fragno-avatar__initials {
  color: var(--avatar-text-color-dark);
}

.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-medium);
  color: var(--avatar-text-color);
  text-align: center;
  line-height: 1;
  user-select: none;
}

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

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

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

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

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

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

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

.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: -2px;
  right: -2px;
  width: 28%;
  height: 28%;
  min-width: 10px;
  min-height: 10px;
  max-width: 20px;
  max-height: 20px;
  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--xs .fragno-avatar__status--visible {
  min-width: 8px;
  min-height: 8px;
  max-width: 12px;
  max-height: 12px;
}

.fragno-avatar--sm .fragno-avatar__status--visible {
  min-width: 8px;
  min-height: 8px;
  max-width: 14px;
  max-height: 14px;
}

.fragno-avatar--2xl .fragno-avatar__status--visible {
  max-width: 22px;
  max-height: 22px;
}

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

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

.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(--colors-green-600);
}

.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);
}

/* ============================================
    FOOTER (Nova | Web – dark theme)
    ============================================ */
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;
}

/* Footer: desktop layout – wrap down below 900px */
@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;
  }
}

/* fragno-tooltip */
:root {
  --fragno-tooltip-line-height: 1.125rem;
  /* Nova help tooltip: text + supporting stack is w-[296px] in Figma (57796:5877) */
  --fragno-tooltip-supporting-width: 296px;
  /* Above page chrome / cards; still below typical modal backdrops if those exist */
  --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-tooltip {
  position: relative;
  z-index: 0;
  display: inline-flex;
  vertical-align: middle;
  font-family: var(--font-family-body);
}

/* Raise whole host when open so the panel isn’t covered by later siblings (e.g. demo grid cards) */
.fragno-tooltip:has(.fragno-tooltip__popover[data-open="true"]) {
  z-index: var(--fragno-tooltip-z-index);
}

.fragno-tooltip__trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0.25rem;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--fragno-tooltip-icon-default);
  cursor: pointer;
  transition: color 0.15s ease;
}

.fragno-tooltip__trigger:hover,
.fragno-tooltip__trigger:focus-visible {
  color: var(--fragno-tooltip-icon-hover);
  outline: none;
}

.fragno-tooltip__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--colors-gray-900), 0 0 0 4px var(--colors-secondary-default);
}

.fragno-tooltip__icon {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.fragno-tooltip__popover {
  position: absolute;
  z-index: var(--fragno-tooltip-z-index);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    visibility 0.12s ease;
}

.fragno-tooltip__popover[data-open="true"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

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

.fragno-tooltip__surface {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Avoid subpixel flex gap / baseline strut between arrow and body */
  line-height: 0;
  /* No box-shadow here — it follows the flex box rectangle and looks like a white/lit halo by the arrow */
}

.fragno-tooltip__body {
  background-color: var(--colors-gray-900);
  color: var(--colors-primary-text);
  box-sizing: border-box;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  max-width: 16rem;
  line-height: normal;
  box-shadow: var(--fragno-tooltip-shadow);
}

/* Border-arrow is the only painted pixels on this node — drop-shadow follows the triangle, not a rectangle */
.fragno-tooltip--arrow .fragno-tooltip__arrow {
  filter:
    drop-shadow(0 2px 2px rgba(10, 13, 18, 0.04))
    drop-shadow(0 4px 6px rgba(10, 13, 18, 0.06))
    drop-shadow(0 12px 16px rgba(10, 13, 18, 0.08));
}

.fragno-tooltip__label {
  margin: 0;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--fragno-tooltip-line-height);
}

.fragno-tooltip--label-only .fragno-tooltip__label {
  text-align: center;
  white-space: nowrap;
}

.fragno-tooltip__supporting {
  margin: 0;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--fragno-tooltip-line-height);
  color: var(--colors-gray-300);
  white-space: pre-wrap;
}

.fragno-tooltip--has-supporting .fragno-tooltip__body {
  padding: var(--spacing-lg);
  /* Figma: w-[296px] on “Text and supporting text” stack (not content-hugging max-width) */
  width: var(--fragno-tooltip-supporting-width);
  max-width: var(--fragno-tooltip-supporting-width);
  border-radius: var(--radius-xl);
  text-align: start;
}

.fragno-tooltip--has-supporting .fragno-tooltip__label {
  text-align: start;
  white-space: normal;
}

.fragno-tooltip--has-supporting .fragno-tooltip__supporting {
  margin-top: var(--spacing-xxs);
}

.fragno-tooltip__arrow {
  flex-shrink: 0;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  line-height: 0;
  vertical-align: bottom;
}

.fragno-tooltip__arrow--down {
  border-width: 6px 8px 0 8px;
  border-bottom: none;
  border-top-color: var(--colors-gray-900);
  margin-top: -1px;
}

.fragno-tooltip__arrow--up {
  border-width: 0 8px 6px 8px;
  border-top: none;
  border-bottom-color: var(--colors-gray-900);
  margin-bottom: -1px;
}

.fragno-tooltip__arrow--right {
  border-width: 8px 0 8px 6px;
  border-right: none;
  border-left-color: var(--colors-gray-900);
  margin-left: -1px;
}

.fragno-tooltip__arrow--left {
  border-width: 8px 6px 8px 0;
  border-left: none;
  border-right-color: var(--colors-gray-900);
  margin-right: -1px;
}

.fragno-tooltip--no-arrow .fragno-tooltip__arrow {
  display: none;
}

/* flex order: template is arrow then body */
.fragno-tooltip--top.fragno-tooltip--arrow .fragno-tooltip__body {
  order: 1;
}
.fragno-tooltip--top.fragno-tooltip--arrow .fragno-tooltip__arrow {
  order: 2;
}

.fragno-tooltip--top .fragno-tooltip__surface {
  flex-direction: column;
  align-items: center;
}

.fragno-tooltip--bottom.fragno-tooltip--arrow .fragno-tooltip__arrow {
  order: 1;
}
.fragno-tooltip--bottom.fragno-tooltip--arrow .fragno-tooltip__body {
  order: 2;
}

.fragno-tooltip--bottom .fragno-tooltip__surface {
  flex-direction: column;
  align-items: center;
}

.fragno-tooltip--left.fragno-tooltip--arrow .fragno-tooltip__body {
  order: 1;
}
.fragno-tooltip--left.fragno-tooltip--arrow .fragno-tooltip__arrow {
  order: 2;
}

.fragno-tooltip--left .fragno-tooltip__surface {
  flex-direction: row;
  align-items: center;
}

.fragno-tooltip--right.fragno-tooltip--arrow .fragno-tooltip__arrow {
  order: 1;
}
.fragno-tooltip--right.fragno-tooltip--arrow .fragno-tooltip__body {
  order: 2;
}

.fragno-tooltip--right .fragno-tooltip__surface {
  flex-direction: row;
  align-items: center;
}

.fragno-tooltip--top .fragno-tooltip__popover {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--spacing-xs);
}

.fragno-tooltip--bottom .fragno-tooltip__popover {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--spacing-xs);
}

.fragno-tooltip--left .fragno-tooltip__popover {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--spacing-xs);
}

.fragno-tooltip--right .fragno-tooltip__popover {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--spacing-xs);
}

/* —— Ribbon banner (Nova | Web – app prototype) —— */
/* Full-bleed: span viewport width even when nested in a narrow container.
   Parent must not use overflow: hidden (clips the bleed). Opt out: contained attribute. */
fragno-ribbon-banner {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

fragno-ribbon-banner[contained] {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.fragno-ribbon-banner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family-body);
  padding-left: var(--ribbon-banner-padding-x);
  padding-right: var(--ribbon-banner-padding-x);
}

.fragno-ribbon-banner__paint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fragno-ribbon-banner__grad-base {
  position: absolute;
  inset: 0;
  background: var(--ribbon-banner-green-gradient-base);
}

.fragno-ribbon-banner__grad-highlight {
  position: absolute;
  inset: 0;
  background: var(--ribbon-banner-green-gradient-highlight);
  mix-blend-mode: plus-lighter;
  opacity: 0.2;
}

.fragno-ribbon-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--ribbon-banner-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.fragno-ribbon-banner__row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.fragno-ribbon-banner__body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.fragno-ribbon-banner__link {
  cursor: pointer;
}

.fragno-ribbon-banner__link:hover {
  opacity: 0.92;
}

.fragno-ribbon-banner__link:focus {
  outline: none;
}

.fragno-ribbon-banner__link:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.fragno-ribbon-banner__icon-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--ribbon-banner-gap-icon-text);
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

/* Same banner height with or without leading icon (slot matches icon + padding) */
.fragno-ribbon-banner--size-lg .fragno-ribbon-banner__icon-text,
.fragno-ribbon-banner--size-md .fragno-ribbon-banner__icon-text {
  min-height: var(--ribbon-banner-content-row-min-height-lg-md);
}

.fragno-ribbon-banner--size-sm .fragno-ribbon-banner__icon-text {
  min-height: var(--ribbon-banner-content-row-min-height-sm);
}

/* Text + chevron stay adjacent (Figma: 12px between label and action) */
.fragno-ribbon-banner__message {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ribbon-banner-gap-section);
  min-width: 0;
  flex: 0 1 auto;
}

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

/* [hidden] must win over display:inline-flex (otherwise chevron/icon stay visible) */
.fragno-ribbon-banner__icon-wrap[hidden] {
  display: none !important;
}

.fragno-ribbon-banner__icon-img {
  display: block;
  object-fit: contain;
}

.fragno-ribbon-banner__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: var(--ribbon-banner-text-column-max-width);
  font-weight: var(--font-weight-medium);
}

.fragno-ribbon-banner__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.fragno-ribbon-banner__action[hidden] {
  display: none !important;
}

.fragno-ribbon-banner__chevron {
  display: block;
  flex-shrink: 0;
}

/* Size: lg — text md, 8px vertical padding */
.fragno-ribbon-banner--size-lg {
  padding-top: var(--ribbon-banner-padding-y-lg);
  padding-bottom: var(--ribbon-banner-padding-y-lg);
}

.fragno-ribbon-banner--size-lg .fragno-ribbon-banner__text {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
}

.fragno-ribbon-banner--size-lg .fragno-ribbon-banner__icon-wrap {
  padding: var(--ribbon-banner-icon-padding-lg-md);
  border-radius: var(--ribbon-banner-icon-wrap-radius);
}

.fragno-ribbon-banner--size-lg .fragno-ribbon-banner__icon-img {
  width: var(--ribbon-banner-icon-size-lg-md);
  height: var(--ribbon-banner-icon-size-lg-md);
}

.fragno-ribbon-banner--size-lg .fragno-ribbon-banner__action {
  padding: var(--ribbon-banner-action-padding-lg-md);
  border-radius: var(--ribbon-banner-icon-wrap-radius);
}

.fragno-ribbon-banner--size-lg .fragno-ribbon-banner__chevron {
  width: var(--ribbon-banner-icon-size-lg-md);
  height: var(--ribbon-banner-icon-size-lg-md);
}

/* Size: md — text sm, 4px vertical padding */
.fragno-ribbon-banner--size-md {
  padding-top: var(--ribbon-banner-padding-y-md-sm);
  padding-bottom: var(--ribbon-banner-padding-y-md-sm);
}

.fragno-ribbon-banner--size-md .fragno-ribbon-banner__text {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
}

.fragno-ribbon-banner--size-md .fragno-ribbon-banner__icon-wrap {
  padding: var(--ribbon-banner-icon-padding-lg-md);
  border-radius: var(--ribbon-banner-icon-wrap-radius);
}

.fragno-ribbon-banner--size-md .fragno-ribbon-banner__icon-img {
  width: var(--ribbon-banner-icon-size-lg-md);
  height: var(--ribbon-banner-icon-size-lg-md);
}

.fragno-ribbon-banner--size-md .fragno-ribbon-banner__action {
  padding: var(--ribbon-banner-action-padding-lg-md);
  border-radius: var(--ribbon-banner-icon-wrap-radius);
}

.fragno-ribbon-banner--size-md .fragno-ribbon-banner__chevron {
  width: var(--ribbon-banner-icon-size-lg-md);
  height: var(--ribbon-banner-icon-size-lg-md);
}

/* Size: sm — text xs, 4px vertical padding */
.fragno-ribbon-banner--size-sm {
  padding-top: var(--ribbon-banner-padding-y-md-sm);
  padding-bottom: var(--ribbon-banner-padding-y-md-sm);
}

.fragno-ribbon-banner--size-sm .fragno-ribbon-banner__text {
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  letter-spacing: var(--letter-spacing-text-xs);
}

.fragno-ribbon-banner--size-sm .fragno-ribbon-banner__icon-wrap {
  padding: var(--ribbon-banner-icon-padding-sm);
  border-radius: var(--ribbon-banner-icon-wrap-radius);
}

.fragno-ribbon-banner--size-sm .fragno-ribbon-banner__icon-img {
  width: var(--ribbon-banner-icon-size-sm);
  height: var(--ribbon-banner-icon-size-sm);
}

.fragno-ribbon-banner--size-sm .fragno-ribbon-banner__action {
  padding: var(--ribbon-banner-action-padding-sm);
  border-radius: var(--ribbon-banner-icon-wrap-radius);
}

.fragno-ribbon-banner--size-sm .fragno-ribbon-banner__chevron {
  width: var(--ribbon-banner-icon-size-sm);
  height: var(--ribbon-banner-icon-size-sm);
}

/* Color: green gradient */
.fragno-ribbon-banner--color-green-gradient {
  color: var(--color-bg-primary);
}

/* Color: black */
.fragno-ribbon-banner--color-black {
  background-color: var(--colors-gray-900);
  color: var(--color-bg-primary);
}

/* Color: white */
.fragno-ribbon-banner--color-white {
  background-color: var(--color-bg-primary);
  color: var(--colors-gray-900);
  box-shadow: var(--ribbon-banner-white-elevation);
}

/* Color: grey */
.fragno-ribbon-banner--color-grey {
  background-color: var(--colors-gray-100);
  color: var(--colors-gray-900);
}

/* Figma: small + light surfaces use gray-700 for text */
.fragno-ribbon-banner--size-sm.fragno-ribbon-banner--color-white,
.fragno-ribbon-banner--size-sm.fragno-ribbon-banner--color-grey {
  color: var(--colors-gray-700);
}

@media (prefers-reduced-motion: reduce) {
  .fragno-ribbon-banner__link:hover {
    opacity: 1;
  }
}

/* ============================================
   GLOBAL NAV (Nova | Web — Figma Global Nav)
   Tokens: spacing/radius/typography from tokens-light.css;
   horizontal padding 80px matches Figma spacing-8xl (5rem @ 16px root).
   ============================================ */

.fragno-global-nav {
  --global-nav-padding-x: 5rem;
  --global-nav-padding-y-bar: var(--spacing-lg);
  --global-nav-bar-min-height: 2.875rem;
  --global-nav-panel-padding-top: var(--spacing-xl);
  --global-nav-panel-padding-bottom: var(--spacing-6xl);
  --global-nav-panel-gap: var(--spacing-4xl);
  --global-nav-shadow: 0 4px 18px 0 var(--colors-alpha-black-06);
  --global-nav-link-gap: var(--spacing-lg);
  --global-nav-actions-gap: var(--spacing-xl);
  width: 100%;
  box-sizing: border-box;
}

.fragno-global-nav *,
.fragno-global-nav *::before,
.fragno-global-nav *::after {
  box-sizing: border-box;
}

.fragno-global-nav__shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.fragno-global-nav--bg-white .fragno-global-nav__shell {
  background-color: var(--colors-secondary-default);
}

.fragno-global-nav--bg-grey .fragno-global-nav__shell,
.fragno-global-nav--bg-gray .fragno-global-nav__shell {
  background-color: var(--colors-gray-50);
}

.fragno-global-nav__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--spacing-xl);
  min-height: var(--global-nav-bar-min-height);
  padding: var(--global-nav-padding-y-bar) var(--global-nav-padding-x);
  width: 100%;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.fragno-global-nav__left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  min-width: 0;
}

.fragno-global-nav__nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  min-width: 0;
}

.fragno-global-nav__nav[hidden] {
  display: none;
}

.fragno-global-nav--search-open .fragno-global-nav__nav {
  visibility: hidden;
  pointer-events: none;
}

.fragno-global-nav__actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--global-nav-actions-gap);
  min-width: 0;
}

/* Signed-in: avatar as menu trigger (teams listen for fragno-global-nav-account-click) */
.fragno-global-nav__avatar-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-full);
  line-height: 0;
  flex-shrink: 0;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: inherit;
}

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

.fragno-global-nav__avatar-trigger:focus:not(:focus-visible) {
  outline: none;
}

.fragno-global-nav__link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--global-nav-link-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fragno-global-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.625rem var(--spacing-lg);
  border-radius: var(--radius-full);
  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: var(--letter-spacing-text-md);
  color: var(--colors-gray-900);
  text-decoration: none;
  white-space: nowrap;
}

/* Hover: dark green text + light green pill (Nova | Web — Figma 66718:26920) */
.fragno-global-nav__link:hover {
  color: var(--colors-green-900);
  background-color: var(--colors-green-900-alpha-10);
  font-weight: var(--font-weight-medium-plus);
}

.fragno-global-nav__link[aria-disabled="true"]:hover {
  color: var(--colors-gray-900);
  background-color: transparent;
  font-weight: var(--font-weight-medium);
}

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

.fragno-global-nav__panel {
  display: block;
  width: 100%;
  padding: var(--global-nav-panel-padding-top) var(--global-nav-padding-x)
    var(--global-nav-panel-padding-bottom);
  border-bottom-left-radius: var(--radius-5xl);
  border-bottom-right-radius: var(--radius-5xl);
  box-shadow: var(--global-nav-shadow);
}

.fragno-global-nav--bg-white .fragno-global-nav__panel {
  background-color: var(--colors-secondary-default);
}

.fragno-global-nav--bg-grey .fragno-global-nav__panel,
.fragno-global-nav--bg-gray .fragno-global-nav__panel {
  background-color: var(--colors-gray-50);
}

.fragno-global-nav__panel[hidden] {
  display: none;
}

.fragno-global-nav__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--global-nav-panel-gap);
  max-width: 100%;
}

.fragno-global-nav__search-row {
  width: 100%;
}

.fragno-global-nav__search-label {
  display: block;
  width: 100%;
}

.fragno-global-nav__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fragno-global-nav__search-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-sm);
  letter-spacing: var(--letter-spacing-display-sm);
  color: var(--colors-gray-900);
  outline: none;
}

.fragno-global-nav__search-input::placeholder {
  color: var(--colors-gray-500);
}

/* No ring by default — global-nav.js sets .fragno-global-nav__search-input--keyboard-focus only after keydown (Tab etc.), not after pointerdown / programmatic focus. */
.fragno-global-nav__search-input:focus {
  outline: none;
  box-shadow: none;
}

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

.fragno-global-nav__suggested[hidden] {
  display: none;
}

.fragno-global-nav__suggested-heading {
  margin: 0 0 var(--spacing-xl);
  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: var(--letter-spacing-text-md);
  color: var(--colors-gray-800);
}

.fragno-global-nav__suggested-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: center;
}

.fragno-global-nav__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--colors-gray-400);
  border-radius: var(--radius-full);
  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);
  letter-spacing: var(--letter-spacing-text-sm);
  color: var(--colors-gray-700);
  text-decoration: none;
  background: transparent;
}

.fragno-global-nav__chip:hover {
  border-color: var(--colors-gray-600);
  color: var(--colors-gray-900);
}

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

.fragno-global-nav__results {
  min-height: var(--spacing-7xl);
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-global-nav__bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 47.99rem) {
  .fragno-global-nav {
    --global-nav-padding-x: var(--spacing-2xl);
    --global-nav-actions-gap: var(--spacing-md);
  }

  /* Single row: logo | actions (Nova | Web mobile — Figma 66142:25553) */
  .fragno-global-nav--mobile .fragno-global-nav__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: var(--spacing-lg);
    row-gap: 0;
  }

  .fragno-global-nav--mobile .fragno-global-nav__left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .fragno-global-nav--mobile .fragno-global-nav__nav {
    display: none !important;
  }

  .fragno-global-nav--mobile .fragno-global-nav__actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    flex-wrap: nowrap;
  }

  .fragno-global-nav__mobile-drawer {
    display: none;
    width: 100%;
    border-bottom: 1px solid var(--colors-gray-200);
    background-color: inherit;
  }

  .fragno-global-nav--bg-white .fragno-global-nav__mobile-drawer {
    background-color: var(--colors-secondary-default);
  }

  .fragno-global-nav--bg-grey .fragno-global-nav__mobile-drawer,
  .fragno-global-nav--bg-gray .fragno-global-nav__mobile-drawer {
    background-color: var(--colors-gray-50);
  }

  .fragno-global-nav--mobile .fragno-global-nav__mobile-drawer:not([hidden]) {
    display: block;
  }

  .fragno-global-nav__mobile-nav {
    padding: var(--spacing-lg) var(--global-nav-padding-x) var(--spacing-md);
  }

  .fragno-global-nav__mobile-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .fragno-global-nav__mobile-link {
    display: block;
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-lg);
    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: var(--letter-spacing-text-md);
    color: var(--colors-gray-900);
    text-decoration: none;
  }

  .fragno-global-nav__mobile-link:hover {
    color: var(--colors-green-900);
    background-color: var(--colors-green-900-alpha-10);
  }

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

  .fragno-global-nav__mobile-drawer-footer {
    padding: 0 var(--global-nav-padding-x) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .fragno-global-nav__menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--colors-gray-900);
    cursor: pointer;
    flex-shrink: 0;
  }

  .fragno-global-nav__menu-button:hover {
    background-color: var(--colors-gray-100);
  }

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

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

  .fragno-global-nav--search-open .fragno-global-nav__nav {
    display: none;
  }
}




/*# sourceMappingURL=942-df54fdf3.css.map*/